/**
 * FYN Service Portal — Theme System v3
 * Matches the FynSupportingTicket.php prototype design exactly.
 */

/* ── Fonts ─────────────────────────────────────────────────── */
body,input,select,textarea,button { font-family:'Inter',sans-serif!important; }

/* ── Light ─────────────────────────────────────────────────── */
:root,[data-theme="light"] {
  --fyn-bg:#f0f3f8; --fyn-surface:#fff; --fyn-surface2:#f8fafc; --fyn-border:#e2e8f0;
  --fyn-text:#0f1c2e; --fyn-text-2:#64748b; --fyn-text-muted:#94a3b8;
  --fyn-nav-bg:#0d2233; --fyn-topbar-bg:#fff; --fyn-topbar-border:#e2e8f0;
  --fyn-input-bg:#f0f3f8; --fyn-input-border:#cbd5e1;
  --fyn-shadow:0 1px 3px rgba(0,0,0,.05),0 4px 16px rgba(0,0,0,.06);
  --fyn-shadow-lg:0 8px 32px rgba(0,0,0,.14);
  --fyn-radius:14px; --fyn-radius-sm:9px;
  /* Stat colours */
  --fyn-total-bg:#eff6ff;   --fyn-total-color:#1d4ed8;
  --fyn-pending-bg:#fff7ed; --fyn-pending-color:#c2410c;
  --fyn-closed-bg:#f0fdf4;  --fyn-closed-color:#15803d;
  --fyn-open-bg:#fff7ed;    --fyn-open-color:#c2410c;
  /* Product accents */
  --fyn-gst-base:#0ea5e9;   --fyn-gst-light:#f0f9ff;  --fyn-gst-glow:rgba(14,165,233,.10);
  --fyn-one-base:#e11d48;   --fyn-one-light:#fff1f2;  --fyn-one-glow:rgba(225,29,72,.10);
  --fyn-gw-base:#f59e0b;    --fyn-gw-light:#fffbeb;   --fyn-gw-glow:rgba(245,158,11,.10);
  --fyn-ksa-base:#8b5cf6;   --fyn-ksa-light:#f5f3ff;  --fyn-ksa-glow:rgba(139,92,246,.10);
  --fyn-uae-base:#10b981;   --fyn-uae-light:#ecfdf5;  --fyn-uae-glow:rgba(16,185,129,.10);
  /* Priority */
  --fyn-critical-bg:#fff1f2; --fyn-critical-color:#be123c;
  --fyn-high-bg:#fff7ed;     --fyn-high-color:#c2410c;
  --fyn-medium-bg:#fefce8;   --fyn-medium-color:#a16207;
  --fyn-low-bg:#f0fdf4;      --fyn-low-color:#15803d;
}

/* ── Dark ──────────────────────────────────────────────────── */
[data-theme="dark"] {
  --fyn-bg:#0d1117; --fyn-surface:#161b22; --fyn-surface2:#1c2128; --fyn-border:#30363d;
  --fyn-text:#e6edf3; --fyn-text-2:#8b949e; --fyn-text-muted:#484f58;
  --fyn-nav-bg:#010409; --fyn-topbar-bg:#161b22; --fyn-topbar-border:#30363d;
  --fyn-input-bg:#0d1117; --fyn-input-border:#30363d;
  --fyn-shadow:0 1px 3px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.5);
  --fyn-shadow-lg:0 8px 32px rgba(0,0,0,.6);
  --fyn-total-bg:#1c2a4a;   --fyn-total-color:#60a5fa;
  --fyn-pending-bg:#2d1b0e; --fyn-pending-color:#fb923c;
  --fyn-closed-bg:#0d2818;  --fyn-closed-color:#4ade80;
  --fyn-open-bg:#2d1b0e;    --fyn-open-color:#fb923c;
  --fyn-gst-light:#0c2233;  --fyn-gst-glow:rgba(14,165,233,.18);
  --fyn-one-light:#2d0a14;  --fyn-one-glow:rgba(225,29,72,.18);
  --fyn-gw-light:#2d1f00;   --fyn-gw-glow:rgba(245,158,11,.18);
  --fyn-ksa-light:#1e1a2e;  --fyn-ksa-glow:rgba(139,92,246,.18);
  --fyn-uae-light:#0a1f17;  --fyn-uae-glow:rgba(16,185,129,.18);
  --fyn-critical-bg:#2d0a14; --fyn-critical-color:#fb7185;
  --fyn-high-bg:#2d1b0e;     --fyn-high-color:#fb923c;
  --fyn-medium-bg:#2d2200;   --fyn-medium-color:#fbbf24;
  --fyn-low-bg:#0d2818;      --fyn-low-color:#4ade80;
}

/* ── Transitions ───────────────────────────────────────────── */
body,.fyn-topbar,.fyn-nav,.fyn-module-card,.stat-item,.fyn-panel-wrap,
.fyn-user-pill,.fyn-user-dropdown,.fyn-notif-panel,.fyn-settings-panel,
input,select,textarea,button,.fyn-ticket-table th,.fyn-ticket-table td {
  transition:background .28s,color .28s,border-color .28s;
}
.stat-bar-fill { transition:width 1s cubic-bezier(.4,0,.2,1)!important; }

