/*===========================================================
|  Vip Accounting System — "The Executive Interface"             |
|  Design System: Deep Enterprise Palette                  |
|  Redesigned by: Mohamed Salah                            |
|  Version: 3.0 — Production Ready                        |
|  Royal Prussian Blue × Polished Gold × Snowy White      |
|  Zero content change — Pure CSS transformation           |
===========================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700&display=swap');

/* ─────────────────────────────────────────────
   DESIGN TOKENS — THE EXECUTIVE PALETTE
───────────────────────────────────────────── */
:root {
  /* Foundation */
  --bg-system:           #FFFFFF;
  --bg-app:              #F4F6FA;
  --bg-surface:          #FFFFFF;
  --bg-surface-2:        #F8F9FC;

  /* Sidebar — Royal Prussian Blue */
  --sidebar-main:        #0A2342;
  --sidebar-deep:        #071A33;
  --sidebar-mid:         #0D2D55;
  --sidebar-hover:       #0F3364;
  --sidebar-active:      #164E8F;
  --sidebar-border:      rgba(255,255,255,0.06);
  --sidebar-text:        rgba(255,255,255,0.62);
  --sidebar-text-active: #FFFFFF;
  --sidebar-text-muted:  rgba(255,255,255,0.28);

  /* Primary Action — Vibrant Corporate Blue */
  --primary:             #164E8F;
  --primary-hover:       #1A5EA8;
  --primary-light:       #EBF2FB;
  --primary-ultra:       #F0F5FD;
  --primary-border:      #C3D7F0;
  --button-action:       #164E8F;

  /* VIP Accent — Polished Gold */
  --accent:              #D4AF37;
  --accent-hover:        #C9A22E;
  --accent-light:        #FBF5E0;
  --accent-border:       #EDD87A;
  --accent-muted:        #B8952E;

  /* Typography — Glossy Jet Black */
  --text-primary:        #050505;
  --text-secondary:      #2D3748;
  --text-tertiary:       #4A5568;
  --text-muted:          #718096;
  --text-placeholder:    #A0AEC0;
  --text-inverse:        #FFFFFF;

  /* Borders */
  --border-light:        #EDF0F7;
  --border:              #E2E8F0;
  --border-strong:       #CBD5E0;

  /* Semantic Status */
  --status-success:      #10B981;
  --status-success-bg:   #ECFDF5;
  --status-success-bdr:  #A7F3D0;
  --status-danger:       #EF4444;
  --status-danger-bg:    #FEF2F2;
  --status-danger-bdr:   #FECACA;
  --status-warning:      #D4AF37;
  --status-warning-bg:   #FFFBEB;
  --status-warning-bdr:  #FDE68A;
  --status-info:         #3B82F6;
  --status-info-bg:      #EFF6FF;
  --status-info-bdr:     #BFDBFE;

  /* Shadows */
  --shadow-xs:           0 1px 2px rgba(10,35,66,0.04);
  --shadow-sm:           0 2px 8px rgba(10,35,66,0.07);
  --shadow-md:           0 4px 20px rgba(10,35,66,0.10);
  --shadow-lg:           0 8px 32px rgba(10,35,66,0.13);
  --shadow-xl:           0 16px 48px rgba(10,35,66,0.18);
  --shadow-primary:      0 4px 16px rgba(22,78,143,0.28);
  --shadow-card:         0 1px 3px rgba(10,35,66,0.05), 0 4px 14px rgba(10,35,66,0.07);

  /* Radius */
  --radius-xs:           4px;
  --radius-sm:           6px;
  --radius-md:           10px;
  --radius-lg:           14px;
  --radius-xl:           20px;
  --radius-2xl:          28px;
  --radius-pill:         999px;

  /* Typography */
  --font-main:           'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading:        'Inter', 'DM Sans', sans-serif;
  --font-mono:           'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Motion */
  --ease:                cubic-bezier(0.4, 0, 0.2, 1);
  --transition:          all 0.18s var(--ease);
  --transition-slow:     all 0.32s var(--ease);

  /* Layout */
  --sidebar-width:       230px;
  --topbar-height:       58px;
}

