/* ============================================================================
 * ASA UI — tema minimalis osTicket (override layer) · v2
 * ----------------------------------------------------------------------------
 * Dimuat SETELAH css bawaan (scp.css / theme.css) lewat header.inc.php.
 * Tidak mengubah logika; hanya tampilan. Aturan dibatasi:
 *   .ai-scp    -> Staff Control Panel (/scp)
 *   body#loginBody / .ai-login -> login agent
 *   .ai-client -> portal client (halaman depan, buat tiket, KB)
 *
 * Palet dari logo ASA Kreasi Interasia (navy + steel-blue + amber).
 * Header dibuat terang supaya logo (teks gelap) tetap terbaca.
 * ========================================================================== */

:root {
  --asa-navy: #13293f;
  --asa-navy-700: #1b3a57;
  --asa-steel: #2e6c9e;
  --asa-steel-600: #3e86c4;
  --asa-amber: #f0b429;
  --asa-ink: #1b2430;
  --asa-text: #232b36;
  --asa-muted: #6b7684;
  --asa-faint: #98a2b3;
  --asa-line: #e3e7ec;
  --asa-line-strong: #cfd6de;
  --asa-bg: #f5f7f9;
  --asa-surface: #ffffff;
  --asa-surface-2: #fafbfc;
  --asa-green: #1f9d63;
  --asa-red: #d3455b;
  --asa-amber-soft: #fdf3d7;
  --asa-radius: 10px;
  --asa-radius-sm: 8px;
  --asa-radius-lg: 14px;
  --asa-shadow-xs: 0 1px 2px rgba(19, 41, 63, .05);
  --asa-shadow-sm: 0 1px 2px rgba(19, 41, 63, .06), 0 2px 6px rgba(19, 41, 63, .05);
  --asa-shadow-md: 0 4px 16px rgba(19, 41, 63, .10);
  --asa-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --asa-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ------------------------------- ikon Lucide ------------------------------ */
.ai-icon { font-family: var(--asa-font) !important; font-style: normal; }
.ai-icon::before { content: none !important; }           /* matikan glyph FA */
svg.ai-icon { width: 1em; height: 1em; stroke-width: 2; vertical-align: -0.135em; flex: 0 0 auto; }
.ai-icon.ai-lg { width: 1.33em !important; height: 1.33em !important; }
.ai-icon.ai-2x { width: 2em !important; height: 2em !important; }
.ai-icon.ai-3x { width: 3em !important; height: 3em !important; }
.ai-icon.ai-4x { width: 4em !important; height: 4em !important; }
.ai-icon.ai-5x { width: 5em !important; height: 5em !important; }
.ai-icon.ai-fw { width: 1.2857em !important; text-align: center; }
.ai-icon.ai-muted { opacity: .5; }
.ai-icon.ai-border { padding: .2em .25em .15em; border: 1px solid var(--asa-line); border-radius: 6px; }
svg.ai-icon.ai-flip-x { transform: scaleX(-1); }
svg.ai-icon.ai-flip-y { transform: scaleY(-1); }
svg.ai-icon.ai-rot-90 { transform: rotate(90deg); }
svg.ai-icon.ai-rot-180 { transform: rotate(180deg); }
svg.ai-icon.ai-rot-270 { transform: rotate(270deg); }
.ai-icon.ai-spin, svg.ai-icon.ai-spin { animation: ai-spin 1s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
/* ikon navigasi yang disuntik oleh asa-icons.js */
.ai-nav-ico { width: 1.05em; height: 1.05em; margin-right: .45em; opacity: .9; }

/* ============================ BASE (scp & client) ========================= */
.ai-scp body,
.ai-client body {
  font-family: var(--asa-font);
  background: var(--asa-bg);
  color: var(--asa-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ai-scp a,
.ai-client a { color: var(--asa-steel); text-decoration: none; }
.ai-scp a:hover,
.ai-client a:hover { color: var(--asa-navy); text-decoration: underline; }
.ai-scp h1, .ai-scp h2, .ai-scp h3, .ai-scp h4,
.ai-client h1, .ai-client h2, .ai-client h3, .ai-client h4 {
  color: var(--asa-ink);
  font-weight: 600;
  letter-spacing: -.011em;
}
.ai-scp code, .ai-scp pre, .ai-scp kbd,
.ai-client code, .ai-client pre { font-family: var(--asa-mono); }
.ai-scp hr, .ai-client hr { border: 0; border-top: 1px solid var(--asa-line); }
.ai-scp ::selection, .ai-client ::selection { background: #d7e6f4; }

/* -------------------- header (terang, logo terbaca) ---------------------- */
.ai-scp #header,
.ai-client #header {
  background: var(--asa-surface);
  border-bottom: 1px solid var(--asa-line);
  color: var(--asa-text);
}
/* amber accent tanpa mengubah tinggi #header (76px) */
.ai-scp #header { box-shadow: inset 0 3px 0 var(--asa-amber); }
.ai-client #header { border-top: 3px solid var(--asa-amber); box-shadow: var(--asa-shadow-xs); }
.ai-scp #header a,
.ai-client #header a { color: var(--asa-muted); }
.ai-scp #header a:hover,
.ai-client #header a:hover { color: var(--asa-navy); text-decoration: none; }
.ai-scp #logo img { max-height: 56px; }
.ai-client #logo img { max-height: 40px; width: auto; }

/* area kerja lebih lega */
.ai-scp #container { width: 1180px; max-width: 96vw; }

/* --- STAFF nav: pertahankan geometri bawaan (tab 26px, folder-tab) ------ */
.ai-scp #nav {
  background: var(--asa-surface);
  border-bottom: 1px solid var(--asa-line);
  z-index: 200;
}
.ai-scp #nav a { color: var(--asa-text); background-image: none !important; }
.ai-scp #nav li.active,
.ai-scp #nav .active {
  background: var(--asa-surface);
  border-color: var(--asa-line);
  box-shadow: none;
}
.ai-scp #nav li.inactive:hover { background: var(--asa-surface-2); }
.ai-scp #nav .active a { color: var(--asa-navy); }
.ai-scp #sub_nav {
  background: var(--asa-surface);
  border-bottom: 1px solid var(--asa-line);
  border-left: 1px solid var(--asa-line);
  border-right: 1px solid var(--asa-line);
}
.ai-scp #sub_nav a { color: var(--asa-text); background-image: none !important; }
.ai-scp #sub_nav a.active { color: var(--asa-navy); font-weight: 600; }

/* --- CLIENT nav: pill --- */
.ai-client #nav {
  background: var(--asa-surface);
  border: 0;
  border-bottom: 1px solid var(--asa-line);
  box-shadow: none;
}
.ai-client #nav a {
  color: var(--asa-text);
  background-image: none !important;
  border-radius: 999px;
  padding: .35em .8em;
  transition: background .15s ease, color .15s ease;
}
.ai-client #nav a:hover { background: var(--asa-surface-2); color: var(--asa-navy); text-decoration: none; }
.ai-client #nav a.active,
.ai-client #nav li.active > a { background: var(--asa-steel); color: #fff; }
.ai-scp #breadcrumbs { color: var(--asa-muted); }
.ai-scp #breadcrumbs a { color: var(--asa-steel); }
.ai-scp #footer, .ai-client #footer {
  color: var(--asa-muted);
  background: transparent;
  border-top: 1px solid var(--asa-line);
}

