/* SHA Logistics — Bankio-inspired professional UI v4
   Clean, light-first, RTL/LTR-safe, responsive and shared by every module. */

:root {
    --brand-950: #062a24;
    --brand-900: #083a31;
    --brand-800: #0b4a3f;
    --brand-700: #0e5d4f;
    --brand-600: #157260;
    --brand-500: #278978;
    --brand-400: #52a494;
    --brand-300: #86c2b6;
    --brand-200: #b8ddd5;
    --brand-100: #dceeea;
    --brand-50: #f0f8f6;
    --page: #f3f5f4;
    --surface: #ffffff;
    --surface-soft: #f8faf9;
    --surface-muted: #eff3f1;
    --border: #dde5e1;
    --border-strong: #cad6d1;
    --text: #111a17;
    --text-soft: #56635e;
    --text-muted: #84908b;
    --danger: #c64b5c;
    --warning: #b7791f;
    --success: #167d64;
    --shadow-xs: 0 1px 2px rgba(12, 40, 32, .04);
    --shadow-sm: 0 5px 18px rgba(12, 40, 32, .06);
    --shadow-md: 0 14px 38px rgba(12, 40, 32, .09);
    --shadow-lg: 0 26px 72px rgba(12, 40, 32, .13);
    --sidebar-width: 258px;
    --sidebar-collapsed: 86px;
    --topbar-height: 82px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 26px;
}

html.dark {
    --page: #101614;
    --surface: #18211e;
    --surface-soft: #1d2824;
    --surface-muted: #22302b;
    --border: #2d3b36;
    --border-strong: #3b4c46;
    --text: #f2f7f5;
    --text-soft: #bdc9c5;
    --text-muted: #84948e;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .18);
    --shadow-sm: 0 8px 22px rgba(0, 0, 0, .20);
    --shadow-md: 0 18px 45px rgba(0, 0, 0, .28);
    --shadow-lg: 0 30px 80px rgba(0, 0, 0, .38);
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }
html { min-height: 100%; background: var(--page); scroll-behavior: smooth; }
body.app-body {
    min-height: 100vh;
    margin: 0;
    background: var(--page);
    color: var(--text);
    font-family: Inter, "Noto Sans Arabic", Tahoma, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
html[dir="rtl"] body.app-body { font-family: "Noto Sans Arabic", Tahoma, Arial, sans-serif; }
::selection { background: var(--brand-200); color: var(--brand-950); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c5d1cc; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #9dafaa; border: 1px solid transparent; background-clip: padding-box; }
html.dark ::-webkit-scrollbar-thumb { background: #40514b; border: 2px solid transparent; background-clip: padding-box; }

svg { display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }

/* ---------- Shared brand ---------- */
.brand-mark {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 12px;
    background: var(--brand-800);
    color: white;
    box-shadow: 0 8px 20px rgba(11, 74, 63, .20);
}
.brand-mark svg { width: 21px; height: 21px; }
.brand-mark-large { width: 64px; height: 64px; border-radius: 19px; }
.brand-mark-large svg { width: 32px; height: 32px; }

/* ---------- Guest / login ---------- */
.guest-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 42%) 1fr; background: var(--surface); }
.guest-brand-panel {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: clamp(42px, 7vw, 104px);
    color: #fff;
    background:
        radial-gradient(circle at 18% 12%, rgba(255,255,255,.16), transparent 31%),
        radial-gradient(circle at 90% 78%, rgba(115,203,183,.25), transparent 35%),
        linear-gradient(145deg, var(--brand-950), var(--brand-700));
}
.guest-brand-panel::before,
.guest-brand-panel::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 50%;
}
.guest-brand-panel::before { width: 440px; height: 440px; inset-inline-end: -210px; top: -130px; }
.guest-brand-panel::after { width: 620px; height: 620px; inset-inline-start: -320px; bottom: -390px; }
.guest-brand-content { position: relative; z-index: 1; max-width: 520px; }
.guest-kicker { margin: 30px 0 8px; font-size: 11px; letter-spacing: .22em; font-weight: 800; opacity: .7; }
.guest-brand-content h1 { margin: 0; font-size: clamp(36px, 4vw, 64px); line-height: 1.1; letter-spacing: -.04em; font-weight: 800; }
html[dir="rtl"] .guest-brand-content h1 { letter-spacing: 0; }
.guest-brand-content > p:not(.guest-kicker) { max-width: 480px; margin: 24px 0 0; color: rgba(255,255,255,.74); font-size: 16px; line-height: 1.85; }
.guest-feature-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.guest-feature-list span { border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); border-radius: 999px; padding: 8px 13px; font-size: 12px; font-weight: 600; }
.guest-main { min-width: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--surface); }
.guest-topbar { min-height: 76px; display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding: 18px clamp(24px, 5vw, 72px); }
.guest-logo-mobile { display: none; align-items: center; gap: 10px; text-decoration: none; }
.guest-content { width: min(100%, 560px); margin: auto; padding: 36px 32px 80px; }
.guest-content > .relative { width: 100% !important; max-width: none !important; }
.guest-content > .relative > [class*="absolute"] { display: none !important; }
.guest-content form { width: 100%; }
.guest-content [class*="rounded-3xl"][class*="bg-white"] {
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-md) !important;
    border-radius: var(--radius-xl) !important;
    padding: clamp(28px, 5vw, 46px) !important;
    backdrop-filter: none !important;
}
.guest-content h1 { color: var(--text) !important; background: none !important; -webkit-text-fill-color: currentColor !important; font-size: 30px !important; }
.guest-content p { color: var(--text-soft) !important; }
.guest-content label { color: var(--text-soft) !important; letter-spacing: .02em !important; }
.guest-content input { color: var(--text) !important; background: var(--surface-soft) !important; border-color: var(--border) !important; }
.guest-content button[type="submit"] { background: var(--brand-800) !important; box-shadow: 0 11px 24px rgba(11,74,63,.20) !important; }
.guest-footer, .app-footer { padding: 18px clamp(24px, 5vw, 72px) 28px; text-align: center; }
.guest-footer a, .app-footer a { color: var(--text-soft); font-size: 13px; font-weight: 600; text-decoration: none; }
.guest-footer a:hover, .app-footer a:hover { color: var(--brand-700); text-decoration: underline; }
.app-footer { border-top: 1px solid var(--border); margin-top: 24px; }