/* ─────────────────────────────────────────────
   RESET
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-main);
  background: var(--bg-app);
  font-size: 13px;
  color: var(--text-primary);
  margin: 0; padding: 0;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

tr, td, th {
  font-size: 13px;
  line-height: 1.55;
  font-family: var(--font-main);
}

textarea {
  font-size: 13px;
  font-family: var(--font-main);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  color: var(--text-primary);
  background: var(--bg-surface);
  resize: vertical;
  transition: var(--transition);
  outline: none;
  line-height: 1.6;
}
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(22,78,143,0.10);
}

input, select {
  font-size: 13px;
  font-family: var(--font-main);
  padding: 8px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  transition: var(--transition);
  outline: none;
  height: 38px;
}
input:focus, select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(22,78,143,0.10);
}
input:hover, select:hover { border-color: var(--border-strong); }
input::placeholder { color: var(--text-placeholder); }

select {
  max-width: 270px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 34px;
}

option.inactive { text-decoration: line-through; color: var(--text-muted); }
input.big   { width: 140px; }
input.small { width: 72px; }
input[type="checkbox"], input[type="radio"] { height: auto; width: auto; accent-color: var(--primary); cursor: pointer; }

/* Links */
a { color: var(--primary); font-size: 13px; text-decoration: none; transition: var(--transition); }
a:link   { color: var(--primary); }
a:active { color: var(--sidebar-main); }
a:hover, a:focus { color: var(--primary-hover); text-decoration: none; }
.inactive { color: var(--text-muted); }

/* ─────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────── */
button {
  font-family: var(--font-main);
  font-size: 13px; font-weight: 500;
  border: none;
  border-radius: var(--radius-md);
  padding: 7px 16px;
  background: var(--primary);
  color: var(--text-inverse);
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: 0.01em;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: var(--shadow-primary);
}
button:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(22,78,143,0.35); }
button:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
button img, button span { padding: 0 2px; vertical-align: middle; }
span { padding: 0 1px; vertical-align: middle; }

.inputsubmit, .ajaxsubmit {
  font-family: var(--font-main);
  font-size: 13px; font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  padding: 9px 22px;
  background: var(--button-action);
  color: #FFFFFF;
  cursor: pointer; transition: var(--transition);
  letter-spacing: 0.02em; height: 38px;
  display: inline-flex; align-items: center;
  box-shadow: var(--shadow-primary);
}
.inputsubmit:hover, .ajaxsubmit:hover { background: var(--primary-hover); box-shadow: 0 6px 20px rgba(22,78,143,0.35); transform: translateY(-1px); }

input[type=submit] {
  font-family: var(--font-main);
  font-size: 13px; font-weight: 600;
  background: var(--button-action);
  border: none; border-radius: var(--radius-md);
  color: #FFFFFF; padding: 9px 22px;
  cursor: pointer; transition: var(--transition);
  height: 38px; letter-spacing: 0.02em;
  box-shadow: var(--shadow-primary);
}
input[type=submit]:hover { background: var(--primary-hover); box-shadow: 0 6px 20px rgba(22,78,143,0.35); }

/* ─────────────────────────────────────────────
   LAYOUT WRAPPERS
───────────────────────────────────────────── */
.callout_main { font-family: var(--font-main); border: none; width: 100%; margin: 0; padding: 0; }
.main_page    { background: var(--bg-app); border: none; width: 100%; margin: 0; padding: 0; }

/* ─────────────────────────────────────────────
   QUICK MENU & TABS
───────────────────────────────────────────── */
.quick_menu {
  background: linear-gradient(180deg, var(--sidebar-main) 0%, var(--sidebar-deep) 100%);
  border: 0; margin: 0; padding: 0;
  box-shadow: 0 3px 16px rgba(7,26,51,0.25);
}
.quick_menu_selected {
  font-family: var(--font-heading);
  font-size: 13px; border: none; white-space: nowrap;
  margin: 2px; padding: 3px 10px;
  color: var(--accent); font-weight: 700; letter-spacing: 0.03em;
}