/* Buttons */
.ai-scp .button, .ai-scp button, .ai-scp input[type="submit"], .ai-scp input[type="button"] {
  background: var(--asa-steel);
  background-image: none;
  border: 1px solid var(--asa-steel);
  color: #fff;
  border-radius: var(--asa-radius-sm);
  box-shadow: var(--asa-shadow-xs);
  font-weight: 500;
  text-shadow: none;
  transition: background .15s ease, border-color .15s ease;
}
.ai-scp .button:hover, .ai-scp button:hover,
.ai-scp input[type="submit"]:hover, .ai-scp input[type="button"]:hover {
  background: var(--asa-navy);
  border-color: var(--asa-navy);
  color: #fff;
  text-decoration: none;
}
.ai-scp .button:active, .ai-scp button:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25); }
.ai-scp .muted-button, .ai-scp .btn_sm {
  background: var(--asa-surface);
  border: 1px solid var(--asa-line-strong);
  color: var(--asa-text);
  background-image: none;
  box-shadow: none;
}
.ai-scp .muted-button:hover, .ai-scp .btn_sm:hover {
  background: var(--asa-surface-2);
  border-color: var(--asa-steel);
  color: var(--asa-navy);
}

/* Forms */
.ai-scp input[type="text"], .ai-scp input[type="password"], .ai-scp input[type="email"],
.ai-scp input[type="number"], .ai-scp input[type="search"], .ai-scp input[type="tel"],
.ai-scp input[type="url"], .ai-scp input[type="date"], .ai-scp select, .ai-scp textarea {
  background: var(--asa-surface);
  border: 1px solid var(--asa-line-strong);
  border-radius: var(--asa-radius-sm);
  color: var(--asa-text);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ai-scp input:focus, .ai-scp select:focus, .ai-scp textarea:focus {
  border-color: var(--asa-steel-600);
  box-shadow: 0 0 0 3px rgba(62, 134, 196, .16);
  outline: none;
}
.ai-scp label { color: var(--asa-text); font-weight: 500; }
.ai-scp .required { color: var(--asa-amber); font-weight: 600; }
.ai-scp fieldset { border: 1px solid var(--asa-line); border-radius: var(--asa-radius); }
.ai-scp legend { color: var(--asa-ink); font-weight: 600; }

/* Tables */
.ai-scp table { border-collapse: separate; border-spacing: 0; }
.ai-scp table.list, .ai-scp .table { background: var(--asa-surface); }
/* osTicket menuliskan width fixed (940/920) di markup -> ikuti lebar container */
.ai-scp table.list { width: 100% !important; }
.ai-client table.list { width: 100% !important; }
.ai-scp th {
  color: var(--asa-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--asa-line-strong);
  background: var(--asa-surface-2);
}
.ai-scp td { border-bottom: 1px solid var(--asa-line); }
.ai-scp tr:hover td { background: var(--asa-surface-2); }

/* Tabs */
.ai-scp .tabs, .ai-scp .left-tabs { border-bottom: 1px solid var(--asa-line); }
.ai-scp .tabs a, .ai-scp .tab_content a { color: var(--asa-muted); font-weight: 500; }
.ai-scp .tabs a.active, .ai-scp .tabs .active a,
.ai-scp .tab_content .active a { color: var(--asa-navy); }
.ai-scp .tabs a.active { box-shadow: inset 0 -2px 0 var(--asa-steel); }
.ai-scp .tab_content { background: var(--asa-surface); }

/* Badges / status */
.ai-scp .label, .ai-scp .label-info {
  background: #e8f0f8;
  color: var(--asa-steel);
  border-radius: 999px;
  font-weight: 600;
  font-size: 11px;
  padding: 2px 9px;
}
.ai-scp .label-danger { background: #fbe6ea; color: var(--asa-red); }
.ai-scp .green { color: var(--asa-green); }
.ai-scp .dark { color: var(--asa-ink); }
.ai-scp .faded { color: var(--asa-faint); }
.ai-scp .strike { text-decoration: line-through; }

/* Banners */
.ai-scp #error_bar, .ai-scp .error-banner { background: #fbe6ea; color: #8f2436; border-color: #f3c9d1; }
.ai-scp #warning_bar, .ai-scp .warning-banner { background: var(--asa-amber-soft); color: #7a5a10; border-color: #f0dc9f; }
.ai-scp #notice_bar, .ai-scp .notice-banner { background: #eaf3fb; color: #1d4e78; border-color: #cbe0f2; }
.ai-scp .success-banner { background: #e7f5ee; color: #14624a; border-color: #bfe6d4; }

/* Ticket thread */
.ai-scp .thread-entry { border-color: var(--asa-line); }
.ai-scp .thread-entry .message, .ai-scp .thread-body {
  background: var(--asa-surface);
  border: 1px solid var(--asa-line);
  border-radius: var(--asa-radius);
  box-shadow: var(--asa-shadow-xs);
}
.ai-scp .thread-event { color: var(--asa-muted); border-color: var(--asa-line); }
.ai-scp .tixTitle { color: var(--asa-ink); font-weight: 600; }
.ai-scp .avatar img { border-radius: 50%; }
.ai-scp .type-icon { color: var(--asa-muted); }
.ai-scp .attachments { border-color: var(--asa-line); }

/* Dropdown / panels */
.ai-scp .dropdown, .ai-scp .search-dropdown { border: 1px solid var(--asa-line); border-radius: var(--asa-radius); box-shadow: var(--asa-shadow-md); background: var(--asa-surface); }
.ai-scp .dialog, .ai-scp #overlay > div { border-radius: var(--asa-radius); box-shadow: var(--asa-shadow-md); }
.ai-scp .tip_box { border-radius: var(--asa-radius-sm); box-shadow: var(--asa-shadow-md); }

/* ============================ STAFF LOGIN ================================ */
body#loginBody { background: var(--asa-navy); color: var(--asa-text); font-family: var(--asa-font); }
body#loginBody #background,
body#loginBody #background-compat,
body#loginBody #brickwall,
body#loginBody #blur {
  background: var(--asa-navy) !important;
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
}
body#loginBody #loginBox {
  background: var(--asa-surface);
  border-radius: var(--asa-radius-lg);
  box-shadow: 0 24px 60px rgba(6, 18, 31, .45) !important;
}
body#loginBody #loginBox:after {
  background-color: var(--asa-surface) !important;
  border: 1px solid var(--asa-line) !important;
  border-radius: var(--asa-radius-lg) !important;
}
body#loginBody input:focus, body#loginBody select:focus {
  border-color: var(--asa-steel-600) !important;
  box-shadow: 0 0 0 3px rgba(62, 134, 196, .16) !important;
  outline: none !important;
}
body#loginBody h1, body#loginBody h2 { color: var(--asa-ink); }
body#loginBody #company, body#loginBody #poweredBy { color: #9fb2c6; }
body#loginBody .button, body#loginBody input[type="submit"], body#loginBody button {
  background: var(--asa-steel);
  border: 1px solid var(--asa-steel);
  border-radius: var(--asa-radius-sm);
  color: #fff;
  background-image: none;
  text-shadow: none;
}
body#loginBody .button:hover, body#loginBody input[type="submit"]:hover { background: var(--asa-navy); border-color: var(--asa-navy); }

