/* MODERNIZED GLOBAL STYLES - Matching Property Details Theme */
body {
    background: #121212;
    color: #FFFFFF;
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
    font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Target specific input types - DON'T apply to all inputs globally */
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="button"],
input[type="submit"],
button {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  border-radius: 0;
}


html {
    height: 100%;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Search Styles */
.TableSearch {
    background: var(--bg-primary, #121212);
    border: 1px solid #FF6A00;
    border-radius: var(--border-radius-md, 12px);
    overflow: hidden;
}

/* Navigator */
.Navigator {
    padding-left: 16px;
    padding-right: 16px;
    background: #485769;
    height: 40px;
    width: 100%;
	border-bottom: 1px solid #FF6A00;
}

.NavigatorInfo {
    margin-top: 1px;
    padding-left: 16px;
    padding-right: 16px;
    line-height: 40px;
    background: #37475A;
    color: #FFFFFF;
    font-size: 15px;
}

.NavigatorInfo a {
    color: var(--text-primary, #FFFFFF);
    text-decoration: none;
}

.UNavigator {
    margin-top: 1px;
    padding-left: 16px;
    padding-right: 16px;
    line-height: 30px;
    color: #FFFFFF;
    font-size: 12px;
    text-align: right;
}

/* Title Styles */
.Title {
    line-height: 40px;
    color: #FFFFFF;
    margin-top: 16px;
    margin-bottom: 16px;
}

.LTRTitle {
    font-weight: 700;
    font-size: 18px;
    font-family: inherit;
    padding-left: 60px;
    padding-right: 16px;
}

.RTLTitle {
    font-weight: 700;
    font-size: 20px;
    font-family: 'Cairo', Tahoma, Arial, sans-serif;
    padding-right: 60px;
    padding-left: 16px;
}

.UnderTitle {
    padding: 16px;
    background: #37475A;
    color: var(--text-primary, #FFFFFF);
    font-family: inherit;
    font-size: 15px;
    border-radius: 8px;
}

.TitleB {
    background: var(--bg-primary, #121212);
    color: var(--text-primary, #FFFFFF);
    border-bottom: 3px solid #FF6A00;
}

.LTRTitleB {
    font-weight: 700;
    font-size: 16px;
    font-family: inherit;
    padding-left: 12px;
}

.RTLTitleB {
    font-weight: 700;
    font-size: 16px;
    font-family: 'Cairo', Tahoma, Arial, sans-serif;
    padding-right: 12px;
}

.NavigatorHeight {
    height: 40px;
}

/* Navigator Links */
a.NavigatorLink:link,
a.NavigatorLink:visited {
    color: #FFFFFF;
    text-decoration: none;
}

a.NavigatorLink:active,
a.NavigatorLink:hover {
    color: #FFE4B8;
    text-decoration: none;
}

.LTRNavigatorLink {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary, #FFFFFF);
    text-decoration: none;
    font-family: inherit;
    line-height: 40px;
}

.RTLNavigatorLink {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary, #FFFFFF);
    text-decoration: none;
    font-family: 'Cairo', Arial, Roboto, sans-serif;
    line-height: 40px;
}

/* Input Styles */
input, select, textarea {
    outline: none;
}

.DivAction path {
    background: var(--bg-primary, #121212);
    text-align: right;
    line-height: 64px;
    padding: 16px;
}



.DivInput {
  width: 50%;
  color: #FFFFFF;
  padding: 12px;
  position: relative;
  margin-top: 20px;
}

.DivInput input, select, textarea {
  margin-top: 8px;
}

.LTRDivInput {
  font-weight: normal;
  font-size: 14px;
}

.RTLDivInput {
  font-weight: normal;
  font-size: 14px;
  font-family: Cairo, Arial, Roboto;
}

.LTRDivInput .LTRFloatingLabel {
  position: absolute;
  pointer-events: none;
  top: 36px;
  font-weight: bold;
  font-size: 14px;
  left: 12px;
}

.DivInput100 {
  width: 100%;
  font-weight: normal;
  font-size: 12px;
  color: #FFFFFF;
  padding-top: 12px;
  padding-bottom: 12px;
}

.DivSubmit {
  width: 100%;
  background: var(--body-bg);
  padding-bottom: 16px;
  text-align: center;
}


.DivSubmit {
    width: 100%;
    background: var(--bg-primary, #121212);
    padding-bottom: 16px;
    text-align: center;
}

.DivSubmit input {
    min-width: 150px;
}

/* Text Inputs */
.InputText,
.InputText50,
.InputText30 {
    font-weight: 600;
    font-size: 14px;
    font-family: inherit;
    padding-bottom: 4px;
    margin-top: 2px;
	background: #121212;
    color: #FFFFFF;
    border: 0;
    border-bottom: 1px solid #DDDDDD;
}

.InputText { width: 100%; }
.InputText50 { width: 50%; }
.InputText30 { width: 30%; }

.InputText:focus,
.InputText50:focus,
.InputText30:focus {
    border-bottom: 1px solid #FFFFFF;
}

/* Select Dropdowns */
.Select {
    font-weight: 600;
    font-size: 14px;
	background: #121212;
    color: #FFFFFF;
    border: 0;
    border-bottom: 1px #DDDDDD;
    padding: 8px 0;
    margin-top: 10px;
    appearance: none;
    cursor: pointer;
}

/* Buttons */
.InputButton {
    font-weight: 600;
    font-size: 14px;
    padding: 10px 20px;
    border: none;
    background: #FF6A00;
    color: #FFFFFF;
    cursor: pointer;
    border-radius: 60px;
}

.InputButton:hover {
    background: #37475A;
    transform: translateY(-2px);
}

/* Main Links */
a.Main:link,
a.Main:visited,
a.Main:active,
a.Main:hover {
    color: var(--text-primary, #FFFFFF);
    text-decoration: none;
}

.LTRMain {
    font-size: 13px;
    color: var(--text-primary, #FFFFFF);
    text-decoration: none;
    font-family: inherit;
}

.RTLMain {
    font-size: 16px;
    color: var(--text-primary, #FFFFFF);
    text-decoration: none;
    font-family: 'Cairo', Tahoma, Arial, sans-serif;
}

/* Action Buttons */
a.Action:link,
a.Action:visited {
    font-weight: normal;
    font-size: 12px;
    color: var(--text-primary, #FFFFFF);
    text-decoration: none;
    font-family: inherit;
    background: var(--bg-tertiary, #37475A);
    border: 1px solid transparent;
    border-radius: var(--border-radius-round, 60px);
    padding: 8px 16px;
    margin-left: 4px;
    transition: var(--transition-default, all 0.2s ease);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

a.Action:active,
a.Action:hover {
    color: var(--text-primary, #FFFFFF);
    background: var(--accent, #FF6A00);
    transform: translateY(-2px);
}

a.ActionB:link,
a.ActionB:visited {
    font-weight: normal;
    font-size: 12px;
    color: var(--text-primary, #FFFFFF);
    text-decoration: none;
    font-family: inherit;
    background: #28C88C;
    border: 1px solid transparent;
    border-radius: var(--border-radius-round, 60px);
    padding: 8px 16px;
    margin-left: 4px;
    transition: var(--transition-default, all 0.2s ease);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

a.ActionB:active,
a.ActionB:hover {
    background: #1e9e6e;
    transform: translateY(-2px);
}

/* Info Panels */
.DivInfo {
    background: #37475A;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary, #FFFFFF);
    font-family: inherit;
    padding: 16px;
    border-radius: var(--border-radius-md, 12px);
}

.Description {
    font-weight: normal;
    font-size: 10px;
    color: var(--text-muted, #AAAAAA);
    font-family: Verdana, Arial, 'Times New Roman', sans-serif;
}

.Message {
    font-weight: normal;
    font-size: 16px;
    color: var(--text-primary, #FFFFFF);
    text-decoration: none;
    font-family: inherit;
    line-height: 24px;
}

.Date {
    font-weight: normal;
    font-size: 10px;
    color: #FF0000;
    font-family: Verdana, Arial, 'Times New Roman', sans-serif;
}

.Time {
    font-weight: normal;
    font-size: 10px;
    color: #0000ff;
    font-family: Verdana, Arial, 'Times New Roman', sans-serif;
}

/* Pagination */
.Pages {
    min-width: 30px;
    line-height: 30px;
    border: 1px solid var(--border-color, #37475A);
    color: var(--text-primary, #FFFFFF);
    padding: 4px 8px;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    border-radius: var(--border-radius-round, 60px);
    transition: var(--transition-default, all 0.2s ease);
    text-decoration: none;
}

.Pages:hover {
    background: var(--accent, #FF6A00);
    border-color: var(--accent, #FF6A00);
    color: var(--text-primary, #FFFFFF);
    transform: translateY(-2px);
}

.PagesOver {
    min-width: 30px;
    line-height: 30px;
    background: var(--accent, #FF6A00);
    color: var(--text-primary, #FFFFFF);
    border: 1px solid var(--accent, #FF6A00);
    padding: 4px 8px;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--border-radius-round, 60px);
}

/* Icon Grid */
.DivIcon {
    padding: 16px;
    text-align: center;
}

.Icon {
    background: var(--bg-tertiary, #37475A);
    width: 235px;
    margin: 8px;
    padding-top: 32px;
    padding-bottom: 32px;
    display: inline-table;
    text-align: center;
    border-radius: var(--border-radius-lg, 16px);
    transition: var(--transition-default, all 0.2s ease);
    cursor: pointer;
}

.Icon:hover {
    background: var(--bg-hover, #485769);
    transform: translateY(-4px);
}

.ServerInfo {
    border-left: 4px solid transparent;
    padding-left: 8px;
    width: 150px;
    display: inline-table;
    font-weight: 400;
    font-size: 12px;
    color: var(--text-primary, #FFFFFF);
    font-family: inherit;
    height: 30px;
    line-height: 30px;
    transition: var(--transition-default, all 0.2s ease);
}

.ServerInfo:hover {
    border-left-color: var(--accent, #FF6A00);
    padding-left: 12px;
}

.ServerInfo a {
    color: var(--text-primary, #FFFFFF);
    text-decoration: none;
}

pre {
    font-family: Consolas, monospace;
    color: var(--text-primary, #FFFFFF);
}

/* Tables */
.DivTable {
    margin: 16px;
}

.DivXTable {
    margin-top: 16px;
    margin-bottom: 16px;
}

.Table {
    background: var(--bg-secondary, #232F3F);
    width: 100%;
    border-collapse: collapse;
}

.TableZ {
    border: 1px solid var(--accent, #FF6A00);
    width: 100%;
    border-collapse: collapse;
}

.DivSide {
    margin-left: 16px;
    margin-right: 16px;
    font-weight: 400;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-primary, #FFFFFF);
}

/* Table Header */
THEAD tr {
    background: var(--bg-primary, #121212);
}

THEAD tr th {
    padding: 12px 8px;
    border-bottom: 2px solid var(--accent, #FF6A00);
    height: 30px;
    font-family: inherit;
    color: var(--text-primary, #FFFFFF);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
}

THEAD tr th a {
    color: var(--text-primary, #FFFFFF);
    text-decoration: none;
}

TFOOT tr th {
    padding: 12px 8px;
    background: var(--bg-primary, #121212);
    height: 30px;
    font-family: inherit;
    color: var(--text-primary, #FFFFFF);
    font-size: 15px;
    font-weight: 400;
}

.Table TBODY tr td {
    padding: 12px 8px;
    border-bottom: 1px solid #FF6A00;
    height: 40px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
}

/* Table Cell Variants */
.Td,
.TdB,
.TdEr,
.TdInfo {
    background: var(--bg-primary, #121212);
    color: var(--text-primary, #FFFFFF);
}

.Td a,
.TdB a,
.TdInfo a {
    color: var(--text-primary, #FFFFFF);
    text-decoration: none;
}

.TdEr {
    color: #FF8080;
}

.TdEr a {
    color: #FF8080;
    text-decoration: none;
}

.TdInfo {
    color: #8080FF;
}

.TdInfo a {
    color: #8080FF;
    text-decoration: none;
}

/* Error/Info Messages */
.NoError {
    background: var(--bg-primary, #121212);
    font-weight: normal;
    font-size: 15px;
    color: #4CAF50;
    font-family: inherit;
    padding: 16px;
    border-left: 4px solid #4CAF50;
}

.NoError a {
    color: #4CAF50;
}

.Error {
    background: var(--bg-primary, #121212);
    font-weight: normal;
    font-size: 15px;
    color: #f44336;
    font-family: inherit;
    padding: 16px;
    border-left: 4px solid #f44336;
}

.Error a {
    color: #f44336;
}

.IError {
    font-weight: normal;
    font-size: 12px;
    color: #f44336;
    font-family: inherit;
}

.MainFill {
    fill: var(--accent, #FF6A00);
}

/* Charts */
.DivChart {
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 16px;
    text-align: center;
}

.Chart {
    width: 27%;
    min-width: 250px;
    height: 200px;
    background: var(--bg-tertiary, #37475A);
    text-align: left;
    display: inline-table;
    padding: 20px;
    margin: 8px;
    font-weight: 400;
    font-size: 12px;
    color: var(--text-primary, #FFFFFF);
    font-family: inherit;
    border-radius: var(--border-radius-md, 12px);
}

.ChartTitle {
    font-weight: 400;
    font-size: 1rem;
    color: var(--text-primary, #FFFFFF);
    text-decoration: none;
    font-family: inherit;
    margin-bottom: 16px;
}

.ChartA {
    width: 50%;
    line-height: 30px;
    display: inline-table;
    border-bottom: 1px solid #FF6A00;
}

.ChartB {
    width: 45%;
    line-height: 30px;
    display: inline-table;
    border-bottom: 1px solid #FF6A00;
}

/* View Panel */
.DivView {
    width: 100%;
    height: calc(100vh - 70px);
    overflow-y: auto;
    background: var(--bg-tertiary, #37475A);
}

.ViewTitle {
    width: 320px;
    padding: 8px;
    line-height: 30px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary, #FFFFFF);
    text-decoration: none;
    font-family: inherit;
}

.ViewA {
    width: 320px;
    padding: 8px;
    line-height: 30px;
    display: inline-table;
    border-bottom: 1px solid #FF6A00;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-secondary, #DDDDDD);
}

.ViewB {
    float: right;
}

/* Password Validation Message */
#message {
    margin-left: 40px;
    display: none;
    font-weight: 600;
    font-size: 12px;
    color: var(--text-primary, #FFFFFF);
    font-family: inherit;
    padding-bottom: 16px;
}

.valid {
    color: #4CAF50;
}

.valid:before {
    position: relative;
    left: -16px;
    content: "✔";
}

.invalid {
    color: #f44336;
}

.invalid:before {
    position: relative;
    left: -16px;
    content: "✖";
}

/* Custom Radio/Checkbox */
.Label {
    display: block;
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    user-select: none;
    line-height: 18px;
}

.Label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.Checkbox,
.Radio {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: var(--bg-tertiary, #37475A);
    transition: var(--transition-default, all 0.2s ease);
}

.Radio {
    border-radius: 50%;
}

.Label:hover input ~ .Checkbox,
.Label:hover input ~ .Radio {
    background-color: var(--bg-hover, #485769);
}

.Label input:checked ~ .Checkbox,
.Label input:checked ~ .Radio {
    background-color: var(--accent, #FF6A00);
}

.Checkbox:after,
.Radio:after {
    content: "";
    position: absolute;
    display: none;
}

.Label input:checked ~ .Checkbox:after,
.Label input:checked ~ .Radio:after {
    display: block;
}

.Label .Checkbox:after {
    top: 5px;
    left: 5px;
    width: 8px;
    height: 8px;
    background: var(--text-primary, #FFFFFF);
}

.Label .Radio:after {
    top: 5px;
    left: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-primary, #FFFFFF);
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-tertiary, #37475A);
    transition: 0.3s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: var(--text-primary, #FFFFFF);
    transition: 0.3s;
}

input:checked + .slider {
    background-color: #FF6A00;
}

/* Dropdown Container */
.DropdownButton {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.DropdownButtonContent {
    display: none;
    position: absolute;
    background-color: var(--bg-secondary, #232F3F);
    min-width: 180px;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.4));
    z-index: 1000;
    border-radius: var(--border-radius-md, 12px);
    overflow: hidden;
    border: 1px solid #FF6A00;
    margin-top: 8px;
}

/* Dropdown Links */
.DropdownButtonContent a {
    color: var(--text-primary, #FFFFFF);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 13px;
    font-family: inherit;
    transition: var(--transition-default, all 0.2s ease);
}

/* Change color of dropdown links on hover */
.DropdownButtonContent a:hover {
    background-color: var(--bg-hover, #485769);
    padding-left: 20px;
}


/* ============================================
   ADDITIONAL UTILITIES & RESPONSIVE STYLES
   ============================================ */

/* Responsive Sidebar */
@media (max-width: 768px) {
    .TdLeft {
        width: 200px;
        min-width: 200px;
    }
    
    .DivInput,
    .DivInputB {
        width: 100%;
        max-width: 100%;
    }
    
    .InputText50,
    .InputText30 {
        width: 100%;
    }
    
    .Chart {
        width: calc(100% - 16px);
        margin: 8px;
    }
    
    .ViewTitle,
    .ViewA {
        width: 100%;
    }
    
    .ViewB {
        float: none;
        display: block;
        margin-top: 8px;
    }
    
    .Icon {
        width: calc(50% - 16px);
        min-width: 150px;
    }
    
    .DropdownButtonContent {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: var(--border-radius-lg, 16px) var(--border-radius-lg, 16px) 0 0;
        max-height: 60vh;
        overflow-y: auto;
    }
    
    .Pages,
    .PagesOver {
        min-width: 36px;
        padding: 6px 10px;
    }
}

/* Tablet Styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .Icon {
        width: calc(33.33% - 16px);
    }
    
    .Chart {
        width: calc(50% - 16px);
    }
}

/* Scrollbar Styling - Matching Theme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary, #121212);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color, #37475A);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent, #FF6A00);
}
    
    THEAD tr th {
        border-bottom: 1px solid #FF6A00;
    }
    
    .Table TBODY tr td {
        border-bottom: 1px solid #FF6A00;
        color: #FFFFFF;
    }
}

    
    .DropdownButtonContent {
        border: 2px solid white;
    }
    
    .DropdownButtonContent a:hover {
        outline: 2px solid white;
    }
}

/* Loading Animation for Preloader */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.preloader-image[data-loading="true"] {
    animation: pulse 1s ease-in-out infinite;
}

/* Smooth Transitions for All Interactive Elements */
a, button, .dropbtn, .Icon, .Pages, .Country, .ServerInfo {
    transition: var(--transition-default, all 0.2s ease);
}

/* Card Hover Effect for Icons */
.Icon {
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.3));
}

.Icon:hover {
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.4));
}

/* Status Indicators */
.status-online {
    color: #4CAF50;
}