div.tabs {
  padding: 10px 12px 0;
  background: transparent; white-space: nowrap; border-bottom: none;
  display: flex; align-items: flex-end; gap: 2px;
}
div.tabs a {
  border: none; padding: 9px 18px 10px;
  font-weight: 500; font-size: 12.5px;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.58);
  margin-right: 2px; height: auto;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  letter-spacing: 0.015em; transition: var(--transition);
  display: inline-flex; align-items: center; gap: 5px;
  position: relative; text-decoration: none;
}
div.tabs a::after {
  content: ''; position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%); width: 0; height: 2px;
  background: var(--accent); border-radius: 2px 2px 0 0; transition: var(--transition);
}
div.tabs a:hover { background: rgba(255,255,255,0.10); color: #FFF; text-decoration: none; }
div.tabs a:hover::after { width: 60%; }
div.tabs a.selected { background: rgba(212,175,55,0.13); color: var(--accent); font-weight: 600; }
div.tabs a.selected::after { width: 100%; }

/* ─────────────────────────────────────────────
   TOPBAR
───────────────────────────────────────────── */
.logoutBar, table.logoutBar {
  padding: 0 18px; background: var(--bg-surface);
  color: var(--text-primary); border-bottom: 1px solid var(--border);
  width: 100%; box-shadow: var(--shadow-xs);
}
.bottomBar { padding: 7px 18px; background: var(--bg-surface); border-top: 1px solid var(--border-light); width: 100%; }
.bottomBarCell { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.bottomBar2 { padding: 7px 18px; background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); width: 100%; }
.logoutBarRight { text-align: right; }

div.logoutBar {
  padding: 0 18px; background: var(--bg-surface);
  color: var(--text-primary); border-bottom: 1px solid var(--border);
  text-align: right; display: flex; align-items: center; justify-content: flex-end; min-height: 46px;
}
div.logoutBar a {
  font-weight: 500; font-size: 12.5px; margin-left: 14px;
  color: var(--text-tertiary);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--radius-sm); transition: var(--transition);
}
div.logoutBar a:hover { background: var(--primary-light); color: var(--primary); text-decoration: none; }
div.logoutBar img { vertical-align: middle; opacity: 0.65; }

/* ─────────────────────────────────────────────
   TEXT HIERARCHY
───────────────────────────────────────────── */
.headingtext3 { font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; color: var(--text-tertiary); letter-spacing: 0.01em; }
.headingtext  { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--text-primary); letter-spacing: -0.01em; }
.headingtext2 { font-size: 13px; color: var(--text-secondary); }
.errortext    { font-size: 13px; color: var(--status-danger); font-weight: 600; }

#title { margin-bottom: 0; width: 100%; padding: 0 18px; }
.titletext {
  font-family: var(--font-heading);
  font-weight: 800; font-size: 20px;
  color: var(--text-primary); border-bottom: none;
  padding: 20px 0 18px; width: 100%;
  letter-spacing: -0.025em;
  border-left: 4px solid var(--accent); padding-left: 16px;
}