/* ── Dark: global overrides ────────────────────────────────── */
[data-theme="dark"] body                   { background:var(--fyn-bg)!important; color:var(--fyn-text)!important; }
[data-theme="dark"] .card                  { background:var(--fyn-surface)!important; border-color:var(--fyn-border)!important; color:var(--fyn-text)!important; }
[data-theme="dark"] .table                 { color:var(--fyn-text)!important; }
[data-theme="dark"] .table th              { background:var(--fyn-surface2)!important; color:var(--fyn-text-muted)!important; border-color:var(--fyn-border)!important; }
[data-theme="dark"] .table td              { border-color:var(--fyn-border)!important; }
[data-theme="dark"] .table-hover tbody tr:hover { background:rgba(255,255,255,.04)!important; }
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea               { background:var(--fyn-input-bg)!important; color:var(--fyn-text)!important; border-color:var(--fyn-input-border)!important; }
[data-theme="dark"] .form-control          { background:var(--fyn-input-bg)!important; color:var(--fyn-text)!important; border-color:var(--fyn-input-border)!important; }
[data-theme="dark"] .modal-content        { background:var(--fyn-surface)!important; color:var(--fyn-text)!important; border-color:var(--fyn-border)!important; }
[data-theme="dark"] .modal-header         { border-color:var(--fyn-border)!important; background:var(--fyn-surface2)!important; }
[data-theme="dark"] .modal-footer         { border-color:var(--fyn-border)!important; background:var(--fyn-surface2)!important; }
[data-theme="dark"] .dropdown-menu        { background:var(--fyn-surface)!important; border-color:var(--fyn-border)!important; }
[data-theme="dark"] .dropdown-item        { color:var(--fyn-text-2)!important; }
[data-theme="dark"] .dropdown-item:hover  { background:var(--fyn-surface2)!important; color:var(--fyn-text)!important; }
[data-theme="dark"] .dataTables_wrapper   { color:var(--fyn-text)!important; }
[data-theme="dark"] .dataTables_length select,
[data-theme="dark"] .dataTables_filter input { background:var(--fyn-input-bg)!important; color:var(--fyn-text)!important; border-color:var(--fyn-border)!important; }
[data-theme="dark"] .paginate_button      { color:var(--fyn-text-2)!important; }
[data-theme="dark"] .paginate_button.current { background:#0ea5e9!important; color:#fff!important; }

/* ══════════ TOPBAR ══════════════════════════════════════════ */
.fyn-topbar {
  background:var(--fyn-topbar-bg);
  border-bottom:1px solid var(--fyn-topbar-border);
  padding:0 24px; height:60px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:1000;
  box-shadow:0 1px 6px rgba(0,0,0,.07); gap:14px;
}
.fyn-logo {
  display:flex; align-items:center; gap:10px;
  white-space:nowrap; flex-shrink:0; text-decoration:none;
}
.fyn-logo:hover { text-decoration:none; opacity:.9; }
.fyn-logo-text {
  font-family:'Space Grotesk', 'Inter', sans-serif;
  font-size:17px; font-weight:700; letter-spacing:-.02em;
  color:var(--fyn-text);
}
.fyn-logo-accent {
  font-weight:400; color:#e11d48; letter-spacing:-.01em;
}
.fyn-logo-icon {
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(135deg,#e11d48,#0ea5e9);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.fyn-search-wrap { flex:1; max-width:420px; position:relative; }
.fyn-search-input {
  width:100%; border:1.5px solid var(--fyn-border);
  border-radius:99px; padding:8px 16px 8px 38px;
  font-size:13px; color:var(--fyn-text); background:var(--fyn-input-bg); outline:none;
  transition:border-color .18s,box-shadow .18s;
}
.fyn-search-input::placeholder { color:var(--fyn-text-muted); }
.fyn-search-input:focus { border-color:#e11d48; box-shadow:0 0 0 3px rgba(225,29,72,.1); background:var(--fyn-surface); }
.fyn-search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--fyn-text-muted); pointer-events:none; }
.fyn-search-results {
  display:none; position:absolute; top:calc(100%+6px); left:0; right:0;
  background:var(--fyn-surface); border:1px solid var(--fyn-border);
  border-radius:12px; box-shadow:var(--fyn-shadow-lg); z-index:500; overflow:hidden;
}
.fyn-search-results.open { display:block; }
.fyn-sri { padding:9px 14px; font-size:13px; cursor:pointer; display:flex; align-items:center; gap:10px; transition:background .1s; border-bottom:1px solid var(--fyn-border); }
.fyn-sri:last-child { border-bottom:none; }
.fyn-sri:hover { background:var(--fyn-surface2); }
.fyn-sri-id { font-family:'DM Mono',monospace; font-size:10.5px; color:#0ea5e9; background:#f0f9ff; border:1px solid #bae6fd; padding:2px 7px; border-radius:5px; white-space:nowrap; flex-shrink:0; }
[data-theme="dark"] .fyn-sri-id { background:#0c2233; border-color:#1e3a5f; }
.fyn-sri-title { flex:1; font-weight:500; font-size:12.5px; }
.fyn-sri-mod { font-size:11px; color:var(--fyn-text-muted); }
.fyn-topbar-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.fyn-icon-btn {
  width:36px; height:36px; border-radius:50%;
  border:1.5px solid var(--fyn-border); background:var(--fyn-input-bg);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative; color:var(--fyn-text-2); transition:all .15s; flex-shrink:0;
}
.fyn-icon-btn:hover { background:var(--fyn-surface2); color:var(--fyn-text); }
.fyn-notif-dot { position:absolute; top:5px; right:5px; width:8px; height:8px; border-radius:50%; background:#ef4444; border:2px solid var(--fyn-topbar-bg); }

/* Panel wrapper (shared for notif/settings/user) */
.fyn-panel-wrap { position:relative; }
@keyframes fynDropIn { from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);} }

/* Notifications panel */
.fyn-notif-panel {
  display:none; position:absolute; top:calc(100%+10px); right:0;
  width:320px; background:var(--fyn-surface); border:1px solid var(--fyn-border);
  border-radius:14px; box-shadow:var(--fyn-shadow-lg); z-index:500; overflow:hidden;
  animation:fynDropIn .18s ease;
}
.fyn-panel-wrap.open .fyn-notif-panel { display:block; }
.fyn-notif-head { padding:12px 16px; border-bottom:1px solid var(--fyn-border); display:flex; align-items:center; justify-content:space-between; }
.fyn-notif-head-title { font-size:13px; font-weight:700; }
.fyn-notif-ctrl { font-size:11.5px; cursor:pointer; font-weight:600; }
.fyn-notif-item { padding:12px 16px 12px 24px; display:flex; gap:10px; align-items:flex-start; border-bottom:1px solid var(--fyn-border); cursor:pointer; transition:background .1s; position:relative; }
.fyn-notif-item:last-child { border-bottom:none; }
.fyn-notif-item:hover { background:var(--fyn-surface2); }
.fyn-notif-item.unread::before { content:''; position:absolute; left:9px; top:50%; transform:translateY(-50%); width:6px; height:6px; border-radius:50%; background:#e11d48; }
.fyn-notif-icon { width:32px; height:32px; border-radius:8px; background:var(--fyn-surface2); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.fyn-notif-body { flex:1; }
.fyn-notif-title { font-weight:600; font-size:12.5px; margin-bottom:2px; }
.fyn-notif-desc { font-size:11.5px; color:var(--fyn-text-2); line-height:1.4; }
.fyn-notif-time { font-size:10.5px; color:var(--fyn-text-muted); margin-top:3px; }
.fyn-notif-footer { padding:10px 16px; text-align:center; border-top:1px solid var(--fyn-border); }
.fyn-notif-footer a { font-size:12px; font-weight:600; color:#0ea5e9; text-decoration:none; }
.fyn-notif-empty { padding:24px; text-align:center; font-size:12.5px; color:var(--fyn-text-muted); }

/* Settings panel */
.fyn-settings-panel {
  display:none; position:absolute; top:calc(100%+10px); right:0;
  width:260px; background:var(--fyn-surface); border:1px solid var(--fyn-border);
  border-radius:14px; box-shadow:var(--fyn-shadow-lg); z-index:500; overflow:hidden;
  animation:fynDropIn .18s ease;
}
.fyn-panel-wrap.open .fyn-settings-panel { display:block; }
.fyn-settings-head { padding:12px 16px; border-bottom:1px solid var(--fyn-border); font-size:13px; font-weight:700; }
.fyn-settings-section { padding:12px 16px; border-bottom:1px solid var(--fyn-border); }
.fyn-settings-section:last-child { border-bottom:none; }
.fyn-settings-label { font-size:10.5px; font-weight:700; color:var(--fyn-text-muted); letter-spacing:.07em; text-transform:uppercase; margin-bottom:10px; }
.fyn-theme-options { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.fyn-theme-opt { padding:9px 8px; border-radius:9px; border:1.5px solid var(--fyn-border); text-align:center; cursor:pointer; transition:all .15s; font-size:12px; font-weight:600; color:var(--fyn-text-2); background:var(--fyn-surface); }
.fyn-theme-opt:hover { background:var(--fyn-surface2); }
.fyn-theme-opt.active { border-color:#e11d48; background:#fff1f2; color:#e11d48; }
[data-theme="dark"] .fyn-theme-opt.active { background:#2d0a14; }
.fyn-theme-opt-icon { font-size:18px; margin-bottom:3px; }
.fyn-settings-row { display:flex; align-items:center; justify-content:space-between; padding:5px 0; }
.fyn-settings-row-label { font-size:12.5px; color:var(--fyn-text-2); }
.fyn-toggle { width:38px; height:20px; border-radius:99px; background:var(--fyn-border); position:relative; cursor:pointer; transition:background .22s; border:none; flex-shrink:0; }
.fyn-toggle.on { background:#e11d48; }
.fyn-toggle::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:white; transition:transform .22s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.fyn-toggle.on::after { transform:translateX(18px); }

/* User pill & dropdown */
.fyn-user-pill { display:flex; align-items:center; gap:7px; background:var(--fyn-input-bg); border:1.5px solid var(--fyn-border); border-radius:99px; padding:4px 11px 4px 4px; cursor:pointer; transition:border-color .15s,box-shadow .15s; user-select:none; }
.fyn-user-pill:hover { border-color:#e11d48; box-shadow:0 0 0 3px rgba(225,29,72,.1); }
.fyn-user-avatar { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#e11d48,#0ea5e9); color:white; font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fyn-user-name { font-size:12.5px; font-weight:600; color:var(--fyn-text); }
.fyn-user-role-txt { font-size:10.5px; color:var(--fyn-text-muted); }
.fyn-chevron { color:var(--fyn-text-muted); transition:transform .2s; display:flex; align-items:center; }
.fyn-panel-wrap.open .fyn-chevron { transform:rotate(180deg); }
.fyn-user-dropdown {
  display:none; position:absolute; top:calc(100%+8px); right:0;
  width:210px; background:var(--fyn-surface); border:1px solid var(--fyn-border);
  border-radius:12px; box-shadow:var(--fyn-shadow-lg); overflow:hidden; z-index:600;
  animation:fynDropIn .16s ease;
}
.fyn-panel-wrap.open .fyn-user-dropdown { display:block; }
.fyn-ud-header { padding:13px 14px; display:flex; align-items:center; gap:9px; border-bottom:1px solid var(--fyn-border); background:var(--fyn-surface2); }
.fyn-ud-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#e11d48,#0ea5e9); color:white; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fyn-ud-name { font-size:13px; font-weight:700; }
.fyn-ud-role { font-size:11px; color:var(--fyn-text-muted); }
.fyn-ud-item { padding:10px 14px; display:flex; align-items:center; gap:9px; font-size:13px; color:var(--fyn-text-2); cursor:pointer; transition:background .1s,color .1s; text-decoration:none; }
.fyn-ud-item:hover { background:var(--fyn-surface2); color:var(--fyn-text); text-decoration:none; }
.fyn-ud-divider { height:1px; background:var(--fyn-border); }
.fyn-ud-item.logout { color:#dc2626; }
.fyn-ud-item.logout:hover { background:#fef2f2; color:#dc2626; }
[data-theme="dark"] .fyn-ud-item.logout:hover { background:#2d0a0a; }

/* ══════════ NAV ════════════════════════════════════════════ */
.fyn-nav {
  background:var(--fyn-nav-bg);
  padding:0 24px; display:flex; align-items:center; gap:3px; height:44px;
}
.fyn-nav a {
  color:rgba(255,255,255,.6); text-decoration:none;
  font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  padding:5px 16px; border-radius:6px; transition:all .17s; position:relative;
}
.fyn-nav a.active { color:#fff; background:rgba(255,255,255,.1); }
.fyn-nav a.active::after { content:''; position:absolute; bottom:-3px; left:16px; right:16px; height:2px; background:#f59e0b; border-radius:2px; }
.fyn-nav a:hover:not(.active) { color:rgba(255,255,255,.9); background:rgba(255,255,255,.07); }
.fyn-prod-switcher { margin-left:auto; display:flex; align-items:center; gap:6px; font-size:11.5px; color:rgba(255,255,255,.6); }
.fyn-prod-switcher select { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:white; border-radius:6px; padding:3px 8px; font-size:11.5px; outline:none; }
.fyn-prod-switcher select option { background:#0d2233; color:white; }

/* ══════════ PAGE ════════════════════════════════════════════ */
body { background:var(--fyn-bg); }
.fyn-page { padding:24px 28px; max-width:1440px; margin:0 auto; }

/* Page header */
.fyn-page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:22px; gap:14px; }
.fyn-page-title { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; color:var(--fyn-text); display:flex; align-items:center; gap:10px; line-height:1.2; }
.fyn-page-title-icon { width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,#e11d48,#0ea5e9); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fyn-page-subtitle { font-size:12.5px; color:var(--fyn-text-muted); margin-top:4px; padding-left:44px; }
.fyn-btn-new { background:linear-gradient(135deg,#e11d48,#be123c); color:white; border:none; border-radius:9px; padding:9px 18px; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:opacity .17s,transform .12s; white-space:nowrap; flex-shrink:0; text-decoration:none; }
.fyn-btn-new:hover { opacity:.9; transform:translateY(-1px); color:white; text-decoration:none; }

/* ══════════ MODULE CARDS ════════════════════════════════════ */
.fyn-modules { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; margin-bottom:28px; }
.fyn-module-card { background:var(--fyn-surface); border-radius:var(--fyn-radius); box-shadow:var(--fyn-shadow); overflow:hidden; animation:fynFadeUp .3s ease both; }
.fyn-module-card:nth-child(1){animation-delay:.04s;}.fyn-module-card:nth-child(2){animation-delay:.1s;}.fyn-module-card:nth-child(3){animation-delay:.16s;}.fyn-module-card:nth-child(4){animation-delay:.22s;}.fyn-module-card:nth-child(5){animation-delay:.28s;}
@keyframes fynFadeUp { from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);} }
.fyn-module-header { padding:14px 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--fyn-border); }

/* Product colour accents */
.fyn-module-card.gst     .fyn-module-header { border-left:4px solid var(--fyn-gst-base); background:linear-gradient(90deg,var(--fyn-gst-glow) 0%,transparent 55%); }
.fyn-module-card.fynone  .fyn-module-header { border-left:4px solid var(--fyn-one-base); background:linear-gradient(90deg,var(--fyn-one-glow) 0%,transparent 55%); }
.fyn-module-card.gateway .fyn-module-header { border-left:4px solid var(--fyn-gw-base);  background:linear-gradient(90deg,var(--fyn-gw-glow)  0%,transparent 55%); }
.fyn-module-card.ksa     .fyn-module-header { border-left:4px solid var(--fyn-ksa-base); background:linear-gradient(90deg,var(--fyn-ksa-glow) 0%,transparent 55%); }
.fyn-module-card.uae     .fyn-module-header { border-left:4px solid var(--fyn-uae-base); background:linear-gradient(90deg,var(--fyn-uae-glow) 0%,transparent 55%); }

.fyn-module-label { display:flex; align-items:center; gap:11px; }
.fyn-module-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fyn-module-card.gst     .fyn-module-icon { background:var(--fyn-gst-light); color:var(--fyn-gst-base); }
.fyn-module-card.fynone  .fyn-module-icon { background:var(--fyn-one-light); color:var(--fyn-one-base); }
.fyn-module-card.gateway .fyn-module-icon { background:var(--fyn-gw-light);  color:var(--fyn-gw-base);  }
.fyn-module-card.ksa     .fyn-module-icon { background:var(--fyn-ksa-light); color:var(--fyn-ksa-base); }
.fyn-module-card.uae     .fyn-module-icon { background:var(--fyn-uae-light); color:var(--fyn-uae-base); }
.fyn-module-name { font-family:'Playfair Display',serif; font-size:15px; font-weight:700; }
.fyn-module-card.gst     .fyn-module-name { color:var(--fyn-gst-base); }
.fyn-module-card.fynone  .fyn-module-name { color:var(--fyn-one-base); }
.fyn-module-card.gateway .fyn-module-name { color:var(--fyn-gw-base);  }
.fyn-module-card.ksa     .fyn-module-name { color:var(--fyn-ksa-base); }
.fyn-module-card.uae     .fyn-module-name { color:var(--fyn-uae-base); }
.fyn-module-desc { font-size:11px; color:var(--fyn-text-muted); margin-top:1px; }
.fyn-view-link { font-size:11.5px; font-weight:600; text-decoration:none; display:flex; align-items:center; gap:4px; padding:6px 12px; border-radius:7px; border:1.5px solid var(--fyn-border); color:var(--fyn-text-2); transition:all .17s; white-space:nowrap; }
.fyn-module-card.gst     .fyn-view-link:hover { color:var(--fyn-gst-base); border-color:var(--fyn-gst-base); }
.fyn-module-card.fynone  .fyn-view-link:hover { color:var(--fyn-one-base); border-color:var(--fyn-one-base); }
.fyn-module-card.gateway .fyn-view-link:hover { color:var(--fyn-gw-base);  border-color:var(--fyn-gw-base);  }
.fyn-module-card.ksa     .fyn-view-link:hover { color:var(--fyn-ksa-base); border-color:var(--fyn-ksa-base); }
.fyn-module-card.uae     .fyn-view-link:hover { color:var(--fyn-uae-base); border-color:var(--fyn-uae-base); }

/* Stat cells */
.fyn-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.stat-item { padding:16px 18px 14px; display:flex; flex-direction:column; gap:3px; cursor:pointer; transition:background .13s; text-decoration:none; color:inherit; }
.stat-item+.stat-item { border-left:1px solid var(--fyn-border); }
.stat-item:hover { background:var(--fyn-surface2); }
.stat-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.stat-icon { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:16px; }
.stat-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:99px; letter-spacing:.06em; text-transform:uppercase; }
.stat-value { font-family:'DM Mono',monospace; font-size:28px; font-weight:500; line-height:1; letter-spacing:-.02em; }
.stat-label { font-size:11.5px; color:var(--fyn-text-2); font-weight:500; margin-top:3px; }
.stat-bar { height:2px; border-radius:2px; background:var(--fyn-border); overflow:hidden; margin-top:10px; }
.stat-bar-fill { height:100%; border-radius:2px; width:0%; }
.stat-total  .stat-icon { background:var(--fyn-total-bg);   } .stat-total  .stat-value { color:var(--fyn-total-color);   } .stat-total  .stat-badge { background:var(--fyn-total-bg);   color:var(--fyn-total-color);   } .stat-total  .stat-bar-fill { background:var(--fyn-total-color);   }
.stat-pending .stat-icon { background:var(--fyn-pending-bg); } .stat-pending .stat-value { color:var(--fyn-pending-color); } .stat-pending .stat-badge { background:var(--fyn-pending-bg); color:var(--fyn-pending-color); } .stat-pending .stat-bar-fill { background:var(--fyn-pending-color); }
.stat-closed  .stat-icon { background:var(--fyn-closed-bg);  } .stat-closed  .stat-value { color:var(--fyn-closed-color);  } .stat-closed  .stat-badge { background:var(--fyn-closed-bg);  color:var(--fyn-closed-color);  } .stat-closed  .stat-bar-fill { background:var(--fyn-closed-color);  }

/* ══════════ TICKET TABLE ════════════════════════════════════ */
.fyn-ticket-wrap { background:var(--fyn-surface); border-radius:var(--fyn-radius); box-shadow:var(--fyn-shadow); overflow:hidden; }
.fyn-ticket-toolbar { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--fyn-border); gap:10px; flex-wrap:wrap; background:var(--fyn-surface2); }
.fyn-filter-group { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.fyn-filter-btn { padding:6px 14px; border-radius:99px; border:1.5px solid var(--fyn-border); background:var(--fyn-surface); font-size:12px; font-weight:600; color:var(--fyn-text-2); cursor:pointer; transition:all .14s; }
.fyn-filter-btn.active,.fyn-filter-btn:hover { background:#e11d48; color:white; border-color:#e11d48; }
.fyn-filter-select { padding:6px 11px; border-radius:7px; border:1.5px solid var(--fyn-border); background:var(--fyn-surface); font-size:12px; color:var(--fyn-text-2); cursor:pointer; outline:none; }
.fyn-ticket-table { width:100%; border-collapse:collapse; min-width:900px; }
.fyn-ticket-table th { background:var(--fyn-surface2); padding:11px 13px; font-size:10.5px; font-weight:700; color:var(--fyn-text-muted); letter-spacing:.07em; text-transform:uppercase; text-align:left; border-bottom:2px solid var(--fyn-border); white-space:nowrap; }
.fyn-ticket-table td { padding:12px 13px; font-size:12.5px; border-bottom:1px solid var(--fyn-border); vertical-align:middle; color:var(--fyn-text); }
.fyn-ticket-table tr:last-child td { border-bottom:none; }
.fyn-ticket-table tr:hover td { background:var(--fyn-surface2); }
.fyn-ticket-id { font-family:'DM Mono',monospace; font-size:11.5px; font-weight:600; color:#0ea5e9; background:#f0f9ff; border:1px solid #bae6fd; padding:2px 8px; border-radius:5px; white-space:nowrap; display:inline-block; }
[data-theme="dark"] .fyn-ticket-id { background:#0c2233; border-color:#1e3a5f; }
.fyn-t-title { font-weight:600; font-size:13px; }
.fyn-t-desc { font-size:11.5px; color:var(--fyn-text-muted); margin-top:1px; }

/* Status badges */
.fyn-t-badge { display:inline-block; font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:99px; white-space:nowrap; letter-spacing:.04em; }
.fyn-t-pending  { background:var(--fyn-pending-bg);  color:var(--fyn-pending-color);  }
.fyn-t-closed   { background:var(--fyn-closed-bg);   color:var(--fyn-closed-color);   }
.fyn-t-open     { background:var(--fyn-total-bg);    color:var(--fyn-total-color);     }
.fyn-t-ack      { background:#f5f3ff; color:#7c3aed; }
[data-theme="dark"] .fyn-t-ack { background:#2a1a4a; color:#c4b5fd; }
.fyn-t-critical { background:var(--fyn-critical-bg); color:var(--fyn-critical-color); }
.fyn-t-high     { background:var(--fyn-high-bg);     color:var(--fyn-high-color);     }
.fyn-t-medium   { background:var(--fyn-medium-bg);   color:var(--fyn-medium-color);   }
.fyn-t-low      { background:var(--fyn-low-bg);      color:var(--fyn-low-color);      }

/* Module pills */
.fyn-mod-gst     { background:var(--fyn-gst-light);  color:var(--fyn-gst-base);  font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:99px; }
.fyn-mod-fynone  { background:var(--fyn-one-light);  color:var(--fyn-one-base);  font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:99px; }
.fyn-mod-gateway { background:var(--fyn-gw-light);   color:var(--fyn-gw-base);   font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:99px; }
.fyn-mod-ksa     { background:var(--fyn-ksa-light);  color:var(--fyn-ksa-base);  font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:99px; }
.fyn-mod-uae     { background:var(--fyn-uae-light);  color:var(--fyn-uae-base);  font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:99px; }

/* Action buttons */
.fyn-action-btn { background:none; border:none; cursor:pointer; color:var(--fyn-text-muted); padding:4px 8px; border-radius:6px; transition:background .1s,color .1s; display:inline-flex; font-size:11px; font-weight:600; gap:4px; align-items:center; }
.fyn-action-btn:hover { background:var(--fyn-surface2); color:var(--fyn-text); }
.fyn-action-btn.resolve { color:var(--fyn-closed-color); }
.fyn-action-btn.resolve:hover { background:var(--fyn-closed-bg); }
.fyn-action-btn.acknowledge { color:#7c3aed; }
.fyn-action-btn.acknowledge:hover { background:#f5f3ff; }
[data-theme="dark"] .fyn-action-btn.acknowledge:hover { background:#2a1a4a; }

/* Priority badges (alias) */
.fyn-badge-critical { background:var(--fyn-critical-bg); color:var(--fyn-critical-color); font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:99px; white-space:nowrap; display:inline-block; }
.fyn-badge-high     { background:var(--fyn-high-bg);     color:var(--fyn-high-color);     font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:99px; white-space:nowrap; display:inline-block; }
.fyn-badge-medium   { background:var(--fyn-medium-bg);   color:var(--fyn-medium-color);   font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:99px; white-space:nowrap; display:inline-block; }
.fyn-badge-low      { background:var(--fyn-low-bg);      color:var(--fyn-low-color);      font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:99px; white-space:nowrap; display:inline-block; }

/* ══════════ FORM CARDS ══════════════════════════════════════ */
.fyn-form-card { background:var(--fyn-surface); border-radius:var(--fyn-radius); box-shadow:var(--fyn-shadow); overflow:hidden; }
.fyn-form-head { padding:16px 24px; border-bottom:1px solid var(--fyn-border); display:flex; align-items:center; gap:10px; background:var(--fyn-surface2); }
.fyn-form-head-title { font-family:'Playfair Display',serif; font-size:17px; font-weight:700; }
.fyn-form-body { padding:22px 24px; display:flex; flex-direction:column; gap:16px; }
.fyn-form-row   { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fyn-form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.fyn-form-group { display:flex; flex-direction:column; gap:5px; }
.fyn-form-group label { font-size:11px; font-weight:700; color:var(--fyn-text-2); letter-spacing:.05em; text-transform:uppercase; }
.fyn-form-group label .req { color:#e11d48; margin-left:2px; }
.fyn-form-ctrl { border:1.5px solid var(--fyn-border); border-radius:var(--fyn-radius-sm); padding:9px 13px; font-size:13px; color:var(--fyn-text); background:var(--fyn-input-bg); outline:none; transition:border-color .14s,box-shadow .14s; width:100%; appearance:auto; }
.fyn-form-ctrl:focus { border-color:#e11d48; box-shadow:0 0 0 3px rgba(225,29,72,.1); }
textarea.fyn-form-ctrl { resize:vertical; min-height:82px; }
.fyn-form-hint { font-size:11px; color:var(--fyn-text-muted); }
.fyn-file-zone { border:2px dashed var(--fyn-border); border-radius:var(--fyn-radius-sm); padding:20px; text-align:center; cursor:pointer; transition:border-color .14s,background .14s; position:relative; }
.fyn-file-zone:hover { border-color:#e11d48; background:var(--fyn-one-light); }
.fyn-file-zone input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.fyn-file-zone-icon { font-size:22px; margin-bottom:5px; }
.fyn-file-zone-text { font-size:13px; font-weight:500; color:var(--fyn-text-2); }
.fyn-file-zone-hint { font-size:11px; color:var(--fyn-text-muted); margin-top:3px; }
.fyn-form-footer { padding:14px 24px; border-top:1px solid var(--fyn-border); display:flex; justify-content:flex-end; gap:9px; background:var(--fyn-surface2); }
.fyn-btn-cancel { padding:9px 20px; border-radius:var(--fyn-radius-sm); border:1.5px solid var(--fyn-border); background:none; font-size:13px; font-weight:600; color:var(--fyn-text-2); cursor:pointer; transition:background .14s; }
.fyn-btn-cancel:hover { background:var(--fyn-surface2); }
.fyn-btn-submit { padding:9px 22px; border-radius:var(--fyn-radius-sm); border:none; background:linear-gradient(135deg,#e11d48,#be123c); font-size:13px; font-weight:600; color:white; cursor:pointer; transition:opacity .14s; }
.fyn-btn-submit:hover { opacity:.9; }

/* ══════════ MODALS ══════════════════════════════════════════ */
.fyn-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:800; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.fyn-modal-overlay.hidden { display:none; }
.fyn-modal-card { background:var(--fyn-surface); border:1px solid var(--fyn-border); border-radius:16px; width:480px; max-width:95vw; max-height:85vh; overflow-y:auto; padding:28px; box-shadow:var(--fyn-shadow-lg); animation:fynScaleIn .22s ease; }
@keyframes fynScaleIn { from{opacity:0;transform:scale(.95);}to{opacity:1;transform:scale(1);} }
.fyn-modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.fyn-modal-title { font-family:'Playfair Display',serif; font-size:18px; font-weight:700; color:var(--fyn-text); }
.fyn-modal-close { background:none; border:none; cursor:pointer; color:var(--fyn-text-muted); font-size:20px; line-height:1; padding:3px; border-radius:5px; }
.fyn-modal-close:hover { color:var(--fyn-text); background:var(--fyn-surface2); }

/* ══════════ TOAST ══════════════════════════════════════════ */
.fyn-toast { position:fixed; top:80px; right:24px; background:#0f2d40; color:white; padding:12px 20px; border-radius:10px; font-size:13px; font-weight:600; box-shadow:0 4px 20px rgba(0,0,0,.2); z-index:1000; animation:fynFadeUp .3s ease; pointer-events:none; }

/* ══════════ DataTables overrides ════════════════════════════ */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { font-size:12px; color:var(--fyn-text-2); padding:12px 0 6px; }
.dataTables_wrapper .dataTables_filter input { height:32px; font-size:12px; border-radius:8px; border:1.5px solid var(--fyn-input-border); background:var(--fyn-input-bg); color:var(--fyn-text); padding:0 10px; outline:none; }
.dataTables_wrapper .dataTables_filter input:focus { border-color:#e11d48; box-shadow:0 0 0 3px rgba(225,29,72,.1); }
.dataTables_wrapper .dataTables_info { font-size:11.5px; color:var(--fyn-text-muted); }
.dataTables_wrapper .paginate_button { font-size:12px!important; border-radius:7px!important; padding:4px 10px!important; border:1.5px solid var(--fyn-border)!important; background:var(--fyn-surface)!important; color:var(--fyn-text-2)!important; cursor:pointer; }
.dataTables_wrapper .paginate_button.current { background:#e11d48!important; border-color:#e11d48!important; color:#fff!important; font-weight:700!important; }
.dataTables_wrapper .paginate_button:hover:not(.disabled):not(.current) { background:var(--fyn-surface2)!important; color:var(--fyn-text)!important; }

/* ══════════ Ticket detail / timeline ════════════════════════ */
.fyn-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.fyn-td-field { display:flex; flex-direction:column; gap:3px; }
.fyn-td-label { font-size:10px; font-weight:700; color:var(--fyn-text-muted); letter-spacing:.07em; text-transform:uppercase; }
.fyn-td-value { font-size:13px; color:var(--fyn-text); font-weight:500; }
.fyn-td-remarks { background:var(--fyn-surface2); border-radius:10px; padding:14px 16px; font-size:13px; line-height:1.7; color:var(--fyn-text-2); border-left:3px solid #e11d48; white-space:pre-wrap; word-break:break-word; }
.fyn-td-closing { background:var(--fyn-closed-bg); border-radius:10px; padding:12px 16px; font-size:12.5px; line-height:1.6; color:var(--fyn-closed-color); border-left:3px solid var(--fyn-closed-color); }
.fyn-tl-item { display:flex; gap:12px; padding:8px 0; position:relative; }
.fyn-tl-item:not(:last-child)::before { content:''; position:absolute; left:15px; top:32px; bottom:-4px; width:2px; background:var(--fyn-border); }
.fyn-tl-dot { width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; border:2px solid var(--fyn-border); background:var(--fyn-surface2); }
.fyn-tl-dot.created  { background:#fff1f2; border-color:#fecdd3; }
.fyn-tl-dot.assigned { background:#eff6ff; border-color:#bfdbfe; }
.fyn-tl-dot.closed   { background:#dcfce7; border-color:#86efac; }
.fyn-tl-body { flex:1; padding-top:3px; }
.fyn-tl-action { font-size:12.5px; font-weight:600; color:var(--fyn-text); }
.fyn-tl-meta { font-size:11px; color:var(--fyn-text-muted); margin-top:2px; }
.fyn-tl-detail { font-size:12px; color:var(--fyn-text-2); margin-top:4px; background:var(--fyn-surface2); padding:7px 10px; border-radius:7px; border-left:3px solid var(--fyn-border); }

/* ══════════ Responsive ══════════════════════════════════════ */
@media(max-width:900px) { .fyn-modules { grid-template-columns:1fr; } }
@media(max-width:700px) { .fyn-page { padding:14px; } .fyn-form-row,.fyn-form-row-3 { grid-template-columns:1fr; } .fyn-topbar { padding:0 12px; } .fyn-nav { padding:0 12px; } }

/* ── Product card scroll strip ────────────────────────────── */
#modulesGrid::-webkit-scrollbar { height:4px; }
#modulesGrid::-webkit-scrollbar-track { background:transparent; }
#modulesGrid::-webkit-scrollbar-thumb { background:var(--fyn-border); border-radius:2px; }
#modulesGrid::-webkit-scrollbar-thumb:hover { background:var(--fyn-text-muted); }

/* ── Compact table headers & column search ────────────────── */
.fyn-th {
  background: var(--fyn-surface2) !important;
  padding: 10px 12px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--fyn-text-muted) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-align: left;
  border-bottom: 2px solid var(--fyn-border) !important;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.fyn-th:hover { background: var(--fyn-border) !important; }
.fyn-td {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--fyn-border) !important;
  vertical-align: middle !important;
  color: var(--fyn-text);
}
.fyn-trow:last-child .fyn-td { border-bottom: none !important; }
.fyn-trow:hover .fyn-td { background: var(--fyn-surface2) !important; }

/* Column search row */
.fyn-th-search {
  background: var(--fyn-surface2) !important;
  padding: 5px 8px !important;
  border-bottom: 2px solid var(--fyn-border) !important;
}
.fyn-col-inp {
  width: 100%;
  height: 28px;
  font-size: 11px;
  padding: 2px 8px;
  border: 1.5px solid var(--fyn-input-border, #e2e8f0);
  border-radius: 6px;
  background: var(--fyn-input-bg, #fff);
  color: var(--fyn-text);
  outline: none;
  font-family: 'Inter', sans-serif;
  transition: border-color .15s, box-shadow .15s;
}
.fyn-col-inp:focus {
  border-color: #e11d48;
  box-shadow: 0 0 0 2px rgba(225,29,72,.1);
}

/* ── Compact table rows ────────────────────────────── */
.fyn-td { padding:8px 11px !important; }
.fyn-th { padding:8px 11px !important; }
.fyn-trow td { line-height:1.3; }

/* ── Card total row hover ──────────────────────────── */
.fyn-card-total-row:hover { background:var(--fyn-surface2); }

/* ── Sortable column headers ──────────────────────── */
.fyn-sortable { cursor:pointer; user-select:none; }
.fyn-sortable:hover { background:rgba(255,255,255,.06) !important; }
.fyn-sort-icon { font-size:10px; color:var(--fyn-text-muted); margin-left:3px; }
.fyn-sort-active .fyn-sort-icon { color:#e11d48; }
.fyn-sort-active { color:var(--fyn-text) !important; }

/* ── Ticket ID link style ─────────────────────────── */
.fyn-ticket-id { cursor:pointer; }
.fyn-ticket-id:hover { text-decoration:underline; text-decoration-color:#0ea5e9; }

/* ── Compact card layout ────────────────────────────── */
.fyn-module-card .fyn-module-header { padding:11px 14px; }
.fyn-module-card .fyn-module-name   { font-size:13px; }
.fyn-module-card .fyn-module-desc   { font-size:10px; }
.fyn-card-total-row                 { padding:10px 14px !important; }
.fyn-card-total-row span            { font-size:10px !important; }
.stat-item                          { padding:10px 12px !important; }
.stat-value                         { font-size:24px !important; }

/* ── Slide-in panel spin animation ─────────────────── */
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Tracker stepper line ───────────────────────────── */
#fynTrackerPanel::-webkit-scrollbar { width:4px; }
#fynTrackerPanel::-webkit-scrollbar-thumb { background:var(--fyn-border); border-radius:2px; }

/* ── Custom multi-select dropdown ─────────────────── */
.fyn-ms {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 4px 8px;
  border: 1.5px solid var(--fyn-border);
  border-radius: 6px;
  background: var(--fyn-input-bg);
  font-size: 11px;
  font-weight: 500;
  color: var(--fyn-text-2);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  min-width: 80px;
  height: 28px;
  transition: border-color .14s, box-shadow .14s;
}
.fyn-ms:hover { border-color: #e11d48; }
.fyn-ms svg   { flex-shrink: 0; opacity: .6; }
.fyn-ms-lbl   { overflow: hidden; text-overflow: ellipsis; flex: 1; }

/* Dropdown panel */
.fyn-ms-drop {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 180px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--fyn-surface);
  border: 1px solid var(--fyn-border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  z-index: 200;
  padding: 5px 0;
  animation: fynDropIn .15s ease;
}
.fyn-ms-drop.open { display: block; }

/* Scrollbar */
.fyn-ms-drop::-webkit-scrollbar { width: 4px; }
.fyn-ms-drop::-webkit-scrollbar-thumb { background: var(--fyn-border); border-radius: 2px; }

/* Options */
.fyn-ms-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fyn-text-2);
  cursor: pointer;
  transition: background .1s;
  white-space: nowrap;
}
.fyn-ms-opt:hover { background: var(--fyn-surface2); color: var(--fyn-text); }
.fyn-ms-opt input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #e11d48;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 3px;
}
.fyn-ms-opt input[type="checkbox"]:checked + span,
.fyn-ms-opt input:checked ~ * { color: var(--fyn-text); }

/* Dark theme adjustments */
[data-theme="dark"] .fyn-ms-drop {
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
}

/* ── Toast variants ────────────────────────────────── */
.fyn-toast-success { background: #15803d !important; }
.fyn-toast-error   { background: #dc2626 !important; }

/* ── Ticket ID chip ───────────────────────────────── */
.fyn-id-chip {
  display:inline-block;
  font-family:'DM Mono',monospace;
  font-size:11.5px;
  font-weight:700;
  background:#eff6ff;
  color:#1d4ed8;
  padding:3px 10px;
  border-radius:6px;
  border:1px solid #bfdbfe;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .13s;
}
.fyn-id-chip:hover { background:#dbeafe; }