:root {
    --primary: #EDF2FB; --secondary: #C9D6EE; --accent: #2F6BFF; --success: #5EE0AC;
    --warning: #F5C97E; --danger: #FF9C8F; --info: #7CC5E8; --light: #16244A; --dark: #050B18;
    --sidebar-width: 260px;
    /* "Midnight Ledger" — deep navy, emerald, and Waraq gold.
       A Linear-grade working dark: near-monochrome navy surfaces, ONE brand
       accent (ledger blue #2F6BFF), semantics kept pure (emerald = money in,
       coral = money owed, amber = pending), and the signature Waraq gold
       (#F2C063) reserved for the portrait frame, stat icons and ornaments. */
    --blue-deep: #081020;
    --blue-glow: #16345F;
    --forest: #050B18;
    --valley-teal: #0A1428;
    --teal-mid: #2F6BFF;
    --earth: #B85C4A;
    --gold: #F2C063;
    --surface: rgba(13, 27, 51, 0.78);
    --surface-strong: rgba(16, 32, 60, 0.92);
    --surface-soft: rgba(8, 16, 32, 0.60);
    --line: rgba(148, 180, 255, 0.12);
    --wared-red: #2F6BFF; /* legacy token name — now the ledger blue */
    /* Text-contrast tokens, all WCAG-verified against the composited navy
       glass (#0C1931): links 8.7:1, gold labels 10.4:1, balances 8.7:1. */
    --text-link: #8FB8FF;
    --text-gold: #F2C063;
    --text-balance: #FF9C8F;
    --red-soft: #FFB3A6;
    --blue-accent: #2F6BFF;
    --glass-bg: var(--surface);
    --glass-bg-strong: var(--surface-strong);
    --glass-bg-soft: var(--surface-soft);
    --glass-border: var(--line);
    --glass-shadow: 0 10px 34px rgba(2, 6, 16, 0.5);
    --glass-blur: blur(16px);
    --glass-dark: rgba(6, 12, 26, 0.86);
    --glass-dark-border: rgba(148, 180, 255, 0.14);
}
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Midnight Ledger canvas: ledger-blue glow above, deep navy floor. No
   wallpaper, no ornament — a calm, near-monochrome working surface. */