/* ─────────────────────────────────────────────
   MENU GROUPS
───────────────────────────────────────────── */
.menu_group {
  font-family: var(--font-heading); font-size: 10.5px; font-weight: 700;
  color: var(--primary);
  background: linear-gradient(90deg, var(--primary-ultra) 0%, transparent 100%);
  padding: 11px 16px 9px;
  text-transform: uppercase; letter-spacing: 0.09em;
  border-bottom: 2px solid var(--primary-light);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.menu_group_items {
  background: var(--bg-surface); font-weight: normal;
  padding: 14px 18px;
  border: 1.5px solid var(--border); border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.menu_group_items a { color: var(--text-secondary); font-size: 13px; font-weight: 400; transition: var(--transition); }
.menu_group_items a:hover { color: var(--primary); text-decoration: none; }
td.menu_group > table { background: var(--bg-surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); border: 1.5px solid var(--border); margin-bottom: 18px; }

/* ─────────────────────────────────────────────
   DATA TABLES
───────────────────────────────────────────── */
table.tablestyle { border-collapse: separate; border-spacing: 0; border: 1.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); width: 100%; }
table.tablestyle td, table.tablestyle th { border: 1px solid var(--border-light); padding: 10px 14px; }
table.tablestyle2 { border-collapse: separate; border-spacing: 0; border: 1.5px solid var(--border); border-radius: var(--radius-md); overflow: hidden; width: 100%; }
table.tablestyle2 td { border: 1px solid var(--border-light); padding: 9px 13px; }
table.tablestyle_inner { border-collapse: collapse; border: none; width: 100%; }
table.tablestyle_inner td { border: none; padding: 8px 12px; }
.tablestyle_noborder { padding: 4px; }

.tableheader {
  font-family: var(--font-heading); font-weight: 700; font-size: 11px;
  background: linear-gradient(180deg, var(--sidebar-main) 0%, var(--sidebar-deep) 100%);
  color: #FFFFFF; text-align: center; padding: 11px 14px; letter-spacing: 0.05em; text-transform: uppercase;
}
.tableheader2 {
  font-family: var(--font-heading); font-weight: 700; font-size: 11px;
  background: var(--bg-surface-2); color: var(--text-secondary);
  text-align: left; padding: 11px 14px;
  border-bottom: 2px solid var(--border); letter-spacing: 0.04em; text-transform: uppercase;
}

.oddrow  { background: var(--bg-surface); transition: background 0.12s; }
.evenrow { background: var(--bg-surface-2); transition: background 0.12s; }
.oddrow:hover, .evenrow:hover { background: var(--primary-ultra) !important; }

/* ─────────────────────────────────────────────
   STATUS COLORS
───────────────────────────────────────────── */
.overduebg   { background: var(--status-danger-bg); }
.overduefg   { color: var(--status-danger); }
.currentfg   { color: var(--status-danger); font-weight: 500; }
.redfg, a.redfg { color: var(--status-danger); font-weight: 600; }
.settledbg   { background: var(--status-success-bg); }
.settledfg   { color: var(--status-success); font-weight: 500; }
.inquirybg   { background: var(--status-warning-bg); }
.currencybg  { background: var(--status-danger-bg); }
.stockmankobg { background: #FFF1F2; }
.stockmankofg { color: var(--status-danger); }

/* ─────────────────────────────────────────────
   MISC ELEMENTS
───────────────────────────────────────────── */
.label { background: var(--bg-surface-2); color: var(--text-secondary); font-weight: 500; padding: 7px 13px; border-radius: var(--radius-sm); }
.amount { font-family: var(--font-mono); font-size: 13px; text-align: right; color: var(--text-primary); font-weight: 600; }
input.amount { padding-right: 8px; text-align: right; font-family: var(--font-mono); font-weight: 600; }

/* ─────────────────────────────────────────────
   LOGIN PAGE
───────────────────────────────────────────── */
#loginscreen {
  background: linear-gradient(135deg, var(--sidebar-deep) 0%, var(--sidebar-main) 45%, #0F3364 100%);
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
#loginscreen::before {
  content: ''; position: absolute; top: -30%; right: -10%;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.09) 0%, transparent 70%); pointer-events: none;
}
#loginscreen::after {
  content: ''; position: absolute; bottom: -20%; left: -10%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(22,78,143,0.22) 0%, transparent 70%); pointer-events: none;
}
.login {
  width: 420px; border: none; border-radius: var(--radius-2xl);
  background: var(--bg-surface);
  box-shadow: 0 32px 80px rgba(5,5,5,0.42), 0 0 0 1px rgba(255,255,255,0.06);
  overflow: hidden; position: relative; z-index: 1;
}
.login td.tableheader {
  line-height: 1; border: none;
  background: linear-gradient(135deg, var(--sidebar-main) 0%, var(--primary) 100%);
  color: #FFFFFF; font-family: var(--font-heading);
  font-size: 20px; font-weight: 800; padding: 32px 32px 28px;
  letter-spacing: -0.03em; position: relative;
}
.login td.tableheader::after {
  content: ''; position: absolute; bottom: 0; left: 32px;
  width: 40px; height: 3px; background: var(--accent); border-radius: 2px 2px 0 0;
}
.login td { padding: 10px 32px; border: none; }
.login select, .login input[type=text], input[type=password] {
  height: 44px; width: 100%; max-width: 280px; padding-left: 14px;
  box-sizing: border-box; border: 1.5px solid var(--border);
  border-radius: var(--radius-md); background: var(--bg-surface-2); outline: none;
  font-size: 14px; font-family: var(--font-main); color: var(--text-primary); transition: var(--transition);
}
.login input[type=text]:focus, input[type=password]:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(22,78,143,0.12); background: var(--bg-surface);
}
.login input[type=button], input[type=submit] {
  background: linear-gradient(135deg, var(--primary) 0%, var(--sidebar-main) 100%);
  border: none; border-radius: var(--radius-md); color: white;
  padding: 13px 28px; margin: 10px 0 6px; cursor: pointer;
  font-size: 14px; font-weight: 700; font-family: var(--font-heading);
  letter-spacing: 0.02em; transition: var(--transition);
  box-shadow: 0 6px 20px rgba(22,78,143,0.35); width: 100%; height: auto;
}
.login input[type=button]:hover, input[type=submit]:hover { box-shadow: 0 8px 28px rgba(22,78,143,0.45); transform: translateY(-2px); }