.guest-settings { display: flex; align-items: center; gap: 10px; }
.guest-settings .language-switcher { display: flex; }

/* ---------- Application shell ---------- */
.app-shell { min-height: 100vh; }
.app-sidebar {
    position: fixed;
    z-index: 50;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-inline-end: 1px solid var(--border);
    transition: width .24s ease, transform .24s ease;
}
.sidebar-backdrop { display: none; }
.sidebar-brand {
    min-height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 19px;
    border-bottom: 1px solid var(--border);
}
.sidebar-logo-link { min-width: 0; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.sidebar-brand-copy { min-width: 0; display: grid; gap: 1px; }
.sidebar-brand-copy strong { color: var(--text); font-size: 15px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-brand-copy small { color: var(--text-muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-close-mobile { display: none; width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--surface-muted); color: var(--text-soft); font-size: 24px; line-height: 1; cursor: pointer; }
.sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 13px 24px; }
.nav-group + .nav-group { margin-top: 22px; }
.nav-group-title { margin: 0 10px 8px; color: var(--text-muted); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
html[dir="rtl"] .nav-group-title { letter-spacing: 0; }
.sidebar-link {
    position: relative;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 3px 0;
    padding: 8px 11px;
    border-radius: 11px;
    color: var(--text-soft);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.sidebar-link:hover { background: var(--surface-muted); color: var(--brand-800); transform: translateY(-1px); }
.sidebar-link.is-active { background: var(--brand-800); color: #fff; box-shadow: 0 9px 21px rgba(11,74,63,.20); }
.sidebar-link-icon { width: 21px; height: 21px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 21px; }
.sidebar-link-icon svg { width: 19px; height: 19px; }
.sidebar-link-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-active-dot { width: 5px; height: 5px; margin-inline-start: auto; border-radius: 50%; background: rgba(255,255,255,.82); }
.sidebar-footer { padding: 12px; border-top: 1px solid var(--border); background: var(--surface); }
.sidebar-user-card { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); text-decoration: none; transition: border .18s, background .18s; }
.sidebar-user-card:hover, .sidebar-user-card.is-active { border-color: var(--brand-300); background: var(--brand-50); }
html.dark .sidebar-user-card:hover, html.dark .sidebar-user-card.is-active { background: rgba(39,137,120,.12); }
.sidebar-avatar { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; flex: 0 0 40px; }
.sidebar-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--brand-100); color: var(--brand-800); font-weight: 800; }
.sidebar-user-copy { min-width: 0; display: grid; gap: 1px; }
.sidebar-user-copy strong { color: var(--text); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-copy small { color: var(--text-muted); font-size: 9px; }
.sidebar-user-arrow { width: 15px; height: 15px; margin-inline-start: auto; color: var(--text-muted); }
html[dir="rtl"] .sidebar-user-arrow { transform: scaleX(-1); }
.sidebar-footer-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
.sidebar-footer-actions > form:only-child { grid-column: 1 / -1; }
.sidebar-footer-btn { min-height: 37px; width: 100%; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-soft); display: flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 9px; text-decoration: none; font-size: 10px; font-weight: 700; cursor: pointer; transition: .18s; }
.sidebar-footer-btn:hover { border-color: var(--brand-300); color: var(--brand-800); background: var(--brand-50); }
.sidebar-footer-btn svg { width: 15px; height: 15px; }
.sidebar-logout:hover { border-color: #e8b7bf; color: var(--danger); background: #fff5f6; }
html.dark .sidebar-logout:hover { background: rgba(198,75,92,.12); }

.app-main { min-height: 100vh; margin-inline-start: var(--sidebar-width); transition: margin-inline-start .24s ease; }
.app-topbar {
    position: sticky;
    z-index: 40;
    top: 0;
    min-height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px clamp(20px, 2.8vw, 44px);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(18px);
}
.topbar-start, .topbar-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-start { flex: 1; }
.page-heading { min-width: 0; margin-inline-start: 4px; }
.page-heading h1 { margin: 0; color: var(--text); font-size: 20px; line-height: 1.25; font-weight: 750; letter-spacing: -.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[dir="rtl"] .page-heading h1 { letter-spacing: 0; }
.page-heading p { margin: 3px 0 0; color: var(--text-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-button { width: 40px; height: 40px; flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text-soft); cursor: pointer; transition: .18s; }
.icon-button:hover { border-color: var(--brand-300); color: var(--brand-800); background: var(--brand-50); }
.icon-button svg { width: 18px; height: 18px; }
.mobile-menu-button { display: none; }
.global-search { width: min(30vw, 290px); height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.global-search:focus-within { border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(39,137,120,.10); background: var(--surface); }
.global-search svg { width: 17px; height: 17px; color: var(--text-muted); flex: 0 0 auto; }
.global-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12px; box-shadow: none; }
.global-search input::placeholder { color: var(--text-muted); }
.language-switcher { height: 40px; display: flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.language-switcher a { min-width: 31px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; color: var(--text-muted); text-decoration: none; font-size: 9px; font-weight: 800; }
.language-switcher a:hover { color: var(--brand-800); }
.language-switcher a.is-active { background: var(--surface); color: var(--brand-800); box-shadow: var(--shadow-xs); }
.topbar-profile-wrap { position: relative; }
.topbar-profile { height: 44px; display: flex; align-items: center; gap: 9px; padding: 4px 8px 4px 5px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); color: var(--text); cursor: pointer; }
html[dir="rtl"] .topbar-profile { padding: 4px 5px 4px 8px; }
.topbar-profile img, .topbar-profile > span:first-child { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
.topbar-profile > span:first-child:not(.topbar-profile-name) { display: inline-flex; align-items: center; justify-content: center; background: var(--brand-100); color: var(--brand-800); font-weight: 800; }
.topbar-profile-name { max-width: 115px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 700; }
.topbar-profile svg { width: 14px; height: 14px; color: var(--text-muted); }
.profile-menu { position: absolute; top: calc(100% + 9px); inset-inline-end: 0; min-width: 175px; padding: 7px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-md); }
.profile-menu a, .profile-menu button { width: 100%; display: block; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text-soft); text-align: start; text-decoration: none; font-size: 11px; font-weight: 650; cursor: pointer; }
.profile-menu a:hover, .profile-menu button:hover { background: var(--surface-muted); color: var(--brand-800); }

.app-content { min-height: calc(100vh - var(--topbar-height)); padding: clamp(22px, 3vw, 42px); }
.page-container { width: 100%; max-width: 1580px; margin: 0 auto; display: grid; gap: 28px; }

/* Desktop collapsed sidebar */
.app-shell.sidebar-collapsed .app-sidebar { width: var(--sidebar-collapsed); }
.app-shell.sidebar-collapsed .app-main { margin-inline-start: var(--sidebar-collapsed); }
.app-shell.sidebar-collapsed .sidebar-brand { padding-inline: 22px; }
.app-shell.sidebar-collapsed .sidebar-brand-copy,
.app-shell.sidebar-collapsed .nav-group-title,
.app-shell.sidebar-collapsed .sidebar-link-label,
.app-shell.sidebar-collapsed .sidebar-active-dot,
.app-shell.sidebar-collapsed .sidebar-user-copy,
.app-shell.sidebar-collapsed .sidebar-user-arrow,
.app-shell.sidebar-collapsed .sidebar-footer-btn span { display: none; }
.app-shell.sidebar-collapsed .sidebar-link { justify-content: center; padding-inline: 0; }
.app-shell.sidebar-collapsed .sidebar-link-icon { width: 42px; height: 42px; flex-basis: 42px; }
.app-shell.sidebar-collapsed .sidebar-user-card { justify-content: center; padding: 8px 0; }
.app-shell.sidebar-collapsed .sidebar-footer-actions { grid-template-columns: 1fr; }
.app-shell.sidebar-collapsed .sidebar-footer-btn { padding-inline: 0; }

/* ---------- Alerts ---------- */
.alert { width: 100%; max-width: 1580px; margin: 0 auto 20px; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid; border-radius: 13px; font-size: 12px; font-weight: 600; }
.alert svg { width: 18px; height: 18px; flex: 0 0 auto; }
.alert ul { margin: 0; padding-inline-start: 18px; }
.alert-success { border-color: #b9dfd3; background: #effaf6; color: #176a58; }
.alert-danger { border-color: #efc3c9; background: #fff4f5; color: #a43b4b; }
html.dark .alert-success { border-color: rgba(82,164,148,.35); background: rgba(39,137,120,.12); color: #8dd2c2; }
html.dark .alert-danger { border-color: rgba(198,75,92,.35); background: rgba(198,75,92,.12); color: #f0a7b1; }

/* ---------- Section / cards ---------- */
.section-block { display: grid; gap: 16px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.section-heading-copy { min-width: 0; }
.section-heading h2 { margin: 0; color: var(--text); font-size: 18px; font-weight: 750; letter-spacing: -.02em; }
html[dir="rtl"] .section-heading h2 { letter-spacing: 0; }
.section-heading p { margin: 4px 0 0; color: var(--text-muted); font-size: 11px; }
.section-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.content-panel,
.app-card {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-xs) !important;
}
.content-panel:hover { border-color: var(--border-strong) !important; }
.stat-tile {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.stat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* ---------- Buttons ---------- */
.app-btn,
button[type="submit"][class*="bg-gradient"],
a[class*="bg-gradient-to-r"],
a[class*="bg-gradient-to-br"] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0 !important;
    border-radius: 11px !important;
    padding: 9px 15px !important;
    background: var(--brand-800) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(11,74,63,.16) !important;
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease !important;
}
.app-btn:hover,
button[type="submit"][class*="bg-gradient"]:hover,
a[class*="bg-gradient-to-r"]:hover,
a[class*="bg-gradient-to-br"]:hover { background: var(--brand-700) !important; transform: translateY(-1px); box-shadow: 0 11px 23px rgba(11,74,63,.20) !important; }
.app-btn-secondary { border: 1px solid var(--border) !important; background: var(--surface) !important; color: var(--text-soft) !important; box-shadow: none !important; }
.app-btn-secondary:hover { border-color: var(--brand-300) !important; background: var(--brand-50) !important; color: var(--brand-800) !important; }

/* Common plain buttons and links in existing views */
button[class*="border-slate"], a[class*="border-slate"] { border-color: var(--border) !important; background: var(--surface) !important; color: var(--text-soft) !important; box-shadow: none !important; }
button[class*="border-slate"]:hover, a[class*="border-slate"]:hover { border-color: var(--brand-300) !important; background: var(--brand-50) !important; color: var(--brand-800) !important; }

/* ---------- Forms ---------- */
.app-content form[class*="rounded-2xl"],
.app-content form[class*="rounded-3xl"],
.app-content > .page-container > form,
.form-card {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-xs) !important;
}
label { color: var(--text-soft); }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
select,
textarea {
    min-height: 42px;
    border: 1px solid var(--border) !important;
    border-radius: 11px !important;
    background-color: var(--surface-soft) !important;
    color: var(--text) !important;
    box-shadow: none !important;
    transition: border .16s ease, background .16s ease, box-shadow .16s ease;
}
textarea { min-height: 110px; }
input::placeholder, textarea::placeholder { color: var(--text-muted) !important; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus {
    outline: 0 !important;
    border-color: var(--brand-400) !important;
    background-color: var(--surface) !important;
    box-shadow: 0 0 0 3px rgba(39,137,120,.10) !important;
}
select.status-select-loading,
select.status-select-loading:focus { color:#dc2626 !important; -webkit-text-fill-color:#dc2626 !important; background-color:#fee2e2 !important; border-color:#f87171 !important; font-weight:800 !important; box-shadow:none !important; }
select.status-select-on_way,
select.status-select-on_way:focus { color:#a16207 !important; -webkit-text-fill-color:#a16207 !important; background-color:#fef3c7 !important; border-color:#facc15 !important; font-weight:800 !important; box-shadow:none !important; }
select.status-select-arrived,
select.status-select-arrived:focus { color:#15803d !important; -webkit-text-fill-color:#15803d !important; background-color:#dcfce7 !important; border-color:#4ade80 !important; font-weight:800 !important; box-shadow:none !important; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-700); }
input[type="file"] { color: var(--text-soft); }

/* ---------- Tables ---------- */
.overflow-x-auto { scrollbar-gutter: stable; }
table { width: 100%; border-collapse: separate !important; border-spacing: 0 !important; color: var(--text); }
thead tr { background: #15201c !important; }
html.dark thead tr { background: #0c1512 !important; }
thead th {
    padding: 13px 15px !important;
    color: rgba(255,255,255,.84) !important;
    font-size: 9px !important;
    font-weight: 750 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    white-space: nowrap;
    border: 0 !important;
}
html[dir="rtl"] thead th { letter-spacing: 0 !important; }
thead th:first-child { border-start-start-radius: 12px; }
thead th:last-child { border-start-end-radius: 12px; }
tbody { background: var(--surface) !important; }
tbody tr { transition: background .14s ease; }
tbody tr:hover { background: var(--brand-50) !important; }
html.dark tbody tr:hover { background: rgba(39,137,120,.09) !important; }
tbody td {
    padding: 13px 15px !important;
    color: var(--text-soft);
    border-bottom: 1px solid var(--border) !important;
    vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0 !important; }
tbody td.font-medium, tbody td[class*="font-semibold"] { color: var(--text); }

/* ---------- Pagination ---------- */
nav[role="navigation"] { margin-top: 20px; }
.pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 0; margin: 20px 0 0; }
.pagination li { list-style: none; }
.pagination a, .pagination span { min-width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center; padding: 0 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-soft); text-decoration: none; font-size: 11px; }
.pagination .active span, .pagination [aria-current="page"] span { border-color: var(--brand-800); background: var(--brand-800); color: #fff; }

/* ---------- Dashboard v4 ---------- */
.dashboard-v4 { display: grid; gap: 24px; }
.dashboard-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.dashboard-head h2 { margin: 0; font-size: 26px; font-weight: 780; letter-spacing: -.035em; color: var(--text); }
html[dir="rtl"] .dashboard-head h2 { letter-spacing: 0; }
.dashboard-head p { margin: 6px 0 0; color: var(--text-muted); font-size: 12px; }
.dashboard-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dashboard-date-pill { min-height: 39px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--text-soft); font-size: 11px; font-weight: 650; }
.dashboard-date-pill svg { width: 16px; height: 16px; color: var(--brand-700); }
.dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.metric-card { min-height: 138px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 19px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs); transition: transform .18s, border .18s, box-shadow .18s; text-decoration: none; }
.metric-card:hover { transform: translateY(-2px); border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
.metric-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.metric-card-label { color: var(--text-muted); font-size: 10px; line-height: 1.35; font-weight: 750; text-transform: uppercase; letter-spacing: .055em; }
html[dir="rtl"] .metric-card-label { letter-spacing: 0; }
.metric-icon { width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--brand-50); color: var(--brand-700); }
html.dark .metric-icon { background: rgba(39,137,120,.12); color: var(--brand-300); }
.metric-icon svg { width: 18px; height: 18px; }
.metric-value { color: var(--text); font-size: clamp(22px, 2vw, 30px); line-height: 1; font-weight: 790; letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.metric-value.danger { color: var(--danger); }
.metric-value.success { color: var(--success); }
.metric-value.warning { color: var(--warning); }
.metric-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text-muted); font-size: 9px; }
.metric-foot strong { color: var(--brand-700); }
.dashboard-grid-main { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(310px, .7fr); gap: 18px; }
.dashboard-panel { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs); overflow: hidden; }
.dashboard-panel-header { min-height: 67px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 19px; border-bottom: 1px solid var(--border); }
.dashboard-panel-title h3 { margin: 0; color: var(--text); font-size: 15px; font-weight: 750; }
.dashboard-panel-title p { margin: 3px 0 0; color: var(--text-muted); font-size: 9px; }
.dashboard-panel-link { color: var(--brand-700); font-size: 10px; font-weight: 750; text-decoration: none; }
.dashboard-panel-link:hover { text-decoration: underline; }
.financial-overview { display: grid; grid-template-columns: minmax(0, 1fr) 210px; min-height: 290px; }
.financial-bars { padding: 24px 22px; display: grid; align-content: center; gap: 23px; }
.finance-bar-row { display: grid; gap: 8px; }
.finance-bar-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-soft); font-size: 10px; }
.finance-bar-meta strong { color: var(--text); font-size: 11px; font-variant-numeric: tabular-nums; }
.finance-bar-track { height: 10px; overflow: hidden; border-radius: 999px; background: var(--surface-muted); }
.finance-bar-fill { height: 100%; min-width: 3px; border-radius: inherit; background: var(--brand-700); }
.finance-bar-fill.alt { background: #79aa9f; }
.finance-bar-fill.danger { background: #c76a77; }
.finance-bar-fill.warning { background: #c89a49; }
.finance-ring-wrap { display: grid; place-items: center; padding: 24px; border-inline-start: 1px solid var(--border); background: var(--surface-soft); }
.finance-ring { --value: 65%; width: 148px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--brand-700) 0 var(--value), var(--brand-100) var(--value) 100%); position: relative; }
.finance-ring::before { content: ""; position: absolute; inset: 15px; border-radius: 50%; background: var(--surface); }
.finance-ring-content { position: relative; z-index: 1; text-align: center; }
.finance-ring-content strong { display: block; color: var(--text); font-size: 22px; line-height: 1; font-weight: 790; }
.finance-ring-content span { display: block; margin-top: 6px; color: var(--text-muted); font-size: 8px; line-height: 1.35; }
.quick-actions-grid { padding: 15px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quick-action-card { min-height: 104px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); color: var(--text); text-decoration: none; transition: .18s; }
.quick-action-card:hover { border-color: var(--brand-300); background: var(--brand-50); transform: translateY(-1px); }
.quick-action-icon { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 10px; background: var(--surface); color: var(--brand-700); box-shadow: var(--shadow-xs); }
.quick-action-icon svg { width: 17px; height: 17px; }
.quick-action-card strong { font-size: 10px; line-height: 1.45; }
.operation-summary { padding: 18px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
.operation-mini { min-height: 86px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); }
.operation-mini span { color: var(--text-muted); font-size: 9px; }
.operation-mini strong { display: block; margin-top: 10px; color: var(--text); font-size: 22px; line-height: 1; font-weight: 780; font-variant-numeric: tabular-nums; }
.dashboard-table-panel { overflow: hidden; }
.dashboard-table-panel .overflow-x-auto { padding: 0; }

/* ---------- Mobile quick navigation ---------- */
.mobile-quick-nav { display: none; }

/* ---------- Dark mode corrections ---------- */
html.dark .guest-brand-panel { background: linear-gradient(145deg, #061c18, #0a4036); }
html.dark .finance-ring { background: conic-gradient(var(--brand-400) 0 var(--value), #2a3b35 var(--value) 100%); }
html.dark .sidebar-link.is-active { background: var(--brand-600); }
html.dark .sidebar-user-card:hover, html.dark .sidebar-user-card.is-active { border-color: var(--brand-600); }
html.dark [class*="bg-white"], html.dark [class*="dark:bg-white"] { --tw-bg-opacity: 1; }
html.dark tbody td { color: var(--text-soft); }

/* ---------- Responsive ---------- */
@media (max-width: 1260px) {
    .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-grid-main { grid-template-columns: 1fr; }
    .dashboard-side-stack { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
}

@media (max-width: 1023px) {
    :root { --topbar-height: 72px; }
    .app-sidebar { transform: translateX(calc(-1 * var(--sidebar-width))); box-shadow: var(--shadow-lg); }
    html[dir="rtl"] .app-sidebar { transform: translateX(var(--sidebar-width)); }
    .app-shell.sidebar-open .app-sidebar { transform: translateX(0); }
    .sidebar-backdrop { position: fixed; z-index: 45; inset: 0; display: block; background: rgba(7,18,15,.48); backdrop-filter: blur(3px); }
    .app-main, .app-shell.sidebar-collapsed .app-main { margin-inline-start: 0; }
    .app-shell.sidebar-collapsed .app-sidebar { width: var(--sidebar-width); }
    .app-shell.sidebar-collapsed .sidebar-brand-copy,
    .app-shell.sidebar-collapsed .nav-group-title,
    .app-shell.sidebar-collapsed .sidebar-link-label,
    .app-shell.sidebar-collapsed .sidebar-active-dot,
    .app-shell.sidebar-collapsed .sidebar-user-copy,
    .app-shell.sidebar-collapsed .sidebar-user-arrow,
    .app-shell.sidebar-collapsed .sidebar-footer-btn span { display: initial; }
    .app-shell.sidebar-collapsed .sidebar-link { justify-content: flex-start; padding-inline: 11px; }
    html[dir="rtl"] .app-shell.sidebar-collapsed .sidebar-link { justify-content: flex-start; }
    .app-shell.sidebar-collapsed .sidebar-user-card { justify-content: flex-start; padding: 8px; }
    .app-shell.sidebar-collapsed .sidebar-footer-actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .sidebar-close-mobile, .mobile-menu-button { display: inline-flex; }
    .sidebar-collapse-button { display: none; }
    .global-search { width: min(34vw, 250px); }
    .app-content { padding-bottom: 94px; }
    .mobile-quick-nav { display: block; }
}

@media (max-width: 820px) {
    .guest-shell { grid-template-columns: 1fr; }
    .guest-brand-panel { display: none; }
    .guest-logo-mobile { display: flex; margin-inline-end: auto; }
    .guest-topbar { padding: 14px 18px; border-bottom: 1px solid var(--border); }
    .guest-content { padding: 34px 20px 70px; }
    .topbar-profile-name, .global-search { display: none; }
    .app-topbar { gap: 10px; padding-inline: 16px; }
    .topbar-actions { gap: 7px; }
    .page-heading p { display: none; }
    .dashboard-head { align-items: flex-start; flex-direction: column; }
    .financial-overview { grid-template-columns: 1fr; }
    .finance-ring-wrap { border-inline-start: 0; border-top: 1px solid var(--border); }
    .dashboard-side-stack { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .language-switcher { display: none; }
    .page-heading h1 { font-size: 16px; }
    .app-content { padding: 18px 13px 92px; }
    .page-container { gap: 20px; }
    .dashboard-head h2 { font-size: 22px; }
    .dashboard-metrics { grid-template-columns: 1fr; gap: 10px; }
    .metric-card { min-height: 116px; padding: 16px; }
    .quick-actions-grid, .operation-summary { grid-template-columns: 1fr 1fr; }
    .section-heading { align-items: stretch; flex-direction: column; }
    .section-actions { justify-content: flex-start; }
    .section-actions > * { max-width: 100%; }
    .app-content form[class*="p-6"], .app-content form[class*="p-8"] { padding: 17px !important; }
    thead th, tbody td { padding: 11px 12px !important; }
}

@media (max-width: 430px) {
    .topbar-profile { padding: 4px; }
    .topbar-profile svg { display: none; }
    .icon-button { width: 38px; height: 38px; flex-basis: 38px; }
    .quick-actions-grid, .operation-summary { grid-template-columns: 1fr; }
    .guest-content [class*="rounded-3xl"][class*="bg-white"] { padding: 25px 20px !important; }
}

@media print {
    .app-sidebar, .app-topbar, .mobile-quick-nav, .sidebar-backdrop { display: none !important; }
    .app-main { margin: 0 !important; }
    .app-content { padding: 0 !important; }
    body { background: #fff !important; }
}

.mobile-quick-nav {
    position: fixed;
    z-index: 44;
    inset-inline: 0;
    bottom: 0;
    padding: 8px 10px max(8px, env(safe-area-inset-bottom));
    pointer-events: none;
}
.mobile-quick-nav-inner {
    width: min(100%, 620px);
    min-height: 64px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 4px;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    box-shadow: 0 -10px 32px rgba(12,40,32,.11);
    backdrop-filter: blur(16px);
    pointer-events: auto;
}
.mobile-quick-nav-four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.mobile-quick-nav-inner a {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    border-radius: 12px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 8px;
    font-weight: 700;
}
.mobile-quick-nav-inner a svg { width: 19px; height: 19px; }
.mobile-quick-nav-inner a.is-active { background: var(--brand-800); color: white; }
.mobile-quick-nav-inner a span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }

.login-card { width: 100%; border: 0; background: transparent; }
.login-heading { margin-bottom: 30px; }
.login-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; border-radius: 999px; background: var(--brand-50); color: var(--brand-700); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.login-heading h1 { margin: 17px 0 0; color: var(--text); font-size: 34px; line-height: 1.15; font-weight: 800; letter-spacing: -.035em; }
html[dir="rtl"] .login-heading h1 { letter-spacing: 0; }
.login-heading p { margin: 8px 0 0; color: var(--text-muted); font-size: 12px; }
.login-form { display: grid; gap: 18px; }
.form-field { display: grid; gap: 7px; }
.form-field label { color: var(--text-soft); font-size: 11px; font-weight: 700; }
.input-with-icon { position: relative; }
.input-with-icon svg { position: absolute; z-index: 1; inset-inline-start: 14px; top: 50%; width: 18px; height: 18px; color: var(--text-muted); transform: translateY(-50%); }
.input-with-icon input { width: 100%; min-height: 50px !important; padding-inline-start: 44px !important; background: var(--surface-soft) !important; }
.remember-row { display: flex; align-items: center; gap: 9px; color: var(--text-soft); font-size: 11px; cursor: pointer; }
.remember-row input { width: 16px; height: 16px; }
.login-submit { min-height: 51px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 12px; background: var(--brand-800); color: white; font-size: 12px; font-weight: 750; box-shadow: 0 12px 26px rgba(11,74,63,.20); cursor: pointer; transition: .18s; }
.login-submit:hover { background: var(--brand-700); transform: translateY(-1px); }
.login-submit svg { width: 18px; height: 18px; }
html[dir="rtl"] .login-submit svg { transform: scaleX(-1); }

.status-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 999px; background: var(--surface-muted); color: var(--text-soft); font-size: 8px; font-weight: 750; white-space: nowrap; }
.status-chip-success { background: #e9f7f2; color: #15715b; }
.status-chip-danger { background: #fff0f2; color: #ad4252; }
html.dark .status-chip-success { background: rgba(39,137,120,.15); color: #8bd1c1; }
html.dark .status-chip-danger { background: rgba(198,75,92,.15); color: #ef9eaa; }

/* SHA Bankio V8 final polish */
.page-container { max-width: 1480px; }
.app-content { padding-bottom: 40px; }
.content-panel, .stat-tile, .dashboard-card, .form-card, .table-card { border-radius: 18px !important; }
.table-responsive, .overflow-x-auto { scrollbar-gutter: stable; }
input, select, textarea { min-height: 42px; }
textarea { min-height: 96px; }
@media (min-width: 1024px) {
  .admin-quick-nav, .customer-quick-nav, [data-quick-nav], .fixed.bottom-0[class*="z-"] { display: none !important; }
}
@media (max-width: 767px) {
  .app-content { padding: 18px 14px 110px; }
  .page-container { gap: 16px; }
  table { font-size: 12px; }
}