/* ============================ CLIENT PORTAL ============================== */
.ai-client #container { background: var(--asa-bg); }
.ai-client .main-content { background: transparent; }
.ai-client .button, .ai-client button, .ai-client input[type="submit"] {
  background: var(--asa-steel);
  border: 1px solid var(--asa-steel);
  color: #fff;
  border-radius: var(--asa-radius-sm);
  background-image: none;
  text-shadow: none;
}
.ai-client .button:hover, .ai-client button:hover, .ai-client input[type="submit"]:hover {
  background: var(--asa-navy);
  border-color: var(--asa-navy);
  color: #fff;
  text-decoration: none;
}
.ai-client .front-page-button,
.ai-client .front-page-button a,
.ai-client .front-page-button .button {
  background: var(--asa-amber) !important;
  border-color: var(--asa-amber) !important;
  background-image: none !important;
  color: #3a2c07 !important;
  border-radius: var(--asa-radius);
  font-weight: 600;
}
.ai-client .front-page-button a:hover, .ai-client .front-page-button .button:hover {
  background: #e0a618 !important;
  border-color: #e0a618 !important;
  color: #2c2105 !important;
}
.ai-client .front-page-button i, .ai-client .front-page-button svg { color: inherit !important; }
.ai-client #landing_page, .ai-client #content { color: var(--asa-text); }
.ai-client .featured-category, .ai-client .category-name { color: var(--asa-ink); }
.ai-client .article-headline, .ai-client .article-title, .ai-client .faq-title { color: var(--asa-ink); font-weight: 600; }
.ai-client .faq-content, .ai-client .article-teaser { color: var(--asa-text); }
.ai-client .searchbar, .ai-client .search-form input, .ai-client .search.well {
  background: var(--asa-surface);
  border: 1px solid var(--asa-line-strong);
  border-radius: var(--asa-radius-sm);
}
.ai-client input[type="text"], .ai-client input[type="password"], .ai-client input[type="email"],
.ai-client select, .ai-client textarea {
  border: 1px solid var(--asa-line-strong);
  border-radius: var(--asa-radius-sm);
  background: var(--asa-surface);
}
.ai-client input:focus, .ai-client select:focus, .ai-client textarea:focus {
  border-color: var(--asa-steel-600);
  box-shadow: 0 0 0 3px rgba(62, 134, 196, .16);
  outline: none;
}
.ai-client .thread-entry .message, .ai-client .thread-body {
  background: var(--asa-surface);
  border: 1px solid var(--asa-line);
  border-radius: var(--asa-radius);
  box-shadow: var(--asa-shadow-xs);
}
.ai-client .sidebar, .ai-client .well { background: var(--asa-surface); border: 1px solid var(--asa-line); border-radius: var(--asa-radius); }
.ai-client #clientLogin, .ai-client .login-box {
  background: var(--asa-surface);
  border: 1px solid var(--asa-line);
  border-radius: var(--asa-radius-lg);
  box-shadow: var(--asa-shadow-sm);
}
.ai-client .label { background: #e8f0f8; color: var(--asa-steel); border-radius: 999px; }
.ai-client .infoTable td { border-color: var(--asa-line); }

/* ============================ SPRITE -> LUCIDE =========================== */
/* asa-icons.js menyuntik ikon Lucide; matikan semua ikon berbasis sprite. */
.ai-scp #nav a,
.ai-scp #sub_nav a,
.ai-scp .dropdown a,
.ai-scp .action-dropdown a,
.ai-scp .jb-overflowmenu a,
.ai-scp #customQ_nav a,
.ai-client #nav a { background-image: none !important; }
.ai-scp .Icon,
.ai-client .Icon { background-image: none !important; }
/* indikator sort header tabel */
.ai-scp table.list thead th a { background-image: none !important; padding-right: 0 !important; }
.ai-sort { width: .9em !important; height: .9em !important; margin-left: .35em; opacity: .5; vertical-align: -0.1em; }
/* trigger datepicker (img diganti SVG oleh JS) */
img.ui-datepicker-trigger { vertical-align: middle; }
/* ikon jQuery UI */
.ai-icon.ui-icon { background-image: none !important; text-indent: 0; }