body {
    font-family: var(--body-font, 'Segoe UI', Tahoma, Arial, sans-serif);
    background: radial-gradient(1100px 520px at 50% -10%, var(--blue-glow) 0%, #081020 52%, #050B18 100%);
    background-attachment: fixed;
    color: var(--primary); line-height:1.8; min-height:100vh;
}
/* One quiet gold ambient in the floor corner — the Waraq signature. */
body::after {
    content:''; position:fixed; z-index:0; border-radius:50%; pointer-events:none;
    width:560px; height:560px; bottom:-200px; left:-160px;
    background:rgba(242,192,99,.10); filter:blur(110px); opacity:.8;
}

html[dir="rtl"] body, html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea, html[dir="rtl"] button { font-family:var(--urdu-font, 'Mehr Nastaliq Web', 'Noto Nastaliq Urdu', serif); }
html[dir="ltr"] body, html[dir="ltr"] input, html[dir="ltr"] select, html[dir="ltr"] textarea, html[dir="ltr"] button { font-family:var(--body-font, 'Segoe UI', Tahoma, Arial, sans-serif); }
input, select, textarea, button { font-family:inherit; }
a { color: var(--text-link); } a:hover { color: #b9d7ff; }

.app-container { display:flex; min-height:100vh; position:relative; z-index:1; }

/* ---------- Sidebar: dark glass ---------- */
.sidebar { width:var(--sidebar-width); background:var(--glass-dark); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); color:white; position:fixed; height:100vh; overflow-y:auto; transition:transform .3s; right:0; left:auto; border-left:1px solid var(--glass-dark-border); box-shadow:-8px 0 32px rgba(2,18,22,.4); display:flex; flex-direction:column; }
html[dir="ltr"] .sidebar { left:0; right:auto; border-left:0; border-right:1px solid var(--glass-dark-border); box-shadow:8px 0 32px rgba(2,18,22,.4); }
.sidebar-header { padding:18px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--glass-dark-border); }
.logo { font-size:17px; font-weight:bold; display:flex; align-items:center; gap:10px; color:#fff; min-width:0; }
.logo .logo-name { overflow-wrap:anywhere; }
.logo i { color:var(--text-gold); }
/* One shared style for every logo in the app (sidebar, top bar, login):
   gold ambient glow matching the portrait frame + a subtle dark separation shadow. */
.sidebar-logo-img, .brand-logo img, .login-logo {
    object-fit: contain;
    border-radius: 0;
    filter: drop-shadow(0 0 10px rgba(240,200,90,.28)) drop-shadow(0 1px 5px rgba(0,0,0,.45));
}
.sidebar-logo-img { width:38px; height:38px; }
.sidebar-toggle { background:none; border:none; color:white; font-size:20px; cursor:pointer; display:none; }
/* Inside-drawer button shows ✕ only while the drawer is open; the top-bar
   button shows ☰ and is the always-visible way to open it on mobile. */
.sidebar-toggle .fa-times { display:none; }
.sidebar.open .sidebar-toggle .fa-times { display:inline-block; }
.sidebar.open .sidebar-toggle .fa-bars { display:none; }
.sidebar-open-btn { background:rgba(255,255,255,.45); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--glass-border); color:var(--primary); border-radius:8px; width:38px; height:38px; align-items:center; justify-content:center; display:none; font-size:16px; cursor:pointer; }
html[dir="ltr"] .stat-card, html[dir="ltr"] .stat-card.success, html[dir="ltr"] .stat-card.warning,
html[dir="ltr"] .stat-card.danger, html[dir="ltr"] .stat-card.info { border-right:0; border-left:4px solid var(--accent); }
html[dir="ltr"] .stat-card.success { border-left-color:var(--success); } html[dir="ltr"] .stat-card.warning { border-left-color:var(--warning); }
html[dir="ltr"] .stat-card.danger { border-left-color:var(--danger); } html[dir="ltr"] .stat-card.info { border-left-color:var(--info); }
.top-bar .wems-brand, .top-bar .top-bar-actions { min-width:0; }
.profile-main, .profile-hero { min-width:0; }
.profile-summary, .profile-developer, .profile-role, .profile-location { overflow-wrap:anywhere; }
.data-table td, .data-table th { overflow-wrap:anywhere; }
/* Nav scrolls between the fixed header and footer — never underneath them. */
.sidebar-nav { flex:1 1 auto; min-height:0; overflow-y:auto; padding:15px 0; }
.nav-item { display:flex; align-items:center; gap:12px; padding:12px 20px; color:rgba(233,240,246,.82); text-decoration:none; transition:all .2s; border-right:3px solid transparent; }
html[dir="ltr"] .nav-item { border-right:0; border-left:3px solid transparent; }
.nav-item:hover { background:rgba(255,255,255,.08); color:white; border-right-color:var(--accent); }
.nav-item.active { background:rgba(47,107,255,.22); color:white; border-right-color:var(--accent); }
html[dir="ltr"] .nav-item:hover, html[dir="ltr"] .nav-item.active { border-right-color:transparent; border-left-color:var(--accent); }
.nav-item i { width:20px; text-align:center; }
.sidebar-footer { position:static; flex:none; width:100%; border-top:1px solid var(--glass-dark-border); padding:10px 0; margin-top:auto; }

/* ---------- Main column ---------- */
.main-content { margin-right:var(--sidebar-width); margin-left:0; flex:1; display:flex; flex-direction:column; min-height:100vh; }
html[dir="ltr"] .main-content { margin-left:var(--sidebar-width); margin-right:0; }

/* Top bar: light glass strip */
.top-bar { background:var(--glass-bg-soft); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border-bottom:1px solid var(--glass-border); padding:12px 30px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; box-shadow:0 4px 24px rgba(1,10,12,.4); }
.wems-brand { display:flex; align-items:center; gap:14px; min-width:0; }
.brand-logo img { width:auto; height:128px; }
/* CloudTrans top-bar badge: original artwork, contained in a white circle.
   Uses the dark-text transparent variant — readable on the white disc. */