/* ─────────────────────────────────────────────
   NAVIGATION CONTROLS
───────────────────────────────────────────── */
.editbutton { color: var(--primary); background: transparent; border: none; cursor: pointer; font-weight: 500; transition: var(--transition); padding: 3px 7px; border-radius: var(--radius-sm); }
.editbutton:hover { background: var(--primary-light); }
.navibutton[disabled], .navibutton[disabled] span { color: var(--text-muted); cursor: not-allowed; opacity: 0.45; text-decoration: none; }
button.navibutton { font-family: var(--font-main); font-size: 13px; font-weight: 600; color: var(--primary); padding: 5px 10px; background: transparent; border: 1px solid transparent; cursor: pointer; border-radius: var(--radius-sm); transition: var(--transition); box-shadow: none; }
button.navibutton:hover { background: var(--primary-light); border-color: var(--primary-border); transform: none; box-shadow: none; }
.navibutton span { text-decoration: none; font-weight: 600; }
.navibar { padding: 6px 13px; color: var(--text-primary); border-collapse: collapse; background: var(--bg-surface-2); border: 1.5px solid var(--border); border-radius: var(--radius-sm); }
.navibar tr td { border: none; padding: 2px 5px; }
.listsubmit { display: none; }

/* ─────────────────────────────────────────────
   AJAX TABS
───────────────────────────────────────────── */
ul.ajaxtabs { padding: 0; margin: 14px 0 0; list-style: none; display: flex; gap: 3px; border-bottom: 2px solid var(--border); }
ul.ajaxtabs li { list-style: none; margin: 0; display: inline; }
ul.ajaxtabs li button { background: var(--bg-surface-2); padding: 9px 18px; margin: 0; border: 1.5px solid var(--border); border-bottom: none; font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; color: var(--text-tertiary); border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: var(--transition); cursor: pointer; box-shadow: none; }
ul.ajaxtabs li button:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary-border); transform: none; box-shadow: none; }
ul.ajaxtabs li button.current, ul.ajaxtabs li button.current:hover { background: var(--primary); border-color: var(--primary); color: #FFFFFF; box-shadow: 0 -3px 10px rgba(22,78,143,0.18); }
div.spaceBox { background: var(--primary); height: 2px; border: none; margin: 0; }
div.contentBox { border: 1.5px solid var(--border); border-top: none; margin: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--bg-surface); padding: 18px; box-shadow: var(--shadow-sm); }