.brand-logo-left img { border-radius:50%; background:#fff; padding:14px; }
.brand-copy { min-width:0; }
.brand-title { font-size:26px; font-weight:700; color:#f4f8fb; text-shadow:0 1px 10px rgba(2,22,26,.5); }
.brand-title span { direction:ltr; unicode-bidi:isolate; }
.brand-caption { color:rgba(233,240,246,.85); }
.page-heading-row { background:var(--glass-bg-soft); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border-bottom:1px solid var(--glass-border); padding:12px 30px; display:flex; justify-content:space-between; align-items:center; gap:15px; }
.page-title { font-size:23px; color:#f4f8fb; text-shadow:0 1px 10px rgba(2,22,26,.45); }
.top-bar-actions { display:flex; align-items:center; gap:10px; }
.language-toggle { border:1px solid var(--glass-border); background:rgba(255,255,255,.07); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--primary); border-radius:6px; padding:7px 12px; cursor:pointer; font-weight:600; }
.language-toggle:hover { border-color:var(--text-gold); color:var(--text-gold); background:rgba(255,255,255,.14); }
.logout-link { background:rgba(255,255,255,.07) !important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.logout-link:hover { background:rgba(255,255,255,.14) !important; }

.content-wrapper { padding:25px 30px; flex:1; }
.app-footer { text-align:center; padding:15px; color:rgba(233,240,246,.9); font-size:13px; background:rgba(4,20,24,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid var(--glass-dark-border); }

.flash-messages { margin-bottom:20px; }
.alert { padding:12px 15px; border-radius:10px; margin-bottom:10px; display:flex; align-items:center; gap:10px; position:relative; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.alert-success { background:rgba(46,204,113,.18); color:#c9f2d3; border:1px solid rgba(46,204,113,.45); }
.alert-error { background:rgba(166,69,16,.20); color:#ffd9bd; border:1px solid rgba(166,69,16,.5); }
.alert-close { position:absolute; left:10px; right:auto; background:none; border:none; font-size:20px; cursor:pointer; color:inherit; }
html[dir="ltr"] .alert-close { right:10px; left:auto; }

/* ---------- Cards: the glass surfaces ---------- */
.profile-hero { background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:14px; padding:25px; display:flex; gap:25px; align-items:center; margin-bottom:25px; box-shadow:var(--glass-shadow); }
/* Portrait always on the LEFT, text on the RIGHT (left-to-right reading),
   in both Urdu (row-reverse flips RTL's default mirroring) and English. */
html[dir="rtl"] .profile-hero { flex-direction:row-reverse; text-align:right; }
.profile-portrait { width:190px; height:260px; object-fit:cover; object-position:center top; transform:scaleX(-1); border-radius:0 !important; border:4px solid transparent; border-image:linear-gradient(135deg,#fceabb 0%,#e9c860 22%,#d4af37 40%,#a0781e 50%,#d4af37 60%,#e9c860 78%,#fceabb 100%) 1; box-shadow:0 0 16px rgba(240,200,90,.55),0 0 42px rgba(212,175,55,.28),0 0 90px rgba(212,175,55,.14),0 4px 14px rgba(0,0,0,.4); flex:none; }
.profile-main { flex:1; }
.profile-kicker { color:var(--text-gold); font-weight:700; font-size:13px; }
.profile-main h2 { color:var(--primary); font-size:25px; margin:2px 0 4px; }
.profile-developer { color:#d6dce8; margin-bottom:2px; }
.profile-role { color:var(--secondary); font-weight:700; margin-bottom:6px; }
.profile-summary { color:#c3ccdc; font-size:14px; max-width:1050px; }
.profile-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }

/* ---- LinkedIn posts in the developer card ---- */
.linkedin-posts { margin-top:14px; }
.linkedin-posts-title {
  font-family:var(--heading-font); font-size:15px; color:var(--accent-2, #8FB8FF);
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.linkedin-posts-title .fa-linkedin { color:#0a66c2; }
.linkedin-embeds { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:12px; }
.linkedin-embed-wrap {
  position:relative; border-radius:12px; overflow:hidden;
  background:rgba(255,255,255,.95); border:1px solid rgba(143,184,255,.25);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.linkedin-embed-wrap iframe { display:block; border:0; width:100%; }
.li-remove-form { position:absolute; top:6px; left:6px; z-index:2; margin:0; }
.li-remove-btn {
  width:24px; height:24px; border-radius:50%; border:1px solid rgba(0,0,0,.15);
  background:rgba(255,255,255,.92); color:#a33; font-size:12px; line-height:1;
  cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.li-remove-btn:hover { background:#ffd9d9; }
.li-manage { margin-top:12px; font-size:13px; }
.li-manage summary {
  cursor:pointer; color:var(--secondary, #C9D6EE); display:flex; align-items:center; gap:8px;
  user-select:none; padding:6px 0;
}
.li-manage summary .fa-linkedin { color:#0a66c2; }
.li-add-form { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.li-add-form .form-input { flex:1; min-width:220px; }
.li-hint { color:var(--secondary, #C9D6EE); font-size:12px; margin-top:6px; opacity:.85; }
/* Hero as a 3-zone grid when the LinkedIn zone exists: portrait | text | posts.
   Grid auto-flips with document direction, so Urdu mirrors it for free. */
.profile-hero.has-linkedin { display:grid; grid-template-columns:auto minmax(0,1fr) 360px; align-items:center; }
.profile-hero.has-linkedin .profile-main h2 { font-size:22px; }
.profile-hero.has-linkedin .profile-summary { font-size:13.5px; }
.profile-linkedin { min-width:0; display:flex; flex-direction:column; gap:10px; }
.profile-hero.has-linkedin .profile-linkedin { max-height:560px; overflow-y:auto; }
.profile-linkedin .linkedin-embeds { grid-template-columns:1fr; }
.li-empty-note { color:var(--secondary, #C9D6EE); font-size:12.5px; opacity:.85; margin:4px 0 0; }
/* Reflow once the row gets tight: everything stacks, embeds spread full width */
@media (max-width:1200px){
  .profile-hero.has-linkedin { grid-template-columns:1fr; align-items:stretch; }
  .profile-hero.has-linkedin .profile-portrait { margin-inline:auto; }
  .profile-hero.has-linkedin .profile-linkedin { max-height:none; overflow:visible; }
  .profile-linkedin .linkedin-embeds { grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
}
@media (max-width:640px){
  .profile-linkedin .linkedin-embeds { grid-template-columns:1fr; }
}
/* Social icon-button chips: brand-colored icon disc + label on a glass pill */
.social-btn { display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 6px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--glass-border); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--primary); font-size:13px; text-decoration:none; transition:all .2s; }
.social-btn .social-icon { width:26px; height:26px; border-radius:50%; background:var(--brand, var(--accent)); color:white; display:inline-flex; align-items:center; justify-content:center; font-size:13px; flex:none; }
.social-btn .social-label { line-height:1.2; white-space:nowrap; }
.social-btn:hover { transform:translateY(-2px); background:rgba(255,255,255,.13); border-color:var(--brand, var(--accent)); box-shadow:0 4px 14px color-mix(in srgb, var(--brand, var(--accent)) 45%, transparent); color:var(--primary); }
html[dir="rtl"] .social-btn { padding:5px 6px 5px 12px; }
.profile-location { margin-top:10px; color:#b9c2d4; font-size:13px; }

.card { background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:14px; box-shadow:var(--glass-shadow); padding:20px; margin-bottom:20px; overflow-x:auto; }

.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:15px; margin-bottom:25px; }
.stat-card { background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:14px; padding:20px; display:flex; align-items:center; gap:15px; box-shadow:var(--glass-shadow); border-right:4px solid var(--accent); }
.stat-card.success { border-right-color:var(--success); } .stat-card.warning { border-right-color:var(--warning); } .stat-card.danger { border-right-color:var(--danger); } .stat-card.info { border-right-color:var(--info); }
.stat-icon { width:50px; height:50px; border-radius:12px; background:rgba(242,192,99,.15); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--text-gold); }
.stat-card.success .stat-icon { background:rgba(46,204,113,.15); color:var(--success); } .stat-card.warning .stat-icon { background:rgba(243,156,18,.15); color:var(--warning); } .stat-card.danger .stat-icon { background:rgba(166,69,16,.20); color:var(--danger); } .stat-card.info .stat-icon { background:rgba(26,188,156,.15); color:var(--info); }
.stat-info h3 { font-size:24px; color:var(--primary); } .stat-info p { color:#b9c2d4; font-size:14px; }

.dashboard-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(400px,1fr)); gap:20px; margin-bottom:20px; }
.dashboard-card { background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:14px; box-shadow:var(--glass-shadow); overflow:hidden; }
.chart-card .card-body { height:300px; padding:20px; }
.card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; padding:18px 20px 0; }
.card-body { padding:0 20px 20px; }
.card-header h3 { font-size:16px; color:var(--primary); }

/* Tables sit on the glass; header band stays solid-ish for contrast */
.data-table { width:100%; border-collapse:collapse; direction:rtl; } .data-table th { background:rgba(4,20,24,.88); color:var(--primary); padding:12px; text-align:right; font-weight:500; } .data-table td { padding:12px; border-bottom:1px solid rgba(255,255,255,.08); text-align:right; } .data-table tr:hover { background:rgba(255,255,255,.05); }
html[dir="ltr"] .data-table { direction:ltr; } html[dir="ltr"] .data-table th, html[dir="ltr"] .data-table td { text-align:left; }
.data-table.compact th,.data-table.compact td { padding:8px 12px; font-size:14px; }
.badge { background:rgba(255,255,255,.08); border:1px solid var(--glass-border); padding:4px 10px; border-radius:12px; font-size:12px; font-weight:500; color:#dbe2ee; } .badge-lg { font-size:14px; padding:6px 14px; }
.status-badge { padding:4px 10px; border-radius:12px; font-size:12px; font-weight:500; white-space:nowrap; }
.status-paid,.status-completed { background:rgba(67,163,92,.22); color:#c2ecd0; } .status-unpaid { background:rgba(166,69,16,.25); color:#ffd2b3; } .status-partial,.status-pending { background:rgba(240,185,92,.2); color:#ffe4b3; } .status-in-progress { background:rgba(95,196,201,.2); color:#d3f1f3; } .status-cancelled { background:rgba(149,165,166,.22); color:#cfd8e2; }
.priority-urgent { background:rgba(166,69,16,.25); color:#ffd2b3; font-weight:bold; } .priority-high { background:rgba(240,185,92,.2); color:#ffe4b3; }

.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; border:none; cursor:pointer; font-size:14px; text-decoration:none; transition:all .2s; box-shadow:0 2px 10px rgba(15,35,60,.15); }
.btn-primary { background:linear-gradient(135deg,#2F6BFF,#1E4FC4); color:white; } .btn-success { background:linear-gradient(135deg,#2FAE7E,#1D7C57); color:white; } .btn-warning { background:linear-gradient(135deg,#E0A64F,#B07A2E); color:white; } .btn-danger { background:linear-gradient(135deg,#E25C4A,#9C3226); color:white; } .btn-info { background:linear-gradient(135deg,#3FA8C9,#23748F); color:white; }
.btn-outline { background:rgba(255,255,255,.07); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--primary); border:1px solid var(--glass-border); }
.btn-sm { padding:5px 10px; font-size:12px; }
.btn:hover { opacity:.92; transform:translateY(-1px); box-shadow:0 4px 16px rgba(15,35,60,.25); }

.form-card { max-width:900px; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-bottom:15px; } .form-group { display:flex; flex-direction:column; gap:5px; } .form-group label { font-weight:600; font-size:14px; color:var(--secondary); }
.form-input,.form-select { padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:14px; font-family:inherit; background:rgba(8,16,34,.62); color:var(--primary); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .form-input:focus,.form-select:focus { outline:none; border-color:var(--wared-red); background:rgba(8,16,34,.88); box-shadow:0 0 0 3px rgba(47,107,255,.30); } textarea.form-input { resize:vertical; }
.form-actions { display:flex; gap:10px; margin-top:20px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); }
.page-actions { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:10px; } .search-form { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.detail-header { background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:14px; padding:25px; display:grid; grid-template-columns:2fr 1fr auto; gap:20px; align-items:start; margin-bottom:20px; box-shadow:var(--glass-shadow); } .detail-info h2 { margin-bottom:10px; color:var(--primary); } .detail-info p { margin:5px 0; color:#c3ccdc; font-size:14px; } .detail-stats { display:flex; gap:20px; } .mini-stat { text-align:center; padding:10px; background:rgba(255,255,255,.06); border:1px solid var(--glass-border); border-radius:8px; } .mini-stat-value { display:block; font-size:20px; font-weight:bold; color:var(--primary); } .mini-stat-label { font-size:12px; color:#b9c2d4; } .detail-actions { display:flex; gap:10px; flex-direction:column; }

.tabs { background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:14px; box-shadow:var(--glass-shadow); overflow:hidden; } .tab-nav { display:flex; border-bottom:1px solid var(--line); background:rgba(255,255,255,.04); } .tab-btn { padding:12px 20px; border:none; background:none; cursor:pointer; font-weight:500; color:#c3ccdc; border-bottom:2px solid transparent; } .tab-btn.active { color:var(--text-link); border-bottom-color:var(--accent); background:rgba(255,255,255,.08); } .tab-content { display:none; padding:20px; } .tab-content.active { display:block; }

.invoice-header-actions { display:flex; gap:10px; margin-bottom:20px; justify-content:flex-start; } .invoice-meta { display:flex; justify-content:space-between; margin-bottom:20px; padding-bottom:20px; border-bottom:2px solid var(--primary); } .invoice-meta-right { text-align:left; } .invoice-items { margin:20px 0; } .invoice-totals { width:300px; margin-right:auto; margin-top:20px; } html[dir="ltr"] .invoice-totals { margin-left:auto; margin-right:0; } .total-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.12); } .total-row.grand { font-size:18px; font-weight:bold; color:var(--primary); border-top:2px solid var(--primary); border-bottom:none; margin-top:5px; } .total-row.balance { color:var(--text-balance); font-weight:bold; } .payment-form-card { background:var(--glass-bg-soft); border:1px solid var(--glass-border); }

.services-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:15px; } .service-card { background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:14px; padding:20px; box-shadow:var(--glass-shadow); display:flex; flex-direction:column; } .service-header { display:flex; justify-content:space-between; align-items:start; margin-bottom:10px; } .service-header h4 { color:var(--primary); margin:0; } .service-desc { color:#c3ccdc; font-size:14px; flex:1; margin-bottom:15px; } .service-footer { display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(255,255,255,.12); padding-top:15px; } .service-price { font-weight:bold; color:var(--success); font-size:16px; }

/* Modal: frosted overlay + strong glass panel */
.modal { display:none; position:fixed; z-index:2000; right:0; top:0; width:100%; height:100%; background:rgba(3,18,22,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } html[dir="ltr"] .modal { left:0; right:auto; } .modal-content { background:var(--glass-bg-strong); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border:1px solid var(--glass-border); margin:10% auto; padding:25px; border-radius:14px; width:90%; max-width:500px; position:relative; box-shadow:var(--glass-shadow); max-height:80vh; overflow-y:auto; } .modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; } .modal-close { background:none; border:none; font-size:24px; cursor:pointer; color:var(--primary); }

.invoice-item-row { display:grid; grid-template-columns:2fr .5fr 1fr auto; gap:10px; align-items:center; margin-bottom:10px; } .section-title { margin:25px 0 15px; color:var(--primary); font-size:18px; border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:10px; } .invoice-summary { background:var(--glass-bg-soft); border:1px solid var(--glass-border); padding:20px; border-radius:12px; margin:20px 0; max-width:400px; margin-right:auto; } html[dir="ltr"] .invoice-summary { margin-left:auto; margin-right:0; } .summary-row { display:flex; justify-content:space-between; padding:8px 0; } .summary-row.total { font-size:20px; font-weight:bold; color:var(--primary); border-top:2px solid var(--primary); margin-top:10px; }

.actions { display:flex; gap:5px; } .inline-form { display:inline; } .text-danger { color:var(--text-balance); font-weight:500; } .text-success { color:var(--success); font-weight:500; } .empty-state { text-align:center; padding:40px; color:#b9c2d4; font-style:italic; }

/* Fallback: no backdrop-filter support → solid dark surfaces */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
    .sidebar { background:rgba(3,18,22,.98); }
    .card, .stat-card, .dashboard-card, .detail-header, .tabs, .service-card,
    .profile-hero, .top-bar, .page-heading-row { background:#0A1730; }
    .modal-content { background:#0E1E3C; }
    .modal { background:rgba(4,8,18,.75); }
}

/* ==================== RESPONSIVE ==================== */

/* Tablets and small desktops */
@media (max-width: 1000px) {
    .stats-grid { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
    .dashboard-row { grid-template-columns:1fr; }
    .services-grid { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
    .detail-header { grid-template-columns:1fr 1fr; }
    .detail-actions { flex-direction:row; grid-column:1 / -1; }
    .profile-summary { max-width:none; }
}

/* Mobile: off-canvas sidebar */
@media (max-width: 800px) {
    .sidebar { transform:translateX(100%); z-index:1500; box-shadow:none; }
    html[dir="ltr"] .sidebar { transform:translateX(-100%); }
    /* .open must out-rank the html[dir] closed rules above, or the LTR
       drawer can never slide in. */
    .sidebar.open { transform:translateX(0) !important; box-shadow:-12px 0 40px rgba(10,25,45,.5); }
    html[dir="ltr"] .sidebar.open { box-shadow:12px 0 40px rgba(10,25,45,.5); }
    .sidebar-toggle { display:block; }
    .sidebar-open-btn { display:inline-flex; }
    .main-content { margin-right:0; margin-left:0; }
    .top-bar { padding:10px 15px; gap:8px; }
    .top-bar-actions { flex-wrap:wrap; }
    /* .top-bar-qualified to out-rank branding.css (loaded after style.css) */
    .top-bar .wems-brand { display:flex; gap:10px; align-items:center; flex:1 1 100%; order:-1; }
    .top-bar .brand-logo img { width:auto; height:56px; }
    .top-bar .brand-title { font-size:20px; }
    .top-bar .brand-caption { font-size:11px; }
    .content-wrapper { padding:15px; }
    .detail-header { grid-template-columns:1fr; }
    .form-row { grid-template-columns:1fr; }
    .profile-hero, html[dir="rtl"] .profile-hero { flex-direction:column; text-align:center; }
    .invoice-meta { flex-direction:column; gap:15px; }
    .chart-card .card-body { height:240px; }
    .invoice-totals, html[dir="ltr"] .invoice-totals { width:100%; margin-right:0; margin-left:0; }
    .invoice-summary, html[dir="ltr"] .invoice-summary { max-width:none; margin-right:0; margin-left:0; }
    .invoice-item-row { grid-template-columns:1fr 1fr; }

/* Service picker dropdown on invoice item rows */
.item-desc-wrap { position:relative; display:flex; align-items:center; gap:6px; }
.item-desc-wrap input[name="item_description[]"] { flex:1; }
.service-pick-btn { padding:8px 11px; font-size:13px; line-height:1; }
.service-dropdown { display:none; position:absolute; top:calc(100% + 4px); right:0; z-index:60; min-width:280px; max-height:300px; overflow-y:auto; background:var(--glass-bg-strong); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border:1px solid var(--glass-border); border-radius:10px; box-shadow:0 14px 40px rgba(2,6,16,.6); padding:6px; }
.service-option { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:8px 10px; border-radius:7px; cursor:pointer; font-size:13px; color:var(--primary); }
.service-option:hover { background:rgba(47,107,255,.18); }
.service-option .service-price { color:var(--gold); font-weight:600; white-space:nowrap; direction:ltr; }
.service-empty { padding:12px; font-size:13px; color:var(--secondary); }
    .invoice-item-row .form-group:first-child { grid-column:1 / -1; }
    .page-actions { flex-direction:column; align-items:stretch; }
    .page-actions .actions { justify-content:flex-start; flex-wrap:wrap; }
    .detail-actions { flex-direction:column; }
    .form-actions { flex-wrap:wrap; }
}

/* ==================== USERS / AUTH PAGES ==================== */
.add-user-card { width:100%; padding:20px 25px; }
.add-user-form { display:grid; grid-template-columns:2fr 1.2fr 1.4fr auto auto; gap:10px; align-items:center; }
@media (max-width:900px){ .add-user-form { grid-template-columns:1fr 1fr; } }
.row-actions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.inline-form { display:inline-flex; gap:4px; align-items:center; }
.inline-form .form-input { width:150px; padding:5px 8px; font-size:12px; }
.mono { font-family:Consolas,monospace; direction:ltr; }
.you-chip { font-size:11px; color:var(--gold); border:1px solid rgba(242,192,99,.4); border-radius:10px; padding:1px 7px; }
.badge { padding:2px 10px; border-radius:12px; font-size:12px; }
.badge-ok { background:rgba(94,224,172,.15); color:#5EE0AC; }
.badge-off { background:rgba(255,156,143,.15); color:#FF9C8F; }
.badge-warn { background:rgba(245,201,126,.15); color:#F5C97E; }
.badge-info { background:rgba(143,184,255,.15); color:#8FB8FF; }
.hint-card { margin-top:20px; padding:15px 20px; }
.hint-card a { color:var(--text-link); }
.user-chip { display:inline-flex; align-items:center; gap:8px; padding:3px 12px 3px 4px; border:1px solid var(--glass-border); border-radius:20px; background:rgba(255,255,255,.05); flex:none; }
html[dir="ltr"] .user-chip { padding:3px 4px 3px 12px; }
.user-chip img { width:28px; height:28px; border-radius:50%; object-fit:cover; border:1px solid rgba(242,192,99,.4); }
.user-chip i { font-size:24px; color:var(--text-link); }
.user-chip-heading img { width:34px; height:34px; }
.user-chip-heading i { font-size:28px; }
.user-chip-heading .whoami { font-size:14px; color:var(--primary); }
.whoami { color:var(--secondary); font-size:13px; white-space:nowrap; }
@media (max-width:640px){ .user-chip .whoami { display:none; } .user-chip { padding:3px; } }
.pw-form { max-width:460px; }

/* ==================== USER PROFILE PAGE ==================== */
.profile-page { max-width: 900px; }
.profile-actions-row { display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.profile-showcase { padding:30px; }
.showcase-top { display:flex; gap:25px; align-items:flex-start; flex-wrap:wrap; }
.showcase-photo img { width:150px; height:150px; object-fit:cover; border-radius:14px; border:3px solid var(--gold); box-shadow:0 0 16px rgba(242,192,99,.35); }
.photo-placeholder { width:150px; height:150px; border-radius:14px; border:2px dashed var(--glass-border); display:flex; align-items:center; justify-content:center; font-size:48px; color:var(--secondary); opacity:.6; }
.showcase-id { flex:1; min-width:260px; }
.showcase-name { color:var(--primary); font-size:28px; margin-bottom:8px; }
.showcase-summary { color:var(--secondary); font-size:15px; margin-bottom:12px; }
.showcase-meta { display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:#b9c2d4; }
.showcase-meta i { color:var(--text-link); margin-left:6px; }
.showcase-section { margin-top:25px; padding-top:20px; border-top:1px solid var(--line); }
.section-title { color:var(--primary); font-size:18px; margin-bottom:12px; }
.section-title i { color:var(--gold); margin-left:8px; }
.skills-cloud { display:flex; flex-wrap:wrap; gap:8px; }
.skill-chip { background:rgba(47,107,255,.14); border:1px solid rgba(47,107,255,.35); color:var(--text-link); padding:5px 12px; border-radius:20px; font-size:13px; }
.socials-list { display:flex; flex-wrap:wrap; gap:8px; }
.social-chip { background:rgba(255,255,255,.06); border:1px solid var(--glass-border); color:var(--secondary); padding:5px 12px; border-radius:20px; font-size:13px; text-decoration:none; }
.social-chip:hover { border-color:var(--accent); color:var(--text-link); }
.cv-link { color:var(--text-link); text-decoration:none; font-size:14px; }
.cv-link i { color:var(--danger); margin-left:6px; }
.muted { color:#8fa0bd; font-size:13px; }
.skills-picker { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.skill-group { border:1px solid var(--line); border-radius:10px; padding:12px; }
.skill-group legend { color:var(--gold); font-size:13px; padding:0 6px; }
.skill-option { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--secondary); padding:3px 0; cursor:pointer; }
.skill-option input { accent-color:var(--accent); }
.socials-editor { display:flex; flex-direction:column; gap:8px; }
@media (max-width:800px){ .showcase-top { flex-direction:column; align-items:center; text-align:center; } .showcase-meta { justify-content:center; } }

/* Small phones */
@media (max-width: 480px) {
    .top-bar { padding:8px 10px; }
    .content-wrapper { padding:10px; }
    .page-heading-row { padding:4px 10px 8px; }
    .brand-logo img { width:52px; height:52px; }
    .top-bar .brand-logo img { width:auto; height:52px; }
    .top-bar .brand-title { font-size:18px; }
    .top-bar .brand-caption { display:none; }
    .top-bar .brand-logo-left { display:none; }
    .stats-grid { grid-template-columns:1fr; }
    .card { padding:14px; }
    .data-table { font-size:13px; }
    .data-table th, .data-table td { padding:8px 6px; }
    .btn { padding:9px 14px; }
    .btn-sm { padding:7px 12px; }
    .invoice-item-row { grid-template-columns:1fr; }
    .modal-content { margin:6% auto; padding:18px; }
    .profile-portrait { width:120px; height:165px; }
    .card-header { padding:14px 14px 0; flex-wrap:wrap; }
    .card-body { padding:0 14px 14px; }
    .login-card { padding:24px 18px; }
    .sidebar-open-btn { width:34px; height:34px; font-size:14px; }
    .logout-link { padding:7px 10px; }
    .social-btn { font-size:12px; padding:4px 10px 4px 5px; }
    .social-btn .social-icon { width:23px; height:23px; font-size:12px; }
}


.visitor-counter{display:inline-flex;align-items:center;justify-content:center;gap:7px;color:rgba(233,240,246,.82);font-size:12px;margin-top:3px}
.visitor-counter strong{font-variant-numeric:tabular-nums}