/* ─────────────────────────────────────────────
   HINTS
───────────────────────────────────────────── */
#hints { font-size: 12.5px; padding: 7px 15px; border: 1.5px solid var(--accent-border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-light); color: var(--text-secondary); white-space: nowrap; font-weight: 500; }
#hotkeyshelp { text-align: right; font-weight: 600; font-size: 12px; color: var(--text-muted); }

/* ─────────────────────────────────────────────
   CALENDAR
───────────────────────────────────────────── */
#CCIframe { display: none; left: 0; position: absolute; top: 0; height: 250px; width: 282px; z-index: 99; }
#CC { position: absolute; background: var(--bg-surface); margin: 0; padding: 0; display: none; z-index: 100; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); border: 1.5px solid var(--border); overflow: hidden; }
#CC table { font-family: var(--font-main); font-size: 12px; border: none; }
#CC th { font-weight: 700; text-align: center; color: rgba(255,255,255,0.85); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 2px; }
#CC th a { font-weight: 700; text-decoration: none; color: #FFF; padding: 1px; }
#CC td { text-align: center; padding: 1px; }
#CC .header { background: linear-gradient(135deg, var(--sidebar-main) 0%, var(--primary) 100%); padding: 10px; }
#CC .weekday { background: var(--bg-surface); color: var(--text-primary); }
#CC .weekend { background: var(--accent-light); color: var(--text-primary); }
#CC .weekno  { background: var(--primary-ultra); color: var(--primary); font-weight: 700; }
#CC .current { border: 2px solid var(--primary); background: var(--primary); color: #FFF; font-weight: 800; }
#CC .weekday, #CC .weekend, #CC .current { display: block; text-decoration: none; border: 1px solid transparent; width: 2em; border-radius: 5px; line-height: 1.9; transition: var(--transition); }
#CC .weekday:hover, #CC .weekend:hover, #CC .current:hover { color: #FFF; background: var(--primary-hover); border-color: transparent; }
#CC .previous { text-align: left; } #CC .next { text-align: right; }
#CC .previous, #CC .next { padding: 2px 5px; font-size: 1.35em; }
#CC .previous a, #CC .next a { color: #FFF; text-decoration: none; font-weight: bold; }
#CC .title { text-align: center; font-weight: 800; color: #FFF; font-size: 13px; }
#CC .empty { background: var(--bg-surface-2); border: 1px solid var(--border-light); }

/* ─────────────────────────────────────────────
   ALERT MESSAGES
───────────────────────────────────────────── */
div.err_msg  { margin: 14px 0; padding: 13px 18px; border: 1.5px solid var(--status-danger-bdr); border-left: 4px solid var(--status-danger); background: var(--status-danger-bg); color: #991B1B; border-radius: var(--radius-md); font-weight: 500; font-size: 13px; }
div.warn_msg { margin: 14px 0; padding: 13px 18px; border: 1.5px solid var(--status-warning-bdr); border-left: 4px solid var(--status-warning); background: var(--status-warning-bg); color: #78350F; border-radius: var(--radius-md); font-weight: 500; font-size: 13px; }
div.note_msg { margin: 14px 0; padding: 13px 18px; border: 1.5px solid var(--status-success-bdr); border-left: 4px solid var(--status-success); background: var(--status-success-bg); color: #064E3B; border-radius: var(--radius-md); font-weight: 500; font-size: 13px; }

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
#footer { position: relative; bottom: 0; margin-top: 8px; }
.footer td a { color: rgba(255,255,255,0.38); font-size: 11px; transition: var(--transition); }
.footer td a:hover { color: var(--accent); }
.footer { font-family: var(--font-main); color: rgba(255,255,255,0.32); font-size: 11px; text-align: center; width: 100%; padding: 10px 0 18px; }

/* ─────────────────────────────────────────────
   SCROLLBAR + SELECTION
───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-app); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }
::selection { background: rgba(22,78,143,0.18); color: var(--text-primary); }

/* ─────────────────────────────────────────────
   PRINT
───────────────────────────────────────────── */
@media print {
  body { background: #FFF; font-size: 10pt; }
  .quick_menu, .logoutBar, .bottomBar, #footer, div.tabs { display: none !important; }
  .main_page { background: #FFF; }
  table.tablestyle { box-shadow: none; border: 1px solid #999; }
  .tableheader { background: #0A2342 !important; -webkit-print-color-adjust: exact; }
}

/* ─────────────────────────────────────────────
   RESPONSIVE ≥ 1024px
───────────────────────────────────────────── */
@media screen and (min-width: 1024px) {
  body, .headingtext3 { font-size: 13px; }
  textarea { font-size: 13px; }
  tr, td, th, input, select, a, button, .inputsubmit, .ajaxsubmit, .amount, button.navibutton { font-size: 13px; }
  .quick_menu_selected, .menu_group, .headingtext, .headingtext2, .errortext, #hints { font-size: 13.5px; }
  .titletext { font-size: 21px; }
  .bottomBarCell { font-size: 12px; line-height: 1.4; }
  .footer, .footer td a { font-size: 11px; }
  #CC table { font-size: 12px; }
}

@media screen and (min-width: 1200px) {
  body, .headingtext3 { font-size: 13.5px; }
  textarea { font-size: 14px; }
  tr, td, th, input, select, a, button, .inputsubmit, .ajaxsubmit, .amount, button.navibutton { font-size: 13.5px; }
  .quick_menu_selected, .menu_group, .headingtext, .headingtext2, .errortext, #hints { font-size: 14px; }
  .titletext { font-size: 23px; }
  .bottomBarCell { font-size: 12.5px; line-height: 1.4; }
  .footer, .footer td a { font-size: 11.5px; }
  #CC table { font-size: 12px; }
}

/* ─────────────────────────────────────────────
   BADGE UTILITIES
───────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; font-family: var(--font-heading); }
.badge-success { background: var(--status-success-bg); color: #065F46; border: 1px solid var(--status-success-bdr); }
.badge-danger  { background: var(--status-danger-bg);  color: #991B1B; border: 1px solid var(--status-danger-bdr);  }
.badge-warning { background: var(--status-warning-bg); color: #78350F; border: 1px solid var(--status-warning-bdr); }
.badge-info    { background: var(--status-info-bg);    color: #1E40AF; border: 1px solid var(--status-info-bdr);    }
.badge-primary { background: var(--primary-light);     color: var(--primary); border: 1px solid var(--primary-border); }
.badge-gold    { background: var(--accent-light);      color: var(--accent-muted); border: 1px solid var(--accent-border); }
/* ─────────────────────────────────────────────
   DARK MODE — Dashboard New Components
───────────────────────────────────────────── */
body.dark-mode .exd-hero {
  background:#162030; border-color:rgba(255,255,255,.07);
}
body.dark-mode .exd-card {
  background:#162030; border-color:rgba(255,255,255,.07);
}
body.dark-mode .exd-card-head {
  border-color:rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
}
body.dark-mode .exd-col {
  border-color:rgba(255,255,255,.05);
}
body.dark-mode .exd-link a { color:#CBD5E0; }
body.dark-mode .exd-link:hover { background:rgba(22,78,143,.2); }
body.dark-mode .exd-link:hover a { color:#93C5FD; }
body.dark-mode .exd-link-ico { color:#607D8B; }
body.dark-mode .exd-link:hover .exd-link-ico { color:#93C5FD; }
body.dark-mode .exd-hero-sub { color:#607D8B; }
body.dark-mode .exd-card-count { color:#607D8B; }