/* ====== App Toast — Premium Notifications with Progress Bar ====== */
.app-toast-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 420px;
    width: calc(100vw - 48px);
    pointer-events: none;
    align-items: center;
}

.app-toast {
    pointer-events: all;
    background:
        radial-gradient(circle at 88% 14%, rgba(217, 170, 69, 0.15), transparent 8rem),
        linear-gradient(160deg, var(--navy-3) 0%, var(--navy) 55%, var(--navy-4) 100%);
    border-radius: 14px;
    box-shadow: 0 20px 56px rgba(1, 11, 29, 0.55), 0 4px 16px rgba(1, 11, 29, 0.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-right: 4px solid transparent;
    transform: scale(0.82) translateY(-16px);
    opacity: 0;
    transition: transform 0.36s cubic-bezier(0.34, 1.5, 0.64, 1), opacity 0.26s ease;
}
.app-toast.toast-show {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.app-toast.toast-hide {
    transform: scale(0.88) translateY(-10px);
    opacity: 0;
    transition: transform 0.2s ease-in, opacity 0.16s ease-in;
}

.app-toast.toast-success { border-right-color: #4ade80; }
.app-toast.toast-success .app-toast-icon  { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.app-toast.toast-success .app-toast-bar   { background: linear-gradient(90deg, #16a34a, #4ade80); }

.app-toast.toast-info { border-right-color: #60a5fa; }
.app-toast.toast-info .app-toast-icon    { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.app-toast.toast-info .app-toast-bar     { background: linear-gradient(90deg, #2563eb, #60a5fa); }

.app-toast.toast-warning { border-right-color: #fbbf24; }
.app-toast.toast-warning .app-toast-icon  { background: rgba(217, 170, 69, 0.18); color: #fbbf24; }
.app-toast.toast-warning .app-toast-bar   { background: linear-gradient(90deg, var(--accent), #fbbf24); }

.app-toast.toast-danger { border-right-color: #f87171; }
.app-toast.toast-danger .app-toast-icon   { background: rgba(248, 113, 113, 0.15); color: #f87171; }
.app-toast.toast-danger .app-toast-bar    { background: linear-gradient(90deg, #dc2626, #f87171); }

.app-toast-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 10px;
}
.app-toast-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 19px;
}
.app-toast-content { flex: 1; min-width: 0; }
.app-toast-title {
    font-weight: 700;
    font-size: 13.5px;
    color: #f0f6ff;
    margin-bottom: 2px;
    font-family: var(--font);
}
.app-toast-message {
    font-size: 13px;
    color: #94a9c4;
    line-height: 1.55;
    font-family: var(--font);
}
.app-toast-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.3);
    cursor: pointer;
    padding: 0 4px;
    font-size: 15px;
    line-height: 1;
    margin-top: 1px;
    flex-shrink: 0;
    transition: color 0.15s;
    font-family: var(--font);
}
.app-toast-close:hover { color: rgba(255,255,255,0.8); }
.app-toast-progress {
    height: 3px;
    background: rgba(255,255,255,0.08);
    position: relative;
    overflow: hidden;
}
.app-toast-bar {
    height: 100%;
    width: 100%;
    transform-origin: right;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}
@keyframes toast-shrink {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* ====== Ledger dark select for general ledger filter ====== */
/* Ledger dark select for general ledger filter */
.ledger-dark-select {
    background-color: var(--navy-mid) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
}

.ledger-dark-select option {
    background-color: var(--navy-mid) !important;
    color: #fff !important;
}
/* ============================================================
   Saudi Lite Invoice - Premium RTL Interface
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');

:root {
    --sidebar-width: 282px;
    --font: 'Cairo', 'Segoe UI', Arial, sans-serif;
    --ink: #101828;
    --muted: #667085;
    --soft: #f5f7fb;
    --panel: #ffffff;
    --line: #e6eaf2;
    --primary: #0b4f6c;
    --primary-dark: #063849;
    --accent: #c79a3b;
    --teal: #128c7e;
    --green: #16825d;
    --orange: #c77a19;
    --red: #c43d4b;
    --violet: #6554c0;
    --shadow-sm: 0 8px 22px rgba(16, 24, 40, 0.07);
    --shadow-md: 0 18px 45px rgba(16, 24, 40, 0.11);
    --shadow-lg: 0 28px 70px rgba(6, 56, 73, 0.18);
}

* { box-sizing: border-box; }

html { min-height: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

body {
    min-height: 100vh;
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    direction: rtl;
    text-align: right;
    background:
        radial-gradient(circle at 86% -10%, rgba(18, 140, 126, 0.17), transparent 34rem),
        radial-gradient(circle at 8% 4%, rgba(199, 154, 59, 0.14), transparent 30rem),
        linear-gradient(180deg, #fbfcff 0%, #eef3f8 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}

a {
    color: var(--primary);
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

a:hover { color: var(--teal); }

::selection {
    color: #fff;
    background: var(--primary);
}

/* ============================================================ Sidebar */
.sidebar {
    position: fixed;
    inset: 0 0 0 auto;
    width: var(--sidebar-width);
    height: 100vh;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: none;
    color: #fff;
    background:
        radial-gradient(circle at 88% 14%, rgba(217, 170, 69, 0.22), transparent 10rem),
        linear-gradient(180deg, var(--navy) 0%, var(--navy-3) 52%, var(--navy-4) 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: -22px 0 45px rgba(6, 56, 73, 0.18);
    transition: transform 0.28s ease;
    direction: rtl;
    text-align: right;
}

.sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.08), transparent 24%),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 12px);
    opacity: 0.45;
}

.sidebar-brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 24px 22px 20px;
    min-height: 86px;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-brand i {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #102126;
    font-size: 23px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f6d27c, var(--accent));
    box-shadow: 0 14px 28px rgba(199, 154, 59, 0.28);
}

.sidebar-brand .brand-logo-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 8px;
    flex: 0 0 auto;
}

.sidebar-nav {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 18px 13px 22px;
}

.sidebar-section {
    padding: 18px 12px 8px;
    color: rgba(255,255,255,0.48);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    margin: 3px 0;
    padding: 10px 12px 10px 14px;
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 700;
    border-radius: 8px;
}

.sidebar-link i {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: rgba(255,255,255,0.78);
    font-size: 16px;
    border-radius: 8px;
    background: rgba(255,255,255,0.07);
}

.sidebar-link:hover,
.sidebar-link.active {
    color: #fff;
    background: rgba(255,255,255,0.12);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}

.sidebar-link:hover { transform: translateX(-2px); }

.sidebar-link.active::after {
    content: "";
    position: absolute;
    inset-inline-end: 8px;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 999px;
    background: var(--gold-light);
    box-shadow: 0 0 18px rgba(242, 193, 95, 0.7);
}

.sidebar-link.active i {
    color: #102126;
    background: linear-gradient(135deg, #f6d27c, var(--accent));
}

.sidebar-link.text-danger {
    color: #ffd6d6 !important;
    margin-top: 10px;
}

.sidebar-link.text-danger i {
    color: #ffd6d6;
    background: rgba(196, 61, 75, 0.18);
}

.sidebar-module {
    margin: 5px 0;
}

.sidebar-module summary {
    list-style: none;
}

.sidebar-module summary::-webkit-details-marker {
    display: none;
}

.sidebar-module-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 10px 12px 10px 14px;
    color: rgba(255,255,255,0.82);
    font-size: 13.5px;
    font-weight: 800;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.sidebar-module-head > i {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: rgba(255,255,255,0.82);
    font-size: 16px;
    border-radius: 8px;
    background: rgba(255,255,255,0.07);
}

.sidebar-module-head b {
    margin-inline-start: auto;
    color: rgba(255,255,255,0.58);
    font-size: 12px;
    transition: transform 0.18s ease;
}

.sidebar-module[open] .sidebar-module-head b {
    transform: rotate(180deg);
}

.sidebar-module-head:hover,
.sidebar-module-head.active {
    color: #fff;
    background: rgba(255,255,255,0.12);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}

.sidebar-module-head:hover {
    transform: translateX(-2px);
}

.sidebar-module-head.active > i {
    color: #102126;
    background: linear-gradient(135deg, #f6d27c, var(--accent));
}

.sidebar-module-head.active::after {
    content: "";
    position: absolute;
    inset-inline-end: 8px;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 999px;
    background: var(--gold-light);
    box-shadow: 0 0 18px rgba(242, 193, 95, 0.7);
}

.sidebar-subnav {
    position: relative;
    margin: 2px 13px 8px 0;
    padding: 4px 13px 4px 0;
    border-right: 1px solid rgba(255,255,255,0.13);
}

.sidebar-subnav-divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 6px 0;
}

.sidebar-sublink {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    margin: 2px 0;
    padding: 7px 9px 7px 12px;
    color: rgba(255,255,255,0.68);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 750;
    border-radius: 8px;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.sidebar-sublink i {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: rgba(255,255,255,0.66);
    font-size: 13px;
    border-radius: 7px;
    background: rgba(255,255,255,0.055);
}

.sidebar-sublink:hover,
.sidebar-sublink.active {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

.sidebar-sublink:hover {
    transform: translateX(-2px);
}

.sidebar-sublink.active {
    box-shadow: inset 0 0 0 1px rgba(242, 193, 95, 0.18);
}

.sidebar-sublink.active i {
    color: #102126;
    background: var(--gold-light);
}

.sidebar-link.disabled-soon,
.sidebar-sublink.disabled-soon {
    opacity: 0.58;
    cursor: default;
}

.sidebar-link.disabled-soon:hover,
.sidebar-sublink.disabled-soon:hover {
    transform: none;
    color: rgba(255,255,255,0.78);
    background: transparent;
    box-shadow: none;
}

/* ============================================================ Layout */
.main-content {
    margin-right: var(--sidebar-width);
    min-height: 100vh;
    transition: margin-right 0.28s ease;
}

.top-navbar {
    position: sticky;
    top: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    min-height: 70px;
    padding: 12px 30px;
    background:
        radial-gradient(circle at 88% 14%, rgba(217, 170, 69, 0.22), transparent 10rem),
        linear-gradient(180deg, var(--navy) 0%, var(--navy-3) 52%, var(--navy-4) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 32px rgba(6, 56, 73, 0.22);
    backdrop-filter: blur(18px);
}

.sidebar-toggle {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.78);
    border-radius: 8px;
    text-decoration: none;
}

.sidebar-toggle:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.top-navbar .text-muted {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    color: var(--muted) !important;
    background: #f7fafc;
    border: 1px solid var(--line);
    border-radius: 999px;
}

.page-content {
    padding: 0 30px 200px;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 28px 0 22px;
    margin-bottom: 26px;
    border-bottom: 1px solid rgba(230, 234, 242, 0.9);
}

.page-header > div,
.page-header > h1,
.page-header > nav {
    min-width: 0;
}

.page-title {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    color: var(--ink);
    font-size: 26px;
    font-weight: 800;
}

.page-title i {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 21px;
    border-radius: 8px;
    background: #e9f6f6;
    box-shadow: inset 0 0 0 1px rgba(18, 140, 126, 0.12);
}

.breadcrumb {
    --bs-breadcrumb-divider-color: #98a2b3;
    font-size: 12.5px;
}

/* ============================================================ Panels */
.card {
    overflow: hidden;
    color: var(--ink);
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(230, 234, 242, 0.95);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.card:hover {
    box-shadow: 0 14px 34px rgba(16, 24, 40, 0.09);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 15px 18px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border-bottom: 1px solid var(--line);
    border-radius: 8px 8px 0 0 !important;
}

.card-header h5,
.card-header h6 {
    color: var(--ink);
    font-weight: 800;
}

.card-body { padding: 20px; }

.border-danger {
    border-color: rgba(196, 61, 75, 0.25) !important;
}

.bg-danger {
    background: linear-gradient(135deg, #c43d4b, #8f2634) !important;
}

/* ============================================================ Statistics Cards */
.stat-card {
    position: relative;
    min-height: 132px;
    padding: 20px;
    overflow: hidden;
    color: #fff;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    isolation: isolate;
}

.stat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 42%);
}

.stat-card::after {
    content: "";
    position: absolute;
    width: 138px;
    height: 138px;
    left: -56px;
    bottom: -58px;
    border-radius: 50%;
    background: rgba(255,255,255,0.13);
}

.stat-card .stat-icon {
    position: absolute;
    left: 18px;
    top: 18px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.82);
    font-size: 22px;
    border-radius: 8px;
    background: rgba(255,255,255,0.14);
    transform: none;
    opacity: 1;
}

.stat-card .stat-value {
    max-width: calc(100% - 38px);
    margin: 32px 0 8px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
}

.stat-card .stat-value.small-value {
    font-size: 20px;
    line-height: 1.35;
}

.stat-card .stat-label {
    color: rgba(255,255,255,0.82);
    font-size: 12.5px;
    font-weight: 700;
}

.stat-card-blue    { background: linear-gradient(135deg, #063849, #0b6c7e); }
.stat-card-teal    { background: linear-gradient(135deg, #0a756b, #28a99a); }
.stat-card-indigo  { background: linear-gradient(135deg, #3c3f8f, #6554c0); }
.stat-card-dark    { background: linear-gradient(135deg, #1d2939, #475467); }
.stat-card-green   { background: linear-gradient(135deg, #0d6b4f, #18a071); }
.stat-card-orange  { background: linear-gradient(135deg, #9b5e13, #d99a2b); }

/* ============================================================ Tables */
.table {
    --bs-table-color: var(--ink);
    --bs-table-border-color: #edf1f6;
    margin-bottom: 0;
}

.table th {
    padding: 14px 16px;
    color: #475467;
    background: #f8fafc;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    border-bottom-width: 1px;
}

.table td {
    padding: 14px 16px;
    color: #344054;
    font-size: 13px;
    vertical-align: middle;
}

.table-hover tbody tr {
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.table-hover tbody tr:hover {
    background: #f2fbfb;
    box-shadow: inset 3px 0 0 var(--teal);
}

.table-bordered > :not(caption) > * {
    border-width: 0 0 1px;
}

.table-light {
    --bs-table-bg: #f8fafc;
}

.list-group-item {
    padding: 15px 18px;
    border-color: #edf1f6;
}

/* ============================================================ Badges */
.badge {
    min-width: 62px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.bg-primary { background-color: var(--primary) !important; }
.bg-secondary { background-color: #667085 !important; }
.bg-success { background-color: var(--green) !important; }
.bg-warning { background-color: var(--orange) !important; color: #fff !important; }
.bg-info { background-color: var(--teal) !important; }

/* ============================================================ Buttons */
.btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font);
    font-weight: 800;
    border-radius: 8px;
    box-shadow: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-sm {
    min-height: 34px;
    padding-inline: 11px;
    font-size: 12px;
}

.btn-lg {
    min-height: 50px;
    font-size: 15px;
}

.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--teal));
    border-color: transparent;
    box-shadow: 0 12px 24px rgba(11, 79, 108, 0.22);
}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    background: linear-gradient(135deg, var(--primary-dark), #0d756b);
    border-color: transparent;
    box-shadow: 0 16px 30px rgba(11, 79, 108, 0.28);
}

.btn-success {
    background: linear-gradient(135deg, #16825d, #21a376);
    border-color: transparent;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning {
    background: #fff;
    border-color: var(--line);
}

.btn-outline-primary { color: var(--primary); }
.btn-outline-secondary { color: #475467; }
.btn-outline-success { color: var(--green); }
.btn-outline-danger { color: var(--red); }
.btn-outline-warning { color: var(--orange); }

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover {
    color: #fff;
    border-color: transparent;
}

.btn-outline-primary:hover { background: var(--primary); }
.btn-outline-secondary:hover { background: #475467; }
.btn-outline-success:hover { background: var(--green); }
.btn-outline-danger:hover { background: var(--red); }
.btn-outline-warning:hover { background: var(--orange); }

.btn-group-sm > .btn,
.btn-group .btn-sm {
    min-width: 35px;
    min-height: 35px;
    padding: 6px 9px;
}

.btn-link {
    text-decoration: none;
}

/* ============================================================ Forms */
.form-control,
.form-select,
.input-group-text {
    min-height: 42px;
    color: var(--ink);
    background-color: #fff;
    border-color: #d9e0ea;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 600;
}

.form-control-sm,
.form-select-sm {
    min-height: 36px;
    font-size: 12.5px;
}

.form-control::placeholder { color: #98a2b3; }

.form-control:focus,
.form-select:focus {
    border-color: rgba(18, 140, 126, 0.7);
    box-shadow: 0 0 0 4px rgba(18, 140, 126, 0.12);
}

.native-search-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.app-combobox {
    position: relative;
    width: 100%;
    min-width: 0;
    font-family: var(--font);
}

.app-combobox-toggle {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0.625rem 0.9rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid #d9e0ea;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 800;
    text-align: right;
    box-shadow: var(--shadow-xs);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.app-combobox-toggle:hover {
    border-color: #c5d1df;
    background: #fbfcfe;
}

.app-combobox.open .app-combobox-toggle {
    border-color: #c89b3c;
    box-shadow: 0 0 0 4px rgba(200, 155, 60, 0.12);
}

.app-combobox.is-invalid .app-combobox-toggle {
    border-color: #d92d20;
    box-shadow: 0 0 0 4px rgba(217, 45, 32, 0.12);
}

.app-combobox.is-disabled .app-combobox-toggle {
    color: #98a2b3;
    background: #f2f4f7;
    cursor: not-allowed;
}

.app-combobox-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-combobox-value.is-placeholder {
    color: #98a2b3;
}

.app-combobox-toggle i {
    color: #667085;
    font-size: 13px;
    transition: transform 0.18s ease;
}

.app-combobox.open .app-combobox-toggle i {
    transform: rotate(180deg);
}

.app-combobox-panel {
    position: absolute;
    z-index: 1060;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    display: none;
    padding: 10px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #dde5ef;
    border-radius: 8px;
    box-shadow: 0 20px 48px rgba(6, 27, 53, 0.16);
}

.app-combobox.open .app-combobox-panel {
    display: block;
}

.app-combobox-search {
    position: relative;
    margin-bottom: 8px;
}

.app-combobox-search i {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: #98a2b3;
    font-size: 14px;
}

.app-combobox-search input {
    width: 100%;
    min-height: 40px;
    padding: 8px 38px 8px 12px;
    color: var(--navy);
    background: #f8fafc;
    border: 1px solid #dfe6f0;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 800;
    outline: 0;
}

.app-combobox-search input:focus {
    background: #fff;
    border-color: #c89b3c;
    box-shadow: 0 0 0 4px rgba(200, 155, 60, 0.12);
}

.app-combobox-list {
    max-height: 260px;
    overflow: auto;
    padding: 2px;
}

.app-combobox-option {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 9px 11px;
    color: #132f55;
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 800;
    text-align: right;
}

.app-combobox-option:hover,
.app-combobox-option:focus {
    color: var(--navy);
    background: #fff7e8;
    outline: 0;
}

.app-combobox-option.selected {
    color: #8a5b00;
    background: linear-gradient(135deg, #fff8e8, #fffdf7);
    box-shadow: inset 3px 0 0 #c89b3c;
}

.app-combobox-empty {
    padding: 18px 10px;
    color: #98a2b3;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.premium-input.app-combobox .app-combobox-toggle {
    min-height: 44px;
    background: #fbfcfe;
    border-width: 1.5px;
}

.table .app-combobox-panel,
.premium-lines-table .app-combobox-panel,
.journal-lines-table .app-combobox-panel {
    min-width: 280px;
}

.form-label {
    margin-bottom: 7px;
    color: #344054;
    font-size: 12.5px;
    font-weight: 800;
}

.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child),
.input-group > .input-group-text:not(:first-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child),
.input-group > .input-group-text:not(:last-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

textarea.form-control { line-height: 1.8; }

.alert {
    border: 0;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

/* ============================================================ Dashboard touches */
.dashboard-command {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 28px 30px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(6, 56, 73, 0.96), rgba(11, 79, 108, 0.92) 56%, rgba(18, 140, 126, 0.9)),
        linear-gradient(45deg, rgba(199, 154, 59, 0.24), transparent);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
}

.dashboard-command::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 14px),
        linear-gradient(90deg, transparent, rgba(255,255,255,0.12));
    opacity: 0.42;
}

.dashboard-command > * {
    position: relative;
    z-index: 1;
}

.command-kicker {
    display: inline-flex;
    margin-bottom: 8px;
    color: #f7d98d;
    font-size: 12px;
    font-weight: 800;
}

.dashboard-command h2 {
    margin: 0;
    font-size: 27px;
    font-weight: 800;
}

.dashboard-command p {
    max-width: 680px;
    margin: 10px 0 0;
    color: rgba(255,255,255,0.78);
    font-size: 14px;
    line-height: 1.9;
}

.command-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.dashboard-command .btn-light {
    color: var(--primary-dark);
    background: #fff;
    border-color: #fff;
}

.btn-command-outline {
    color: #fff;
    border-color: rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.1);
}

.btn-command-outline:hover {
    color: var(--primary-dark);
    background: #f7d98d;
    border-color: #f7d98d;
}

.d-grid .btn {
    justify-content: flex-start;
    padding-inline: 15px;
}

.table-primary {
    --bs-table-bg: #e8f5f5;
    --bs-table-color: var(--primary-dark);
}

/* ============================================================ Login Page */
.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        linear-gradient(rgba(5, 35, 47, 0.72), rgba(5, 35, 47, 0.8)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='900' viewBox='0 0 1400 900'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='1'%3E%3Cstop stop-color='%230b4f6c'/%3E%3Cstop offset='.55' stop-color='%23128c7e'/%3E%3Cstop offset='1' stop-color='%23c79a3b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1400' height='900' fill='url(%23g)'/%3E%3Cg opacity='.16' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M70 150h420v260H70zM580 90h330v190H580zM990 210h330v410H990zM170 520h520v210H170zM735 390h190v250H735z'/%3E%3Cpath d='M105 212h350M105 270h300M105 328h230M620 155h240M620 210h190M1028 300h250M1028 358h210M1028 416h165M210 590h430M210 648h350'/%3E%3C/g%3E%3Cg opacity='.22' fill='white'%3E%3Ccircle cx='1130' cy='122' r='5'/%3E%3Ccircle cx='1220' cy='122' r='5'/%3E%3Ccircle cx='1310' cy='122' r='5'/%3E%3Ccircle cx='260' cy='820' r='5'/%3E%3Ccircle cx='350' cy='820' r='5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    background-color: #05232f;
}

body.login-page {
    height: 100vh;
    height: 100dvh;
    overflow: auto;
}

.login-container {
    width: 100%;
    max-width: 448px;
}

.login-card {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(18px);
}

.login-header {
    position: relative;
    padding: 34px 28px 30px;
    color: white;
    text-align: center;
    background:
        linear-gradient(135deg, rgba(6, 56, 73, 0.95), rgba(18, 140, 126, 0.9)),
        linear-gradient(45deg, rgba(199, 154, 59, 0.26), transparent);
}

.login-header::after {
    content: "";
    position: absolute;
    inset: auto 24px 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}

.login-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 17px;
    color: #102126;
    font-size: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f8dc91, var(--accent));
    box-shadow: 0 18px 34px rgba(11, 79, 108, 0.28);
}

.login-title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
}

.login-subtitle {
    margin: 7px 0 0;
    color: rgba(255,255,255,0.82);
    font-size: 13px;
    font-weight: 600;
}

.login-body { padding: 32px 30px 22px; }

.login-footer {
    padding: 17px 30px 20px;
    text-align: center;
    background: #f8fafc;
    border-top: 1px solid var(--line);
}

/* ============================================================ Sidebar Collapsed */
.sidebar-collapsed .sidebar { transform: translateX(100%); }
.sidebar-collapsed .main-content { margin-right: 0; }

/* ============================================================ Sidebar Mini (icon-only) */
:root { --sidebar-mini-width: 76px; }

body.sidebar-mini .sidebar {
    width: var(--sidebar-mini-width);
    overflow: visible;
}
body.sidebar-mini .main-content {
    margin-right: var(--sidebar-mini-width);
}

/* إخفاء النصوص */
body.sidebar-mini .brand-title,
body.sidebar-mini .brand-mark,
body.sidebar-mini .sidebar-section,
body.sidebar-mini .sidebar-link > span,
body.sidebar-mini .sidebar-module-head > span,
body.sidebar-mini .sidebar-module-head > b,
body.sidebar-mini .sidebar-subnav,
body.sidebar-mini .sidebar-art .skyline,
body.sidebar-mini .support-link > span {
    display: none !important;
}

/* توسيط الأيقونات */
body.sidebar-mini .sidebar-brand {
    justify-content: center;
    padding: 20px 0;
    gap: 0;
}
body.sidebar-mini .sidebar-nav {
    padding: 10px 7px;
}
body.sidebar-mini .sidebar-link,
body.sidebar-mini .sidebar-module-head {
    justify-content: center;
    padding: 11px 0;
    min-height: 44px;
}
body.sidebar-mini .sidebar-module-head > i,
body.sidebar-mini .sidebar-link > i {
    width: 32px;
    height: 32px;
    font-size: 17px;
}
body.sidebar-mini .sidebar-art {
    padding: 10px 0;
    display: flex;
    justify-content: center;
}
body.sidebar-mini .support-link {
    padding: 10px 0;
    justify-content: center;
    min-width: unset;
}


/* زر mini السايدبار */
.sidebar-mini-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    padding: 7px 12px 0;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 14px;
    cursor: pointer;
    transition: color 0.18s;
    direction: ltr;
}
.sidebar-mini-btn:hover { color: #f6d27c; }
body.sidebar-mini .sidebar-mini-btn { justify-content: center; padding: 7px 0 0; }

/* ============================================================ Print */
@media print {
    body { background: #fff !important; }
    .sidebar, .top-navbar, .btn, .alert, .breadcrumb, nav { display: none !important; }
    .main-content { margin-right: 0 !important; }
    .page-content { padding: 0 !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ============================================================ Responsive */
@media (max-width: 992px) {
    :root { --sidebar-width: 270px; }
    .page-content { padding-inline: 20px; }
    .top-navbar { padding-inline: 20px; }
}

@media (max-width: 768px) {
    .sidebar { transform: translateX(100%); }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-right: 0; }
    .page-header {
        align-items: stretch;
        flex-direction: column;
    }
    .page-header .btn {
        width: 100%;
    }
    .page-title {
        font-size: 22px;
    }
    .stat-card {
        min-height: 120px;
    }
    .top-navbar {
        min-height: 62px;
    }
    .dashboard-command {
        flex-direction: column;
        align-items: stretch;
        padding: 22px;
    }
    .dashboard-command h2 {
        font-size: 23px;
        line-height: 1.45;
    }
    .dashboard-command p {
        font-size: 13px;
    }
    .command-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ============================================================
   Reports dashboard
   ============================================================ */
.reports-dashboard {
    display: grid;
    gap: 18px;
}

.reports-filter-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
}

.filter-chip {
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: var(--ink-strong);
    text-decoration: none;
    background: #fff;
    border: 1px solid #e4e9f2;
    border-radius: 8px;
}

.filter-chip:hover {
    color: var(--ink-strong);
    border-color: rgba(217, 170, 69, 0.55);
    background: #fffaf0;
}

.filter-chip i {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #0b55c8;
    background: #eef4ff;
    border-radius: 8px;
}

.filter-chip span,
.filter-chip strong {
    display: block;
}

.filter-chip span {
    color: #7b8496;
    font-size: 11px;
    font-weight: 800;
}

.filter-chip strong {
    color: var(--ink-strong);
    font-size: 13px;
    font-weight: 800;
}

.reports-analytics-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr);
    gap: 18px;
}

.reports-chart-panel,
.reports-donut-panel,
.reports-table-panel {
    overflow: hidden;
}

.wide-bar-chart {
    height: 300px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
    gap: 14px;
    padding: 28px 28px 18px;
    border-bottom: 1px solid #edf0f6;
}

.wide-bar-chart span {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    align-items: end;
    justify-items: center;
    gap: 4px;
}

.wide-bar-chart b,
.wide-bar-chart i {
    width: 13px;
    display: block;
    border-radius: 4px 4px 0 0;
}

.wide-bar-chart b {
    height: var(--invoice);
    background: var(--navy);
}

.wide-bar-chart i {
    height: var(--paid);
    background: var(--gold);
}

.wide-bar-chart small {
    grid-column: 1 / -1;
    color: #667085;
    font-size: 10px;
    font-weight: 800;
}

.chart-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 14px 18px 18px;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.chart-legend b {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 2px;
}

.chart-legend .navy { background: var(--navy); }
.chart-legend .gold { background: var(--gold); }

.reports-donut-body {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 24px;
}

.reports-donut {
    width: 180px;
    height: 180px;
}

.reports-donut-body ul {
    display: grid;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.reports-donut-body li {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    align-items: center;
    gap: 10px;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.reports-donut-body li strong {
    color: var(--ink-strong);
}

.reports-donut-body b {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.reports-donut-body .green { background: #18a66f; }
.reports-donut-body .red { background: #ef4444; }
.reports-donut-body .orange { background: #d68719; }
.reports-donut-body .gray { background: #98a2b3; }

.reports-links-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.report-link-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 112px;
    padding: 18px;
    color: var(--ink-strong);
    text-decoration: none;
}

.report-link-card:hover {
    color: var(--ink-strong);
    border-color: rgba(217, 170, 69, 0.55);
    box-shadow: 0 18px 36px rgba(217, 170, 69, 0.12);
}

.report-link-card > i {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    color: #0b55c8;
    background: #eef4ff;
    border-radius: 50%;
    font-size: 24px;
}

.report-link-card strong,
.report-link-card small {
    display: block;
}

.report-link-card strong {
    color: var(--ink-strong);
    font-size: 16px;
    font-weight: 800;
}

.report-link-card small {
    margin-top: 6px;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.7;
}

.report-link-card em {
    color: #0b55c8;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

/* ─── Accounting Cycle Flow Bar ─── */
.acct-flow-bar {
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 14px;
    padding: 6px 8px;
    margin-bottom: 14px;
}
.acct-flow-track {
    display: flex;
    align-items: stretch;
    direction: rtl;
    gap: 0;
}
.acct-flow-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    flex: 1;
    transition: background .14s;
    cursor: pointer;
}
a.acct-flow-step:hover { background: #f0f6ff; text-decoration: none; color: inherit; }
.acct-flow-step.terminal { background: linear-gradient(135deg,#eef4ff,#f5f8ff); border: 1px solid #c7d7ff; }
.acct-flow-num {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #e8edf5;
    color: #667085;
    font-weight: 900;
    font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.acct-flow-num.done  { background: #dcfce7; color: #166534; }
.acct-flow-num.final { background: #1769ff; color: #fff; }
.acct-flow-info { direction: rtl; text-align: right; flex: 1; min-width: 0; }
.acct-flow-info strong { display: block; font-size: 13px; font-weight: 800; color: var(--navy); }
.acct-flow-info small  { display: block; font-size: 11px; color: #667085; font-weight: 700; margin-top: 2px; }
.acct-flow-arrow {
    display: flex; align-items: center; justify-content: center;
    gap: 0; padding: 0 4px; flex-shrink: 0;
}
.acct-flow-arrow::before {
    content: '';
    display: block;
    height: 2px;
    width: 20px;
    background: linear-gradient(270deg, #c7d2e0, #1769ff);
}
.acct-flow-arrow i {
    font-size: 20px;
    color: #1769ff;
    margin-right: -5px;
}
.acct-flow-badge {
    font-size: 10px; font-weight: 800;
    padding: 3px 8px; border-radius: 20px;
    flex-shrink: 0;
}
.acct-flow-badge.green { background: #dcfce7; color: #166534; }
.acct-flow-badge.blue  { background: #dbeafe; color: #1e40af; }
.acct-flow-badge.gold  { background: #fef9c3; color: #92400e; }
@media (max-width: 768px) {
    .acct-flow-track { flex-direction: column; direction: rtl; }
    .acct-flow-arrow { transform: rotate(90deg); }
}

/* ─── Big 3 Financial Statement Cards ─── */
.report-big-card {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e8edf5;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: transform .15s, box-shadow .15s;
    color: inherit;
    text-decoration: none;
}
.report-big-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(23,105,255,.14);
    border-color: #93c5fd;
    text-decoration: none;
    color: inherit;
}
.report-big-header {
    padding: 16px 18px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 26px;
}
.report-big-header strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
}
.report-big-header small {
    display: block;
    font-size: 11px;
    color: rgba(255,255,255,.65);
    margin-top: 2px;
    font-weight: 700;
}
.report-big-body {
    padding: 16px 18px;
    flex: 1;
}
.report-big-label {
    font-size: 11px;
    font-weight: 800;
    color: #667085;
    letter-spacing: .4px;
    margin-bottom: 4px;
}
.report-big-value {
    font-size: 28px;
    font-weight: 900;
    color: var(--navy);
    line-height: 1.1;
    margin-bottom: 12px;
}
.report-big-value span {
    font-size: 13px;
    font-weight: 700;
    color: #667085;
}
.report-big-sub {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 11px;
    font-weight: 800;
    color: #667085;
    border-top: 1px solid #f1f5f9;
    padding-top: 10px;
}
.report-big-action {
    padding: 10px 18px;
    border-top: 1px solid #f1f5f9;
    font-size: 12px;
    font-weight: 800;
    color: #1769ff;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f8faff;
}

@media (max-width: 1200px) {
    .reports-analytics-grid,
    .reports-links-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 900px) {
    .reports-big3-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 900px) {
    .reports-filter-bar {
        grid-template-columns: 1fr;
    }
    .wide-bar-chart {
        overflow-x: auto;
        grid-template-columns: repeat(12, 42px);
    }
    .reports-donut-body {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .report-link-card {
        grid-template-columns: 48px minmax(0, 1fr);
    }
    .report-link-card em {
        grid-column: 2;
    }
}

/* ============================================================
   Premium invoice detail
   ============================================================ */
.invoice-detail-page {
    display: grid;
    gap: 18px;
}

.invoice-detail-head {
    margin-bottom: 0;
}

.invoice-actions form {
    margin: 0;
}

.invoice-status-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    min-height: 118px;
    padding: 0;
    overflow: hidden;
}

.status-item {
    position: relative;
    display: grid;
    align-content: center;
    gap: 7px;
    min-width: 0;
    padding: 20px 24px;
    border-inline-start: 1px solid #edf0f6;
}

.status-item:first-child {
    border-inline-start: 0;
}

.status-item span {
    color: #7b8496;
    font-size: 12px;
    font-weight: 800;
}

.status-item strong {
    color: var(--ink-strong);
    font-size: 18px;
    font-weight: 800;
    word-break: break-word;
}

.status-item small {
    color: #7b8496;
    font-size: 11px;
    font-weight: 700;
}

.status-item > i {
    position: absolute;
    left: 22px;
    top: 50%;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: #0b55c8;
    background: #eef4ff;
    border-radius: 50%;
    transform: translateY(-50%);
}

.invoice-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.detail-panel .surface-head,
.invoice-items-panel .surface-head,
.totals-panel .surface-head,
.qr-panel .surface-head,
.payments-panel .surface-head {
    justify-content: space-between;
}

.detail-panel .surface-head i,
.totals-panel .surface-head i,
.qr-panel .surface-head i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #0b55c8;
    background: #eef4ff;
    border-radius: 50%;
}

.detail-list {
    margin: 0;
    padding: 0 18px 16px;
}

.detail-list div {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 18px;
    min-height: 44px;
    align-items: center;
    border-bottom: 1px solid #edf0f6;
}

.detail-list div:last-child {
    border-bottom: 0;
}

.detail-list dt {
    color: #7b8496;
    font-size: 12.5px;
    font-weight: 800;
}

.detail-list dd {
    margin: 0;
    color: #142646;
    font-size: 13px;
    font-weight: 800;
}

.invoice-items-panel {
    overflow: hidden;
}

.invoice-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.65fr) minmax(260px, 0.85fr);
    gap: 18px;
    align-items: stretch;
}

.totals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 0;
    padding: 22px;
}

.totals-grid div {
    min-height: 78px;
    padding: 0 14px;
    border-inline-start: 1px solid #edf0f6;
}

.totals-grid div:first-child {
    border-inline-start: 0;
}

.totals-grid span,
.totals-grid small {
    display: block;
    color: #7b8496;
    font-size: 12px;
    font-weight: 800;
}

.totals-grid strong {
    display: block;
    margin: 8px 0 4px;
    color: var(--ink-strong);
    font-size: 20px;
    font-weight: 800;
}

.payment-progress {
    height: 10px;
    margin: 4px 22px 0;
    overflow: hidden;
    background: #ef4444;
    border-radius: 999px;
}

.payment-progress span {
    display: block;
    height: 100%;
    background: #19a967;
    border-radius: inherit;
}

.progress-labels {
    display: flex;
    justify-content: space-between;
    padding: 10px 22px 20px;
}

.progress-labels strong:first-child {
    color: #19a967;
}

.progress-labels strong:last-child {
    color: #ef4444;
}

.credit-note-form {
    overflow: hidden;
}

.credit-note-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 18px;
    border-bottom: 1px solid #edf0f6;
}

.credit-note-meta label {
    display: grid;
    gap: 8px;
}

.credit-note-meta span {
    color: #344054;
    font-size: 12.5px;
    font-weight: 900;
}

.credit-note-table input[type="number"] {
    min-width: 110px;
}

.credit-note-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
    padding: 18px;
    border-top: 1px solid #edf0f6;
}

@media (max-width: 768px) {
    .credit-note-meta {
        grid-template-columns: 1fr;
    }
}

.qr-body {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 18px 18px 20px;
    text-align: center;
}

.qr-body img,
.qr-placeholder {
    width: 150px;
    height: 150px;
    object-fit: contain;
    border-radius: 8px;
}

.qr-placeholder {
    display: grid;
    place-items: center;
    color: #7b8496;
    background: #f5f7fb;
    border: 1px dashed #d9e0ea;
    font-size: 54px;
}

.qr-body p {
    margin: 0;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.8;
}

.payment-list {
    padding: 10px 16px;
}

.payment-row {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 10px;
    align-items: center;
    min-height: 58px;
    border-bottom: 1px solid #edf0f6;
}

.payment-row:last-child {
    border-bottom: 0;
}

.payment-row i {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #19a967;
    background: #e7f8ef;
    border-radius: 8px;
}

.payment-row strong,
.payment-row small {
    display: block;
}

.payment-row strong {
    color: #19a967;
    font-size: 13px;
}

.payment-row small,
.payment-row em {
    color: #667085;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.panel-footer-link {
    display: block;
    padding: 12px 16px 16px;
    color: #0b55c8;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

@media (max-width: 1300px) {
    .invoice-status-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .invoice-bottom-grid {
        grid-template-columns: 1fr;
    }
    .totals-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 18px;
    }
}

@media (max-width: 900px) {
    .invoice-info-grid,
    .invoice-status-strip {
        grid-template-columns: 1fr;
    }
    .detail-list div {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 10px 0;
    }
}

/* ============================================================
   Premium create/edit forms
   ============================================================ */
.form-hero {
    margin-bottom: 18px;
}

.form-hero .breadcrumb {
    margin-bottom: 8px !important;
}

.premium-form-page {
    display: block;
}

.premium-form-page .card,
.form-card {
    overflow: hidden;
    background: rgba(255,255,255,0.92);
    border: 1px solid #e9edf5;
    border-radius: 8px;
    box-shadow: 0 18px 35px rgba(7, 26, 58, 0.06);
}

.premium-form-page .card-header,
.form-card .card-header {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 10px;
    padding: 16px 22px;
    background: #fff;
    border-bottom: 1px solid #edf0f6;
    text-align: right;
}

.premium-form-page .card-header h5,
.premium-form-page .card-header h6,
.form-card .card-header h6 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--ink-strong);
    font-size: 18px;
    font-weight: 800;
    text-align: right;
}

.premium-form-page .card-header i,
.form-card .card-header i {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    color: #0b55c8;
    background: #eef4ff;
    border-radius: 50%;
}

.premium-form-page .card-body {
    padding: 22px;
}

.premium-form-page .form-label {
    color: #566174;
    font-size: 12.5px;
    font-weight: 800;
}

.premium-form-page .form-control,
.premium-form-page .form-select {
    min-height: 48px;
    border-color: #e1e7f0;
    background-color: #fff;
    font-weight: 700;
}

.premium-form-page textarea.form-control {
    min-height: 112px;
}

.form-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 360px);
    gap: 18px;
    align-items: start;
}

.form-primary-col,
.form-side-col {
    display: grid;
    gap: 18px;
}

.form-action-bar {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    padding: 16px;
}

.form-assist-card {
    padding: 24px;
}

.assist-icon {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    color: #0b55c8;
    background: #eef4ff;
    border-radius: 50%;
    font-size: 26px;
}

.form-assist-card h3 {
    margin: 0;
    color: var(--ink-strong);
    font-size: 20px;
    font-weight: 800;
}

.form-assist-card p {
    margin: 10px 0 18px;
    color: #667085;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.9;
}

.form-assist-card ul {
    display: grid;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.form-assist-card li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #344054;
    font-size: 13px;
    font-weight: 800;
}

.form-assist-card li i {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    color: #18a66f;
    background: #e7f8ef;
    border-radius: 50%;
}

.document-form-page > .row {
    align-items: start;
}

.document-form-page > .row > .col-lg-8,
.document-form-page > .row > .col-lg-4 {
    display: grid;
    gap: 18px;
}

.document-form-page > .row > .col-lg-8 > .card.mt-4,
.document-form-page > .row > .col-lg-4 > .card.mt-3 {
    margin-top: 0 !important;
}

.document-form-page .table-responsive {
    border-radius: 0 0 8px 8px;
}

.document-form-page #itemsTable th {
    height: 52px;
    white-space: nowrap;
}

.document-form-page #itemsTable td {
    height: 56px;
    vertical-align: middle;
}

.document-form-page #itemsTable .form-control {
    min-height: 38px;
    border-radius: 8px;
    font-size: 12px;
}

.document-form-page .btn-success,
.document-form-page .btn-primary {
    background: linear-gradient(180deg, var(--navy), var(--navy-2));
    border: 1px solid rgba(217, 170, 69, 0.55);
}

.document-form-page .col-lg-4 > .card:first-child {
    position: sticky;
    top: 92px;
}

.document-form-page .table-borderless td {
    height: 46px;
    color: #344054;
    font-size: 13px;
    font-weight: 800;
}

.document-form-page .table-primary td,
.document-form-page .table-primary th {
    color: var(--ink-strong);
    background: #f8fbff !important;
}

@media (max-width: 992px) {
    .form-main-grid {
        grid-template-columns: 1fr;
    }
    .document-form-page .col-lg-4 > .card:first-child {
        position: static;
    }
}

/* Legacy stat cards now follow the same white KPI language */
.stat-card {
    min-height: 128px;
    padding: 22px 22px 18px;
    color: var(--ink-strong);
    background: rgba(255,255,255,0.9) !important;
    border: 1px solid #e9edf5;
    border-radius: 8px;
    box-shadow: 0 18px 35px rgba(7, 26, 58, 0.065);
}

.stat-card::before,
.stat-card::after {
    display: none;
}

.stat-card .stat-icon {
    left: 20px;
    top: 26px;
    width: 54px;
    height: 54px;
    color: #2d63c8;
    opacity: 1;
    background: #eef4ff;
    border-radius: 50%;
}

.stat-card .stat-label {
    color: #071a3a;
    opacity: 1;
    font-size: 14px;
    font-weight: 800;
}

.stat-card .stat-value,
.stat-card .stat-value.small-value {
    margin-top: 12px;
    color: #071a3a;
    font-size: 24px;
    line-height: 1.25;
}

.stat-card-green .stat-icon,
.stat-card-green .stat-value { color: #18a66f; }
.stat-card-orange .stat-icon,
.stat-card-orange .stat-value { color: #d68719; }
.stat-card-indigo .stat-icon,
.stat-card-indigo .stat-value { color: #7254d8; }
.stat-card-dark .stat-icon,
.stat-card-dark .stat-value { color: var(--navy); }
.stat-card-teal .stat-icon,
.stat-card-teal .stat-value { color: #128c7e; }

form[id$="Form"] > .row > [class*="col-"] > .card,
form:not(.settings-page) > .row > [class*="col-"] > .card {
    border-color: #e9edf5;
    box-shadow: 0 18px 35px rgba(7, 26, 58, 0.055);
}

form[id$="Form"] .card-header,
form:not(.settings-page) .card-header {
    justify-content: flex-start;
    min-height: 64px;
    background: #fff;
    text-align: right;
}

form[id$="Form"] .card-header h6,
form:not(.settings-page) .card-header h6 {
    color: var(--ink-strong);
    font-size: 17px;
    font-weight: 800;
}

form[id$="Form"] .table th,
form[id$="Form"] .table td {
    font-size: 12px;
}

form[id$="Form"] textarea.form-control {
    min-height: 120px;
}

.table-borderless th,
.table-borderless td {
    border-bottom: 1px solid #edf0f6 !important;
}

.table-primary.fs-5,
.table-primary.fw-bold {
    --bs-table-bg: #f7fbff;
    --bs-table-color: var(--ink-strong);
}

.breadcrumb {
    justify-content: flex-start;
}

.page-header .breadcrumb + .page-title {
    margin-top: 6px;
}

/* ============================================================
   Shared premium pages: customers, quotations, invoices, reports, settings
   ============================================================ */
.app-page-head,
.page-header {
    align-items: flex-start;
    justify-content: space-between;
    padding: 22px 0 24px;
    margin-bottom: 22px;
    border-bottom: 0;
}

.app-page-head {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}

.app-page-head > div:first-child,
.page-header > div:first-child {
    margin-inline-start: 0;
    text-align: right;
}

.app-page-head > div:first-child {
    margin-inline-start: 0;
    width: 100%;
    text-align: right;
}

.page-title {
    justify-content: flex-start;
    color: var(--ink-strong);
    font-size: 40px;
    line-height: 1.15;
    font-weight: 800;
}

.page-title i {
    display: none;
}

.page-subtitle {
    margin: 8px 0 0;
    color: #8a92a3;
    font-size: 18px;
    font-weight: 600;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    margin-top: 14px;
    width: 100%;
}

.page-metrics {
    margin-bottom: 22px;
}

.metric-grid.metrics-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-grid.metrics-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.filter-card {
    overflow: visible;
    background: rgba(255,255,255,0.9);
    border-color: #e9edf5;
    box-shadow: 0 18px 35px rgba(7, 26, 58, 0.055);
}

.filter-card .card-body {
    padding: 16px;
}

.filter-card form {
    align-items: center;
}

.filter-card .form-control,
.filter-card .form-select {
    min-height: 52px;
    padding-inline: 18px;
    color: #071a3a;
    background: #fff;
    border-color: #e4e9f2;
    box-shadow: 0 8px 18px rgba(7, 26, 58, 0.025);
}

.filter-card .btn {
    min-height: 52px;
    padding-inline: 22px;
    color: #071a3a;
    background: #fff;
    border-color: #e4e9f2;
}

.data-card {
    border-color: #e9edf5;
    box-shadow: 0 18px 40px rgba(7, 26, 58, 0.07);
}

.data-card .table,
.card .table {
    border-collapse: separate;
    border-spacing: 0;
}

.data-card .table th,
.card .table th {
    height: 58px;
    color: #5f687a;
    background: linear-gradient(180deg, #fbfcff, #f5f7fb);
    font-size: 13px;
    font-weight: 800;
}

.data-card .table td,
.card .table td {
    height: 58px;
    color: #142646;
    border-color: #edf0f6;
    font-size: 13px;
    font-weight: 700;
}

.data-card .table a,
.card .table a {
    color: #0649b8;
    font-weight: 800;
}

.data-card .btn-group .btn,
.card .btn-group .btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 8px !important;
}

.badge {
    min-width: 78px;
    padding: 8px 12px;
    border-radius: 999px;
}

.badge.bg-success {
    color: #078055 !important;
    background: #e7f8ef !important;
}

.badge.bg-primary,
.badge.bg-info {
    color: #0759c9 !important;
    background: #eaf2ff !important;
}

.badge.bg-warning {
    color: #b86e00 !important;
    background: #fff3df !important;
}

.badge.bg-danger {
    color: #cc333d !important;
    background: #fff0f1 !important;
}

.badge.bg-secondary {
    color: #475467 !important;
    background: #f1f3f6 !important;
}

.settings-notice {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #071a3a;
    background: linear-gradient(180deg, #fffdf8, #fff9ee);
    border: 1px solid rgba(217, 170, 69, 0.42);
    box-shadow: 0 12px 28px rgba(217, 170, 69, 0.08);
}

.settings-page .card {
    min-height: 0;
    border-color: #e9edf5;
    box-shadow: 0 18px 35px rgba(7, 26, 58, 0.055);
}

.settings-page > .row {
    align-items: flex-start;
}

.settings-page > .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.settings-page .card-header {
    justify-content: flex-start;
    min-height: 66px;
    background: #fff;
    text-align: right;
}

.settings-page .card-header h5 {
    font-size: 18px;
    text-align: right;
}

.settings-page .card-header i {
    color: var(--navy);
}

.settings-page .form-label {
    color: #46536a;
    font-size: 13px;
}

.settings-page .form-control,
.settings-page .form-select {
    min-height: 48px;
}

.settings-page textarea.form-control {
    min-height: 112px;
}

.settings-page .btn-primary {
    min-width: 190px;
    background: linear-gradient(180deg, var(--navy), var(--navy-2));
    border: 1px solid rgba(217, 170, 69, 0.55);
}

.reports-grid .card {
    min-height: 260px;
    border-color: #e9edf5;
    box-shadow: 0 18px 35px rgba(7, 26, 58, 0.06);
}

.reports-grid .card i.display-2 {
    width: 74px;
    height: 74px;
    display: grid !important;
    place-items: center;
    margin-inline: auto;
    border-radius: 50%;
    background: #eef4ff;
    font-size: 32px;
}

.reports-grid .card h5 {
    color: var(--ink-strong);
    font-size: 20px;
    font-weight: 800;
}

.reports-grid .btn {
    min-width: 150px;
}

@media (max-width: 1100px) {
    .metric-grid.metrics-4,
    .metric-grid.metrics-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .app-page-head,
    .page-header {
        display: grid !important;
        gap: 14px;
    }
    .app-page-head > div:first-child,
    .page-header > div:first-child {
        margin-inline-start: 0;
    }
    .page-title {
        font-size: 30px;
    }
    .page-subtitle {
        font-size: 15px;
    }
    .metric-grid.metrics-4,
    .metric-grid.metrics-5 {
        grid-template-columns: 1fr;
    }
    .page-actions,
    .page-actions .btn {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .page-content { padding-inline: 14px; }
    .top-navbar { padding-inline: 14px; }
    .login-page { padding: 14px; }
    .login-body { padding: 26px 20px 18px; }
    .login-footer { padding-inline: 20px; }
    .card-body { padding: 16px; }
}

/* ============================================================ Scrollbar */
.sidebar::-webkit-scrollbar { display: none; }
.sidebar::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.24);
    border-radius: 999px;
}

body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: #eef3f8; }
body::-webkit-scrollbar-thumb {
    background: #c8d3df;
    border: 3px solid #eef3f8;
    border-radius: 999px;
}

/* ============================================================
   Operations Center Theme - image reference direction

   ★ مصدر اللون المركزي للسايدبار والتوبار ورؤوس الأقسام ★
   أي متغير هنا بيتحكم في لون عنصر متكرر في عشرات الملفات (style.css
   + قوالب Jinja). لو حبيت تغيّر "اللون الكحلي" لثيم تاني، التعديل
   بيبقى هنا فقط — القيم دي مطابقة تماماً لما كان مكتوب حرفياً قبل
   التوحيد، فمفيش أي فرق بصري حصل عند إدخالها.
   ============================================================ */
:root {
    --sidebar-width: 300px;

    /* عائلة الكحلي — من الأغمق للأفتح، مستخدمة في تدرجات السايدبار/التوبار/رؤوس الصفحات */
    --navy: #061b35;      /* بداية التدرج - اللون الأساسي للعلامة */
    --navy-2: #021127;    /* أغمق درجة - قوائم منسدلة وتدرجات دائرية */
    --navy-3: #03172f;    /* الدرجة الوسطى في تدرج السايدبار/التوبار */
    --navy-4: #010b1d;    /* نهاية تدرج السايدبار/التوبار (الأغمق) */
    --navy-5: #031427;    /* نهاية تدرج رؤوس الأقسام (premium-module-hero) */
    --navy-mid: #0b2b52;  /* الدرجة الوسطى الأفتح - رؤوس الأقسام وشريط الأوامر */

    /* عائلة الذهبي — لمسة العلامة المميزة في نفس العناصر */
    --gold: #d9aa45;       /* توهج/hover على أيقونة العلامة */
    --gold-soft: #fff4d6;
    --gold-light: #f2c15f; /* أيقونة رأس القسم (premium-hero-icon) */

    --paper: #ffffff;
    --paper-2: #fbfcff;
    --edge: #edf0f6;
    --ink-strong: #071a3a;
    --ink-soft: #7b8496;
}

/* ============================================================
   ثيمات لون الواجهة — بدائل لعائلة "الكحلي" فقط
   كل ثيم بيغيّر نفس الست متغيرات بالظبط (--navy...--navy-mid)
   بنفس درجة الإضاءة/التشبع الأصلية، فالتباين مع النص الأبيض
   والأيقونة الذهبية (--gold/--gold-light/--accent) يفضل ثابت
   في كل الثيمات. الاختيار محفوظ في settings.theme_name ويتفعّل
   عبر data-theme على <html> في base.html.
   ============================================================ */
html[data-theme="emerald"] {
    --navy: #06351e;
    --navy-2: #022715;
    --navy-3: #032f19;
    --navy-4: #011d0f;
    --navy-5: #032715;
    --navy-mid: #0b522f;
}

html[data-theme="burgundy"] {
    --navy: #35060e;
    --navy-2: #270208;
    --navy-3: #2f030a;
    --navy-4: #1d0106;
    --navy-5: #270309;
    --navy-mid: #520b17;
}

html[data-theme="purple"] {
    --navy: #1a0635;
    --navy-2: #110227;
    --navy-3: #15032f;
    --navy-4: #0d011d;
    --navy-5: #120327;
    --navy-mid: #290b52;
}

/* الأربعة ثيمات دي مبنية على درجتين حرفيتين اختارهم المستخدم (غامق/فاتح)
   بدل التوليد التلقائي: --navy و--navy-mid مطابقتان تماماً للقيمتين
   المُعطاتين، والباقي (navy-2/3/4/5) درجات أغمق مُشتقة بنفس نسب العائلة
   الأصلية عشان يفضل فيه عمق في تدرجات السايدبار/التوبار. */
html[data-theme="teal"] {
    --navy: #2c6a75;
    --navy-2: #1d474e;
    --navy-3: #255862;
    --navy-4: #16353a;
    --navy-5: #1d474e;
    --navy-mid: #407e89;
}

html[data-theme="sand"] {
    /* مُعتّم عن القيم الأصلية (#b18f6a/#c5a37e) للحفاظ على تباين
       مقروء مع النص الأبيض الثابت في السايدبار/التوبار/الرؤوس —
       نفس درجة اللون (بيج/بني فاتح) لكن بنسبة إضاءة أقرب لباقي الثيمات. */
    --navy: #73593c;
    --navy-2: #4d3b28;
    --navy-3: #604a32;
    --navy-4: #3a2c1e;
    --navy-5: #4d3b28;
    --navy-mid: #8a663e;
}

html[data-theme="terracotta"] {
    --navy: #793727;
    --navy-2: #51251a;
    --navy-3: #652e20;
    --navy-4: #3c1c14;
    --navy-5: #51251a;
    --navy-mid: #8d4b3b;
}

html[data-theme="steel"] {
    --navy: #1c3b58;
    --navy-2: #13273b;
    --navy-3: #173149;
    --navy-4: #0e1d2c;
    --navy-5: #13273b;
    --navy-mid: #234261;
}

/* مُشتقّان من لون واحد بعته المستخدم (لا غامق/فاتح منفصلين):
   navy = نفس اللون معتّم لضمان تباين جيد مع النص الأبيض،
   navy-mid = نفس اللون بتعتيم أخف كدرجة إضاءة أعلى. */
html[data-theme="sage"] {
    --navy: #4c584a;
    --navy-2: #333b31;
    --navy-3: #3f493e;
    --navy-4: #262c25;
    --navy-5: #333b31;
    --navy-mid: #6c7d68;
}

html[data-theme="lakeblue"] {
    --navy: #37535f;
    --navy-2: #25373f;
    --navy-3: #2e454f;
    --navy-4: #1c2a30;
    --navy-5: #25373f;
    --navy-mid: #4d7586;
}

/* نسخة تجريبية: --navy بالقيمة الحرفية اللي بعتها المستخدمة بدون أي
   تعتيم مني (بعكس sage/lakeblue أعلاه). تحذير: تباين navy-mid مع
   النص الأبيض ضعيف جداً (~1.6-1.9) لأن اللون الأصلي فاتح جداً —
   موجودة للتجربة فقط بناءً على طلب صريح، مش توصية تصميم. */
html[data-theme="sage-raw"] {
    --navy: #80927c;
    --navy-2: #556252;
    --navy-3: #6a7b66;
    --navy-4: #404a3d;
    --navy-5: #556252;
    --navy-mid: #c7cfc6;
}

html[data-theme="lakeblue-raw"] {
    --navy: #5b8a9e;
    --navy-2: #3d5c69;
    --navy-3: #4c7384;
    --navy-4: #2e454f;
    --navy-5: #3d5c69;
    --navy-mid: #a8c2cd;
}

/* أوبسيديان — اختيار Claude كخبير تصميم: أسود-جرافيت بارد بلمسة زرقاء
   خفيفة جداً (بلا تشبع صارخ)، مصمم عشان يقترن بالذهبي الثابت في كل
   الثيمات بنفس ثنائية "الأسود × الذهب" الفاخرة الكلاسيكية. تباين
   عالي جداً مع الأبيض (18/13.6) — الأوضح قراءة من كل الثيمات. */
html[data-theme="obsidian"] {
    --navy: #14161a;
    --navy-2: #0d0f11;
    --navy-3: #111216;
    --navy-4: #0a0b0d;
    --navy-5: #0d0f11;
    --navy-mid: #2a2e37;
}

/* كلاسيكي — رمادي محايد بتشبع صفر تماماً (مفيش أي لون فيه إطلاقاً)،
   مصمم للي عينهم بتتعب من الألوان الصريحة. تباين مريح (12.6/7.8). */
html[data-theme="classic"] {
    --navy: #333333;
    --navy-2: #222222;
    --navy-3: #2b2b2b;
    --navy-4: #1a1a1a;
    --navy-5: #222222;
    --navy-mid: #525252;
}


body {
    color: var(--ink-strong);
    background:
        radial-gradient(circle at 32% 20%, rgba(217, 170, 69, 0.08), transparent 28rem),
        radial-gradient(circle at 78% 14%, rgba(43, 119, 220, 0.08), transparent 30rem),
        linear-gradient(180deg, #ffffff 0%, #f7f8fb 58%, #f3f5f8 100%);
}

.sidebar {
    width: var(--sidebar-width);
    background:
        radial-gradient(circle at 88% 14%, rgba(217, 170, 69, 0.22), transparent 10rem),
        linear-gradient(180deg, var(--navy) 0%, var(--navy-3) 52%, var(--navy-4) 100%);
    border-left: 1px solid rgba(217, 170, 69, 0.18);
    box-shadow: -22px 0 44px rgba(1, 11, 29, 0.18);
}

.sidebar::before {
    background:
        radial-gradient(circle at 50% 88%, rgba(217, 170, 69, 0.18), transparent 12rem),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 18px);
    opacity: 1;
}

.sidebar-brand {
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    min-height: 210px;
    padding: 28px 24px 24px;
    text-align: center;
    border-bottom: 0;
}

.sidebar-brand .brand-mark {
    width: 110px;
    height: 75px;
    display: grid;
    place-items: center;
    color: var(--gold);
    font-size: 48px;
    text-shadow: 0 0 28px rgba(217, 170, 69, 0.38);
}

.sidebar-brand .brand-mark i {
    width: auto;
    height: auto;
    color: inherit;
    font-size: inherit;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.sidebar-brand .brand-mark .brand-logo-img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    border-radius: 12px;
}

.brand-title {
    color: #fff;
    font-size: 21px;
    font-weight: 700;
}

.sidebar-nav {
    padding: 0 20px 18px;
}

.sidebar-section {
    display: none;
}

.sidebar-link {
    justify-content: flex-start;
    gap: 16px;
    min-height: 62px;
    margin: 8px 0;
    padding: 13px 18px;
    color: rgba(255,255,255,0.82);
    font-size: 17px;
    font-weight: 700;
    border-radius: 8px;
    border: 1px solid transparent;
    direction: rtl;
    text-align: right;
}

.sidebar-link i {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    color: rgba(255,255,255,0.9);
    font-size: 22px;
    background: transparent;
}

.sidebar-link span {
    flex: 1;
    text-align: right;
}

.sidebar-link:hover {
    transform: none;
    color: #fff;
    background: rgba(255,255,255,0.06);
    border-color: rgba(217, 170, 69, 0.25);
}

.sidebar-link.active {
    color: #ffdf86;
    background:
        linear-gradient(90deg, rgba(217, 170, 69, 0.18), rgba(217, 170, 69, 0.03)),
        rgba(255,255,255,0.04);
    border-color: rgba(217, 170, 69, 0.52);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.06),
        0 0 26px rgba(217, 170, 69, 0.34);
}

.sidebar-link.active i {
    color: #ffd56a;
    background: transparent;
    text-shadow: 0 0 18px rgba(217, 170, 69, 0.55);
}

.sidebar-link.active::after {
    display: none;
}

.sidebar-link.text-danger {
    color: rgba(255,255,255,0.84) !important;
}

.sidebar-art {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding: 16px 24px 24px;
}

.skyline {
    height: 150px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 7px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(217, 170, 69, 0.28);
}

.skyline span {
    width: 18px;
    display: block;
    background:
        linear-gradient(180deg, rgba(255, 215, 116, 0.88), rgba(20, 65, 104, 0.55) 18%, rgba(12, 40, 73, 0.92)),
        repeating-linear-gradient(180deg, transparent 0 10px, rgba(255,255,255,0.18) 10px 12px);
    border: 1px solid rgba(217, 170, 69, 0.18);
    border-radius: 4px 4px 0 0;
    box-shadow: 0 0 22px rgba(217, 170, 69, 0.13);
}

.support-link {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    border: 1px solid rgba(217, 170, 69, 0.32);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
}

.support-link:hover {
    color: #ffdf86;
    border-color: rgba(217, 170, 69, 0.65);
}

.support-soon-modal .modal-dialog {
    max-width: 470px;
}

.support-soon-modal .modal-content {
    position: relative;
    overflow: hidden;
    padding: 34px 34px 30px;
    text-align: center;
    border: 1px solid rgba(217, 170, 69, 0.34);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96)),
        radial-gradient(circle at 15% 0%, rgba(217,170,69,0.15), transparent 16rem);
    box-shadow: 0 34px 80px rgba(6, 27, 53, 0.28);
}

.support-soon-modal .modal-content::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 7px;
    background: linear-gradient(90deg, var(--navy), var(--gold), #128c7e);
}

.support-soon-icon {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    margin: 6px auto 18px;
    color: var(--navy);
    background: linear-gradient(180deg, #f4c15b, var(--gold));
    border-radius: 8px;
    font-size: 34px;
    box-shadow: 0 18px 34px rgba(217, 170, 69, 0.25);
}

.support-soon-close {
    position: absolute;
    top: 16px;
    left: 16px;
    margin: 0;
}

.support-soon-modal .modal-body {
    padding: 0;
}

.support-soon-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 13px;
    color: #8a5b07;
    background: #fff4d6;
    border: 1px solid rgba(217,170,69,0.34);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.support-soon-modal h2 {
    margin: 14px 0 10px;
    color: var(--ink-strong);
    font-size: 24px;
    font-weight: 900;
}

.support-soon-modal p {
    margin: 0 auto 22px;
    max-width: 360px;
    color: #617089;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.9;
}

.support-soon-modal .btn {
    min-width: 140px;
}

.app-confirm-modal .modal-dialog {
    max-width: 450px;
}

.app-confirm-modal .modal-content {
    position: relative;
    overflow: hidden;
    padding: 32px 32px 28px;
    text-align: center;
    border: 1px solid rgba(217, 170, 69, 0.34);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,250,252,0.97)),
        radial-gradient(circle at 15% 0%, rgba(11,79,108,0.12), transparent 16rem);
    box-shadow: 0 34px 80px rgba(6, 27, 53, 0.28);
}

.app-confirm-modal .modal-content::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 7px;
    background: linear-gradient(90deg, var(--navy), var(--gold), #128c7e);
}

.app-confirm-icon {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    margin: 6px auto 18px;
    color: var(--navy);
    background: linear-gradient(180deg, #f4c15b, var(--gold));
    border-radius: 8px;
    font-size: 32px;
    box-shadow: 0 18px 34px rgba(217, 170, 69, 0.24);
}

.app-confirm-close {
    position: absolute;
    top: 16px;
    left: 16px;
    margin: 0;
}

.app-confirm-modal .modal-body {
    padding: 0;
}

.app-confirm-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 13px;
    color: #8a5b07;
    background: #fff4d6;
    border: 1px solid rgba(217,170,69,0.34);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.app-confirm-modal h2 {
    margin: 14px 0 10px;
    color: var(--ink-strong);
    font-size: 23px;
    font-weight: 900;
}

.app-confirm-modal p {
    margin: 0 auto 22px;
    max-width: 350px;
    color: #617089;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.9;
}

.app-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.app-confirm-actions .btn {
    min-width: 118px;
}

/* ══ appAlert modal ══ */
.app-alert-modal .modal-dialog {
    max-width: 420px;
}
.app-alert-modal .modal-content {
    position: relative;
    overflow: hidden;
    padding: 32px 32px 28px;
    text-align: center;
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.99), rgba(255,250,250,0.97)),
        radial-gradient(circle at 15% 0%, rgba(239,68,68,0.08), transparent 16rem);
    box-shadow: 0 34px 80px rgba(100,0,0,0.18);
}
.app-alert-modal .modal-content::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #dc2626, #ef4444, #f87171);
}
.app-alert-icon {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    margin: 6px auto 18px;
    color: #fff;
    background: linear-gradient(135deg, #dc2626, #ef4444);
    border-radius: 8px;
    font-size: 32px;
    box-shadow: 0 18px 34px rgba(239,68,68,0.28);
}
.app-alert-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 13px;
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}
.app-alert-modal h2 {
    margin: 14px 0 10px;
    color: #1a1a2e;
    font-size: 21px;
    font-weight: 900;
}
.app-alert-modal p {
    margin: 0 auto 22px;
    max-width: 340px;
    color: #617089;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.9;
}
.app-alert-close {
    position: absolute;
    top: 16px;
    left: 16px;
    margin: 0;
}

.main-content {
    margin-right: var(--sidebar-width);
}

.top-navbar {
    position: relative;
    min-height: 96px;
    justify-content: space-between;
    padding: 18px 32px;
    background:
        radial-gradient(circle at 88% 14%, rgba(217, 170, 69, 0.22), transparent 10rem),
        linear-gradient(180deg, var(--navy) 0%, var(--navy-3) 52%, var(--navy-4) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 28px rgba(6, 56, 73, 0.18);
    direction: ltr;
}

.top-navbar::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(247, 212, 127, 0.85) 20%,
        rgba(199, 154, 59, 0.95) 35%,
        transparent 55%);
    background-size: 200% 100%;
    animation: topbar-live-sweep 5s linear infinite;
    pointer-events: none;
}

@keyframes topbar-live-sweep {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.topbar-brand {
    order: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    direction: rtl;
}

.topbar-brand-mark {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 22px;
}

.topbar-brand-mark .brand-logo-img {
    width: 68px;
    height: 68px;
    object-fit: contain;
    border-radius: 10px;
}

.topbar-brand-text {
    display: grid;
    gap: 2px;
    min-width: 0;
    text-align: right;
}

.topbar-brand-text strong {
    max-width: 340px;
    overflow: hidden;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-brand-text small {
    color: rgba(255, 255, 255, 0.56);
    font-size: 12px;
    font-weight: 700;
}

.topbar-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-inline-start: 8px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    direction: rtl;
}

.topbar-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
    animation: topbar-live-pulse 1.8s ease-out infinite;
    flex-shrink: 0;
}

.topbar-live-label {
    color: #bbf7d0;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

@keyframes topbar-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.topbar-live.is-offline .topbar-live-dot {
    background: #ef4444;
    animation: topbar-live-pulse-offline 1.8s ease-out infinite;
}

.topbar-live.is-offline .topbar-live-label {
    color: #fecaca;
}

@keyframes topbar-live-pulse-offline {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
    70% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

@media (max-width: 768px) {
    .topbar-live-label { display: none; }
    .topbar-live { padding: 6px; }
}

.topbar-left {
    order: 0;
    display: flex;
    align-items: center;
    gap: 18px;
    direction: ltr;
}

/* ── شريط البحث الشامل ── */
.topbar-search-form { margin: 0; }
.topbar-search-wrap {
    display: flex;
    align-items: center;
    min-height: 58px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 0 12px;
    gap: 8px;
    transition: background .2s, border-color .2s;
}
.topbar-search-wrap:focus-within {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
}
.topbar-search-icon { color: rgba(255,255,255,0.55); font-size: .9rem; }
.topbar-search-input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    width: 180px;
    font-size: .88rem;
    padding: 10px 0;
    direction: rtl;
}
.topbar-search-input::placeholder { color: rgba(255,255,255,0.4); }
@media (max-width: 768px) {
    .topbar-search-form { display: none; }
}

.user-card,
.date-chip {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: none;
    direction: rtl;
}

.date-chip-sep {
    color: rgba(255, 255, 255, 0.28);
    font-size: 11px;
}

.date-chip-clock {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
    color: rgba(247, 212, 127, 0.92);
    font-weight: 800;
    font-size: 13px;
}

.user-menu {
    position: relative;
}

.user-card {
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-align: start;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.user-card:hover,
.user-card.show,
.user-menu.show .user-card {
    color: #fff;
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(217, 170, 69, 0.38);
}

.user-card[aria-expanded="true"] .user-card-chevron {
    transform: rotate(180deg);
}

.user-card-meta {
    min-width: 126px;
}

.user-card-chevron {
    color: rgba(217, 170, 69, 0.9);
    transition: transform 0.18s ease;
}

.user-avatar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: #102126;
    background: linear-gradient(135deg, #f6d27c, var(--accent));
    border-radius: 50%;
    font-size: 13px;
    font-weight: 800;
}

.user-avatar.large {
    width: 46px;
    height: 46px;
    font-size: 15px;
}

.user-card strong,
.user-card small {
    display: block;
    line-height: 1.45;
}

.user-card strong {
    font-size: 13px;
    color: #fff;
}

.user-card small,
.date-chip {
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    font-weight: 700;
}

.user-dropdown-menu {
    width: 292px;
    padding: 12px;
    margin-top: 10px !important;
    color: #071a33;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(15, 31, 56, 0.1);
    border-radius: 10px;
    box-shadow: 0 24px 55px rgba(3, 17, 36, 0.22);
    direction: rtl;
}

.user-dropdown-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 4px 12px;
}

.user-dropdown-head strong,
.user-dropdown-head small {
    display: block;
    line-height: 1.45;
}

.user-dropdown-head strong {
    color: #071a33;
    font-size: 14px;
    font-weight: 800;
}

.user-dropdown-head small {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.user-dropdown-meta {
    display: grid;
    gap: 8px;
    padding: 10px;
    margin-bottom: 6px;
    background: #f7fafc;
    border: 1px solid #edf2f7;
    border-radius: 8px;
}

.user-dropdown-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #526174;
    font-size: 12px;
    font-weight: 700;
}

.user-dropdown-meta i {
    color: var(--accent);
}

.user-dropdown-menu .dropdown-divider {
    margin: 8px 0;
    border-color: #edf2f7;
}

.user-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    color: #10264a;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
}

.user-dropdown-menu .dropdown-item i {
    width: 20px;
    color: #46607d;
    text-align: center;
}

.user-dropdown-menu .dropdown-item:hover {
    color: #071a33;
    background: #f2f6fb;
}

.user-dropdown-menu .dropdown-item.danger {
    color: #b42318;
}

.user-dropdown-menu .dropdown-item.danger i {
    color: #b42318;
}

.top-icon-btn {
    position: relative;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.65);
    background: transparent;
    border: 0;
    border-radius: 8px;
    direction: rtl;
}

.top-icon-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.top-icon-btn[aria-expanded="true"] {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
}

.notification-dot {
    position: absolute;
    top: 2px;
    inset-inline-end: 4px;
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--gold);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.notification-dot.blue {
    background: #2f6df6;
}

.topbar-action {
    position: relative;
}

.topbar-action-menu {
    width: 330px;
    padding: 12px;
    margin-top: 10px !important;
    color: #071a33;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(15, 31, 56, 0.1);
    border-radius: 10px;
    box-shadow: 0 24px 55px rgba(3, 17, 36, 0.22);
    direction: rtl;
}

.topbar-action-head {
    padding: 6px 6px 10px;
}

.topbar-action-head strong,
.topbar-action-head small {
    display: block;
    line-height: 1.45;
}

.topbar-action-head strong {
    color: #071a33;
    font-size: 14px;
    font-weight: 900;
}

.topbar-action-head small {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.topbar-alert-list {
    display: grid;
    gap: 8px;
}

.topbar-alert-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px;
    color: #10264a;
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 9px;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.topbar-alert-item:hover {
    color: #071a33;
    background: #f8fbff;
    border-color: rgba(199, 154, 59, 0.28);
    transform: translateY(-1px);
}

.topbar-alert-item strong,
.topbar-alert-item small {
    display: block;
    line-height: 1.45;
}

.topbar-alert-item strong {
    font-size: 12.5px;
    font-weight: 900;
}

.topbar-alert-item small {
    color: #64748b;
    font-size: 11.5px;
    font-weight: 700;
}

.topbar-alert-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    font-size: 17px;
}

.topbar-alert-icon.amber {
    color: #a15c00;
    background: #fff4dc;
}

.topbar-alert-icon.red {
    color: #b42318;
    background: #fff0ee;
}

.topbar-alert-icon.blue {
    color: #155eef;
    background: #eef4ff;
}

.topbar-alert-icon.green {
    color: #07884f;
    background: #eafaf1;
}

.topbar-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 58px;
    margin-top: 4px;
    color: #0b8f5b;
    background: #f0fbf6;
    border: 1px solid #cceedd;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
}

.sidebar-toggle {
    order: 0;
    margin: 0 0 0 4px;
    direction: rtl;
    display: none;
}

.page-content {
    padding: 0 32px 200px;
}

.dashboard-shell {
    max-width: 1480px;
    margin: 0 0 0 auto;
}

.operations-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 18px;
    margin: 0 0 24px;
}

.operations-header h1 {
    margin: 0;
    color: var(--ink-strong);
    font-size: 38px;
    font-weight: 800;
}

.operations-header p {
    margin: 8px 0 0;
    color: #8a92a3;
    font-size: 18px;
    font-weight: 600;
}

.operations-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-hero-action {
    min-width: 190px;
    min-height: 54px;
    border-radius: 8px;
    font-size: 15px;
}

.btn-primary.btn-hero-action {
    background: linear-gradient(180deg, var(--navy), var(--navy-2));
    border: 1px solid rgba(217, 170, 69, 0.55);
    box-shadow: 0 16px 28px rgba(6, 27, 53, 0.22), inset 0 0 0 1px rgba(255,255,255,0.06);
}

.btn-outline-gold {
    color: var(--navy);
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(217, 170, 69, 0.55);
}

.btn-outline-gold:hover {
    color: var(--navy);
    background: #fff7df;
    border-color: var(--gold);
}

.btn-gold {
    color: var(--navy);
    background: linear-gradient(180deg, #f4c15b, var(--gold));
    border: 1px solid rgba(217, 170, 69, 0.72);
    box-shadow: 0 14px 26px rgba(217, 170, 69, 0.24);
}

.btn-gold:hover {
    color: var(--navy);
    background: linear-gradient(180deg, #ffd170, var(--gold));
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.metric-card {
    position: relative;
    min-height: 128px;
    overflow: hidden;
    padding: 20px 20px 18px;
    background: rgba(255,255,255,0.86);
    border: 1px solid #e9edf5;
    border-radius: 8px;
    box-shadow: 0 18px 35px rgba(7, 26, 58, 0.07);
}

.metric-card span {
    display: block;
    color: #071a3a;
    font-size: 14px;
    font-weight: 800;
}

.metric-card strong {
    display: inline-block;
    margin-top: 10px;
    color: #071a3a;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.2;
}

.metric-card small {
    margin-inline-start: 4px;
    color: #6b7487;
    font-size: 11px;
    font-weight: 700;
}

.metric-card em {
    display: block;
    margin-top: 14px;
    color: #14a46d;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.metric-card em.danger {
    color: #d84f56;
}

.metric-icon {
    position: absolute;
    left: 20px;
    top: 26px;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 25px;
}

.metric-blue .metric-icon { color: #2d63c8; background: #eef4ff; }
.metric-green .metric-icon { color: #18a66f; background: #eafaf2; }
.metric-amber .metric-icon { color: #d68719; background: #fff3df; }
.metric-purple .metric-icon { color: #7254d8; background: #f1edff; }
.metric-red .metric-icon { color: #db3d45; background: #fff0f1; }

.dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
    gap: 18px;
}

.side-stack {
    display: grid;
    gap: 18px;
    align-content: start;
    grid-column: 2;
}

.surface-card {
    background: rgba(255,255,255,0.88);
    border: 1px solid #e9edf5;
    border-radius: 8px;
    box-shadow: 0 18px 35px rgba(7, 26, 58, 0.06);
}

.surface-head {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #edf0f6;
}

.surface-head h3,
.tasks-card h3,
.status-card h3 {
    margin: 0;
    color: var(--ink-strong);
    font-size: 16px;
    font-weight: 800;
}

.surface-head a,
.surface-head span {
    color: #7b8496;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.collection-list {
    padding: 10px 14px 14px;
}

.collection-item {
    min-height: 62px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    color: var(--ink-strong);
    text-decoration: none;
    border-bottom: 1px solid #f0f2f6;
}

.collection-item:last-child {
    border-bottom: 0;
}

.collection-amount {
    color: #11a86d;
    font-size: 16px;
    font-weight: 800;
}

.collection-item strong,
.collection-item small {
    display: block;
}

.collection-item strong {
    font-size: 12px;
}

.collection-item small {
    color: #7b8496;
    font-size: 11px;
    font-weight: 700;
}

.collection-item i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #18a66f;
    background: #eafaf2;
    border-radius: 8px;
}

.empty-soft {
    padding: 28px 12px;
    color: #8a92a3;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
}

.tasks-card {
    padding: 20px 16px;
}

.tasks-card h3 {
    margin-bottom: 14px;
    padding-inline: 4px;
}

.tasks-card a {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 12px 14px;
    color: #4d5668;
    text-decoration: none;
    background: #fff;
    border: 1px solid #edf0f6;
    border-radius: 8px;
}

.tasks-card a:hover {
    color: var(--navy);
    border-color: rgba(217, 170, 69, 0.55);
    background: #fffaf0;
}

.dashboard-main {
    display: grid;
    gap: 18px;
    grid-column: 1;
    grid-row: 1;
}

.invoice-hub {
    min-height: 246px;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 260px minmax(220px, 1fr);
    align-items: center;
    gap: 22px;
    padding: 20px 36px;
}

.hub-column {
    display: grid;
    gap: 12px;
}

.hub-link {
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    color: var(--ink-strong);
    text-decoration: none;
    background: rgba(255,255,255,0.92);
    border: 1px solid #e9edf5;
    border-radius: 8px;
}

.hub-link:hover {
    color: var(--ink-strong);
    border-color: rgba(217, 170, 69, 0.55);
    box-shadow: 0 12px 24px rgba(217, 170, 69, 0.11);
}

.hub-link i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: #2d63c8;
    background: #eef4ff;
    border-radius: 50%;
    font-size: 20px;
}

.hub-link strong,
.hub-link small {
    display: block;
}

.hub-link strong {
    font-size: 14px;
    font-weight: 800;
}

.hub-link small {
    margin-top: 4px;
    color: #7b8496;
    font-size: 11.5px;
    font-weight: 700;
}

.hub-orbit {
    position: relative;
    width: 240px;
    height: 240px;
    display: grid;
    place-items: center;
    margin: auto;
}

.orbit-ring {
    position: absolute;
    inset: 26px;
    border: 1px solid rgba(217, 170, 69, 0.28);
    border-radius: 50%;
}

.ring-two {
    inset: 44px;
    border-color: rgba(217, 170, 69, 0.45);
}

.orbit-dot {
    position: absolute;
    width: 11px;
    height: 11px;
    border: 2px solid var(--gold);
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(217,170,69,0.12);
    overflow: visible;
    z-index: 1;
}

/* 6 dots on ring-one perimeter (radius 94, center 120,120 in 240×240px orbit) */
/* Left side — symmetric at ±30° from 180°                                     */
.dot-one   { top:  67px; left:  33px; } /* left-top  θ=150° */
.dot-two   { top: 114px; left:  20px; } /* left-mid  θ=180° */
.dot-three { top: 161px; left:  33px; } /* left-bot  θ=210° */
/* Right side — symmetric at ±30° from 0°                                      */
.dot-four  { top:  67px; left: 195px; } /* right-top θ=30°  */
.dot-five  { top: 114px; left: 208px; } /* right-mid θ=0°   */
.dot-six   { top: 161px; left: 195px; } /* right-bot θ=−30° */

/* Connecting lines radiating outward from each dot toward its hub-link card   */
.orbit-dot::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    width: 70px;
    height: 1px;
    background: linear-gradient(to right, rgba(217,170,69,0.7), rgba(217,170,69,0.05));
    transform-origin: 0 50%;
}
.dot-one::after   { transform: rotate(210deg); }
.dot-two::after   { transform: rotate(180deg); }
.dot-three::after { transform: rotate(150deg); }
.dot-four::after  { transform: rotate(-30deg); }
.dot-five::after  { transform: rotate(0deg);   }
.dot-six::after   { transform: rotate(30deg);  }

.hub-core {
    position: relative;
    z-index: 2;
    width: 154px;
    height: 154px;
    display: grid;
    place-items: center;
    color: var(--gold);
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.45;
    background: radial-gradient(circle at 35% 25%, var(--navy-mid), var(--navy) 62%, var(--navy-2));
    border: 7px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(217, 170, 69, 0.45), 0 18px 40px rgba(6, 27, 53, 0.24);
}

.insight-grid {
    display: grid;
    grid-template-columns: 230px 260px minmax(0, 1fr);
    gap: 18px;
}

.chart-card,
.status-card {
    min-height: 280px;
}

.bar-chart {
    height: 210px;
    display: flex;
    align-items: end;
    justify-content: space-around;
    gap: 10px;
    padding: 20px 18px 16px;
}

.bar-chart span {
    height: 100%;
    display: grid;
    align-items: end;
    justify-items: center;
    gap: 6px;
    grid-template-rows: 1fr auto;
}

.bar-chart b,
.bar-chart i {
    width: 12px;
    display: block;
    border-radius: 4px 4px 0 0;
}

.bar-chart b {
    height: var(--h);
    background: var(--navy);
}

.bar-chart i {
    height: calc(var(--h) * 0.58);
    margin-top: -100%;
    transform: translateX(-16px);
    background: var(--gold);
}

.bar-chart small {
    color: #7b8496;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
}

.status-card {
    padding: 20px;
}

.donut-wrap {
    display: grid;
    place-items: center;
    gap: 14px;
}

.donut-chart {
    width: 154px;
    height: 154px;
    display: grid;
    place-items: center;
    text-align: center;
    background:
        radial-gradient(circle, #fff 0 52%, transparent 53%),
        conic-gradient(#18a66f 0 66%, #2d63c8 66% 84%, #db3d45 84% 96%, #d7dce6 96%);
    border-radius: 50%;
}

.donut-chart span,
.donut-chart small {
    grid-area: 1 / 1;
    display: block;
}

.donut-chart span {
    align-self: center;
    max-width: 110px;
    color: var(--ink-strong);
    font-size: 16px;
    font-weight: 800;
}

.donut-chart small {
    align-self: end;
    margin-bottom: 42px;
    color: #7b8496;
    font-size: 10px;
    font-weight: 700;
}

.donut-wrap ul {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
}

.donut-wrap li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    color: #667085;
    font-size: 11px;
    font-weight: 700;
}

.donut-wrap li strong {
    margin-inline-start: auto;
    color: var(--ink-strong);
}

.donut-wrap b {
    width: 9px;
    height: 9px;
    display: inline-block;
    border-radius: 50%;
}

.donut-wrap b.green { background: #18a66f; }
.donut-wrap b.blue { background: #2d63c8; }
.donut-wrap b.red { background: #db3d45; }

.invoices-table-card {
    min-width: 0;
}

.dashboard-table th {
    color: #6b7487;
    background: #f8f9fc;
    font-size: 12px;
}

.dashboard-table td {
    color: #25324a;
    font-size: 12px;
    font-weight: 700;
}

.dashboard-table a {
    color: #164d91;
    font-weight: 800;
    text-decoration: none;
}

@media (max-width: 1400px) {
    .metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .dashboard-layout {
        grid-template-columns: 1fr;
    }
    .dashboard-main,
    .side-stack {
        grid-column: auto;
        grid-row: auto;
    }
    .side-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1120px) {
    .invoice-hub {
        grid-template-columns: 1fr;
    }
    .hub-orbit {
        order: -1;
    }
    .insight-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1440px) {
    .topbar-brand {
        display: none;
    }
}

@media (max-width: 768px) {
    .top-navbar {
        min-height: auto;
        align-items: flex-start;
        gap: 12px;
        flex-wrap: wrap;
    }
    .topbar-brand {
        width: 100%;
    }
    .topbar-brand-text strong {
        max-width: calc(100vw - 150px);
    }
    .sidebar-toggle {
        display: inline-flex;
    }
    .topbar-left {
        flex-wrap: wrap;
        gap: 10px;
    }
    .date-chip {
        min-height: 44px;
    }
    .user-card {
        min-height: 48px;
    }
    .operations-header,
    .operations-actions,
    .side-stack {
        display: grid;
        grid-template-columns: 1fr;
    }
    .operations-header h1 {
        font-size: 30px;
    }
    .operations-header p {
        font-size: 15px;
    }
    .metric-grid {
        grid-template-columns: 1fr;
    }
    .invoice-hub {
        padding: 18px;
    }
    .hub-orbit {
        width: 210px;
        height: 210px;
    }
    .hub-core {
        width: 132px;
        height: 132px;
        font-size: 24px;
    }
}

/* ============================================================
   Premium Settings + Login Refresh
   ============================================================ */
.settings-hero {
    margin-bottom: 26px;
}

.settings-grid-page {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.settings-card {
    min-height: 350px;
    display: flex;
    flex-direction: column;
    padding: 28px 28px 24px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.94)),
        radial-gradient(circle at 18% 8%, rgba(217,170,69,0.07), transparent 35%);
    border: 1px solid #e4eaf3;
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(7, 26, 58, 0.055);
}

.settings-card-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    margin-bottom: 24px;
    color: #071a3a;
    text-align: right;
}

.settings-card-head i {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 44px;
    color: #071a3a;
    font-size: 22px;
    border: 1px solid #e6edf7;
    border-radius: 50%;
    background: #f4f7fb;
}

.settings-card-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0;
}

.settings-fields {
    display: grid;
    gap: 11px;
}

.settings-fields label {
    display: grid;
    grid-template-columns: minmax(92px, 132px) minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin: 0;
}

.settings-fields label span {
    color: #526078;
    font-size: 14px;
    font-weight: 800;
    text-align: right;
}

.settings-grid-page .form-control,
.settings-grid-page .form-select {
    min-height: 46px;
    color: #071a3a;
    font-weight: 700;
    text-align: right;
    background-color: rgba(255,255,255,0.86);
    border-color: #dfe6ef;
    border-radius: 7px;
    box-shadow: inset 0 1px 2px rgba(7,26,58,0.025);
}

.settings-grid-page .form-control:focus,
.settings-grid-page .form-select:focus {
    border-color: rgba(217,170,69,0.78);
    box-shadow: 0 0 0 3px rgba(217,170,69,0.13);
}

.settings-save {
    width: min(190px, 100%);
    min-height: 44px;
    justify-content: center;
    margin: auto auto 0;
    margin-top: 24px;
    border-radius: 7px;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(7, 26, 58, 0.16);
}

.settings-notes {
    min-height: 146px !important;
    padding: 20px;
    line-height: 1.8;
    resize: vertical;
}

.settings-counter,
.settings-help {
    margin-top: 10px;
    color: #7e8aa0;
    font-size: 13px;
    font-weight: 700;
}

.settings-logo-card {
    gap: 0;
}

.settings-logo-preview {
    min-height: 142px;
    display: grid;
    place-items: center;
    padding: 22px;
    margin-bottom: 14px;
    border: 1px dashed #dbe3ef;
    border-radius: 8px;
    background: #fff;
}

.settings-logo-preview img {
    max-width: 100%;
    max-height: 116px;
    object-fit: contain;
}

.settings-logo-mark {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 14px;
    align-items: center;
    color: #071a3a;
}

.settings-logo-mark i {
    grid-row: span 2;
    color: var(--gold);
    font-size: 54px;
    line-height: 1;
}

.settings-logo-mark strong {
    font-size: 20px;
    font-weight: 900;
}

.settings-logo-mark span {
    color: #526078;
    font-size: 12px;
    font-weight: 800;
}

.settings-logo-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.settings-logo-actions .btn {
    min-height: 42px;
    justify-content: center;
    border-radius: 7px;
    font-weight: 900;
}

.settings-grid-page .btn-outline-danger {
    color: #c92a35;
    border-color: #ead3d6;
    background: #fff;
}

.smart-login-page {
    padding: 0;
    background:
        radial-gradient(circle at 24% 14%, rgba(217,170,69,0.11), transparent 30%),
        linear-gradient(90deg, #f8fbff 0%, #ffffff 48%, var(--navy) 48%, var(--navy-2) 100%);
}

.login-shell {
    width: min(1180px, calc(100% - 36px));
    min-height: min(760px, calc(100vh - 48px));
    display: grid;
    grid-template-columns: 390px minmax(360px, 1fr);
    overflow: hidden;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(255,255,255,0.74);
    border-radius: 10px;
    box-shadow: 0 28px 70px rgba(7, 26, 58, 0.18);
}

.login-visual-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 34px;
    color: #fff;
    text-align: center;
    background:
        radial-gradient(circle at 50% 78%, rgba(217,170,69,0.18), transparent 28%),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 18px),
        linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
}

.login-visual-panel::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 215px;
    background:
        linear-gradient(180deg, transparent, rgba(2,17,39,0.92)),
        url("data:image/svg+xml,%3Csvg width='460' height='220' viewBox='0 0 460 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23d9aa45' stroke-opacity='.45'%3E%3Cpath d='M28 188V118h18v70M60 188V92h20v96M102 188V138h28v50M150 188V70h20v118M190 188V110h36v78M248 188V58h20v130M290 188V126h28v62M338 188V82h26v106M390 188V142h24v46'/%3E%3Cpath d='M16 188h424'/%3E%3C/g%3E%3Cg fill='%23d9aa45' fill-opacity='.7'%3E%3Ccircle cx='70' cy='58' r='2'/%3E%3Ccircle cx='150' cy='38' r='2'/%3E%3Ccircle cx='252' cy='34' r='2'/%3E%3Ccircle cx='344' cy='62' r='2'/%3E%3C/g%3E%3C/svg%3E") bottom center / 100% auto no-repeat;
    pointer-events: none;
}

.login-brand-mark {
    width: 94px;
    height: 94px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    color: var(--gold);
    font-size: 48px;
    border: 1px solid rgba(217,170,69,0.36);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    box-shadow: 0 0 46px rgba(217,170,69,0.14);
}

.login-visual-panel h1 {
    margin: 0;
    font-size: 31px;
    font-weight: 900;
}

.login-visual-panel p {
    max-width: 300px;
    margin: 14px 0 0;
    color: rgba(255,255,255,0.74);
    line-height: 1.9;
    font-weight: 700;
}

.login-visual-chart {
    z-index: 1;
    width: 230px;
    height: 116px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 36px;
}

.login-visual-chart span {
    width: 18px;
    height: var(--h);
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, #f5d477, rgba(27,69,93,0.78));
    border: 1px solid rgba(217,170,69,0.25);
}

.login-support-chip {
    z-index: 1;
    min-width: 210px;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    color: #fff;
    font-size: 17px;
    font-weight: 900;
    border: 1px solid rgba(217,170,69,0.35);
    border-radius: 8px;
    background: rgba(255,255,255,0.055);
}

.login-form-panel {
    display: grid;
    place-items: center;
    padding: 56px;
    background:
        radial-gradient(circle at 72% 16%, rgba(217,170,69,0.08), transparent 32%),
        linear-gradient(180deg, #fff, #f7faff);
}

.smart-login-card {
    width: min(470px, 100%);
    border: 1px solid #e3eaf3;
    border-radius: 8px;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 22px 56px rgba(7, 26, 58, 0.1);
}

.smart-login-card .login-header {
    padding: 34px 34px 22px;
    color: #071a3a;
    background: transparent;
}

.smart-login-card .login-header::after {
    background: linear-gradient(90deg, transparent, rgba(217,170,69,0.72), transparent);
}

.smart-login-card .login-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 26%, var(--navy-mid), var(--navy) 75%);
    box-shadow:
        0 0 0 3px #f0c15f,
        0 0 0 6px rgba(217, 170, 69, .22),
        0 16px 32px rgba(10, 20, 40, .35),
        inset 0 1px 1px rgba(255, 255, 255, .18);
    color: #f0c15f;
    font-size: 30px;
}

.smart-login-card .login-title {
    color: #071a3a;
    font-size: 31px;
    font-weight: 900;
}

.smart-login-card .login-subtitle {
    color: #7a8598;
    font-size: 15px;
}

.smart-login-card .login-body {
    padding: 30px 34px 22px;
}

.smart-login-card .form-label {
    color: #071a3a;
    font-weight: 900;
}

.smart-login-card .input-group {
    min-height: 50px;
    border: 1px solid #dfe6ef;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.smart-login-card .input-group-text,
.smart-login-card .form-control {
    border: 0;
    background: transparent;
}

.smart-login-card .input-group-text {
    color: #6b7890;
    font-size: 18px;
}

.smart-login-card .form-control {
    min-height: 50px;
    font-weight: 800;
}

.smart-login-card .btn-primary {
    min-height: 52px;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(217,170,69,0.62);
    border-radius: 7px;
    background: linear-gradient(180deg, var(--navy), var(--navy-2));
    box-shadow: 0 14px 28px rgba(7, 26, 58, 0.22);
}

.smart-login-card .login-footer {
    color: #7a8598;
    background: #fbfcff;
}

@media (max-width: 1200px) {
    .settings-grid-page {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .login-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .login-visual-panel {
        min-height: 320px;
    }
    .login-form-panel {
        padding: 34px 22px;
    }
}

@media (max-width: 768px) {
    .settings-grid-page {
        grid-template-columns: 1fr;
    }
    .settings-card {
        min-height: 0;
        padding: 22px;
    }
    .settings-fields label {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .settings-logo-actions {
        grid-template-columns: 1fr;
    }
}

/* ============================================================ Table Enhancements */

/* Row color coding by status */
.row-status-paid {
    background: rgba(22, 130, 93, 0.04) !important;
}
.row-status-paid:hover {
    background: rgba(22, 130, 93, 0.09) !important;
}
.row-status-overdue {
    background: rgba(196, 61, 75, 0.04) !important;
}
.row-status-overdue:hover {
    background: rgba(196, 61, 75, 0.09) !important;
}
.row-status-partial {
    background: rgba(199, 122, 25, 0.04) !important;
}
.row-status-partial:hover {
    background: rgba(199, 122, 25, 0.08) !important;
}
.row-status-cancelled {
    opacity: 0.55;
}

/* Overdue date indicator */
.overdue-date {
    color: var(--red);
    font-weight: 700;
}
.overdue-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-right: 5px;
    padding: 1px 6px;
    color: #fff;
    background: var(--red);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    vertical-align: middle;
    white-space: nowrap;
}
.overdue-chip i {
    font-size: 10px;
}

/* Payment progress bar */
.pay-progress-cell {
    min-width: 140px;
}
.pay-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pay-bar-track {
    height: 7px;
    background: #e8edf4;
    border-radius: 999px;
    overflow: hidden;
}
.pay-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.bar-full  { background: linear-gradient(90deg, #16825d, #21a376); }
.bar-partial { background: linear-gradient(90deg, #c77a19, #e3a840); }
.bar-zero  { background: #d0d5dd; width: 0 !important; }

.pay-bar-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.pay-pct-label {
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}
.label-full    { color: var(--green); }
.label-partial { color: var(--orange); }
.label-zero    { color: #98a2b3; }

.pay-remaining-label {
    font-size: 10.5px;
    color: var(--muted);
    white-space: nowrap;
}

/* Sortable column headers */
.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.sortable:hover {
    background: #edf3f9 !important;
    color: var(--primary);
}
.sort-icon {
    font-size: 10px;
    opacity: 0.45;
    margin-right: 4px;
    vertical-align: middle;
}
.sort-active {
    opacity: 1;
    color: var(--teal);
}

/* Customer name cell */
.customer-name-cell {
    display: inline-block;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* ============================================================ Payments progress bar (large) */
.payment-progress-lg {
    height: 12px;
    background: #e8edf4;
    border-radius: 999px;
    overflow: hidden;
}
.payment-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.fill-full    { background: linear-gradient(90deg, #16825d, #21a376); }
.fill-partial { background: linear-gradient(90deg, #c77a19, #e3a840); }
.fill-zero    { background: #d0d5dd; width: 0 !important; }

/* ============================================================ Customer table enhancements */
.customer-invoice-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 90px;
}
.cust-bar-track {
    flex: 1;
    height: 5px;
    background: #e8edf4;
    border-radius: 999px;
    overflow: hidden;
}
.cust-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--teal));
    border-radius: 999px;
}
.cust-bar-val {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

/* ============================================================
   Invoice Form - Premium Redesign
   ============================================================ */

/* Hero */
.inv-form-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 4px;
    font-size: 26px;
    font-weight: 800;
    color: var(--ink);
}
.inv-form-title-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e6f4f1, #d0eeea);
    color: var(--teal);
    font-size: 20px;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(18,140,126,0.14);
}
.inv-form-subtitle {
    color: var(--muted);
    font-size: 13px;
    margin: 0;
}

/* Layout */
.inv-form-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
}
.inv-form-main { display: flex; flex-direction: column; gap: 18px; }
.inv-aside { position: sticky; top: 90px; }

/* Sections */
.inv-section {
    background: rgba(255,255,255,0.93);
    border: 1px solid rgba(230,234,242,0.95);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(16,24,40,0.05);
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.inv-section:focus-within {
    box-shadow: 0 8px 28px rgba(18,140,126,0.1);
    border-color: rgba(18,140,126,0.25);
}
.inv-section-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border-bottom: 1px solid var(--line);
}
.inv-step {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--primary), var(--teal));
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(11,79,108,0.22);
}
.inv-section-label strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
}
.inv-section-label small {
    font-size: 11.5px;
    color: var(--muted);
}
.inv-section-body {
    padding: 20px;
}

/* Fields grid */
.inv-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}
.inv-field-lg { grid-column: span 1; }
.inv-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    color: #344054;
    font-size: 12.5px;
    font-weight: 800;
}
.inv-label i { color: var(--teal); font-size: 13px; }
.inv-req { color: var(--red); margin-right: 2px; }
.inv-select { border-radius: 8px !important; }

/* Invoice type toggle */
.inv-type-toggle {
    display: flex;
    gap: 8px;
}
.inv-type-opt { flex: 1; cursor: pointer; }
.inv-type-opt input { display: none; }
.inv-type-opt span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1.5px solid #d9e0ea;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    transition: all 0.18s;
    text-align: center;
    min-height: 42px;
}
.inv-type-opt input:checked + span {
    background: linear-gradient(135deg, #e9f6f6, #d5f0ed);
    border-color: var(--teal);
    color: var(--primary);
    box-shadow: 0 0 0 3px rgba(18,140,126,0.1);
}
.inv-type-opt span i { font-size: 15px; }

/* Add item button */
.inv-add-btn {
    margin-right: auto;
    white-space: nowrap;
}

/* Items container */
.inv-items-container {
    padding: 0 0 12px;
}
.inv-items-head {
    display: grid;
    grid-template-columns: 1fr 80px 110px 90px 80px 120px 44px;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(180deg, #f3f7fb, #edf2f8);
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    font-weight: 800;
    color: #475467;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ic-total, .ic-num { text-align: center; }
.ic-del { text-align: center; }

/* Item rows */
.inv-item-row {
    display: grid;
    grid-template-columns: 1fr 80px 110px 90px 80px 120px 44px;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(230,234,242,0.7);
    align-items: center;
    transition: background 0.15s, opacity 0.22s, transform 0.22s;
}
.inv-item-row:last-of-type { border-bottom: none; }
.inv-item-row:hover { background: #f7fafb; }

.inv-item-new {
    opacity: 0;
    transform: translateY(-8px);
}
.inv-item-removing {
    opacity: 0;
    transform: translateX(20px);
    pointer-events: none;
}
@keyframes shake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
.inv-item-shake { animation: shake 0.4s ease; }

.inv-item-input {
    border-radius: 7px !important;
    font-size: 13px !important;
    min-height: 38px !important;
    padding: 6px 10px !important;
    border-color: #dde3ee !important;
    background: #fff !important;
}
.inv-item-input:focus {
    border-color: rgba(18,140,126,0.55) !important;
    box-shadow: 0 0 0 3px rgba(18,140,126,0.1) !important;
}

/* Total cell */
.ic-total {
    display: flex;
    align-items: center;
    justify-content: center;
}
.inv-item-total {
    width: 100%;
    padding: 6px 8px;
    background: #f3f7fb;
    border: 1.5px solid #e0e8f0;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 800;
    color: var(--muted);
    text-align: center;
    outline: none;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.ic-total.has-value .inv-item-total {
    background: linear-gradient(135deg, #e9f6f1, #d5f0e6);
    border-color: rgba(22,130,93,0.3);
    color: var(--green);
}

/* Delete button */
.inv-del-btn {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1.5px solid #f0d5d8;
    border-radius: 7px;
    color: #c0666f;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.18s;
    margin: auto;
}
.inv-del-btn:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
    transform: scale(1.08);
}

/* Add row button */
.inv-add-row-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 32px);
    margin: 10px 16px 0;
    padding: 11px;
    background: transparent;
    border: 1.5px dashed #c8d8e8;
    border-radius: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
    font-family: var(--font);
}
.inv-add-row-btn:hover {
    background: #f0f7fd;
    border-color: var(--teal);
    color: var(--teal);
}
.inv-add-row-btn i { font-size: 17px; }

/* Notes field */
.inv-notes-field {
    border-radius: 9px !important;
    font-size: 13.5px !important;
    line-height: 1.8 !important;
    resize: vertical;
}

/* ---- Summary Panel ---- */
.inv-summary {
    background:
        radial-gradient(circle at 88% 14%, rgba(217,170,69,0.22), transparent 10rem),
        linear-gradient(180deg, var(--navy) 0%, var(--navy-3) 52%, var(--navy-4) 100%);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(1,11,29,0.28);
    border: 1px solid rgba(217,170,69,0.14);
    color: #fff;
}
.inv-summary-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 14px;
    font-size: 14px;
    font-weight: 800;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.inv-summary-header i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #f6d27c, var(--accent));
    color: #102126;
    font-size: 16px;
    border-radius: 8px;
}
.inv-summary-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.inv-sum-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
}
.inv-sum-line span {
    color: rgba(255,255,255,0.58);
    display: flex;
    align-items: center;
    gap: 5px;
}
.inv-sum-line strong {
    color: rgba(255,255,255,0.88);
    font-size: 13px;
    font-weight: 700;
}
.inv-sum-discount strong { color: #f09c7c; }
.inv-sum-vat strong { color: #a0cfff; }

.inv-grand-box {
    margin: 0 16px 16px;
    padding: 16px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.3s, box-shadow 0.3s;
}
.inv-grand-box.nonzero {
    background: rgba(199,154,59,0.15);
    border-color: rgba(199,154,59,0.35);
    box-shadow: 0 0 20px rgba(199,154,59,0.1);
}
.inv-grand-box > span {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.65);
}
.inv-grand-amount {
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.inv-grand-amount strong {
    font-size: 26px;
    font-weight: 800;
    color: #f6d27c;
    line-height: 1;
    transition: color 0.3s;
}
.inv-grand-box.nonzero .inv-grand-amount strong { color: #f6d27c; }
.inv-grand-amount small {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
}

.inv-summary input[type="date"] {
    width: 100% !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: var(--navy) !important;
    color: #e2e8f0 !important;
    font-size: .8rem !important;
    font-family: inherit !important;
    outline: none !important;
    min-height: unset !important;
    color-scheme: dark;
    -webkit-appearance: none;
    appearance: none;
}
.inv-summary input[type="date"]:focus {
    border-color: rgba(217,170,69,.4) !important;
}

.inv-summary-actions {
    padding: 0 16px 16px;
}
.inv-summary-actions .btn-primary {
    background: linear-gradient(135deg, var(--accent), #e3b84a) !important;
    border: none !important;
    color: #102126 !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 22px rgba(199,154,59,0.32) !important;
}
.inv-summary-actions .btn-primary:hover {
    background: linear-gradient(135deg, #d4a83f, #f0c752) !important;
    transform: translateY(-1px);
}
.inv-summary-actions .btn-outline-secondary {
    border-color: rgba(255,255,255,0.18) !important;
    color: rgba(255,255,255,0.55) !important;
    background: transparent !important;
}
.inv-summary-actions .btn-outline-secondary:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
}
.inv-summary-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.04);
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 11.5px;
    color: rgba(255,255,255,0.4);
    line-height: 1.6;
}
.inv-summary-tip i { font-size: 13px; color: var(--accent); margin-top: 1px; flex: 0 0 auto; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
    .inv-form-layout { grid-template-columns: 1fr; }
    .inv-aside { position: static; }
    .inv-info-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .inv-items-head { display: none; }
    .inv-item-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
    }
    .ic-desc { grid-column: span 2; }
    .inv-info-grid { grid-template-columns: 1fr; }
}
}

/* ============================================================ Customer View Page */

.customer-detail-page {
    display: grid;
    gap: 18px;
}

.customer-detail-head {
    margin-bottom: 0;
}

.customer-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    color: #8a92a3;
    font-size: 13px;
    font-weight: 800;
}

.customer-breadcrumb a {
    color: #617089;
    text-decoration: none;
}

.customer-breadcrumb a:hover {
    color: var(--primary);
}

.customer-actions {
    margin-top: 12px;
}

.customer-metrics {
    margin-bottom: 0;
}

.customer-metrics .metric-card strong {
    max-width: calc(100% - 58px);
    overflow-wrap: anywhere;
}

.customer-detail-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.34fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.customer-profile-panel,
.customer-invoices-panel {
    overflow: hidden;
}

.customer-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.customer-type-pill.type-company {
    color: #8a5b07;
    background: #fff4d6;
    border: 1px solid rgba(217, 170, 69, 0.4);
}

.customer-type-pill.type-individual {
    color: #0b55c8;
    background: #eef4ff;
    border: 1px solid #d7e5ff;
}

.customer-profile-summary {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 18px;
    border-bottom: 1px solid #edf0f6;
}

.customer-avatar {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    color: var(--navy);
    background: linear-gradient(180deg, #f4c15b, var(--gold));
    border-radius: 8px;
    font-size: 23px;
    font-weight: 900;
    box-shadow: 0 12px 22px rgba(217, 170, 69, 0.22);
}

.customer-profile-summary strong,
.customer-profile-summary span {
    display: block;
}

.customer-profile-summary strong {
    color: var(--ink-strong);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.customer-profile-summary span {
    margin-top: 4px;
    color: #7b8496;
    font-size: 12.5px;
    font-weight: 700;
}

.customer-detail-list {
    margin: 0;
    padding: 4px 18px 16px;
}

.customer-detail-list div {
    display: grid;
    gap: 6px;
    padding: 13px 0;
    border-bottom: 1px solid #edf0f6;
}

.customer-detail-list div:last-child {
    border-bottom: 0;
}

.customer-detail-list dt {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #7b8496;
    font-size: 12px;
    font-weight: 800;
}

.customer-detail-list dt i {
    color: #98a2b3;
    font-size: 13px;
}

.customer-detail-list dd {
    margin: 0;
    color: #142646;
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.address-line {
    display: block;
    line-height: 1.8;
}

.customer-empty-info,
.customer-empty-state {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 44px 18px;
    color: #8a92a3;
    text-align: center;
}

.customer-empty-info i,
.customer-empty-state i {
    color: #c5cedc;
    font-size: 38px;
}

.customer-empty-state strong {
    color: #142646;
    font-size: 16px;
    font-weight: 800;
}

.customer-empty-state span,
.customer-empty-info span {
    font-size: 13px;
    font-weight: 700;
}

.customer-invoices-table th,
.customer-invoices-table td {
    white-space: nowrap;
}

.customer-invoices-table .pay-progress-cell {
    width: 210px;
    min-width: 180px;
}

.customer-invoices-table .overdue-chip {
    margin-inline-start: 6px;
}

@media (max-width: 1100px) {
    .customer-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .customer-detail-page .page-title {
        font-size: 30px;
    }

    .customer-detail-page .btn-hero-action {
        width: 100%;
        min-width: 0;
    }

    .customer-metrics.metric-grid.metrics-4 {
        grid-template-columns: 1fr;
    }

    .customer-profile-summary {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .customer-avatar {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
}

/* ============================================================ Customer Form Page */

.customer-form-shell {
    display: grid;
    gap: 18px;
}

.customer-form-head {
    margin-bottom: 0;
}

.customer-form-actions {
    margin-top: 12px;
}

.customer-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 18px;
    align-items: start;
}

.customer-editor-main,
.customer-editor-side .surface-card {
    overflow: hidden;
}

.customer-editor-main {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.9)),
        radial-gradient(circle at 12% 0%, rgba(217, 170, 69, 0.12), transparent 24rem),
        radial-gradient(circle at 86% 16%, rgba(18, 140, 126, 0.1), transparent 22rem);
}

.customer-type-hero {
    position: relative;
    min-height: 178px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 30px 30px 26px;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(6, 27, 53, 0.96), rgba(3, 23, 47, 0.98)),
        radial-gradient(circle at 12% 20%, rgba(217, 170, 69, 0.28), transparent 14rem);
}

.customer-type-hero::after {
    content: "";
    position: absolute;
    inset-inline-start: 30px;
    bottom: 0;
    width: 150px;
    height: 3px;
    background: linear-gradient(90deg, #f4c15b, rgba(244, 193, 91, 0));
}

.customer-form-kicker {
    width: max-content;
    padding: 6px 12px;
    color: #f6d27c;
    background: rgba(217, 170, 69, 0.12);
    border: 1px solid rgba(217, 170, 69, 0.32);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.customer-type-hero h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.25;
}

.customer-type-hero p {
    max-width: 620px;
    margin: 0;
    color: rgba(255,255,255,0.68);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.9;
}

.customer-type-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 20px;
    border-bottom: 1px solid #edf0f6;
}

.customer-type-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.customer-type-option {
    position: relative;
    min-height: 154px;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 20px 20px 20px 76px;
    cursor: pointer;
    color: #142646;
    background:
        linear-gradient(180deg, #ffffff, #f7f9fd);
    border: 1px solid #dde6f2;
    border-radius: 8px;
    box-shadow: 0 16px 32px rgba(7, 26, 58, 0.055);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.customer-type-option:hover {
    transform: translateY(-2px);
    border-color: rgba(11, 79, 108, 0.28);
    box-shadow: 0 22px 42px rgba(7, 26, 58, 0.09);
}

.customer-type-option .type-card-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    color: #0b55c8;
    background: #eef4ff;
    border-radius: 8px;
    font-size: 28px;
}

.customer-type-company .type-card-icon {
    color: #8a5b07;
    background: #fff4d6;
}

.customer-type-individual .type-card-icon {
    color: #0b55c8;
    background: #eef4ff;
}

.customer-type-option .type-card-text {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.customer-type-option strong {
    color: var(--ink-strong);
    font-size: 24px;
    font-weight: 900;
    line-height: 1.15;
}

.customer-type-option small {
    max-width: 260px;
    color: #7b8496;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.8;
}

.customer-type-option em {
    position: absolute;
    left: 18px;
    bottom: 18px;
    min-width: 72px;
    padding: 6px 11px;
    color: #617089;
    background: #f4f7fb;
    border-radius: 999px;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    text-align: center;
}

.customer-type-switch input:checked + .customer-type-option {
    background:
        linear-gradient(180deg, rgba(255,255,255,1), rgba(255,249,232,0.94)),
        radial-gradient(circle at 16% 10%, rgba(217, 170, 69, 0.18), transparent 13rem);
    border-color: rgba(217, 170, 69, 0.78);
    box-shadow: 0 24px 46px rgba(217, 170, 69, 0.15), inset 0 0 0 1px rgba(217, 170, 69, 0.22);
}

.customer-type-switch input:checked + .customer-type-option::after {
    content: "\F26A";
    position: absolute;
    left: 16px;
    bottom: 14px;
    font-family: "bootstrap-icons";
    color: #16825d;
    font-size: 20px;
}

.customer-type-switch input:checked + .customer-type-option .type-card-icon {
    color: var(--navy);
    background: linear-gradient(180deg, #f4c15b, var(--gold));
    box-shadow: 0 14px 24px rgba(217, 170, 69, 0.24);
}

.customer-type-switch input:checked + .customer-type-option em {
    color: #075940;
    background: #e7f8ef;
}

.customer-form-section {
    padding: 26px 24px;
    border-bottom: 1px solid #edf0f6;
}

.customer-form-section:last-child {
    border-bottom: 0;
}

.customer-section-title {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
}

.customer-section-title > i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: #0b55c8;
    background: linear-gradient(180deg, #eef4ff, #e6f7f5);
    border-radius: 8px;
    font-size: 19px;
}

.customer-section-title h3 {
    margin: 0;
    color: var(--ink-strong);
    font-size: 16px;
    font-weight: 900;
}

.customer-section-title p {
    margin: 4px 0 0;
    color: #7b8496;
    font-size: 12.5px;
    font-weight: 700;
}

.customer-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.customer-field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.customer-field.field-wide {
    grid-column: 1 / -1;
}

.customer-field > span {
    color: #344054;
    font-size: 12.5px;
    font-weight: 900;
}

.customer-field > span b {
    color: var(--red);
}

.customer-editor-grid .form-control,
.customer-editor-grid .form-select {
    min-height: 54px;
    padding-inline: 16px;
    color: #142646;
    background: rgba(255,255,255,0.96);
    border-color: #dfe6f1;
    box-shadow: 0 10px 22px rgba(7, 26, 58, 0.035);
    font-weight: 800;
}

.customer-editor-grid .form-control:focus,
.customer-editor-grid .form-select:focus {
    border-color: rgba(217, 170, 69, 0.62);
    box-shadow: 0 0 0 4px rgba(217, 170, 69, 0.13), 0 12px 24px rgba(7, 26, 58, 0.06);
}

.customer-editor-grid textarea.form-control {
    min-height: 108px;
    padding-block: 12px;
    resize: vertical;
}

.customer-preview-card {
    padding: 26px;
    background:
        linear-gradient(180deg, #ffffff, #f7f9fc),
        radial-gradient(circle at 18% 0%, rgba(217, 170, 69, 0.12), transparent 16rem);
}

.customer-preview-mark {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    color: var(--navy);
    background: linear-gradient(180deg, #f4c15b, var(--gold));
    border-radius: 8px;
    font-size: 27px;
    box-shadow: 0 12px 22px rgba(217, 170, 69, 0.22);
}

.customer-preview-card h3 {
    margin: 18px 0 8px;
    color: var(--ink-strong);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.5;
}

.customer-preview-card p {
    margin: 0;
    color: #7b8496;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.9;
}

.customer-preview-list {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.customer-preview-list div {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 12px;
    background: #fbfcff;
    border: 1px solid #edf0f6;
    border-radius: 8px;
}

.customer-preview-list i {
    color: #16825d;
}

.customer-preview-list span {
    color: #142646;
    font-size: 12.5px;
    font-weight: 800;
}

.customer-save-card {
    display: grid;
    gap: 10px;
    margin-top: 18px;
    padding: 16px;
    background: rgba(255,255,255,0.94);
}

.customer-save-card .btn {
    min-height: 48px;
}

@media (max-width: 1100px) {
    .customer-editor-grid {
        grid-template-columns: 1fr;
    }

    .customer-editor-side {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .customer-save-card {
        margin-top: 0;
        align-content: center;
    }
}

@media (max-width: 768px) {
    .customer-form-shell .page-title {
        font-size: 30px;
    }

    .customer-form-shell .btn-hero-action {
        width: 100%;
        min-width: 0;
    }

    .customer-type-switch,
    .customer-field-grid,
    .customer-editor-side {
        grid-template-columns: 1fr;
    }

    .customer-type-option {
        min-height: 116px;
    }
}

.cv-hero {
    margin-bottom: 24px;
    background:
        radial-gradient(circle at 88% 14%, rgba(217,170,69,0.22), transparent 10rem),
        linear-gradient(180deg, var(--navy) 0%, var(--navy-3) 52%, var(--navy-4) 100%);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 18px 42px rgba(1, 11, 29, 0.28);
}

.cv-hero-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 30px 22px;
}

.cv-hero-profile {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cv-avatar {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--navy-mid), var(--navy));
    border: 2.5px solid rgba(217, 170, 69, 0.65);
    box-shadow: 0 0 0 5px rgba(217, 170, 69, 0.1);
    display: grid;
    place-items: center;
    color: var(--gold);
    font-size: 28px;
    font-weight: 900;
}

.cv-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: 700;
}

.cv-breadcrumb a {
    color: rgba(255,255,255,0.42);
    text-decoration: none;
}

.cv-breadcrumb a:hover { color: rgba(255,255,255,0.72); }

.cv-breadcrumb i {
    color: rgba(255,255,255,0.22);
    font-size: 10px;
}

.cv-breadcrumb span { color: rgba(255,255,255,0.68); }

.cv-name {
    margin: 0 0 10px;
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
}

.cv-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cv-type-badge,
.cv-city-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.cv-badge-company {
    background: rgba(217,170,69,0.18);
    color: var(--gold);
    border: 1px solid rgba(217,170,69,0.4);
}

.cv-badge-individual {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.75);
    border: 1px solid rgba(255,255,255,0.18);
}

.cv-city-badge {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.52);
    border: 1px solid rgba(255,255,255,0.12);
}

.cv-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    padding-top: 4px;
}

.cv-btn-invoice {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: var(--gold);
    color: #071a3a !important;
    font-weight: 800;
    font-size: 13.5px;
    border-radius: 8px;
    border: none;
    box-shadow: 0 4px 14px rgba(217,170,69,0.35);
    text-decoration: none;
}

.cv-btn-invoice:hover { background: #e8c154; }

.cv-btn-edit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8) !important;
    font-weight: 700;
    font-size: 13px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.18);
    text-decoration: none;
}

.cv-btn-edit:hover {
    background: rgba(255,255,255,0.18);
    color: #fff !important;
}

.cv-kpi-strip {
    display: flex;
    align-items: stretch;
    border-top: 1px solid rgba(255,255,255,0.07);
    background: rgba(0,0,0,0.15);
}

.cv-kpi {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 12px;
    gap: 5px;
}

.cv-kpi-sep {
    width: 1px;
    background: rgba(255,255,255,0.07);
    margin: 12px 0;
}

.cv-kpi-val {
    font-size: 17px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

.cv-kpi-lbl {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    text-align: center;
}

.cv-kpi-paid .cv-kpi-val { color: #4fd4a7; }
.cv-kpi-due  .cv-kpi-val { color: #f0a96e; }

/* ── Layout ── */
.cv-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* ── Shared card head ── */
.cv-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.cv-card-head > i {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-grid;
    place-items: center;
    font-size: 20px;
    color: #071a3a;
    background: #f4f7fb;
    border: 1px solid #e6edf7;
    border-radius: 50%;
}

.cv-card-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
    color: #071a3a;
}

.cv-card-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.cv-inv-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: rgba(6,27,53,0.08);
    color: #071a3a;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 900;
}

.cv-btn-sm-invoice {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    background: var(--primary);
    color: #fff !important;
    font-weight: 800;
    font-size: 12.5px;
    border-radius: 7px;
    border: none;
    text-decoration: none;
}

.cv-btn-sm-invoice:hover { background: #0f3d7a; }

/* ── Info card ── */
.cv-info-card {
    padding: 24px 22px 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.94)),
        radial-gradient(circle at 18% 8%, rgba(217,170,69,0.07), transparent 35%);
    border: 1px solid #e4eaf3;
    border-radius: 10px;
    box-shadow: 0 14px 36px rgba(7,26,58,0.05);
}

.cv-info-rows { display: flex; flex-direction: column; }

.cv-info-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 11px 0;
    border-bottom: 1px solid #f0f4f9;
}

.cv-info-row:last-child { border-bottom: 0; }

.cv-info-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #8a9ab4;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.cv-info-val {
    font-size: 14px;
    font-weight: 700;
    color: #071a3a;
    padding-right: 17px;
    line-height: 1.4;
}

.cv-info-row-notes .cv-info-val {
    font-weight: 400;
    color: #526078;
    font-size: 13px;
    white-space: pre-line;
}

.cv-info-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 10px;
    text-align: center;
    color: #b0bccf;
}

.cv-info-empty i    { font-size: 30px; }
.cv-info-empty span { font-size: 12.5px; font-weight: 600; }

/* ── Invoices card ── */
.cv-inv-card {
    padding: 24px 22px 20px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.94)),
        radial-gradient(circle at 18% 8%, rgba(217,170,69,0.07), transparent 35%);
    border: 1px solid #e4eaf3;
    border-radius: 10px;
    box-shadow: 0 14px 36px rgba(7,26,58,0.05);
}

.cv-inv-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #edf1f8;
}

.cv-inv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.cv-inv-table thead th {
    padding: 11px 14px;
    background: #f7f9fc;
    color: #526078;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    border-bottom: 1px solid #edf1f8;
    text-align: right;
}

.cv-inv-table tbody td {
    padding: 12px 14px;
    vertical-align: middle;
    border-bottom: 1px solid #f4f6fb;
    color: #071a3a;
}

.cv-inv-table tbody tr:last-child td { border-bottom: 0; }

.cv-inv-table tbody tr:hover td { background: rgba(7,26,58,0.024); }

.cv-inv-num {
    font-weight: 800;
    color: var(--primary);
    text-decoration: none;
    font-size: 13px;
}

.cv-inv-num:hover {
    text-decoration: underline;
    color: var(--teal);
}

.cv-inv-date  { color: #526078; font-size: 12.5px; white-space: nowrap; }
.cv-inv-total { font-weight: 800; white-space: nowrap; }
.cv-inv-due   { white-space: nowrap; font-size: 12.5px; }

.cv-inv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 50px 20px;
    text-align: center;
}

.cv-inv-empty i      { font-size: 46px; color: #d0d9e8; }
.cv-inv-empty strong { font-size: 16px; font-weight: 800; color: #526078; }
.cv-inv-empty span   { font-size: 13px; color: #b0bccf; }

@media (max-width: 900px) {
    .cv-layout {
        grid-template-columns: 1fr;
    }

    .cv-hero-inner {
        flex-direction: column;
        gap: 18px;
    }

    .cv-hero-actions {
        flex-direction: row;
        align-items: center;
        padding-top: 0;
    }

    .cv-kpi-strip { flex-wrap: wrap; }
    .cv-kpi { min-width: 45%; }

    .cv-name { font-size: 22px; }
}

/* ============================================================ Chart of Accounts */
.coa-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 28px;
}

.coa-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 132px;
    padding: 26px 28px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 14% 20%, rgba(242, 193, 95, 0.2), transparent 18rem),
        radial-gradient(circle at 90% 10%, rgba(18, 140, 126, 0.18), transparent 20rem),
        linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 54%, var(--navy-5) 100%);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: var(--shadow-md);
}

.coa-hero::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(242, 193, 95, 0.8), transparent);
}

.coa-hero-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--gold-light);
    font-size: 28px;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(242, 193, 95, 0.22);
    box-shadow: 0 16px 34px rgba(0,0,0,0.18);
}

.coa-hero h1 {
    margin: 0;
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 0;
}

.coa-hero p {
    margin: 7px 0 0;
    color: rgba(255,255,255,0.68);
    font-size: 13.5px;
    font-weight: 700;
}

.coa-hero-actions {
    display: flex;
    gap: 10px;
    margin-inline-start: auto;
}

.coa-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.coa-stat {
    position: relative;
    min-height: 100px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 14px;
    padding: 16px 18px;
    text-align: right;
    background:
        repeating-linear-gradient(180deg, rgba(19,42,77,.028) 0px, rgba(19,42,77,.028) 1px, transparent 1px, transparent 10px),
        linear-gradient(180deg, #fffdf9 0%, #fbf8f1 100%);
    border: 1px solid #ece3cf;
    border-radius: 15px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(16,24,40,.05), var(--shadow-sm);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .2s ease, transform .15s ease;
}

.coa-stat::after {
    content: '';
    position: absolute;
    inset-inline-end: -20px;
    bottom: -20px;
    width: 90px;
    height: 90px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='8' y='8' width='26' height='26' fill='none' stroke='%23132a4d' stroke-width='2.5' transform='rotate(45 21 21)'/%3E%3Crect x='46' y='8' width='26' height='26' fill='none' stroke='%23132a4d' stroke-width='2.5' transform='rotate(45 59 21)'/%3E%3Crect x='8' y='46' width='26' height='26' fill='none' stroke='%23132a4d' stroke-width='2.5' transform='rotate(45 21 59)'/%3E%3Crect x='46' y='46' width='26' height='26' fill='none' stroke='%23132a4d' stroke-width='2.5' transform='rotate(45 59 59)'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    opacity: .05;
    pointer-events: none;
}

.coa-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(16,24,40,.06), var(--shadow-md);
}

.coa-stat.active {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
    border-color: rgba(242,193,95,0.4);
    box-shadow: 0 8px 24px rgba(6,27,53,0.32);
}
.coa-stat.active span:not(.coa-stat-mark),
.coa-stat.active small {
    color: rgba(255,255,255,.65);
}
.coa-stat.active strong {
    color: var(--gold-light);
    border-bottom-color: var(--gold-light) !important;
}
.coa-stat.active .coa-stat-mark {
    box-shadow: 0 0 0 1.5px var(--gold-light), inset 0 1px 1px rgba(255,255,255,.25), 0 3px 8px rgba(0,0,0,.4);
    color: var(--gold-light);
}

.coa-stat-mark {
    grid-row: 1 / 3;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 16px;
    background: linear-gradient(135deg, var(--bg1, #fff3d6), var(--bg2, #ffe3ac));
    box-shadow: 0 0 0 1.5px var(--ring, #d4af37), inset 0 1px 1px rgba(255,255,255,.5), 0 2px 5px rgba(15,23,42,.08);
    color: var(--ink, #b15d05);
}

.coa-stat-mark.coa-type-Asset     { --bg1:#e4edff; --bg2:#c4d9ff; --ring:#3b82f6; --ink:#1450c9; }
.coa-stat-mark.coa-type-Liability { --bg1:#ffe4e8; --bg2:#ffc2cb; --ring:#e5484d; --ink:#9f2637; }
.coa-stat-mark.coa-type-Equity    { --bg1:#f1ebff; --bg2:#ded0ff; --ring:#8b5cf6; --ink:#5f3dc4; }
.coa-stat-mark.coa-type-Revenue   { --bg1:#dcfdf0; --bg2:#b6f3d8; --ring:#12b886; --ink:#08765a; }
.coa-stat-mark.coa-type-Expense   { --bg1:#fff3d6; --bg2:#ffe3ac; --ring:#e3a530; --ink:#b15d05; }

.coa-stat span:not(.coa-stat-mark) {
    color: #5b6b85;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .2px;
}

.coa-stat strong {
    color: #132a4d;
    font-size: 23px;
    font-weight: 800;
    line-height: 1;
    width: fit-content;
    padding-bottom: 5px;
    border-bottom: 3px double #cbd2c7;
}

.coa-stat[data-filter-stat="Asset"] strong     { border-bottom-color:#3b82f6; }
.coa-stat[data-filter-stat="Liability"] strong { border-bottom-color:#e5484d; }
.coa-stat[data-filter-stat="Equity"] strong    { border-bottom-color:#8b5cf6; }
.coa-stat[data-filter-stat="Revenue"] strong   { border-bottom-color:#12b886; }
.coa-stat[data-filter-stat="Expense"] strong   { border-bottom-color:#e3a530; }

.coa-toolbar {
    display: grid;
    grid-template-columns: 2fr 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 14px;
    background: rgba(255,255,255,0.94);
    border: 1px solid #e8edf5;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.coa-search {
    position: relative;
}

.coa-search i {
    position: absolute;
    inset-inline-start: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #98a2b3;
}

.coa-search input {
    width: 100%;
    height: 42px;
    padding: 0 14px 0 16px;
    padding-inline-start: 48px;
    color: var(--ink);
    background: #fff;
    border: 1px solid #d9e0ea;
    border-radius: 8px;
    font-family: var(--font);
    font-weight: 700;
    outline: 0;
}

.coa-search input:focus {
    border-color: rgba(18, 140, 126, 0.7);
    box-shadow: 0 0 0 4px rgba(18, 140, 126, 0.12);
}

.coa-toolbar .form-select {
    width: 100%;
    height: 42px;
}

.coa-tree-btn {
    height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    padding: 0 16px;
    background: #fff;
    border: 1.5px solid #e4e8f0;
    border-radius: 10px;
    color: #3a4a5e;
    font-size: .85rem;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: 0 2px 6px rgba(7,31,61,.05);
}
.coa-tree-btn i { font-size: 1rem; transition: color .2s; }
.coa-tree-btn:hover,
.coa-tree-btn.active {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%);
    border-color: #d6a23a;
    color: #f5e7bf;
    box-shadow: 0 6px 18px rgba(7,31,61,.18), 0 0 0 2px rgba(214,162,58,.15);
    transform: translateY(-1px);
}

.coa-table-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e7f0;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.coa-table thead th {
    padding: 15px 16px;
    color: var(--gold-light);
    background: linear-gradient(135deg, var(--navy), var(--navy-mid));
    border-bottom: 1px solid rgba(242, 193, 95, 0.24);
}

.coa-row {
    transition: background-color 0.16s ease;
}

.coa-row[hidden] {
    display: none;
}

.coa-row:hover td {
    background: #fdf8ee;
}

.coa-parent-row td {
    background: #f8fbff;
}

.coa-depth-1 td { background: #fcfdff; }
.coa-depth-2 td { background: #fff; }

.coa-code span {
    display: inline-flex;
    min-width: 74px;
    justify-content: center;
    padding: 6px 9px;
    color: #0b4f6c;
    background: #eef8fa;
    border: 1px solid rgba(18,140,126,0.12);
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    font-weight: 900;
}

.coa-name {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: calc(var(--depth) * 30px);
}

.coa-tree-toggle {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--accent);
    background: #fff8e8;
    border: 1px solid rgba(199,154,59,0.28);
    border-radius: 8px;
}

.coa-tree-toggle.open {
    color: #fff;
    background: linear-gradient(135deg, #0b4f6c, #128c7e);
    border-color: transparent;
}

.coa-leaf-dot {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: rgba(18,140,126,0.36);
    font-size: 24px;
}

.coa-name-text {
    min-width: 0;
}

.coa-name-text strong {
    display: block;
    color: #1d2939;
    font-size: 14px;
    font-weight: 900;
}

.coa-parent-row .coa-name-text strong {
    color: var(--navy);
    font-size: 15px;
}

.coa-name-text small {
    display: block;
    margin-top: 2px;
    color: #98a2b3;
    font-size: 11.5px;
    font-weight: 700;
}

.coa-child-count {
    min-width: 26px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0b4f6c;
    background: #e9f6f6;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.coa-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 112px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid transparent;
    white-space: nowrap;
}

.coa-type-Asset {
    color: #0b5e8e;
    background: #eef7ff;
    border-color: #cbe5ff;
}

.coa-type-Liability {
    color: #9f2637;
    background: #fff0f2;
    border-color: #f3c6ce;
}

.coa-type-Equity {
    color: #5f43ad;
    background: #f4f1ff;
    border-color: #ded6ff;
}

.coa-type-Revenue {
    color: #08765a;
    background: #ecfdf6;
    border-color: #bfeeda;
}

.coa-type-Expense {
    color: #b15d05;
    background: #fff7e8;
    border-color: #f4d39b;
}

.coa-balance {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 6px 9px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 900;
}

.coa-balance.debit {
    color: #0b5e8e;
    background: #eef7ff;
}

.coa-balance.credit {
    color: #9f2637;
    background: #fff0f2;
}

.coa-posting {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 900;
}

.coa-posting.ok {
    color: #08765a;
    background: #dff8ec;
}

.coa-posting.muted {
    color: #b8c0cc;
    background: #f2f4f7;
}

.coa-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    opacity: 0.48;
    transition: opacity 0.16s ease;
}

.coa-row:hover .coa-actions {
    opacity: 1;
}

.coa-actions form {
    display: inline-flex;
    margin: 0;
}

.coa-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    color: rgba(255,255,255,0.72);
    background: linear-gradient(135deg, var(--navy), var(--navy-mid));
    border-top: 1px solid rgba(242, 193, 95, 0.18);
    font-size: 12.5px;
    font-weight: 800;
}

.coa-footer i,
.coa-footer strong {
    color: var(--gold-light);
}

@media (max-width: 1100px) {
    .coa-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .coa-toolbar {
        flex-wrap: wrap;
    }

    .coa-toolbar .form-select {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .coa-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .coa-hero-actions {
        width: 100%;
        margin-inline-start: 0;
    }

    .coa-hero-actions .btn {
        flex: 1;
    }

    .coa-stats {
        grid-template-columns: 1fr;
    }

    .coa-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ============================================================ Account Form */
.account-form-page {
    padding-top: 28px;
}

.account-form-shell {
    max-width: 1060px;
    margin: 0 auto;
}

.account-form-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 116px;
    padding: 24px 26px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 12% 18%, rgba(242, 193, 95, 0.2), transparent 17rem),
        linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 58%, var(--navy-5) 100%);
    border-radius: 8px 8px 0 0;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: var(--shadow-md);
}

.account-form-hero::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(242, 193, 95, 0.8), transparent);
}

.account-form-hero-icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--gold-light);
    font-size: 24px;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(242, 193, 95, 0.24);
}

.account-form-hero h1 {
    margin: 0;
    color: #fff;
    font-size: 26px;
    font-weight: 900;
}

.account-form-hero p {
    margin: 7px 0 0;
    color: rgba(255,255,255,0.68);
    font-size: 13px;
    font-weight: 700;
}

.account-form-close {
    margin-inline-start: auto;
    border-color: rgba(255,255,255,0.28);
}

.account-path-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 22px;
    overflow-x: auto;
    background: #f8fbff;
    border-inline: 1px solid #e8edf5;
    border-bottom: 1px solid #e8edf5;
    white-space: nowrap;
}

.account-path-strip span {
    color: #98a2b3;
    font-size: 12px;
    font-weight: 800;
}

.account-path-strip i {
    color: var(--accent);
    font-size: 11px;
}

.account-path-strip strong,
.account-path-strip b {
    padding: 4px 8px;
    color: var(--gold-light);
    background: var(--navy);
    border-radius: 7px;
    font-size: 11px;
    font-weight: 900;
}

.account-path-strip em {
    color: #475467;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.account-form-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e8edf5;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    box-shadow: var(--shadow-md);
}

.account-form-section {
    padding: 24px 26px;
    border-bottom: 1px solid #edf1f6;
}

.account-form-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.account-form-section-head > i {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #0b4f6c;
    font-size: 18px;
    border-radius: 8px;
    background: #e9f6f6;
    border: 1px solid rgba(18,140,126,0.12);
}

.account-form-section-head h2 {
    margin: 0;
    color: #101828;
    font-size: 17px;
    font-weight: 900;
}

.account-form-section-head p {
    margin: 3px 0 0;
    color: #98a2b3;
    font-size: 12px;
    font-weight: 700;
}

.account-form-card .form-label span {
    color: #c43d4b;
}

.account-premium-input {
    min-height: 46px;
    border-width: 1.5px;
    background: #fbfcfe;
}

.account-help {
    display: block;
    margin-top: 7px;
    color: #98a2b3;
    font-size: 12px;
    font-weight: 700;
}

.account-code-suggestion {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.account-code-suggestion i {
    color: var(--accent);
}

.account-code-suggestion button {
    min-height: 26px;
    padding: 3px 10px;
    color: var(--navy);
    background: #fff8e8;
    border: 1px solid rgba(199,154,59,0.32);
    border-radius: 999px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    font-weight: 900;
}

.account-code-suggestion button:hover {
    color: #fff;
    background: #0b4f6c;
    border-color: transparent;
}

.account-type-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.account-type-card {
    position: relative;
    min-height: 128px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    text-align: right;
    background: #fbfcfe;
    border: 1.5px solid #e5eaf2;
    border-radius: 8px;
    overflow: hidden;
}

.account-type-card::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 16px;
    bottom: 16px;
    width: 3px;
    border-radius: 99px;
    opacity: 0.55;
}

.account-type-card i {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border-radius: 8px;
}

.account-type-card strong {
    color: #1d2939;
    font-size: 14px;
    font-weight: 900;
}

.account-type-card span {
    color: #98a2b3;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.6;
}

.account-type-card:hover,
.account-type-card.selected {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.account-type-card.selected {
    background: #fff;
    border-color: rgba(199,154,59,0.58);
}

.account-type-Asset::after,
.account-type-Asset.selected i { background: #eef7ff; color: #0b5e8e; }
.account-type-Liability::after,
.account-type-Liability.selected i { background: #fff0f2; color: #9f2637; }
.account-type-Equity::after,
.account-type-Equity.selected i { background: #f4f1ff; color: #5f43ad; }
.account-type-Revenue::after,
.account-type-Revenue.selected i { background: #ecfdf6; color: #08765a; }
.account-type-Expense::after,
.account-type-Expense.selected i { background: #fff7e8; color: #b15d05; }

.account-type-Asset::after { background: #0b5e8e; }
.account-type-Liability::after { background: #9f2637; }
.account-type-Equity::after { background: #5f43ad; }
.account-type-Revenue::after { background: #08765a; }
.account-type-Expense::after { background: #b15d05; }

.account-balance-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.balance-option {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #667085;
    background: #fbfcfe;
    border: 1.5px solid #e5eaf2;
    border-radius: 8px;
    font-weight: 900;
}

.balance-option.debit.selected {
    color: #0b5e8e;
    background: #eef7ff;
    border-color: #cbe5ff;
}

.balance-option.credit.selected {
    color: #9f2637;
    background: #fff0f2;
    border-color: #f3c6ce;
}

.account-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 26px;
    background: linear-gradient(180deg, #fff, #f8fafc);
}

.account-form-footer strong {
    display: block;
    color: var(--navy);
    font-size: 13px;
    font-weight: 900;
}

.account-form-footer span {
    color: #667085;
    font-size: 12px;
    font-weight: 700;
}

.account-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 1000px) {
    .account-type-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .account-form-hero,
    .account-form-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .account-form-close,
    .account-form-actions {
        width: 100%;
    }

    .account-form-actions .btn {
        flex: 1;
    }

    .account-type-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================ Journal Entry Workspace */
.je-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 18px;
    padding-top: 26px;
}

.je-main {
    min-width: 0;
}

.je-side-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    order: 2;
}

.je-side-card {
    padding: 18px;
    background: rgba(255,255,255,0.94);
    border: 1px solid #e8edf5;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.je-side-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: var(--navy);
    font-size: 14px;
    font-weight: 900;
}

.je-side-card h3 i {
    color: var(--accent);
}

.je-side-card dl {
    margin: 0;
}

.je-side-card dt,
.je-side-card dd {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid #edf1f6;
    font-size: 12px;
}

.je-side-card dt {
    float: right;
    width: 45%;
    color: #98a2b3;
    font-weight: 800;
}

.je-side-card dd {
    color: #1d2939;
    font-weight: 900;
}

.je-side-card dd:last-child,
.je-side-card dt:nth-last-child(2) {
    border-bottom: 0;
}

.je-rule-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.je-rule-list span {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #475467;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.7;
}

.je-rule-list i {
    color: #16825d;
    margin-top: 3px;
}

.je-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    margin-bottom: 16px;
    color: #fff;
    background:
        radial-gradient(circle at 14% 20%, rgba(242, 193, 95, 0.16), transparent 17rem),
        linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 58%, var(--navy-5) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.je-hero-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.je-hero-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--gold-light);
    font-size: 27px;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(242, 193, 95, 0.22);
}

.je-breadcrumb {
    margin-bottom: 6px;
    color: rgba(255,255,255,0.58);
    font-size: 12px;
    font-weight: 800;
}

.je-hero h1, .je-hero-title h1 {
    margin: 0;
    color: #fff;
    font-size: 29px;
    font-weight: 900;
}

.je-hero p, .je-hero-title p {
    margin: 5px 0 0;
    color: rgba(255,255,255,0.68);
    font-size: 13px;
    font-weight: 700;
}

.je-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.je-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.je-summary-card {
    position: relative;
    min-height: 104px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    align-items: center;
    gap: 8px 14px;
    padding: 16px 18px;
    background:
        repeating-linear-gradient(180deg, rgba(19,42,77,.028) 0px, rgba(19,42,77,.028) 1px, transparent 1px, transparent 10px),
        linear-gradient(180deg, #fffdf9 0%, #fbf8f1 100%);
    border: 1px solid #ece3cf;
    border-radius: 15px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(16,24,40,.05), var(--shadow-sm);
    overflow: hidden;
}

.je-summary-card::after {
    content: '';
    position: absolute;
    inset-inline-end: -20px;
    bottom: -20px;
    width: 90px;
    height: 90px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='8' y='8' width='26' height='26' fill='none' stroke='%23132a4d' stroke-width='2.5' transform='rotate(45 21 21)'/%3E%3Crect x='46' y='8' width='26' height='26' fill='none' stroke='%23132a4d' stroke-width='2.5' transform='rotate(45 59 21)'/%3E%3Crect x='8' y='46' width='26' height='26' fill='none' stroke='%23132a4d' stroke-width='2.5' transform='rotate(45 21 59)'/%3E%3Crect x='46' y='46' width='26' height='26' fill='none' stroke='%23132a4d' stroke-width='2.5' transform='rotate(45 59 59)'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    opacity: .05;
    pointer-events: none;
}

.je-card-icon {
    grid-row: 1 / 3;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 16px;
    background: linear-gradient(135deg, var(--bg1, #fff3d6), var(--bg2, #ffe3ac));
    box-shadow: 0 0 0 1.5px var(--ring, #d4af37), inset 0 1px 1px rgba(255,255,255,.5), 0 2px 5px rgba(15,23,42,.08);
    color: var(--ink, #b15d05);
}

.je-card-icon.gold   { --bg1:#fff3d6; --bg2:#ffe3ac; --ring:#e3a530; --ink:#b15d05; }
.je-card-icon.teal   { --bg1:#d4fdf4; --bg2:#a7f3e4; --ring:#14b8a6; --ink:#0b7d77; }
.je-card-icon.violet { --bg1:#f1ebff; --bg2:#ded0ff; --ring:#8b5cf6; --ink:#5f3dc4; }
.je-card-icon.green  { --bg1:#dcfdf0; --bg2:#b6f3d8; --ring:#12b886; --ink:#08765a; }

.je-summary-card small {
    color: #5b6b85;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .2px;
}

.je-summary-card strong {
    color: #132a4d;
    font-size: 18px;
    font-weight: 800;
    width: fit-content;
    padding-bottom: 4px;
    border-bottom: 3px double #cbd2c7;
}

.je-summary-card:has(.je-card-icon.gold) strong   { border-bottom-color: #e3a530; }
.je-summary-card:has(.je-card-icon.teal) strong   { border-bottom-color: #14b8a6; }
.je-summary-card:has(.je-card-icon.violet) strong { border-bottom-color: #8b5cf6; }
.je-summary-card:has(.je-card-icon.green) strong  { border-bottom-color: #12b886; }

.je-summary-card em {
    color: #8a94a6;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.je-panel {
    overflow: hidden;
    background: rgba(255,255,255,0.95);
    border: 1px solid #e8edf5;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.je-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 18px;
    background: linear-gradient(180deg, #fff, #f8fafc);
    border-bottom: 1px solid #edf1f6;
}

.je-panel-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--navy);
    font-size: 16px;
    font-weight: 900;
}

.je-panel-head h2 i {
    color: var(--accent);
}

.je-panel > .row {
    padding: 18px;
}

.je-input,
.je-line-input {
    min-height: 42px;
    border-width: 1.5px;
    background: #fbfcfe;
    font-weight: 800;
}

.je-line-tools {
    display: flex;
    align-items: center;
    gap: 9px;
}

.je-mini-search {
    position: relative;
    width: 240px;
}

.je-mini-search i {
    position: absolute;
    inset-inline-start: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #98a2b3;
}

.je-mini-search input {
    width: 100%;
    min-height: 38px;
    padding: 7px 36px 7px 12px;
    border: 1px solid #d9e0ea;
    border-radius: 8px;
    outline: 0;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 800;
}

.je-lines-wrap {
    max-height: 430px;
}

.je-lines-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    color: #475467;
    background: #f8fafc;
}

.je-lines-table td {
    padding: 10px 12px;
}

.je-row-num {
    color: #667085;
    font-weight: 900;
}

.je-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(300px, 0.8fr);
    gap: 14px;
}

.je-totals {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.je-total-card,
.je-workflow {
    padding: 18px;
    background: rgba(255,255,255,0.95);
    border: 1px solid #e8edf5;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.je-total-card span {
    display: block;
    margin-bottom: 7px;
    color: #667085;
    font-size: 12px;
    font-weight: 900;
}

.je-total-card strong {
    color: #101828;
    font-size: 20px;
    font-weight: 900;
}

.je-total-card em {
    color: #667085;
    font-size: 11px;
    font-style: normal;
}

.je-total-card.debit { background: linear-gradient(180deg, #fff, #eef7ff); }
.je-total-card.credit { background: linear-gradient(180deg, #fff, #f4f1ff); }
.je-total-card.diff { background: linear-gradient(180deg, #fff, #fff7e8); }

.je-total-card.status {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #9f2637;
    background: linear-gradient(180deg, #fff, #fff0f2);
}

.je-total-card.status > i {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgba(159,38,55,0.1);
}

.je-total-card.status.balanced {
    color: #08765a;
    background: linear-gradient(180deg, #fff, #ecfdf6);
}

.je-total-card.status.balanced > i {
    background: rgba(8,118,90,0.1);
}

.je-workflow h3 {
    margin: 0 0 16px;
    color: var(--navy);
    font-size: 15px;
    font-weight: 900;
}

.je-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.je-steps div {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    color: #98a2b3;
    font-size: 11px;
    font-weight: 900;
}

.je-steps b {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f2f4f7;
}

.je-steps .active {
    color: #08765a;
}

.je-steps .active b {
    color: #fff;
    background: #08765a;
    box-shadow: 0 0 0 5px rgba(8,118,90,0.12);
}

.je-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px;
    background: rgba(255,255,255,0.9);
    border: 1px solid #e8edf5;
    border-radius: 8px;
    box-shadow: 0 -12px 30px rgba(16,24,40,0.08);
    backdrop-filter: blur(14px);
}

.je-action-bar #postButton.ready {
    background: linear-gradient(135deg, #0d6b4f, #18a071);
    box-shadow: 0 16px 30px rgba(13,107,79,0.24);
}

@media (max-width: 1180px) {
    .je-workspace {
        grid-template-columns: 1fr;
    }

    .je-side-panel {
        order: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .je-bottom-grid,
    .je-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .je-side-panel,
    .je-summary-grid,
    .je-bottom-grid,
    .je-totals {
        grid-template-columns: 1fr;
    }

    .je-hero,
    .je-panel-head,
    .je-action-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .je-line-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .je-mini-search {
        width: 100%;
    }
}

/* ============================================================ Journal Entries List */
.je-list-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 26px;
}

.je-list-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    color: #fff;
    background:
        radial-gradient(circle at 14% 20%, rgba(242, 193, 95, 0.16), transparent 17rem),
        linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 58%, var(--navy-5) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.je-list-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.je-list-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.je-list-stat {
    position: relative;
    min-height: 104px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    align-items: center;
    gap: 8px 14px;
    padding: 16px 18px;
    background:
        repeating-linear-gradient(180deg, rgba(19,42,77,.028) 0px, rgba(19,42,77,.028) 1px, transparent 1px, transparent 10px),
        linear-gradient(180deg, #fffdf9 0%, #fbf8f1 100%);
    border: 1px solid #ece3cf;
    border-radius: 15px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(16,24,40,.05), var(--shadow-sm);
    overflow: hidden;
}

.je-list-stat::after {
    content: '';
    position: absolute;
    inset-inline-end: -20px;
    bottom: -20px;
    width: 90px;
    height: 90px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='8' y='8' width='26' height='26' fill='none' stroke='%23132a4d' stroke-width='2.5' transform='rotate(45 21 21)'/%3E%3Crect x='46' y='8' width='26' height='26' fill='none' stroke='%23132a4d' stroke-width='2.5' transform='rotate(45 59 21)'/%3E%3Crect x='8' y='46' width='26' height='26' fill='none' stroke='%23132a4d' stroke-width='2.5' transform='rotate(45 21 59)'/%3E%3Crect x='46' y='46' width='26' height='26' fill='none' stroke='%23132a4d' stroke-width='2.5' transform='rotate(45 59 59)'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    opacity: .05;
    pointer-events: none;
}

.je-list-stat small {
    color: #5b6b85;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .2px;
}

.je-list-stat strong {
    color: #132a4d;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.3px;
    width: fit-content;
    padding-bottom: 5px;
    border-bottom: 3px double #cbd2c7;
}

.je-list-stat:has(.je-card-icon.gold) strong   { border-bottom-color: #e3a530; }
.je-list-stat:has(.je-card-icon.teal) strong   { border-bottom-color: #14b8a6; }
.je-list-stat:has(.je-card-icon.violet) strong { border-bottom-color: #8b5cf6; }
.je-list-stat:has(.je-card-icon.green) strong  { border-bottom-color: #12b886; }

.je-list-stat em {
    color: #8a94a6;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.je-list-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 10px;
    padding: 14px;
    background: rgba(255,255,255,0.94);
    border: 1px solid #e8edf5;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.je-list-search {
    position: relative;
}

.je-list-search i {
    position: absolute;
    inset-inline-start: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #98a2b3;
}

.je-list-search input {
    width: 100%;
    min-height: 42px;
    padding: 8px 42px 8px 14px;
    color: var(--ink);
    background: #fff;
    border: 1px solid #d9e0ea;
    border-radius: 8px;
    font-family: var(--font);
    font-weight: 800;
    outline: 0;
}

.je-list-toolbar .form-select {
    width: 100%;
}

.je-list-table-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e7f0;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.je-list-table thead th {
    padding: 15px 16px;
    color: var(--gold-light);
    background: linear-gradient(135deg, var(--navy), var(--navy-mid));
    border-bottom: 1px solid rgba(242, 193, 95, 0.24);
}

.je-list-table tbody tr {
    transition: background-color 0.16s ease;
}

.je-list-table tbody tr[hidden] {
    display: none;
}

.je-list-table tbody tr:hover td {
    background: #fdf8ee;
}

.je-entry-number {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0b4f6c;
    text-decoration: none;
    font-weight: 900;
}

.je-entry-number i {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background: #fff8e8;
    border-radius: 8px;
}

.je-date-cell,
.je-description-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.je-date-cell strong,
.je-description-cell strong {
    color: #1d2939;
    font-size: 13px;
    font-weight: 900;
}

.je-date-cell small,
.je-description-cell small {
    color: #98a2b3;
    font-size: 11px;
    font-weight: 800;
}

.je-source-chip {
    display: inline-flex;
    align-items: center;
    min-width: 86px;
    justify-content: center;
    padding: 6px 9px;
    color: #0b4f6c;
    background: #eef8fa;
    border: 1px solid rgba(18,140,126,0.12);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.je-money {
    font-weight: 900;
    white-space: nowrap;
}

.je-money.debit {
    color: #0b5e8e;
}

.je-money.credit {
    color: #5f43ad;
}

.je-balance-pill,
.je-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 82px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.je-balance-pill.balanced {
    color: #08765a;
    background: #ecfdf6;
    border: 1px solid #bfeeda;
}

.je-balance-pill.danger {
    color: #9f2637;
    background: #fff0f2;
    border: 1px solid #f3c6ce;
}

.je-status-pill.status-Draft {
    color: #475467;
    background: #f2f4f7;
}

.je-status-pill.status-Posted {
    color: #08765a;
    background: #ecfdf6;
}

.je-status-pill.status-Reversed {
    color: #b15d05;
    background: #fff7e8;
}

.je-status-pill.status-Cancelled {
    color: #9f2637;
    background: #fff0f2;
}

.je-list-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.62;
    transition: opacity 0.16s ease;
}

.je-list-table tr:hover .je-list-row-actions {
    opacity: 1;
}

.je-list-row-actions form {
    display: inline-flex;
    margin: 0;
}

.je-empty-state {
    padding: 56px 20px !important;
    text-align: center;
}

.je-empty-state i,
.je-empty-state strong,
.je-empty-state span {
    display: block;
}

.je-empty-state i {
    margin-bottom: 12px;
    color: #cbd5e1;
    font-size: 44px;
}

.je-empty-state strong {
    color: #475467;
    font-size: 16px;
    font-weight: 900;
}

.je-empty-state span {
    margin-top: 5px;
    color: #98a2b3;
    font-size: 12px;
    font-weight: 700;
}

.je-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    color: rgba(255,255,255,0.72);
    background: linear-gradient(135deg, var(--navy), var(--navy-mid));
    border-top: 1px solid rgba(242, 193, 95, 0.18);
    font-size: 12.5px;
    font-weight: 800;
}

.je-list-footer i,
.je-list-footer strong {
    color: var(--gold-light);
}

@media (max-width: 1180px) {
    .je-list-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .je-list-hero,
    .je-list-toolbar,
    .je-list-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .je-list-actions {
        width: 100%;
    }

    .je-list-actions .btn {
        flex: 1;
    }

    .je-list-stats {
        grid-template-columns: 1fr;
    }

    .je-list-search,
    .je-list-toolbar .form-select {
        width: 100%;
    }
}

/* ============================================================ Premium Module Pages */
.premium-module-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 26px;
}

.premium-module-page.narrow {
    max-width: 1080px;
    margin-inline: auto;
}

.premium-module-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    color: #fff;
    background:
        radial-gradient(circle at 14% 20%, rgba(242, 193, 95, 0.16), transparent 17rem),
        radial-gradient(circle at 92% 12%, rgba(18, 140, 126, 0.13), transparent 19rem),
        linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 58%, var(--navy-5) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.premium-hero-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.premium-hero-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-light);
    font-size: 27px;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(242, 193, 95, 0.22);
}

.premium-hero-title nav {
    margin-bottom: 6px;
    color: rgba(255,255,255,0.58);
    font-size: 12px;
    font-weight: 800;
}

.premium-hero-title h1 {
    margin: 0;
    color: #fff;
    font-size: 28px;
    font-weight: 900;
}

.premium-hero-title p {
    margin: 5px 0 0;
    color: rgba(255,255,255,0.68);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* pill موحد لأزرار الهيرو */
.hero-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 10px;
    padding: 4px;
    gap: 1px;
}
.hero-pill-btn {
    background: transparent;
    border: none;
    color: #fff;
    border-radius: 7px;
    padding: 1.5px 14px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background .12s;
    line-height: 1.5;
}
.hero-pill-btn:hover, .hero-pill-btn:focus {
    background: rgba(255,255,255,0.13);
    color: #fff;
    outline: none;
}
/* أيقونات ملونة */
.hero-pill-btn .bi-arrow-right   { color: #7dd3fc; }
.hero-pill-btn .bi-copy          { color: #c4b5fd; }
.hero-pill-btn .bi-pencil        { color: #fcd34d; }
.hero-pill-btn .bi-file-pdf      { color: #f87171; }
.hero-pill-btn .bi-send          { color: #6ee7b7; }
.hero-pill-btn .bi-list          { color: #0d1b3e; font-size: 1.25rem; }
/* زر القائمة — أصفر صلب */
.hero-pill-btn.pill-more {
    background: #f0c040 !important;
    color: #0d1b3e !important;
    border: none;
}
.hero-pill-btn.pill-more:hover {
    background: #e0b030 !important;
}
.hero-pill-sep {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.13);
    flex-shrink: 0;
    margin: 0 2px;
}
.hero-pill .dropdown-toggle::after { opacity: .7; margin-right: 2px; }
.hero-pill .dropdown-menu { margin-top: 7px !important; }

/* أزرار الهيرو الداكن */
.hero-btn {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: rgba(255,255,255,0.88) !important;
    font-size: .82rem;
    font-weight: 600;
    transition: background .15s, border-color .15s;
}
.hero-btn:hover, .hero-btn:focus {
    background: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.28) !important;
    color: #fff !important;
}
.hero-btn i { opacity: .9; }
.hero-btn-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}
.hero-btn.dropdown-toggle::after { opacity: .6; }
.hero-vr {
    width: 1px;
    height: 26px;
    background: rgba(255,255,255,0.15);
    flex-shrink: 0;
}

.premium-stat-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    gap: 12px;
}

.invoices-stat-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.premium-stat-card {
    position: relative;
    min-height: 104px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    align-items: center;
    gap: 8px 16px;
    padding: 16px 20px;
    background:
        repeating-linear-gradient(180deg, rgba(19,42,77,.028) 0px, rgba(19,42,77,.028) 1px, transparent 1px, transparent 10px),
        linear-gradient(180deg, #fffdf9 0%, #fbf8f1 100%);
    border: 1px solid #ece3cf;
    border-radius: 15px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(16,24,40,.05), var(--shadow-sm);
    overflow: hidden;
}

/* وسم زخرفي هندسي بمنتصف البطاقة — توقيع بصري خاص بسجلي، مستوحى من النجمة الثمانية */
.premium-stat-card::after {
    content: '';
    position: absolute;
    inset-inline-end: -20px;
    bottom: -20px;
    width: 90px;
    height: 90px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='8' y='8' width='26' height='26' fill='none' stroke='%23132a4d' stroke-width='2.5' transform='rotate(45 21 21)'/%3E%3Crect x='46' y='8' width='26' height='26' fill='none' stroke='%23132a4d' stroke-width='2.5' transform='rotate(45 59 21)'/%3E%3Crect x='8' y='46' width='26' height='26' fill='none' stroke='%23132a4d' stroke-width='2.5' transform='rotate(45 21 59)'/%3E%3Crect x='46' y='46' width='26' height='26' fill='none' stroke='%23132a4d' stroke-width='2.5' transform='rotate(45 59 59)'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    opacity: .05;
    pointer-events: none;
}

/* شارة مدلاة كمًا يُختم على المستندات الرسمية: كحلي غامق + حلقة ذهبية */
.premium-stat-icon {
    grid-row: 1 / 3;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 16px;
    background: linear-gradient(135deg, var(--bg1, #fff3d6), var(--bg2, #ffe3ac));
    box-shadow: 0 0 0 1.5px var(--ring, #d4af37), inset 0 1px 1px rgba(255,255,255,.5), 0 2px 5px rgba(15,23,42,.08);
    color: var(--ink, #b15d05);
}

.premium-stat-icon.gold  { --bg1:#fff3d6; --bg2:#ffe3ac; --ring:#e3a530; --ink:#b15d05; }
.premium-stat-icon.green { --bg1:#dcfdf0; --bg2:#b6f3d8; --ring:#12b886; --ink:#08765a; }
.premium-stat-icon.teal  { --bg1:#d4fdf4; --bg2:#a7f3e4; --ring:#14b8a6; --ink:#0b7d77; }
.premium-stat-icon.red   { --bg1:#ffe4e8; --bg2:#ffc2cb; --ring:#e5484d; --ink:#9f2637; }
.premium-stat-icon.blue  { --bg1:#e4edff; --bg2:#c4d9ff; --ring:#3b82f6; --ink:#1450c9; }
.premium-stat-icon.purple { --bg1:#f0e9ff; --bg2:#dcc9ff; --ring:#6f2cff; --ink:#5b1fd6; }

/* نفس متغيرات الألوان دي بس معرّفة على مستوى الكارت نفسه (مش
   الأيقونة بس) — عشان تصاميم "تعبئة ملوّنة" و"علامة مائية" تقدر
   تقرأها (المتغيرات بتورّث لتحت مش لفوق، فلازم تتعرّف على الأب). */
.premium-stat-card:has(.premium-stat-icon.gold)  { --bg1:#fff3d6; --bg2:#ffe3ac; --ring:#e3a530; --ink:#b15d05; }
.premium-stat-card:has(.premium-stat-icon.green) { --bg1:#dcfdf0; --bg2:#b6f3d8; --ring:#12b886; --ink:#08765a; }
.premium-stat-card:has(.premium-stat-icon.teal)  { --bg1:#d4fdf4; --bg2:#a7f3e4; --ring:#14b8a6; --ink:#0b7d77; }
.premium-stat-card:has(.premium-stat-icon.red)   { --bg1:#ffe4e8; --bg2:#ffc2cb; --ring:#e5484d; --ink:#9f2637; }
.premium-stat-card:has(.premium-stat-icon.blue)  { --bg1:#e4edff; --bg2:#c4d9ff; --ring:#3b82f6; --ink:#1450c9; }
.premium-stat-card:has(.premium-stat-icon.purple) { --bg1:#f0e9ff; --bg2:#dcc9ff; --ring:#6f2cff; --ink:#5b1fd6; }

.premium-stat-card small {
    color: #5b6b85;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .2px;
}

/* خط مزدوج تحت الرقم — تقليد محاسبي أصيل لختم "الإجمالي النهائي" في الدفاتر */
.premium-stat-card strong {
    color: #132a4d;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.3px;
    font-variant-numeric: proportional-nums;
    padding-bottom: 5px;
    border-bottom: 3px double #cbd2c7;
}

.premium-stat-card:has(.premium-stat-icon.gold) strong  { border-bottom-color: #e3a530; }
.premium-stat-card:has(.premium-stat-icon.green) strong { border-bottom-color: #12b886; }
.premium-stat-card:has(.premium-stat-icon.teal) strong  { border-bottom-color: #14b8a6; }
.premium-stat-card:has(.premium-stat-icon.red) strong   { border-bottom-color: #e5484d; }
.premium-stat-card:has(.premium-stat-icon.blue) strong  { border-bottom-color: #3b82f6; }
.premium-stat-card:has(.premium-stat-icon.purple) strong { border-bottom-color: #6f2cff; }

.premium-stat-card em {
    color: #8a94a6;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

/* ============================================================
   تصاميم بديلة للكروت الإحصائية (premium-stat-card)
   ============================================================
   الافتراضي "ledger" فوق ده — كارت العاج بخطوط الدفتر والختم
   النجمي — يفضل كما هو دايماً. الخيارات هنا بتُفعَّل عبر
   data-stat-style على <html>، وكلها بتستخدم نفس متغيرات اللون
   الموجودة أصلاً على كل premium-stat-icon (--ring/--ink/--bg1/--bg2)
   فبتشتغل تلقائيًا مع أي فئة لون من غير أي تعديل إضافي.
   ============================================================ */

/* ── 2) أبيض نقي / مينيمال ── */
.stat-style-minimal .premium-stat-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(16,24,40,.04);
}
.stat-style-minimal .premium-stat-card::after { display: none; }
.stat-style-minimal .premium-stat-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--ink, #475569) !important;
    box-shadow: none;
    color: #fff !important;
    font-size: 14px;
}
.stat-style-minimal .premium-stat-card small { color: #8a94a6; font-weight: 700; }
.stat-style-minimal .premium-stat-card strong {
    color: #1d2433;
    border-bottom: 2px solid #eef0f3;
}

/* ── 3) صف أفقي مضغوط ── */
.stat-style-row .premium-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 66px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #edf0f5;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.stat-style-row .premium-stat-card::after { display: none; }
.stat-style-row .premium-stat-icon {
    width: 36px; height: 36px;
    order: 1;
}
.stat-style-row .premium-stat-card small {
    order: 2;
    flex: 1;
}
.stat-style-row .premium-stat-card strong {
    order: 3;
    border-bottom: none;
    padding-bottom: 0;
    font-size: 19px;
}

/* ── 4) تعبئة ملوّنة كاملة ── */
.stat-style-filled .premium-stat-card {
    background: linear-gradient(135deg, var(--ring, #64748b), var(--ink, #334155));
    border: none;
    box-shadow: 0 10px 24px rgba(16,24,40,.14);
}
.stat-style-filled .premium-stat-card::after {
    opacity: .12;
    filter: brightness(0) invert(1);
}
.stat-style-filled .premium-stat-icon {
    background: rgba(255,255,255,.22) !important;
    box-shadow: none;
    color: #fff !important;
}
.stat-style-filled .premium-stat-card small { color: rgba(255,255,255,.75); }
.stat-style-filled .premium-stat-card strong {
    color: #fff;
    border-bottom-color: rgba(255,255,255,.35) !important;
}
.stat-style-filled .premium-stat-card em { color: rgba(255,255,255,.6); }

/* ── 5) خط جانبي بلا أيقونة ── */
.stat-style-stripe .premium-stat-card {
    background: #fff;
    border: 1px solid #edf0f5;
    border-inline-start: 4px solid var(--ring, #64748b);
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
    grid-template-columns: 1fr;
}
.stat-style-stripe .premium-stat-card::after { display: none; }
.stat-style-stripe .premium-stat-icon { display: none; }
.stat-style-stripe .premium-stat-card small {
    grid-column: 1;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.stat-style-stripe .premium-stat-card strong {
    grid-column: 1;
    color: var(--ink, #1d2433);
    border-bottom: none;
    padding-bottom: 0;
    font-size: 26px;
}

/* ── 6) علامة مائية كبيرة ── */
.stat-style-watermark .premium-stat-card {
    background: #fff;
    border: 1px solid #edf0f5;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.stat-style-watermark .premium-stat-card::after { display: none; }
.stat-style-watermark .premium-stat-icon {
    position: absolute;
    inset-inline-end: -6px;
    bottom: -10px;
    width: 84px;
    height: 84px;
    font-size: 40px;
    background: none !important;
    box-shadow: none;
    color: var(--ring, #64748b) !important;
    opacity: .12;
}
.stat-style-watermark .premium-stat-card small { grid-column: 1 / 3; }
.stat-style-watermark .premium-stat-card strong {
    grid-column: 1 / 3;
    color: var(--ink, #1d2433);
    border-bottom-color: var(--ring, #cbd2c7);
}

.premium-toolbar {
    display: flex;
    gap: 10px;
    padding: 14px;
    background: rgba(255,255,255,0.94);
    border: 1px solid #e8edf5;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.premium-search {
    position: relative;
    flex: 1;
}

.premium-search i {
    position: absolute;
    inset-inline-start: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #98a2b3;
}

.premium-search input {
    width: 100%;
    min-height: 42px;
    padding: 8px 42px 8px 14px;
    color: var(--ink);
    background: #fff;
    border: 1px solid #d9e0ea;
    border-radius: 8px;
    font-family: var(--font);
    font-weight: 800;
    outline: 0;
}

.premium-filter-form {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.premium-filter-form input {
    flex: 1 1 320px;
}

.premium-filter-form select {
    flex: 0 0 210px;
}

.premium-filter-form .btn {
    flex: 0 0 auto;
}

.premium-table-card,
.premium-form-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e7f0;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.premium-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.premium-table thead th,
.premium-lines-table thead th {
    padding: 15px 16px;
    color: var(--gold-light);
    background: linear-gradient(135deg, var(--navy), var(--navy-mid));
    border-bottom: 1px solid rgba(242, 193, 95, 0.24);
}

.premium-table tbody tr:hover td {
    background: #fdf8ee;
}

.premium-table tbody tr[hidden] {
    display: none;
}

.account-missing-warn-row td {
    padding: 6px 14px 12px !important;
    border-top: none !important;
    background: #fff8f0;
}

.account-missing-warn-row .account-missing-warn {
    display: block;
    line-height: 1.6;
}

.premium-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0b4f6c;
    text-decoration: none;
    font-weight: 900;
}

.premium-doc-link i {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background: #fff8e8;
    border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════
   PREMIUM TOGGLE — مفتاح تبديل فاخر (يُستخدم بدل checkbox عادي)
   ═══════════════════════════════════════════════════════ */
.premium-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
}
.premium-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.premium-toggle-track {
    flex-shrink: 0;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: #d7dde6;
    position: relative;
    transition: background .25s ease;
    box-shadow: inset 0 1px 3px rgba(16,24,40,.15);
}
.premium-toggle-thumb {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(16,24,40,.25);
    transition: right .25s ease, background .25s ease;
}
.premium-toggle input:checked + .premium-toggle-track {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.premium-toggle input:checked + .premium-toggle-track .premium-toggle-thumb {
    right: 23px;
    background: var(--accent);
}
.premium-toggle input:focus-visible + .premium-toggle-track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.premium-toggle input:disabled + .premium-toggle-track {
    opacity: .45;
    cursor: not-allowed;
}
.premium-toggle-text {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.45;
    white-space: nowrap;
    flex-shrink: 0;
}
.premium-toggle-text small {
    font-weight: 400;
    color: var(--muted);
}

/* نسخة مصغّرة تناسب خلية جدول */
.premium-toggle-sm { display: inline-flex; }
.premium-toggle-sm .premium-toggle-track { width: 36px; height: 20px; }
.premium-toggle-sm .premium-toggle-thumb { width: 14px; height: 14px; top: 3px; right: 3px; }
.premium-toggle-sm input:checked + .premium-toggle-track .premium-toggle-thumb { right: 19px; }

.premium-chip,
.premium-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.premium-chip.blue {
    color: #0b4f6c;
    background: #eef8fa;
}
.premium-chip.green {
    color: #065f46;
    background: #d1fae5;
}
.premium-chip.red {
    color: #991b1b;
    background: #fee2e2;
}
.premium-chip.gold {
    color: #92400e;
    background: #fef3c7;
}
.premium-chip.grey {
    color: #374151;
    background: #f3f4f6;
}
.premium-chip.teal {
    color: #134e4a;
    background: #ccfbf1;
}

.premium-status.posted {
    color: #08765a;
    background: #ecfdf6;
}

.premium-status.draft {
    color: #475467;
    background: #f2f4f7;
}

.premium-status.cancelled {
    color: #b42318;
    background: #fff0ef;
}

.premium-status.partial {
    color: #9a5b00;
    background: #fff7e8;
}

.premium-chip.danger-mini {
    min-width: 0;
    margin-inline-start: 6px;
    padding: 4px 7px;
    color: #b42318;
    background: #fff0ef;
    font-size: 10px;
}

.premium-pay-cell {
    min-width: 150px;
}

.premium-pay-track {
    height: 7px;
    overflow: hidden;
    background: #edf2f7;
    border-radius: 999px;
}

.premium-pay-track span {
    display: block;
    height: 100%;
    background: #cbd5e1;
    border-radius: inherit;
}

.premium-pay-track span.partial {
    background: linear-gradient(90deg, var(--gold-light), #d99a2b);
}

.premium-pay-track span.full {
    background: linear-gradient(90deg, #16a36b, #0b8a61);
}

.premium-pay-cell small {
    display: block;
    margin-top: 5px;
    color: #667085;
    font-size: 10.5px;
    font-weight: 800;
}

.premium-money {
    color: #0b5e8e;
    font-weight: 900;
    white-space: nowrap;
}

.premium-money.muted {
    color: #667085;
}

.premium-empty {
    padding: 56px 20px !important;
    text-align: center;
}

.premium-empty i,
.premium-empty strong,
.premium-empty span {
    display: block;
}

.premium-empty i {
    margin-bottom: 12px;
    color: #cbd5e1;
    font-size: 44px;
}

.premium-empty strong {
    color: #475467;
    font-size: 16px;
    font-weight: 900;
}

.premium-empty span {
    margin-top: 5px;
    color: #98a2b3;
    font-size: 12px;
    font-weight: 700;
}

.premium-empty .btn {
    display: none !important;
}

.premium-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    color: rgba(255,255,255,0.72);
    background: linear-gradient(135deg, var(--navy), var(--navy-mid));
    border-top: 1px solid rgba(242, 193, 95, 0.18);
    font-size: 12.5px;
    font-weight: 800;
}

.premium-table-footer i,
.premium-table-footer strong {
    color: var(--gold-light);
}

.premium-form-section {
    padding: 24px 26px;
    border-bottom: 1px solid #edf1f6;
}

.premium-form-section h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    color: var(--navy);
    font-size: 17px;
    font-weight: 900;
}

.premium-form-section h2 i {
    color: var(--accent);
}

.premium-input {
    min-height: 44px;
    border-width: 1.5px;
    background: #fbfcfe;
    font-weight: 800;
}
input[type="number"].premium-input,
input[type="tel"].premium-input,
input[type="date"].premium-input {
    direction: rtl;
    text-align: right;
    min-width: 0;
}
.btn-inv-type {
    border-color: var(--navy-mid);
    color: var(--navy-mid);
    font-weight: 700;
    font-size: .875rem;
    height: 44px;
}
.btn-inv-type i {
    color: var(--gold);
}
.btn-check:checked + .btn-inv-type {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
    border-color: var(--navy);
    color: #fff;
}
.btn-check:checked + .btn-inv-type i {
    color: var(--gold-light);
}

.premium-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 24px;
    background: linear-gradient(180deg, #fff, #f8fafc);
}

.premium-form-footer span {
    color: #667085;
    font-size: 12.5px;
    font-weight: 800;
}

.premium-form-footer strong {
    color: var(--navy);
}

.premium-form-footer div {
    display: flex;
    gap: 10px;
}

.receipt-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 18px;
    align-items: start;
}

.receipt-form-card {
    min-width: 0;
}

.receipt-amount-field {
    position: relative;
}

.receipt-amount-field input {
    padding-inline-end: 54px;
    font-size: 20px;
    font-weight: 900;
}

.receipt-amount-field span {
    position: absolute;
    inset-inline-end: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #98a2b3;
    font-size: 12px;
    font-weight: 900;
}

.premium-help {
    display: block;
    margin-top: 8px;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.receipt-side-panel {
    overflow: hidden;
    padding: 18px;
    background:
        radial-gradient(circle at 14% 10%, rgba(217, 170, 69, 0.18), transparent 9rem),
        linear-gradient(180deg, var(--navy) 0%, var(--navy-4) 100%);
    border: 1px solid rgba(242, 193, 95, 0.2);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.receipt-side-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.receipt-side-head i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--navy);
    background: linear-gradient(135deg, #f7d47f, #c99732);
    border-radius: 8px;
    font-size: 20px;
}

.receipt-side-head small,
.receipt-side-head strong {
    display: block;
    line-height: 1.45;
}

.receipt-side-head small {
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    font-weight: 800;
}

.receipt-side-head strong {
    color: #fff;
    font-size: 15px;
    font-weight: 900;
}

.receipt-side-panel dl {
    display: grid;
    gap: 10px;
    margin: 16px 0;
}

.receipt-side-panel dl div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.receipt-side-panel dt {
    color: rgba(255,255,255,0.58);
    font-size: 12px;
    font-weight: 800;
}

.receipt-side-panel dd {
    margin: 0;
    color: #fff;
    text-align: right;
    font-size: 12.5px;
    font-weight: 900;
    flex: 1;
}

.receipt-progress {
    height: 8px;
    overflow: hidden;
    margin: 16px 0 12px;
    background: rgba(255,255,255,0.12);
    border-radius: 999px;
}

.receipt-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #0fb981, var(--gold-light));
    border-radius: inherit;
}

.receipt-side-panel p {
    margin: 0;
    color: rgba(255,255,255,0.62);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.8;
}

.quote-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.quote-section-head h2 {
    margin-bottom: 0;
}

.quote-lines-table th,
.quote-lines-table td {
    vertical-align: middle;
}

.quote-lines-table th:first-child {
    min-width: 200px;
}

.quote-lines-table th:not(:first-child) {
    min-width: 85px;
}

.quote-lines-table th:last-child,
.quote-lines-table td:last-child {
    min-width: 48px;
    width: 48px;
}

.quote-lines-table .item-total {
    color: #0b5e8e;
    background: #f8fbff;
    font-weight: 900;
}

.quote-form-footer {
    align-items: center;
}

.quote-total-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.quote-total-strip span {
    min-width: 132px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e8edf5;
    border-radius: 8px;
}

.quote-total-strip small,
.quote-total-strip strong {
    display: block;
    line-height: 1.45;
}

.quote-total-strip small {
    color: #667085;
    font-size: 11px;
    font-weight: 800;
}

.quote-total-strip strong {
    color: var(--navy);
    font-size: 14px;
    font-weight: 900;
}

.quote-total-strip .grand {
    background: linear-gradient(135deg, var(--navy), var(--navy-mid));
    border-color: rgba(242, 193, 95, 0.22);
}

.quote-total-strip .grand small {
    color: rgba(255,255,255,0.64);
}

.quote-total-strip .grand strong {
    color: var(--gold-light);
    font-size: 16px;
}

/* ======================== Universal Attachments ======================== */
.attachments-panel {
    overflow: hidden;
    margin-top: 18px;
    background: #fff;
    border: 1px solid #e2e7f0;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.attachments-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--navy), var(--navy-mid));
}

.attachments-head h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--gold-light);
    font-size: 16px;
    font-weight: 900;
}

.attachments-head p {
    margin: 4px 0 0;
    color: rgba(255,255,255,0.62);
    font-size: 12px;
    font-weight: 700;
}

.attachments-head > span {
    align-self: flex-start;
    padding: 6px 10px;
    color: var(--navy);
    background: var(--gold-light);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.attachments-upload {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(160px, 240px) auto;
    gap: 10px;
    padding: 14px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #edf2f7;
}

.attachments-upload input[type="text"] {
    min-height: 40px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #d9e0ea;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 800;
}

.attachments-file-input {
    display: none;
}

.attachments-file-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1.5px dashed #c3d0e0;
    border-radius: 8px;
    padding: 5px 12px 5px 8px;
    transition: border-color 0.2s, background 0.2s;
    min-height: 40px;
    cursor: pointer;
}

.attachments-file-picker:hover {
    border-color: var(--primary, #3b82f6);
    background: #f0f7ff;
}

.attachments-browse-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #4f8ef7 0%, #2563eb 100%);
    color: #fff;
    border-radius: 6px;
    padding: 5px 13px;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    white-space: nowrap;
    margin: 0;
    line-height: 1.5;
    box-shadow: 0 1px 4px rgba(37,99,235,.25);
    transition: opacity 0.15s, box-shadow 0.15s;
    user-select: none;
}

.attachments-browse-btn:hover {
    opacity: 0.9;
    box-shadow: 0 2px 8px rgba(37,99,235,.35);
}

.attachments-browse-btn i {
    font-size: 13px;
}

.attachments-file-label {
    font-size: 12px;
    color: #a0aec0;
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font);
}

.attachments-file-label.has-file {
    color: #374151;
    font-weight: 700;
}

.attachments-list {
    display: grid;
    gap: 8px;
    padding: 14px 18px 18px;
}

.attachments-list article {
    display: grid;
    grid-template-columns: 38px 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 9px;
}

.attachments-list article > i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: #c7902d;
    background: #fff7e8;
    border-radius: 8px;
}

.attachments-list strong,
.attachments-list small {
    display: block;
    line-height: 1.45;
}

.attachments-list strong {
    color: var(--navy);
    font-size: 12.5px;
    font-weight: 900;
}

.attachments-list small {
    color: #667085;
    font-size: 11px;
    font-weight: 700;
}

.attachments-list form {
    margin: 0;
}

.attachments-empty {
    padding: 28px;
    color: #98a2b3;
    text-align: center;
}

.attachments-empty i,
.attachments-empty strong,
.attachments-empty span {
    display: block;
}

.attachments-empty i {
    margin-bottom: 8px;
    font-size: 34px;
}

.attachments-empty strong {
    color: #667085;
    font-weight: 900;
}

.attachment-field {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 260px);
    gap: 10px;
    padding: 12px;
    background: #f8fafc;
    border: 1px dashed #cfd8e6;
    border-radius: 9px;
}

.attachment-mini {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 38px;
    justify-content: center;
    padding: 5px 9px;
    color: var(--navy);
    background: #fff7e8;
    border: 1px solid #f1d391;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
}

.attachment-mini:hover {
    color: #8a5b00;
    background: #fff1d1;
}

/* ======================== Accounting Dashboard 2026 ======================== */
.accounting-dashboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 24px;
}

.acct-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: 100px;
    padding: 16px 24px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 18%, rgba(242, 193, 95, 0.26), transparent 12rem),
        radial-gradient(circle at 88% 12%, rgba(18, 140, 126, 0.2), transparent 12rem),
        linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 54%, var(--navy-4) 100%);
    border: 1px solid rgba(242, 193, 95, 0.18);
    border-radius: 12px;
    box-shadow: 0 28px 70px rgba(3, 17, 36, 0.22);
}

.acct-hero nav {
    color: rgba(242, 193, 95, 0.9);
    font-size: 11px;
    font-weight: 900;
}

.acct-hero h1 {
    margin: 4px 0 4px;
    color: #fff;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0;
}

.acct-hero p {
    max-width: 650px;
    margin: 0;
    color: rgba(255,255,255,0.68);
    font-size: 13px;
    font-weight: 600;
}

.acct-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.acct-cc-icu-row {
    display: flex;
    gap: 14px;
    align-items: stretch;
}
.acct-cc-icu-row .acct-command-center {
    flex: 1;
    min-width: 0;
}
.acct-cc-icu-row .icu-dash-card {
    width: 200px;
    flex-shrink: 0;
}
.acct-cc-icu-row .icu-dash-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    height: 100%;
    padding: 18px 14px;
}
.icu-dash-compact-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
.acct-cc-icu-row .icu-dash-ecg { display: none; }
.acct-cc-icu-row .icu-dash-stats { display: none; }

.acct-command-center {
    display: grid;
    grid-template-columns: 1.45fr repeat(3, 1fr);
    gap: 14px;
}

.acct-command-center article {
    min-height: 154px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e4e9f2;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.acct-command-center article:not(.acct-command-main) {
    display: grid;
    align-content: center;
    gap: 7px;
}

.acct-command-center i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 20px;
}

.acct-command-center i.green { color: #08765a; background: #ecfdf6; }
.acct-command-center i.amber { color: #b15d05; background: #fff7e8; }
.acct-command-center i.blue { color: #155eef; background: #eef4ff; }

.acct-command-center span,
.acct-kicker {
    color: #667085;
    font-size: 12px;
    font-weight: 900;
}

.acct-command-center strong {
    color: var(--navy);
    font-size: 25px;
    font-weight: 900;
    line-height: 1.2;
}

.acct-command-center strong.negative {
    color: #b42318;
}
.acct-command-main strong.negative {
    color: var(--gold);
}

.acct-command-center small {
    color: #98a2b3;
    font-size: 12px;
    font-weight: 700;
}

.acct-command-main {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 88% 14%, rgba(217, 170, 69, 0.18), transparent 10rem),
        linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 55%, var(--navy-4) 100%) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.acct-command-main .acct-kicker,
.acct-command-main small {
    color: rgba(255,255,255,0.72);
}

.acct-command-main strong {
    display: block;
    margin: 8px 0;
    color: #fff;
    font-size: 42px;
}

.acct-command-main em {
    font-size: 15px;
    font-style: normal;
}

.acct-profit-line {
    height: 8px;
    overflow: hidden;
    margin-top: 18px;
    background: rgba(255,255,255,0.18);
    border-radius: 999px;
}

.acct-profit-line span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--gold-light), #fff);
    border-radius: inherit;
}

.acct-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.acct-kpi {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 10px 12px;
    align-items: center;
    padding: 16px;
    background: #fff;
    border: 1px solid #e4e9f2;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.acct-kpi > span {
    grid-row: span 3;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 21px;
}

.acct-kpi .gold { color: #b15d05; background: #fff7e8; }
.acct-kpi .green { color: #08765a; background: #ecfdf6; }
.acct-kpi .blue { color: #155eef; background: #eef4ff; }
.acct-kpi .red { color: #b42318; background: #fff0ee; }
.acct-kpi .teal { color: #0b7d77; background: #e9f8f6; }
.acct-kpi .amber { color: #a15c00; background: #fff4dc; }

.acct-kpi small,
.acct-kpi em {
    color: #667085;
    font-size: 11.5px;
    font-style: normal;
    font-weight: 800;
}

.acct-kpi strong {
    color: var(--navy);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.15;
}

.acct-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: start;
}

.acct-dashboard-main,
.acct-dashboard-side {
    display: grid;
    gap: 18px;
}

.acct-card {
    overflow: hidden;
    padding: 20px;
    background: #fff;
    border: 1px solid #e4e9f2;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.acct-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.acct-card-head.compact {
    margin-bottom: 14px;
}

.acct-card-head h2 {
    margin: 0;
    color: var(--navy);
    font-size: 18px;
    font-weight: 900;
}

.acct-card-head p {
    margin: 4px 0 0;
    color: #667085;
    font-size: 12.5px;
    font-weight: 700;
}

.acct-card-head a {
    color: #0b6c7e;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.acct-orbit-card {
    background:
        radial-gradient(circle at 50% 45%, rgba(242, 193, 95, 0.12), transparent 16rem),
        #fff;
}

.acct-orbit-spotlight {
    padding: 18px 26px 22px;
}

.acct-orbit-spotlight .acct-card-head {
    margin-bottom: 8px;
}

.acct-orbit-hub {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 300px minmax(220px, 1fr);
    gap: 20px;
    align-items: center;
    min-height: 300px;
}

.acct-orbit-column {
    display: grid;
    gap: 14px;
}

.acct-orbit-link {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 12px;
    align-items: center;
    min-height: 78px;
    padding: 14px;
    color: var(--navy);
    background: #f8fafc;
    border: 1px solid #e8edf5;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(6, 27, 53, 0.05);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.acct-orbit-link:hover {
    color: var(--navy);
    background: #fffdf8;
    border-color: rgba(199, 154, 59, 0.34);
    transform: translateY(-2px);
}

.acct-orbit-link i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: #c7902d;
    background: #fff7e8;
    border-radius: 10px;
    font-size: 21px;
}

.acct-orbit-link strong,
.acct-orbit-link small {
    display: block;
    line-height: 1.45;
}

.acct-orbit-link strong {
    color: var(--navy);
    font-size: 14px;
    font-weight: 900;
}

.acct-orbit-link small {
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.acct-orbit-core-wrap {
    margin: 0 auto;
}

.acct-orbit-core {
    color: var(--gold);
    background: radial-gradient(circle at 35% 25%, var(--navy-mid), var(--navy) 62%, var(--navy-2));
    border: 7px solid #fff;
    box-shadow: 0 0 0 2px rgba(217, 170, 69, 0.45), 0 18px 40px rgba(6, 27, 53, 0.24);
}

.acct-bars {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    min-height: 260px;
    padding: 10px 0 0;
}

.acct-bar-month {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 10px;
    align-items: end;
    min-width: 0;
}

.acct-bar-pair {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 7px;
    height: 210px;
    padding: 0 8px;
    background: linear-gradient(180deg, #f8fafc, #fff);
    border: 1px solid #edf2f7;
    border-radius: 10px;
}

.acct-bar-pair span {
    width: 16px;
    min-height: 8px;
    border-radius: 999px 999px 0 0;
}

.acct-bar-pair .sales {
    background: linear-gradient(180deg, #128c7e, #0b6c7e);
}

.acct-bar-pair .purchases {
    background: linear-gradient(180deg, var(--gold-light), #c7902d);
}

.acct-bar-month small {
    color: #667085;
    text-align: center;
    font-size: 11px;
    font-weight: 900;
}

.acct-chart-legend {
    display: flex;
    gap: 18px;
    margin-top: 14px;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.acct-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.acct-chart-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.acct-chart-legend .sales { background: #128c7e; }
.acct-chart-legend .purchases { background: var(--gold-light); }

.acct-health-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.acct-health-grid article {
    display: grid;
    gap: 7px;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 10px;
}

.acct-health-grid i {
    color: #c7902d;
    font-size: 24px;
}

.acct-health-grid article.ok i,
.acct-health-grid article.ok strong {
    color: #08765a;
}

.acct-health-grid article.danger i,
.acct-health-grid article.danger strong {
    color: #b42318;
}

.acct-health-grid span,
.acct-health-grid small {
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.acct-health-grid strong {
    color: var(--navy);
    font-size: 18px;
    font-weight: 900;
}

.acct-activity-list {
    display: grid;
    gap: 10px;
}

.acct-activity-list a {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    color: var(--navy);
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 10px;
    text-decoration: none;
}

.acct-activity-list i {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: #0b6c7e;
    background: #e9f8f6;
    border-radius: 9px;
}

.acct-activity-list strong,
.acct-activity-list small {
    display: block;
    line-height: 1.45;
}

.acct-activity-list strong,
.acct-activity-list b {
    color: var(--navy);
    font-size: 13px;
    font-weight: 900;
}

.acct-activity-list small {
    color: #667085;
    font-size: 12px;
    font-weight: 700;
}

.acct-activity-list b.green {
    color: #08765a;
}

.acct-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.acct-quick-grid a {
    display: grid;
    gap: 8px;
    min-height: 92px;
    padding: 14px;
    color: var(--navy);
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 10px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
}

.acct-quick-grid i {
    color: #c7902d;
    font-size: 22px;
}

.acct-donut {
    width: 190px;
    height: 190px;
    display: grid;
    place-items: center;
    margin: 8px auto 18px;
    background: conic-gradient(#128c7e var(--p), #eef2f7 0);
    border-radius: 50%;
    position: relative;
}

.acct-donut::after {
    content: "";
    position: absolute;
    inset: 22px;
    background: #fff;
    border-radius: inherit;
}

.acct-donut strong,
.acct-donut small {
    position: relative;
    z-index: 1;
    display: block;
    text-align: center;
}

.acct-donut strong {
    align-self: end;
    color: var(--navy);
    font-size: 28px;
    font-weight: 900;
}

.acct-donut small {
    align-self: start;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.acct-mini-list {
    display: grid;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.acct-mini-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #edf2f7;
}

.acct-mini-list li:last-child {
    border-bottom: 0;
}

.acct-mini-list span {
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.acct-mini-list strong {
    color: var(--navy);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .acct-command-center,
    .acct-kpi-grid,
    .acct-health-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .acct-command-main {
        grid-column: span 2;
    }

    .acct-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .acct-orbit-hub {
        grid-template-columns: 1fr;
    }

    .acct-orbit-core-wrap {
        order: -1;
    }
}

@media (max-width: 768px) {
    .acct-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .acct-hero h1 {
        font-size: 22px;
    }

    .acct-hero-actions,
    .acct-hero-actions .btn {
        width: 100%;
    }

    .acct-command-center,
    .acct-kpi-grid,
    .acct-health-grid,
    .acct-quick-grid {
        grid-template-columns: 1fr;
    }

    .acct-command-main {
        grid-column: auto;
    }

    .acct-bars {
        gap: 8px;
        overflow-x: auto;
    }

    .acct-bar-month {
        min-width: 76px;
    }

    .acct-card-head {
        flex-direction: column;
    }

    .acct-activity-list a {
        grid-template-columns: 38px 1fr;
    }

    .acct-activity-list b {
        grid-column: 2;
    }

    .acct-orbit-hub {
        min-height: auto;
    }

    .acct-orbit-core-wrap {
        transform: scale(0.82);
        transform-origin: center;
        margin-block: -26px;
    }

    .attachments-upload,
    .attachment-field,
    .attachments-list article {
        grid-template-columns: 1fr;
    }
}

.premium-lines-wrap {
    border: 1px solid #e8edf5;
    border-radius: 8px;
    overflow: hidden;
}

.premium-lines-table {
    margin-bottom: 0;
}

.premium-lines-table td {
    padding: 10px;
}

.select-readonly {
    pointer-events: none;
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #495057;
    opacity: 1;
}

.app-combobox.is-readonly .app-combobox-toggle {
    pointer-events: none;
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #495057;
}

@media (max-width: 900px) {
    .premium-module-hero,
    .premium-form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .premium-stat-grid {
        grid-template-columns: 1fr;
    }

    .receipt-form-grid {
        grid-template-columns: 1fr;
    }

    .premium-filter-form {
        align-items: stretch;
        flex-direction: column;
    }

    .premium-filter-form input,
    .premium-filter-form select,
    .premium-filter-form .btn {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* ======================== Premium Accounting Reports ======================== */
.report-screen {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.report-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 4px 14px;
}

.report-top h1 {
    margin: 8px 0 2px;
    color: var(--navy);
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 0;
}

.report-top p {
    margin: 0;
    color: #5d6b82;
    font-size: 15px;
    font-weight: 800;
}

.report-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #70809a;
    font-size: 12.5px;
    font-weight: 800;
}

.report-breadcrumb i:first-child {
    color: #1f6fff;
}

.report-title-icon {
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #c8942e;
    background: #fff8e8;
    border: 1px solid #f2d89d;
    border-radius: 8px;
    font-size: 30px;
}

.report-filter-card,
.report-filter-side,
.report-table-card,
.report-side-card,
.report-kpi {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #e3e9f2;
    border-radius: 8px;
    box-shadow: 0 14px 36px rgba(16, 24, 40, 0.07);
}

.report-filter-card {
    display: grid;
    align-items: end;
    gap: 14px;
    padding: 18px;
}

.report-filter-wide {
    grid-template-columns: 1.25fr 1.4fr 1fr 1fr 1fr;
}

.income-filter {
    grid-template-columns: 1.45fr 1.25fr 1fr 1fr;
}

.report-filter-card label,
.report-filter-side label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
}

.report-filter-card label span,
.report-filter-side label span {
    color: #344563;
    font-size: 12.5px;
    font-weight: 900;
}

.report-filter-card .form-control,
.report-filter-card .form-select,
.report-filter-side .form-control,
.report-filter-side .form-select {
    min-height: 46px;
    color: var(--navy);
    background-color: #fff;
    border: 1px solid #dfe6f0;
    border-radius: 8px;
    font-weight: 800;
}

.report-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.report-primary-btn,
.report-soft-btn,
.report-outline-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    font-family: var(--font);
    font-weight: 900;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.report-primary-btn {
    color: #f6c45d;
    background: linear-gradient(135deg, var(--navy), var(--navy-mid));
    border: 1px solid rgba(246, 196, 93, 0.42);
    box-shadow: 0 12px 28px rgba(6, 27, 53, 0.16);
}

.report-soft-btn,
.report-outline-btn {
    color: #12284a;
    background: #fff;
    border: 1px solid #dfe6f0;
}

.report-primary-btn:hover,
.report-soft-btn:hover,
.report-outline-btn:hover {
    transform: translateY(-1px);
}

.report-kpi-grid {
    display: grid;
    gap: 16px;
}

.report-kpi-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.report-kpi {
    position: relative;
    min-height: 136px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 22px 92px 22px 24px;
    overflow: hidden;
}

.report-kpi small {
    color: #53627a;
    font-size: 13px;
    font-weight: 900;
}

.report-kpi strong {
    margin-top: 8px;
    color: #071f45;
    font-size: 25px;
    font-weight: 900;
}

.report-kpi em {
    margin-top: 7px;
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.kpi-icon {
    position: absolute;
    top: 25px;
    right: 24px;
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 26px;
}

.kpi-icon.green { color: #039855; background: #e9fbf2; }
.kpi-icon.blue { color: #1769ff; background: #eaf1ff; }
.kpi-icon.amber { color: #d99000; background: #fff4df; }
.kpi-icon.violet { color: #6f2cff; background: #f0e9ff; }
.kpi-icon.red { color: #d92d20; background: #fff0ef; }

.report-ledger-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 305px;
    gap: 18px;
}

.report-income-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
}

.report-layout-with-filter {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.report-filter-side {
    position: sticky;
    top: 96px;
    padding: 18px;
}

.report-filter-side form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.report-export-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.report-switch-line {
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
}

.report-switch-line input {
    width: 42px;
    height: 22px;
    accent-color: #079455;
}

.report-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid #edf1f6;
}

.report-card-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #0b2146;
    font-size: 17px;
    font-weight: 900;
}

.report-card-head h2 i {
    color: #1f6fff;
}

.report-card-head span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.report-menu-btn,
.report-row-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0b2146;
    background: #fff;
    border: 1px solid #dfe6f0;
    border-radius: 8px;
}

.report-action-menu {
    min-width: 210px;
    padding: 8px;
    border: 1px solid #dfe6f0;
    border-radius: 10px;
    box-shadow: 0 18px 42px rgba(6, 27, 53, 0.14);
    text-align: right;
}

.report-action-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    border-radius: 8px;
    color: #102a55;
    font-size: 12.5px;
    font-weight: 900;
}

.report-action-menu .dropdown-item i {
    color: #c7902d;
    font-size: 15px;
}

.report-action-menu .dropdown-item:hover {
    color: var(--navy);
    background: #fff7e8;
}

.report-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.report-table th,
.report-table td {
    padding: 14px 16px;
    color: #102a55;
    border-bottom: 1px solid #e8edf5;
    font-size: 13px;
    font-weight: 800;
    vertical-align: middle;
}

.report-table thead th {
    color: #33415f;
    background: linear-gradient(180deg, #fbfcfe, #f3f6fa);
    font-size: 12.5px;
    font-weight: 900;
}

.report-table tbody tr:hover td {
    background: #fffaf0;
}

.report-table tfoot th {
    color: #071f45;
    background: #f3f8ff;
    border-top: 1px solid #b9d2ff;
    font-size: 15px;
}

.report-code {
    color: #0a2c61 !important;
    font-weight: 900 !important;
}

.fw-black {
    font-weight: 900 !important;
}

.report-empty {
    padding: 58px 18px !important;
    text-align: center;
}

.report-empty.compact {
    padding: 36px 16px !important;
}

.report-empty i,
.report-empty strong,
.report-empty span {
    display: block;
}

.report-empty i {
    margin-bottom: 12px;
    color: #cbd5e1;
    font-size: 42px;
}

.report-empty strong {
    color: #344563;
    font-size: 15px;
    font-weight: 900;
}

.report-empty span {
    margin-top: 5px;
    color: #73849d;
    font-size: 12px;
    font-weight: 800;
}

.report-table-foot,
.report-refresh-line {
    padding: 14px 20px;
    color: #667085;
    font-size: 12.5px;
    font-weight: 800;
    text-align: center;
}

.report-side-card {
    padding-bottom: 18px;
}

.report-detail-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 0 20px 18px;
}

.report-detail-list dt,
.report-detail-list dd {
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid #edf1f6;
    font-size: 12.5px;
    font-weight: 900;
}

.report-detail-list dt {
    color: #73849d;
}

.report-detail-list dd {
    color: #0b2146;
    text-align: left;
}

.report-outline-btn {
    width: calc(100% - 40px);
    margin: 0 20px;
}

.report-balance-alert {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 18px 0;
    padding: 20px 24px;
    border-radius: 8px;
}

.report-balance-alert.ok {
    color: #027a48;
    background: linear-gradient(135deg, #f0fff8, #f8fffc);
    border: 1px solid #b9efd2;
}

.report-balance-alert.danger {
    color: #b42318;
    background: linear-gradient(135deg, #fff3f1, #fffafa);
    border: 1px solid #ffc8c2;
}

.report-balance-alert > i {
    font-size: 34px;
}

.report-balance-alert strong,
.report-balance-alert span {
    display: block;
}

.report-balance-alert strong {
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 900;
}

.report-balance-alert span {
    color: #53627a;
    font-size: 13px;
    font-weight: 800;
}

.income-table .section-row td {
    color: #0b3b80;
    background: #f8fbff;
    font-size: 14px;
    font-weight: 900;
}

.income-table .section-row button {
    width: 26px;
    height: 26px;
    margin-left: 8px;
    color: #0b3b80;
    background: #fff;
    border: 1px solid #dfe6f0;
    border-radius: 8px;
}

.income-table .subtotal-row th {
    background: #f7f9fc;
}

.income-table .subtotal-row.expense th {
    color: #d92d20;
}

.income-table tfoot th {
    color: #079455;
    background: #eefdf6;
    font-size: 18px;
}

.report-bars {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 22px;
}

.report-bars div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.report-bars span {
    color: #33415f;
    font-size: 13px;
    font-weight: 900;
}

.report-bars b {
    height: 14px;
    min-width: 8px;
    display: block;
    background: linear-gradient(90deg, var(--navy), #1f6fff);
    border-radius: 99px;
}

.report-bars b.red {
    background: linear-gradient(90deg, #d92d20, #ff9a90);
}

.report-bars b.green {
    background: linear-gradient(90deg, #079455, #6ce9a6);
}

.report-analysis-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 22px 4px;
}

.report-analysis-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px;
    background: #fbfcfe;
    border: 1px solid #edf1f6;
    border-radius: 8px;
}

.report-analysis-list strong {
    color: #0b2146;
    font-size: 19px;
    font-weight: 900;
}

.report-analysis-list span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.report-analysis-list .good strong {
    color: #079455;
}

.report-analysis-list .bad strong {
    color: #d92d20;
}

.app-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 18px 0 4px;
}

.app-pagination a,
.app-pagination span {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    color: var(--navy);
    background: #fff;
    border: 1px solid #dfe6f0;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: var(--shadow-xs);
}

.app-pagination span {
    color: #8a5b00;
    background: #fff8e8;
    border-color: #f1d391;
}

.app-pagination a.disabled {
    color: #98a2b3;
    pointer-events: none;
    background: #f8fafc;
}

.report-note-box {
    margin: 0 20px 18px;
    padding: 14px 16px;
    color: #344563;
    background: #fbfcfe;
    border: 1px solid #edf1f6;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.8;
}

/* ======================== Premium General Ledger ======================== */
.ledger-premium {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ledger-hero {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 22px;
    min-height: 190px;
    padding: 26px 30px;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(6, 27, 53, 0.98), rgba(8, 39, 74, 0.96)),
        radial-gradient(circle at 18% 15%, rgba(246, 196, 93, 0.24), transparent 30%);
    border: 1px solid rgba(246, 196, 93, 0.25);
    border-radius: 10px;
    box-shadow: 0 22px 60px rgba(6, 27, 53, 0.18);
}

.ledger-hero::after {
    content: "";
    position: absolute;
    inset-inline-start: 26px;
    bottom: 0;
    width: 52%;
    height: 4px;
    background: linear-gradient(90deg, #f6c45d, rgba(246, 196, 93, 0));
}

.ledger-hero-main {
    position: relative;
    z-index: 1;
    max-width: 780px;
}

.ledger-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 12.5px;
    font-weight: 900;
}

.ledger-breadcrumb i:first-child {
    color: #f6c45d;
}

.ledger-hero h1 {
    margin: 12px 0 6px;
    color: #fff;
    font-size: 40px;
    font-weight: 900;
    letter-spacing: 0;
}

.ledger-hero p {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.9;
}

.ledger-account-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 0;
    padding: 9px 13px;
    color: var(--navy);
    background: #f6c45d;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 900;
}

.ledger-account-pill strong {
    color: var(--navy);
}

.ledger-hero-mark {
    position: relative;
    z-index: 1;
    width: 124px;
    min-width: 124px;
    display: grid;
    place-items: center;
    align-self: center;
    aspect-ratio: 1;
    color: #f6c45d;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(246, 196, 93, 0.34);
    border-radius: 50%;
}

.ledger-hero-mark i {
    font-size: 42px;
}

.ledger-hero-mark span {
    position: absolute;
    bottom: 25px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    font-weight: 900;
}

.ledger-filter-shell {
    display: grid;
    grid-template-columns: 260px minmax(360px, 2fr) minmax(160px, 0.75fr) minmax(160px, 0.75fr);
    gap: 12px;
    align-items: end;
    padding: 18px 20px;
    background:
        radial-gradient(circle at 92% 50%, rgba(217,170,69,0.12), transparent 8rem),
        linear-gradient(180deg, var(--navy) 0%, var(--navy-4) 100%);
    border: 1px solid rgba(217,170,69,0.16);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(1,11,29,0.22);
}

.ledger-filter-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.ledger-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
}

.ledger-field span {
    color: rgba(255,255,255,0.52);
    font-size: 12px;
    font-weight: 700;
}

.ledger-field .form-control {
    min-height: 46px;
    color: #fff !important;
    background-color: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 8px;
    font-weight: 700;
    transition: border-color 0.2s, background-color 0.2s;
}

.ledger-field .form-select {
    min-height: 46px;
    color: #fff !important;
    background-color: var(--navy-mid) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 8px;
    font-weight: 700;
    transition: border-color 0.2s, background-color 0.2s;
}

.ledger-field .form-select,
form.ledger-filter-shell select,
form.ledger-filter-shell .form-select {
    background-color: rgba(255,255,255,0.07) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgba(255,255,255,0.55)' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
}

.ledger-field .form-control[type="date"] {
    color-scheme: dark;
}

.ledger-field .form-control::placeholder {
    color: rgba(255,255,255,0.28);
}

.ledger-field .form-select option {
    background: var(--navy);
    color: #fff;
}

.ledger-field .form-control:focus,
.ledger-field .form-select:focus {
    background-color: rgba(255,255,255,0.11) !important;
    border-color: rgba(217,170,69,0.5) !important;
    box-shadow: 0 0 0 3px rgba(217,170,69,0.12) !important;
    color: #fff !important;
}

.ledger-primary-btn,
.ledger-soft-btn,
.ledger-outline-btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 900;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    cursor: pointer;
}

.ledger-primary-btn {
    color: #102126;
    background: linear-gradient(135deg, var(--accent), #e3b84a);
    border: none;
    box-shadow: 0 8px 22px rgba(199,154,59,0.32);
}

.ledger-primary-btn:hover {
    background: linear-gradient(135deg, #d4a83f, #f0c752);
    transform: translateY(-1px);
}

.ledger-soft-btn {
    color: rgba(255,255,255,0.65);
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
}

.ledger-soft-btn:hover {
    background: rgba(255,255,255,0.13);
    color: #fff;
    transform: translateY(-1px);
}

.ledger-outline-btn {
    color: rgba(255,255,255,0.55);
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
}

.ledger-outline-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    transform: translateY(-1px);
}

.ledger-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.ledger-kpi {
    position: relative;
    min-height: 132px;
    padding: 20px 88px 18px 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(16, 24, 40, 0.06);
}

.ledger-kpi::after {
    content: "";
    position: absolute;
    inset-inline: 18px;
    bottom: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: #e2e8f0;
}

.ledger-kpi.balance::after { background: #039855; }
.ledger-kpi.debit::after { background: #1769ff; }
.ledger-kpi.credit::after { background: #d99000; }
.ledger-kpi.period::after { background: #6f2cff; }

.ledger-kpi > span {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 24px;
}

.ledger-kpi.balance > span { color: #039855; background: #e9fbf2; }
.ledger-kpi.debit > span { color: #1769ff; background: #eaf1ff; }
.ledger-kpi.credit > span { color: #d99000; background: #fff4df; }
.ledger-kpi.period > span { color: #6f2cff; background: #f0e9ff; }

.ledger-kpi small,
.ledger-kpi em {
    display: block;
    color: #64748b;
    font-size: 12.5px;
    font-style: normal;
    font-weight: 900;
}

.ledger-kpi strong {
    display: block;
    margin: 9px 0 7px;
    color: var(--navy);
    font-size: 23px;
    font-weight: 900;
}

.ledger-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}

.ledger-table-panel {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 16px 42px rgba(16, 24, 40, 0.07);
}

.ledger-account-card {
    overflow: hidden;
    border-radius: 14px;
    background:
        radial-gradient(circle at 88% 14%, rgba(217,170,69,0.22), transparent 10rem),
        linear-gradient(180deg, var(--navy) 0%, var(--navy-3) 52%, var(--navy-4) 100%);
    border: 1px solid rgba(217,170,69,0.14);
    box-shadow: 0 20px 50px rgba(1,11,29,0.28);
    color: #fff;
}

.ledger-panel-head,
.ledger-account-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid #edf2f7;
}

.ledger-panel-head h2,
.ledger-account-head strong {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--navy);
    font-size: 17px;
    font-weight: 900;
}

.ledger-panel-head h2 i {
    color: #1f6fff;
}

.ledger-panel-head p {
    margin: 5px 0 0;
    color: #73849d;
    font-size: 12px;
    font-weight: 800;
}

.ledger-icon-btn,
.ledger-row-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0b2146;
    background: #fff;
    border: 1px solid #dfe6f0;
    border-radius: 8px;
}

.ledger-table-wrap {
    overflow: auto;
}

.ledger-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.ledger-table th,
.ledger-table td {
    padding: 15px 16px;
    color: #102a55;
    border-bottom: 1px solid #e8edf5;
    font-size: 13px;
    font-weight: 850;
    vertical-align: middle;
}

.ledger-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: #33415f;
    background: linear-gradient(180deg, #fbfcfe, #f3f6fa);
    font-size: 12.5px;
    font-weight: 900;
}

.ledger-table tbody tr.is-debit td:first-child {
    border-inline-start: 3px solid #1769ff;
}

.ledger-table tbody tr.is-credit td:first-child {
    border-inline-start: 3px solid #d99000;
}

.ledger-table tbody tr:hover td {
    background: #fffaf0;
}

.ledger-date,
.ledger-entry-link {
    color: #071f45;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.ledger-entry-link:hover {
    color: #c7902d;
}

.ledger-desc strong,
.ledger-desc small {
    display: block;
    line-height: 1.55;
}

.ledger-desc strong {
    color: #071f45;
}

.ledger-desc small {
    color: #73849d;
    font-size: 11.5px;
    font-weight: 800;
}

.ledger-source-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    color: #0a2c61;
    background: #eef5ff;
    border: 1px solid #d7e7ff;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.ledger-source-chip.muted {
    color: #64748b;
    background: #f8fafc;
    border-color: #e2e8f0;
}

.ledger-money,
.ledger-balance {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ledger-money.debit {
    color: #0a2c61;
}

.ledger-money.credit {
    color: #8a5b00;
}

.ledger-balance {
    color: var(--navy);
    font-size: 14px !important;
    font-weight: 900 !important;
}

.ledger-empty {
    padding: 58px 18px !important;
    text-align: center;
}

.ledger-empty.compact {
    padding: 30px 18px !important;
}

.ledger-empty i,
.ledger-empty strong,
.ledger-empty span {
    display: block;
}

.ledger-empty i {
    margin-bottom: 12px;
    color: #cbd5e1;
    font-size: 42px;
}

.ledger-empty strong {
    color: #344563;
    font-size: 15px;
    font-weight: 900;
}

.ledger-empty span {
    margin-top: 5px;
    color: #73849d;
    font-size: 12px;
    font-weight: 800;
}

.ledger-table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    color: #667085;
    background: #fbfcfe;
    font-size: 12.5px;
    font-weight: 900;
}

.ledger-table-foot span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ledger-table-foot i {
    color: #039855;
}

.ledger-account-card {
    position: sticky;
    top: 92px;
}

/* ── Ledger Account Card internals (lac-*) ── */
.lac-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.lac-header-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #f6d27c, var(--accent));
    color: #102126;
    font-size: 16px;
    border-radius: 8px;
    flex-shrink: 0;
}
.lac-header small {
    display: block;
    font-size: 11px;
    color: rgba(255,255,255,0.42);
    font-weight: 600;
    margin-bottom: 2px;
}
.lac-header strong {
    display: block;
    font-size: 14px;
    color: #fff;
    font-weight: 800;
}
.lac-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lac-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
}
.lac-line span {
    color: rgba(255,255,255,0.52);
}
.lac-line strong {
    color: rgba(255,255,255,0.88);
    font-size: 13px;
    font-weight: 700;
}
.lac-line strong.lac-blue  { color: #a0cfff; }
.lac-line strong.lac-green { color: #6ee7b7; }
.lac-line strong.lac-red   { color: #f09c7c; }

.lac-grand-box {
    margin: 0 16px 16px;
    padding: 16px;
    background: rgba(199,154,59,0.15);
    border: 1px solid rgba(199,154,59,0.35);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 0 20px rgba(199,154,59,0.1);
}
.lac-grand-box > span {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.62);
}
.lac-grand-amount {
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.lac-grand-amount strong {
    font-size: 22px;
    font-weight: 800;
    color: #f6d27c;
    line-height: 1;
}
.lac-grand-amount small {
    font-size: 12px;
    color: rgba(255,255,255,0.48);
}
.lac-actions {
    padding: 0 16px 16px;
}
.lac-btn-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    color: rgba(255,255,255,0.55);
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.lac-btn-outline:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.lac-empty {
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.lac-empty i {
    font-size: 2rem;
    color: rgba(255,255,255,0.2);
}
.lac-empty strong {
    color: rgba(255,255,255,0.55);
    font-size: 13px;
}
.lac-empty span {
    color: rgba(255,255,255,0.32);
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 1300px) {
    .ledger-filter-shell,
    .ledger-workspace {
        grid-template-columns: 1fr;
    }

    .ledger-account-card {
        position: static;
    }

    .ledger-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .ledger-hero {
        flex-direction: column;
        padding: 22px;
    }

    .ledger-hero h1 {
        font-size: 30px;
    }

    .ledger-hero-mark {
        width: 94px;
        min-width: 94px;
    }

    .ledger-filter-actions,
    .ledger-kpis {
        grid-template-columns: 1fr;
    }

    .ledger-table-foot {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 1200px) {
    .report-filter-wide,
    .income-filter,
    .report-ledger-grid,
    .report-income-grid,
    .report-layout-with-filter {
        grid-template-columns: 1fr;
    }

    .report-filter-side {
        position: static;
    }
}

@media (max-width: 760px) {
    .report-top {
        flex-direction: column;
    }

    .report-top h1 {
        font-size: 30px;
    }

    .report-kpi-grid.three {
        grid-template-columns: 1fr;
    }

    .report-actions,
    .report-export-grid {
        flex-direction: column;
        grid-template-columns: 1fr;
    }

    .report-primary-btn,
    .report-soft-btn {
        width: 100%;
    }
}

/* ── Product Combo Dropdown ────────────────────────────────────── */
.pcombo-dropdown {
    position: absolute;
    z-index: 10500;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.14);
    list-style: none;
    padding: 4px 0;
    margin: 0;
    max-height: 280px;
    overflow-y: auto;
    display: none;
    font-family: 'Cairo', sans-serif;
}
.pcombo-dropdown.pcombo-open { display: block; }

.pcombo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background .1s;
    font-size: .875rem;
    border-bottom: 1px solid var(--border, #f3f4f6);
}
.pcombo-item:last-child { border-bottom: none; }
.pcombo-item:hover,
.pcombo-item.pcombo-focused { background: #eff6ff; }

[data-bs-theme="dark"] .pcombo-item:hover,
[data-bs-theme="dark"] .pcombo-item.pcombo-focused { background: rgba(59,130,246,.15); }

.pcombo-info { flex: 1; min-width: 0; }
.pcombo-name { font-weight: 600; }
.pcombo-meta { color: #6b7280; font-size: .76rem; }
.pcombo-price { font-weight: 700; color: #2563eb; white-space: nowrap; font-size: .85rem; }
.pcombo-stock {
    display: inline-block;
    font-size: .7rem;
    padding: 1px 5px;
    border-radius: 4px;
    background: #dcfce7;
    color: #16a34a;
    margin-right: 4px;
    vertical-align: middle;
}
.pcombo-stock.low { background: #fee2e2; color: #dc2626; }
.pcombo-empty { padding: 12px 16px; color: #9ca3af; text-align: center; font-size: .85rem; }

/* ═══════════════════════════════════════════════════════
   Premium Product Catalog Modal  (.pcat-*)
═══════════════════════════════════════════════════════ */
.pcat-modal-header {
    background: linear-gradient(135deg, var(--navy), var(--navy-mid));
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(242,193,95,.2);
}
.pcat-modal-title { color: var(--gold-light); font-weight: 700; font-size: 1rem; margin: 0; }
.pcat-modal-sub   { color: #64748b; font-size: .76rem; margin-top: 1px; }
.pcat-modal-icon  {
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(242,193,95,.12); border: 1px solid rgba(242,193,95,.28);
    display: flex; align-items: center; justify-content: center;
}
.pcat-modal-icon i { color: var(--gold-light); font-size: 1.1rem; }

.pcat-search-wrap {
    padding: 14px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e8edf5;
    display: flex;
    gap: 10px;
    align-items: center;
}
.pcat-search-wrap > i { color: #94a3b8; font-size: 1.05rem; flex-shrink: 0; }
.pcat-search-input {
    flex: 1;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: .92rem;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
    background: #fff;
    font-family: inherit;
}
.pcat-search-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.pcat-count {
    font-size: .78rem; color: #94a3b8;
    white-space: nowrap; font-weight: 600;
    min-width: 52px; text-align: end;
}

.pcat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 16px 20px;
    max-height: 440px;
    overflow-y: auto;
}
@media (max-width: 900px) { .pcat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .pcat-grid { grid-template-columns: 1fr; } }

.pcat-card {
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: all .18s ease;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    overflow: hidden;
}
.pcat-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 3px; height: 100%;
    background: linear-gradient(180deg, #2563eb, #7c3aed);
    opacity: 0;
    transition: opacity .18s;
}
.pcat-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 4px 18px rgba(37,99,235,.13);
    transform: translateY(-2px);
}
.pcat-card:hover::after { opacity: 1; }
.pcat-card:active { transform: scale(.98); }

.pcat-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 20px;
    font-size: .69rem; font-weight: 700; width: fit-content;
    margin-bottom: 2px;
}
.pcat-badge-service { background: #e0e7ff; color: #4338ca; }
.pcat-badge-product { background: #dcfce7; color: #15803d; }

.pcat-name {
    font-weight: 700; color: #1e293b;
    font-size: .875rem; line-height: 1.35;
}
.pcat-code { font-size: .74rem; color: #94a3b8; }

.pcat-footer {
    display: flex; justify-content: space-between;
    align-items: flex-end; margin-top: 6px;
    padding-top: 8px; border-top: 1px solid #f1f5f9;
}
.pcat-price {
    font-size: .95rem; font-weight: 900; color: #1e293b;
    display: flex; align-items: baseline; gap: 3px;
}
.pcat-price em { font-size: .7rem; color: #64748b; font-style: normal; }
.pcat-vat-badge {
    font-size: .68rem; background: #f0fdf4; color: #15803d;
    border: 1px solid #bbf7d0; padding: 2px 7px;
    border-radius: 20px; font-weight: 700;
}
.pcat-stock {
    font-size: .71rem; font-weight: 600;
    display: flex; align-items: center; gap: 3px;
    margin-top: 2px;
}
.pcat-stock-ok  { color: #16a34a; }
.pcat-stock-low { color: #dc2626; }

.pcat-placeholder, .pcat-empty, .pcat-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 24px;
    color: #94a3b8;
}
.pcat-placeholder i, .pcat-empty i, .pcat-loading i {
    font-size: 2.2rem; display: block; margin-bottom: 10px;
    opacity: .5;
}

/* ═══════════════════════════════════════════════════════
   COST CENTER PICKER — المشروع يمين، بنود التكلفة الفرعية يسار
   ═══════════════════════════════════════════════════════ */
.cc-picker-body {
    display: flex;
    min-height: 360px;
    max-height: 460px;
}
.cc-picker-pane {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 10px;
}
.cc-picker-pane-roots {
    border-left: 1px solid #e8edf5;
    background: #fafbfd;
}
.cc-picker-single .cc-picker-pane-roots {
    border-left: none;
    background: #fff;
}
.cc-picker-empty {
    text-align: center;
    color: #94a3b8;
    padding: 50px 20px;
}
.cc-picker-empty i { font-size: 2rem; display: block; margin-bottom: 10px; opacity: .5; }

.cc-picker-item {
    border: 1.5px solid transparent;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all .15s ease;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.cc-picker-item:hover { background: #eff6ff; }
.cc-picker-item.is-active { background: #dbeafe; border-color: #93c5fd; }
.cc-picker-item-main { min-width: 0; }
.cc-picker-item-label {
    font-size: .85rem; font-weight: 700; color: #1e293b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-picker-item-sub { font-size: .72rem; color: #94a3b8; margin-top: 1px; }
.cc-picker-item-icon {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: #eef2ff; color: #4338ca; font-size: .85rem;
}
.cc-picker-item-amounts {
    flex-shrink: 0; text-align: end; font-size: .72rem;
}
.cc-picker-remaining { font-weight: 800; }
.cc-picker-remaining.is-over { color: #dc2626; }
.cc-picker-remaining.is-ok { color: #16a34a; }

/* بطاقة "اختيار الجذر بالكامل" المثبّتة أعلى قائمة الفروع (allowRootSelect) */
.cc-picker-item-root-select {
    border: 1.5px dashed #c7cfdf;
    background: #f7f9fc;
    margin-bottom: 10px;
}
.cc-picker-item-root-select:hover {
    background: #eef2f8;
    border-color: var(--navy-mid, #2f5d8a);
}
.cc-picker-item-root-select .cc-picker-item-icon-root {
    background: var(--navy, #1e3a5f);
    color: #fff;
}
.cc-picker-item-root-select > i {
    flex-shrink: 0;
    color: #c7cfdf;
    font-size: 1.1rem;
}
.cc-picker-item-root-select:hover > i {
    color: #16a34a;
}

/* ═══════════════════════════════════════════════════════
   CARD GRID — نظام الكروت المشترك (يُستخدم في عدة صفحات)
   ═══════════════════════════════════════════════════════ */
.ccard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}
.ccard {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .22s, box-shadow .22s, border-color .22s;
}
.ccard:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(0,0,0,.1);
    border-color: rgba(59,130,246,.25);
}
.ccard.inactive { opacity: .65; }

/* ─── بانر الكارت (نفس لون البانر الرئيسي) ─── */
.ccard-top {
    position: relative;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 14% 20%, rgba(242,193,95,.16), transparent 17rem),
        radial-gradient(circle at 92% 12%, rgba(18,140,126,.13), transparent 19rem),
        linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 58%, var(--navy-5) 100%);
}
.ccard-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    border: 3px solid rgba(255,255,255,.15);
}
/* ألوان الأفاتار */
.ccard-avatar.red    { background:#dc2626; box-shadow:0 0 0 4px rgba(220,38,38,.25),0 6px 20px rgba(0,0,0,.35); }
.ccard-avatar.gold   { background:#d97706; box-shadow:0 0 0 4px rgba(217,119,6,.25),0 6px 20px rgba(0,0,0,.35); }
.ccard-avatar.blue   { background:#2563eb; box-shadow:0 0 0 4px rgba(37,99,235,.25),0 6px 20px rgba(0,0,0,.35); }
.ccard-avatar.teal   { background:#0891b2; box-shadow:0 0 0 4px rgba(8,145,178,.25),0 6px 20px rgba(0,0,0,.35); }
.ccard-avatar.green  { background:#16a34a; box-shadow:0 0 0 4px rgba(22,163,74,.25),0 6px 20px rgba(0,0,0,.35); }
.ccard-avatar.purple { background:#7c3aed; box-shadow:0 0 0 4px rgba(124,58,237,.25),0 6px 20px rgba(0,0,0,.35); }
.ccard-avatar.orange { background:#ea580c; box-shadow:0 0 0 4px rgba(234,88,12,.25),0 6px 20px rgba(0,0,0,.35); }
.ccard-avatar.slate  { background:#475569; box-shadow:0 0 0 4px rgba(71,85,105,.25),0 6px 20px rgba(0,0,0,.35); }

/* بادجات البانر */
.ccard-badge {
    position: absolute;
    top: 10px; left: 10px;
    padding: .2rem .65rem;
    border-radius: 50px;
    font-size: .72rem;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(6px);
}
.ccard-badge-danger {
    position: absolute;
    top: 10px; right: 10px;
    padding: .2rem .65rem;
    border-radius: 50px;
    font-size: .72rem;
    font-weight: 700;
    background: rgba(239,68,68,.85);
    color: #fff;
}

/* ─── محتوى الكارت ─── */
.ccard-body {
    padding: 1.1rem 1.2rem .8rem;
    flex: 1;
}
.ccard-name {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text, #111827);
    margin-bottom: .55rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}
.ccard-name:hover { color: #2563eb; }
.ccard-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    margin-bottom: .4rem;
}
.ccard-meta span {
    font-size: .78rem;
    color: var(--text-muted, #6b7280);
    display: flex;
    align-items: center;
    gap: .3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.ccard-meta .bi { opacity: .6; font-size: .8rem; }

/* ─── إحصائيات أسفل الكارت ─── */
.ccard-stats {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px solid var(--border, #e5e7eb);
}
.ccard-stat { text-align: center; flex: 1; }
.ccard-stat-num {
    display: block;
    font-size: .9rem;
    font-weight: 800;
    color: var(--text, #111);
    line-height: 1.2;
}
.ccard-stat-lbl {
    display: block;
    font-size: .7rem;
    color: var(--text-muted, #9ca3af);
    margin-top: .1rem;
}
.ccard-divider {
    width: 1px; height: 28px;
    background: var(--border, #e5e7eb);
    flex-shrink: 0;
}

/* ─── تذييل الكارت ─── */
.ccard-footer {
    padding: .75rem 1.1rem;
    border-top: 1px solid var(--border, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    background: var(--bg-subtle, #f9fafb);
}
.ccard-btn-primary {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: .35rem .9rem;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    display: flex; align-items: center; gap: .35rem;
    transition: opacity .2s;
    cursor: pointer;
}
.ccard-btn-primary:hover { opacity: .88; }
.ccard-btn-ghost {
    background: transparent;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: .3rem .6rem;
    color: var(--text-muted, #6b7280);
    font-size: .82rem;
    transition: all .18s;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex; align-items: center;
}
.ccard-btn-ghost:hover { background: var(--border, #e5e7eb); color: var(--text, #111); }
.ccard-btn-ghost.danger:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }

/* ─── زر التبديل بين الكروت والجدول ─── */
.view-toggle .view-btn.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

/* ─── dark mode ─── */
@media (prefers-color-scheme: dark) {
    .ccard { background:#1e2535; border-color:rgba(255,255,255,.08); }
    .ccard-footer { background:#161d2e; border-color:rgba(255,255,255,.07); }
    .ccard-stats  { border-color:rgba(255,255,255,.08); }
    .ccard-divider { background:rgba(255,255,255,.08); }
    .ccard-name   { color:#e2e8f0; }
    .ccard-btn-ghost { border-color:rgba(255,255,255,.1); color:#94a3b8; }
    .ccard-btn-ghost:hover { background:rgba(255,255,255,.08); color:#e2e8f0; }
}



/* ═══════════════════════════════════════════════════════════════
   AI Wizard — Immersive Dark Glass Design
   ═══════════════════════════════════════════════════════════════ */

#aiWizardOverlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.wz-backdrop {
  position: absolute; inset: 0;
  background: rgba(5,10,25,.85);
  backdrop-filter: blur(8px);
}
.wz-shell {
  position: relative; z-index: 1;
  width: min(96vw, 680px);
  height: min(92vh, 780px);
  background: linear-gradient(160deg,var(--navy) 0%,var(--navy-3) 55%,var(--navy-4) 100%);
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 0 1px rgba(99,102,241,.15), 0 40px 100px rgba(0,0,0,.6),
              inset 0 1px 0 rgba(255,255,255,.07);
  display: flex; flex-direction: column;
  overflow: hidden;
  font-family: 'Cairo', sans-serif;
}
.wz-orb { position:absolute; border-radius:50%; pointer-events:none; z-index:0; filter:blur(60px); opacity:.3; }
.wz-orb1 { width:280px; height:280px; background:#3b82f6; top:-80px; right:-60px; }
.wz-orb2 { width:220px; height:220px; background:#7c3aed; bottom:-60px; left:-40px; }
.wz-orb3 { width:160px; height:160px; background:#dc2626; top:40%; left:30%; opacity:.18; }

/* ── Topbar ── */
.wz-topbar {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px 13px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.wz-topbar-brand { display:flex; align-items:center; gap:10px; flex:1; }
.wz-logo {
  width:34px; height:34px; border-radius:11px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; color:#fff;
  box-shadow: 0 4px 14px rgba(99,102,241,.4);
  position:relative;
}
.wz-logo::after {
  content:''; position:absolute; top:-3px; left:-3px;
  width:10px; height:10px; border-radius:50%;
  background:#ef4444;
  box-shadow:0 0 8px rgba(239,68,68,.8);
  border:1.5px solid rgba(20,20,40,.9);
  animation:wzRedPulse 2s ease-in-out infinite;
}
@keyframes wzRedPulse {
  0%,100% { transform:scale(1);   box-shadow:0 0 6px rgba(239,68,68,.7); }
  50%      { transform:scale(1.3); box-shadow:0 0 14px rgba(239,68,68,.9); }
}
.wz-topbar-brand span { font-size:15px; font-weight:700; color:#e2e8f0; }
.wz-progress { display:flex; align-items:center; gap:8px; transition:opacity .3s; }
.wz-progress-track { width:80px; height:4px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; }
.wz-progress-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,#6366f1,#8b5cf6); transition:width .4s cubic-bezier(.4,0,.2,1); }
.wz-progress-label { font-size:11px; color:rgba(255,255,255,.35); white-space:nowrap; }
.wz-x {
  width:30px; height:30px; border-radius:9px;
  background:rgba(255,255,255,.06); border:none;
  color:rgba(255,255,255,.45); font-size:17px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.15s;
}
.wz-x:hover { background:rgba(255,255,255,.12); color:#fff; }
.wz-theme-btn {
  width:30px; height:30px; border-radius:9px;
  background:rgba(255,255,255,.06); border:none;
  color:rgba(255,255,255,.45); font-size:14px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.2s;
}
.wz-theme-btn:hover { background:rgba(255,255,255,.12); color:#fbbf24; }

/* ── Slides ── */
.wz-slides { flex:1; position:relative; overflow:hidden; z-index:1; }
.wz-slide { position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.08) transparent; }
.wz-center-wrap {
  min-height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:24px 28px; text-align:center;
}
.wz-slide-inner { padding:20px 20px 12px; }
.wz-slide-head { margin-bottom:16px; }
.wz-slide-title { font-size:20px; font-weight:800; color:#fff; margin:0 0 3px; }
.wz-slide-sub   { font-size:13px; color:rgba(255,255,255,.38); margin:0; }

/* ── S0 Dialect ── */
/* genie illustration */
.wz-genie-wrap {
  margin-bottom:10px;
  filter:drop-shadow(0 8px 32px rgba(99,102,241,.45));
  animation:wzGenieFloat 4s ease-in-out infinite;
}
.wz-genie-svg { width:160px; height:auto; display:block; margin:0 auto; }
@keyframes wzGenieFloat {
  0%,100% { transform:translateY(0) rotate(0deg); }
  30%     { transform:translateY(-10px) rotate(.8deg); }
  70%     { transform:translateY(-6px) rotate(-.8deg); }
}
.wz-splash-title { font-size:28px; font-weight:800; color:#fff; margin:0 0 5px; }
.wz-splash-sub   { font-size:14px; color:rgba(255,255,255,.4); margin:0 0 22px; }
/* light mode genie glow */
.wz-light .wz-genie-wrap { filter:drop-shadow(0 8px 28px rgba(99,102,241,.3)); }
.wz-lang-row { display:flex; gap:12px; }
.wz-lang-btn {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:16px 20px; border-radius:16px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  cursor:pointer; transition:.2s; color:#fff; font-family:'Cairo',sans-serif; min-width:105px;
}
.wz-lang-btn:hover { background:rgba(99,102,241,.2); border-color:rgba(99,102,241,.5); transform:translateY(-3px); }
.wz-lang-btn.selected { background:rgba(99,102,241,.3); border-color:rgba(99,102,241,.7); }
.wz-lang-flag { font-size:32px; }
.wz-lang-btn strong { font-size:13.5px; font-weight:700; }

/* ── S1 Service ── */
.wz-greeting-time {
  font-size:11.5px; font-weight:700; letter-spacing:1.5px;
  color:#6366f1; background:rgba(99,102,241,.1);
  border:1px solid rgba(99,102,241,.3); border-radius:99px;
  padding:3px 14px; margin-bottom:12px; display:inline-block;
}
.wz-greeting-h   { font-size:24px; font-weight:800; color:#fff; margin:0 0 5px; }
.wz-greeting-sub { font-size:13.5px; color:rgba(255,255,255,.4); margin:0 0 22px; }

/* 5-card grid */
.wz-svc2-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
  width:100%; max-width:420px;
}
.wz-svc2-card {
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:22px 12px 16px; border-radius:20px;
  border:1.5px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.04);
  cursor:pointer; transition:.22s; font-family:'Cairo',sans-serif;
  color:#fff; text-align:center; position:relative; overflow:hidden;
}
.wz-svc2-card::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:var(--sc,#6366f1); opacity:0; transition:.22s; pointer-events:none;
}
.wz-svc2-card:hover::before { opacity:.1; }
.wz-svc2-card:hover {
  border-color:var(--sc,#6366f1);
  transform:translateY(-5px);
  box-shadow:0 16px 40px rgba(0,0,0,.4);
}
.wz-svc2-icon {
  width:60px; height:60px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  font-size:25px; color:#fff;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
  transition:.22s; position:relative; z-index:1;
}
.wz-svc2-card:hover .wz-svc2-icon { transform:scale(1.1) rotate(-4deg); }
.wz-svc2-card strong {
  font-size:13px; font-weight:800; line-height:1.3;
  position:relative; z-index:1;
}
.wz-svc2-card > span {
  font-size:10.5px; color:rgba(255,255,255,.3);
  position:relative; z-index:1;
}
.wz-s6-note {
  font-size:9.5px; font-weight:700; letter-spacing:.5px;
  color:var(--sc,#6366f1); background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1); border-radius:99px;
  padding:2px 10px; position:relative; z-index:1; margin-top:2px;
}

/* confirm panel */
.wz-confirm-panel {
  position:absolute; inset:0; z-index:65;
  display:flex; align-items:flex-end;
  background:rgba(0,0,0,.6); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .25s;
  border-radius:inherit;
}
.wz-confirm-panel.open { opacity:1; pointer-events:all; }
.wz-confirm-inner {
  width:100%; background:rgba(10,10,22,.97);
  border-top:1px solid rgba(255,255,255,.1);
  border-radius:24px 24px 0 0; padding:10px 24px 36px;
  transform:translateY(100%); transition:.32s cubic-bezier(.4,0,.2,1);
  font-family:'Cairo',sans-serif; text-align:center;
}
.wz-confirm-panel.open .wz-confirm-inner { transform:translateY(0); }
.wz-confirm-icon {
  width:60px; height:60px; border-radius:50%; margin:8px auto 14px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  display:flex; align-items:center; justify-content:center;
  font-size:26px; color:#fff;
  box-shadow:0 8px 24px rgba(99,102,241,.45);
}
.wz-confirm-title { font-size:17px; font-weight:800; color:#fff; margin:0 0 16px; }
.wz-confirm-rows {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:4px 0; margin-bottom:18px; text-align:right;
}
.wz-confirm-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px; font-size:13px; color:rgba(255,255,255,.5);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.wz-confirm-row:last-child { border-bottom:none; }
.wz-confirm-row strong { color:#e2e8f0; font-weight:700; }
.wz-confirm-ok {
  flex:2; padding:13px; border-radius:12px; border:none;
  background:linear-gradient(135deg,#16a34a,#22c55e);
  color:#fff; font-family:'Cairo',sans-serif;
  font-size:14px; font-weight:800; cursor:pointer; transition:.15s;
  display:flex; align-items:center; justify-content:center; gap:7px;
  box-shadow:0 6px 20px rgba(34,197,94,.35);
}
.wz-confirm-ok:hover { opacity:.9; transform:translateY(-1px); }

/* light mode */
.wz-light .wz-confirm-inner { background:rgba(248,249,255,.98); border-top-color:rgba(0,0,0,.08); }
.wz-light .wz-confirm-title { color:#1e1e2e; }
.wz-light .wz-confirm-rows { background:rgba(255,255,255,.8); border-color:rgba(0,0,0,.08); }
.wz-light .wz-confirm-row { color:#64748b; }
.wz-light .wz-confirm-row strong { color:#1e1e2e; }

/* manual item panel */
.wz-mp-panel {
  position:absolute; inset:0; z-index:60;
  display:flex; align-items:flex-end;
  background:rgba(0,0,0,.55); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .25s;
  border-radius:inherit;
}
.wz-mp-panel.open { opacity:1; pointer-events:all; }
.wz-mp-inner {
  width:100%; background:rgba(14,14,26,.97);
  border-top:1px solid rgba(255,255,255,.1);
  border-radius:24px 24px 0 0; padding:10px 22px 36px;
  transform:translateY(100%); transition:.32s cubic-bezier(.4,0,.2,1);
  font-family:'Cairo',sans-serif;
}
.wz-mp-panel.open .wz-mp-inner { transform:translateY(0); }
.wz-mp-handle {
  width:40px; height:4px; border-radius:99px;
  background:rgba(255,255,255,.12); margin:0 auto 20px;
}
.wz-mp-title {
  font-size:16px; font-weight:800; color:#fff;
  margin:0 0 20px; display:flex; align-items:center; gap:8px;
}
.wz-mp-title i { color:#6366f1; }
.wz-mp-field { display:flex; flex-direction:column; gap:6px; }
.wz-mp-field label {
  font-size:10.5px; font-weight:700; color:rgba(255,255,255,.35);
  letter-spacing:.6px; text-transform:uppercase;
}
.wz-mp-inp {
  background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.1);
  border-radius:12px; padding:11px 14px; color:#fff;
  font-size:14px; font-family:'Cairo',sans-serif; outline:none; transition:.15s; width:100%;
}
.wz-mp-inp:focus { border-color:rgba(99,102,241,.6); background:rgba(99,102,241,.07); }
.wz-mp-inp::placeholder { color:rgba(255,255,255,.2); }
.wz-mp-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.wz-mp-btns { display:flex; gap:10px; margin-top:22px; }
.wz-mp-cancel {
  flex:1; padding:13px; border-radius:12px;
  border:1.5px solid rgba(255,255,255,.1); background:transparent;
  color:rgba(255,255,255,.45); font-family:'Cairo',sans-serif;
  font-size:14px; font-weight:700; cursor:pointer; transition:.15s;
}
.wz-mp-cancel:hover { background:rgba(255,255,255,.06); color:#fff; }
.wz-mp-confirm {
  flex:2; padding:13px; border-radius:12px; border:none;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff; font-family:'Cairo',sans-serif;
  font-size:14px; font-weight:800; cursor:pointer; transition:.15s;
  display:flex; align-items:center; justify-content:center; gap:7px;
  box-shadow:0 6px 20px rgba(99,102,241,.35);
}
.wz-mp-confirm:hover { opacity:.9; transform:translateY(-1px); }

/* toast inside wizard */
.wz-toast {
  position:absolute; bottom:80px; left:50%; transform:translateX(-50%) translateY(10px);
  background:rgba(30,30,40,.92); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(12px); border-radius:99px;
  padding:9px 22px; font-size:13px; font-weight:600; color:#fff;
  font-family:'Cairo',sans-serif; white-space:nowrap;
  opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; z-index:99;
}
.wz-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── S2 Customer ── */
.wz-search-glass {
  display:flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:13px; padding:10px 15px; margin-bottom:14px; transition:.15s;
}
.wz-search-glass:focus-within { border-color:rgba(99,102,241,.5); background:rgba(99,102,241,.08); }
.wz-search-glass i { color:rgba(255,255,255,.3); font-size:14px; }
.wz-search-glass-inp { background:none; border:none; outline:none; color:#fff; font-family:'Cairo',sans-serif; font-size:14px; flex:1; }
.wz-search-glass-inp::placeholder { color:rgba(255,255,255,.2); }
.wz-cust-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  max-height:420px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.08) transparent;
  margin-top:12px; padding-top:8px;
}
.wz-cust-empty {
  grid-column:1/-1; text-align:center;
  color:rgba(255,255,255,.3); padding:30px; font-size:14px;
}
/* card */
.wz-cust-card {
  display:flex; flex-direction:column; align-items:center;
  padding:16px 10px 12px; border-radius:18px;
  border:1.5px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.04);
  cursor:pointer; transition:.22s; font-family:'Cairo',sans-serif;
  position:relative; overflow:hidden; text-align:center;
}
/* hover glow uses CSS var set per-card */
.wz-cust-card::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:var(--av-color,#6366f1);
  opacity:0; transition:.22s;
}
.wz-cust-card:hover::before { opacity:.08; }
.wz-cust-card:hover { border-color:var(--av-color,#6366f1); transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,.35); }
/* selected state */
.wz-cust-card.selected { border-color:var(--av-color,#6366f1); }
.wz-cust-card.selected::before { opacity:.14; }
.wz-cust-card.selected { box-shadow:0 0 0 2px var(--av-color,#6366f1),0 14px 36px rgba(0,0,0,.35); }
/* selected ring/check */
.wz-cc-sel-ring {
  position:absolute; top:8px; left:8px;
  width:22px; height:22px; border-radius:99px;
  background:var(--av-color,#6366f1);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:#fff; font-weight:700;
  opacity:0; transform:scale(.4); transition:.2s;
}
.wz-cust-card.selected .wz-cc-sel-ring { opacity:1; transform:scale(1); }
/* avatar circle */
.wz-cc-avatar {
  width:54px; height:54px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:800; color:#fff;
  margin-bottom:10px; position:relative; z-index:1;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:.22s;
}
.wz-cust-card:hover .wz-cc-avatar { transform:scale(1.08); }
.wz-cust-card.selected .wz-cc-avatar {
  box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 3px rgba(255,255,255,.15);
}
/* name */
.wz-cc-name {
  font-size:12px; font-weight:700; color:#e2e8f0;
  line-height:1.35; position:relative; z-index:1;
  word-break:break-word;
}
/* vat */
.wz-cc-vat {
  font-size:10px; color:rgba(255,255,255,.25);
  margin-top:3px; position:relative; z-index:1;
}
.wz-skeleton-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; grid-column:1/-1; }
.wz-skel { border-radius:13px; background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%); background-size:200% 100%; animation:wzSkel 1.5s ease infinite; }
@keyframes wzSkel { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ══════════════════════════════════════════════
   S3 — KIOSK
   ══════════════════════════════════════════════ */
.wz-kiosk-head {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:14px;
}
.wz-cart-badge {
  display:flex; align-items:center; gap:5px;
  background:linear-gradient(135deg,#f59e0b,#f97316);
  color:#fff; border-radius:99px; padding:5px 12px;
  font-size:13px; font-weight:700;
  box-shadow:0 4px 14px rgba(245,158,11,.35);
  animation:wzBadgePop .3s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes wzBadgePop { from{transform:scale(.5)} to{transform:scale(1)} }

/* Kiosk grid */
.wz-kiosk-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  max-height:480px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.08) transparent;
}

/* Kiosk card */
.wz-kcard {
  border-radius:16px; border:1.5px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  cursor:pointer; transition:.2s; overflow:hidden;
  display:flex; flex-direction:column;
  position:relative;
}
.wz-kcard:hover:not(.selected) {
  border-color:rgba(99,102,241,.4);
  background:rgba(99,102,241,.08);
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(0,0,0,.3);
}
.wz-kcard.selected {
  border-color:rgba(99,102,241,.8);
  background:rgba(99,102,241,.12);
  box-shadow:0 0 0 2px rgba(99,102,241,.3), 0 10px 28px rgba(99,102,241,.15);
}

/* Icon area */
.wz-kcard-icon {
  width:58px; height:58px; border-radius:17px;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; color:#fff; position:relative;
  margin:16px auto 4px;
  box-shadow:0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.25);
  transition:.22s; flex-shrink:0;
}
.wz-kcard:hover .wz-kcard-icon { transform:scale(1.08) rotate(-4deg); }
.wz-kcard-icon i { filter:drop-shadow(0 3px 6px rgba(0,0,0,.3)); }

/* Selected check */
.wz-kcard-check {
  position:absolute; top:7px; left:7px;
  width:22px; height:22px; border-radius:99px;
  background:#6366f1; color:#fff; font-size:11px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:.15s; transform:scale(.5);
}
.wz-kcard.selected .wz-kcard-check { opacity:1; transform:scale(1); }

/* Info */
.wz-kcard-info {
  padding:6px 10px 12px; flex:1; display:flex; flex-direction:column; gap:3px;
  align-items:center;
}
.wz-kcard-name {
  font-size:12px; font-weight:800; color:#e2e8f0;
  line-height:1.3; text-align:center;
}
.wz-kcard-price {
  font-size:11.5px; color:rgba(255,255,255,.45);
  text-align:center;
}

/* Selected controls */
.wz-kcard-controls {
  padding:8px 10px 10px;
  display:none; flex-direction:column; gap:6px;
}
.wz-kcard.selected .wz-kcard-controls { display:flex; }
.wz-kcard.selected .wz-kcard-info { padding-bottom:0; }

/* Qty stepper */
.wz-stepper {
  display:flex; align-items:center; justify-content:center; gap:0;
  background:rgba(255,255,255,.06); border-radius:10px; overflow:hidden;
}
.wz-stepper-btn {
  width:30px; height:28px; border:none;
  background:rgba(255,255,255,.08); color:#fff; font-size:16px; font-weight:700;
  cursor:pointer; transition:.12s; display:flex; align-items:center; justify-content:center;
}
.wz-stepper-btn:hover { background:rgba(99,102,241,.3); }
.wz-stepper-qty {
  flex:1; text-align:center; font-size:14px; font-weight:800; color:#fff;
  background:none; border:none; outline:none; font-family:'Cairo',sans-serif;
  min-width:0; padding:0 4px;
  -moz-appearance:textfield;
}
.wz-stepper-qty::-webkit-inner-spin-button,
.wz-stepper-qty::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
/* Price input on card */
.wz-kcard-price-inp {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:8px; padding:4px 8px; color:#a5b4fc;
  font-family:'Cairo',sans-serif; font-size:12px; font-weight:700;
  width:100%; text-align:center; transition:.12s;
}
.wz-kcard-price-inp:focus { outline:none; border-color:rgba(99,102,241,.5); background:rgba(99,102,241,.1); }
.wz-kcard-qty-vat-row { display:flex; align-items:stretch; gap:8px; }
.wz-kcard-qty-vat-row .wz-stepper { flex:1; }
.wz-kcard-vat-wrap { flex-shrink:0; display:flex; align-items:stretch; }
.wz-kcard-vat-inp {
  color:#f87171; width:72px;
  height:100%; padding-top:0; padding-bottom:0;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23f87171'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 6px center; background-size:8px;
  padding-left:20px; cursor:pointer;
}
.wz-kcard-price-lbl { font-size:10px; color:rgba(255,255,255,.3); text-align:center; }

.wz-manual-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; margin-top:12px; padding:11px;
  border-radius:13px; border:1.5px dashed rgba(255,255,255,.15);
  background:transparent; color:rgba(255,255,255,.35);
  font-family:'Cairo',sans-serif; font-size:13.5px; cursor:pointer; transition:.15s;
}
.wz-manual-btn:hover { border-color:rgba(99,102,241,.4); color:rgba(255,255,255,.6); }

/* ══════════════════════════════════════════════
   S4 — Cart
   ══════════════════════════════════════════════ */
/* ── S4 Customer hero ── */
.wz-s4-cust {
  display:flex; align-items:center; gap:13px;
  padding:14px 16px; border-radius:18px; margin-bottom:16px;
  background:linear-gradient(135deg,rgba(99,102,241,.13),rgba(139,92,246,.07));
  border:1.5px solid rgba(99,102,241,.28); position:relative; overflow:hidden;
}
.wz-s4-cust::after {
  content:''; position:absolute; top:-30px; right:-30px;
  width:100px; height:100px; border-radius:50%;
  background:radial-gradient(circle,rgba(99,102,241,.22),transparent 70%);
  pointer-events:none;
}
.wz-cca {
  width:46px; height:46px; border-radius:13px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; font-weight:800; color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.wz-s4-cust-info { flex:1; min-width:0; }
.wz-s4-cust-lbl { font-size:9.5px; font-weight:700; color:rgba(255,255,255,.35); letter-spacing:.9px; text-transform:uppercase; margin-bottom:3px; }
.wz-s4-cust-name { font-size:15px; font-weight:800; color:#fff; }
.wz-s4-mode-badge {
  font-size:10px; font-weight:700; border-radius:99px;
  padding:3px 10px; border:1px solid; letter-spacing:.4px; flex-shrink:0;
}
.wz-s4-cust-ok {
  width:32px; height:32px; border-radius:10px; flex-shrink:0;
  background:rgba(99,102,241,.2); border:1px solid rgba(99,102,241,.35);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:#a5b4fc;
}

/* items header */
.wz-s4-items-hd {
  display:flex; align-items:center; justify-content:space-between;
  font-size:10px; font-weight:700; color:rgba(255,255,255,.28);
  letter-spacing:.9px; text-transform:uppercase; margin-bottom:10px;
}
.wz-s4-count {
  background:rgba(255,255,255,.08); border-radius:99px;
  padding:2px 10px; font-size:11px; color:rgba(255,255,255,.38);
}

/* cart items */
.wz-cart-list { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.wz-cart-item {
  display:flex; align-items:center; gap:11px;
  padding:11px 14px; border-radius:14px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07);
  position:relative; overflow:hidden;
}
.wz-cart-item::before {
  content:''; position:absolute; right:0; top:0; bottom:0; width:3px;
  background:var(--ci-c,#6366f1); border-radius:0 14px 14px 0;
}
.wz-ci-num {
  width:28px; height:28px; border-radius:8px; flex-shrink:0;
  background:rgba(var(--ci-cr,99,102,241),.14);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:var(--ci-c,#a5b4fc);
}
.wz-ci-icon {
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.wz-ci-info { flex:1; min-width:0; }
.wz-ci-name { font-size:13px; font-weight:700; color:#e2e8f0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wz-ci-meta { font-size:11px; color:rgba(255,255,255,.28); margin-top:2px; }
.wz-ci-vat  { color:#34d399; font-weight:600; }
.wz-ci-total { font-size:13.5px; font-weight:800; color:#a5b4fc; white-space:nowrap; }

/* totals card */
.wz-s4-totals {
  border-radius:18px; overflow:hidden; margin-bottom:13px;
  border:1.5px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.wz-s4-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 18px; font-size:12.5px; color:rgba(255,255,255,.42);
}
.wz-s4-pct {
  font-style:normal; font-size:10px; font-weight:700;
  background:rgba(99,102,241,.2); border:1px solid rgba(99,102,241,.3);
  border-radius:99px; padding:1px 7px; color:#a5b4fc; margin-right:4px;
}
.wz-s4-sep {
  height:1px; margin:0 18px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
}
.wz-s4-grand-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px;
  background:linear-gradient(135deg,rgba(99,102,241,.16),rgba(139,92,246,.1));
}
.wz-s4-grand-row > span { font-size:13px; font-weight:700; color:rgba(255,255,255,.5); }
.wz-s4-grand-num {
  font-size:26px; font-weight:900; color:#a5b4fc;
  text-shadow:0 0 28px rgba(99,102,241,.65);
}

/* S7 payment method cards */
.wz-pay7-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  width:100%; max-width:420px;
}
.wz-pay7-card {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:28px 14px 20px; border-radius:22px;
  border:1.5px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.04);
  cursor:pointer; transition:.22s; font-family:'Cairo',sans-serif;
  color:#fff; text-align:center; position:relative; overflow:hidden;
}
.wz-pay7-card::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:var(--pc,#6366f1); opacity:0; transition:.22s; pointer-events:none;
}
.wz-pay7-card:hover::before { opacity:.1; }
.wz-pay7-card:hover {
  border-color:var(--pc,#6366f1);
  transform:translateY(-6px);
  box-shadow:0 18px 44px rgba(0,0,0,.4);
}
.wz-pay7-card.selected {
  border-color:var(--pc,#6366f1);
  box-shadow:0 0 0 2px var(--pc,#6366f1), 0 18px 44px rgba(0,0,0,.4);
}
.wz-pay7-card.selected::before { opacity:.15; }
.wz-pay7-icon {
  width:64px; height:64px; border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  font-size:27px; color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:.22s; position:relative; z-index:1;
}
.wz-pay7-card:hover .wz-pay7-icon,
.wz-pay7-card.selected .wz-pay7-icon { transform:scale(1.1) rotate(-4deg); }
.wz-pay7-card strong { font-size:14px; font-weight:800; position:relative; z-index:1; }
.wz-pay7-card > span  { font-size:11px; color:rgba(255,255,255,.3); position:relative; z-index:1; }

/* light mode */
.wz-light .wz-pay7-card { background:rgba(255,255,255,.85); border-color:rgba(0,0,0,.08); }
.wz-light .wz-pay7-card:hover { background:#fff; box-shadow:0 18px 44px rgba(0,0,0,.1); }
.wz-light .wz-pay7-card strong { color:#1e1e2e; }
.wz-light .wz-pay7-card > span { color:#94a3b8; }

/* ── تنبيه المعالج الذكي (S9 — وضع القبض) ── */
.wz-wizard-notice {
  display:flex; align-items:flex-start; gap:14px;
  background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(168,85,247,.1));
  border:1.5px solid rgba(99,102,241,.35);
  border-radius:18px; padding:16px 18px; margin-bottom:18px;
  max-width:480px; width:100%;
}
.wz-wn-icon {
  width:38px; height:38px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:#fff;
  box-shadow:0 6px 16px rgba(99,102,241,.35);
}
.wz-wn-body { display:flex; flex-direction:column; gap:4px; }
.wz-wn-body strong { font-size:13px; font-weight:800; color:#c4b5fd; }
.wz-wn-body span { font-size:12px; color:rgba(255,255,255,.45); line-height:1.5; }
.wz-wn-body a { color:#a5b4fc; text-decoration:underline; }
.wz-wn-body a:hover { color:#c4b5fd; }
.wz-light .wz-wizard-notice { background:rgba(99,102,241,.07); border-color:rgba(99,102,241,.2); }
.wz-light .wz-wn-body strong { color:#4f46e5; }
.wz-light .wz-wn-body span { color:#64748b; }
.wz-light .wz-wn-body a { color:#6366f1; }

/* ── S8: Amount Entry (Receipt / Voucher) ── */
.wz-s8-party {
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:16px; padding:10px 16px; margin-bottom:24px;
  max-width:360px; width:100%;
}
.wz-s8-party-av {
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:800; color:#fff; flex-shrink:0;
}
.wz-s8-party-name { font-size:15px; font-weight:700; color:#fff; }

.wz-s8-amount-card {
  background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.1);
  border-radius:20px; padding:20px 24px; margin-bottom:16px;
  max-width:360px; width:100%; overflow:visible;
}
.wz-s8-amt-lbl { font-size:12px; color:rgba(255,255,255,.45); font-weight:600; display:block; margin-bottom:8px; }
.wz-s8-amt-row { display:flex; justify-content:center; }
.wz-s8-amt-inp {
  background:transparent; border:none; outline:none;
  font-size:48px; font-weight:800; color:#fff; text-align:center;
  font-family:inherit; direction:ltr; width:100%;
  -moz-appearance:textfield;
}
.wz-s8-amt-inp::-webkit-inner-spin-button,
.wz-s8-amt-inp::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.wz-s8-amt-inp::placeholder { color:rgba(255,255,255,.2); }

.wz-s8-inv-panel {
  max-width:360px; width:100%; margin-bottom:16px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:12px 16px; display:flex; flex-direction:column; gap:8px;
}
.wz-s8-inv-row { display:flex; justify-content:space-between; align-items:center; }
.wz-s8-inv-lbl { font-size:11px; color:rgba(255,255,255,.4); font-weight:600; }
.wz-s8-inv-val { font-size:13px; font-weight:700; color:#fff; }
.wz-s8-inv-rem { font-size:15px; font-weight:800; color:#6ee7b7; }
.wz-light .wz-s8-party-name { color:#1e1e2e; }
.wz-light .wz-s8-amount-card { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.1); }
.wz-light .wz-s8-amt-lbl { color:#64748b; }
.wz-light .wz-s8-amt-inp { color:#1e1e2e; }
.wz-light .wz-s8-amt-inp::placeholder { color:#cbd5e1; }
.wz-light .wz-s8-inv-panel { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.1); }
.wz-light .wz-s8-inv-lbl { color:#94a3b8; }
.wz-light .wz-s8-inv-val { color:#1e1e2e; }
.wz-light .wz-s8-inv-rem { color:#059669; }

.wz-s8-desc-wrap { max-width:360px; width:100%; margin-bottom:16px; }
.wz-s8-desc-wrap .wz-mp-inp { width:100%; }

.wz-s8-method-row {
  display:flex; gap:12px; max-width:360px; width:100%;
}
.wz-s8-mcard {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:8px;
  background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.1);
  border-radius:16px; padding:16px 10px; cursor:pointer;
  transition:all .2s; color:rgba(255,255,255,.6);
}
.wz-s8-mcard i { font-size:22px; }
.wz-s8-mcard span { font-size:13px; font-weight:700; }
.wz-s8-mcard:hover { background:rgba(255,255,255,.1); color:#fff; transform:translateY(-2px); }
.wz-s8-mcard.selected {
  background:rgba(16,185,129,.2); border-color:rgba(16,185,129,.5);
  color:#6ee7b7; box-shadow:0 6px 20px rgba(16,185,129,.2);
}
.wz-light .wz-s8-mcard { background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.1); color:#475569; }
.wz-light .wz-s8-mcard:hover { background:rgba(0,0,0,.09); color:#1e1e2e; transform:translateY(-2px); }
.wz-light .wz-s8-mcard.selected { background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.4); color:#059669; }

/* ── S9: Invoice Picker (Credit Note) ── */
.wz-inv-list { display:flex; flex-direction:column; gap:10px; }
.wz-inv-card {
  display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.08);
  border-radius:14px; padding:14px 16px; cursor:pointer;
  transition:all .2s; position:relative; overflow:hidden;
}
.wz-inv-card::before {
  content:''; position:absolute; inset:0;
  background:rgba(248,163,100,.07); opacity:0; transition:opacity .2s;
}
.wz-inv-card:hover { border-color:rgba(248,163,100,.35); transform:translateX(-2px); }
.wz-inv-card:hover::before { opacity:1; }
.wz-inv-card.selected {
  background:rgba(248,163,100,.12); border-color:rgba(248,163,100,.5);
  box-shadow:0 6px 20px rgba(248,163,100,.15);
}
.wz-inv-check {
  width:24px; height:24px; border-radius:50%;
  background:linear-gradient(135deg,#f97316,#ea580c);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:14px; font-weight:800;
  opacity:0; transform:scale(0.5); transition:all .2s;
  flex-shrink:0;
}
.wz-inv-check.show { opacity:1; transform:scale(1); }
.wz-inv-info { flex:1; min-width:0; }
.wz-inv-num { font-size:14px; font-weight:800; color:#fff; }
.wz-inv-date { font-size:11px; color:rgba(255,255,255,.4); margin-top:2px; }
.wz-inv-total { font-size:15px; font-weight:800; color:#f6d27c; flex-shrink:0; }
.wz-inv-remain { font-size:11px; color:rgba(255,255,255,.4); text-align:left; }
.wz-inv-empty { text-align:center; color:rgba(255,255,255,.3); padding:30px 20px; font-size:14px; }
.wz-light .wz-inv-card { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.08); }
.wz-light .wz-inv-card.selected { background:rgba(248,163,100,.08); border-color:rgba(248,163,100,.4); }
.wz-light .wz-inv-num { color:#1e1e2e; }
.wz-light .wz-inv-total { color:#c2410c; }
.wz-light .wz-inv-date { color:#94a3b8; }

/* payment method section */
.wz-s4-pay {
  background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.08);
  border-radius:16px; padding:14px 16px; margin-bottom:13px;
}
.wz-s4-pay-lbl {
  font-size:10.5px; font-weight:700; color:rgba(255,255,255,.35);
  letter-spacing:.8px; text-transform:uppercase; margin-bottom:10px;
}
.wz-s4-pay-opts { display:flex; gap:8px; }
.wz-pay-opt {
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 8px; border-radius:11px; border:1.5px solid rgba(255,255,255,.1);
  background:transparent; color:rgba(255,255,255,.45);
  font-family:'Cairo',sans-serif; font-size:13px; font-weight:700;
  cursor:pointer; transition:.18s;
}
.wz-pay-opt:hover { border-color:rgba(255,255,255,.25); color:#fff; background:rgba(255,255,255,.06); }
.wz-pay-opt.active[data-pay="defer"] { border-color:#94a3b8; background:rgba(148,163,184,.15); color:#e2e8f0; }
.wz-pay-opt.active[data-pay="cash"]  { border-color:#10b981; background:rgba(16,185,129,.15); color:#6ee7b7; }
.wz-pay-opt.active[data-pay="bank"]  { border-color:#3b82f6; background:rgba(59,130,246,.15); color:#93c5fd; }

/* light mode */
.wz-light .wz-s4-pay { background:rgba(255,255,255,.8); border-color:rgba(0,0,0,.08); }
.wz-light .wz-s4-pay-lbl { color:#94a3b8; }
.wz-light .wz-pay-opt { border-color:rgba(0,0,0,.1); color:#64748b; }
.wz-light .wz-pay-opt:hover { background:rgba(0,0,0,.04); color:#1e1e2e; }
.wz-light .wz-pay-opt.active[data-pay="defer"] { border-color:#64748b; background:rgba(100,116,139,.1); color:#334155; }
.wz-light .wz-pay-opt.active[data-pay="cash"]  { border-color:#10b981; background:rgba(16,185,129,.08); color:#065f46; }
.wz-light .wz-pay-opt.active[data-pay="bank"]  { border-color:#3b82f6; background:rgba(59,130,246,.08); color:#1d4ed8; }

/* trust strip */
.wz-s4-trust {
  display:flex; justify-content:center; gap:20px;
  font-size:11px; color:rgba(255,255,255,.22); padding:2px 0 6px;
}
.wz-s4-trust span { display:flex; align-items:center; gap:4px; }
.wz-s4-trust i { font-size:12px; color:rgba(99,102,241,.55); }

/* ── S5 Success ── */
.wz-success-ring {
  width:96px; height:96px; border-radius:50%;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  display:flex; align-items:center; justify-content:center;
  font-size:48px; color:#fff; margin-bottom:20px;
  animation:wzSuccIn .6s cubic-bezier(.175,.885,.32,1.275);
  box-shadow:0 0 60px rgba(34,197,94,.3);
}
@keyframes wzSuccIn { from{transform:scale(0) rotate(-180deg);opacity:0} to{transform:scale(1) rotate(0);opacity:1} }
.wz-success-title  { font-size:26px; font-weight:800; color:#fff; margin:0 0 10px; }
.wz-success-invnum { font-size:13.5px; color:rgba(255,255,255,.38); background:rgba(255,255,255,.06); border-radius:99px; padding:4px 16px; margin-bottom:8px; display:inline-block; }
.wz-success-grand  { font-size:30px; font-weight:800; color:#a5b4fc; margin-bottom:26px; }
.wz-success-btns   { display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; justify-content:center; }
.wz-succ-btn { display:flex; align-items:center; gap:7px; padding:10px 20px; border-radius:12px; font-family:'Cairo',sans-serif; font-size:14px; font-weight:700; text-decoration:none; transition:.15s; }
.wz-succ-outline { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:#e2e8f0; }
.wz-succ-outline:hover { background:rgba(255,255,255,.13); color:#fff; }
.wz-succ-pdf { background:linear-gradient(135deg,#ef4444,#dc2626); border:none; color:#fff; box-shadow:0 6px 20px rgba(239,68,68,.35); }
.wz-succ-pdf:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(239,68,68,.45); color:#fff; }
.wz-succ-primary { background:linear-gradient(135deg,#6366f1,#8b5cf6); border:none; color:#fff; box-shadow:0 6px 20px rgba(99,102,241,.35); }
.wz-succ-primary:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(99,102,241,.45); color:#fff; }
/* QR block */
.wz-succ-qr-wrap { margin:4px 0 18px; }
.wz-succ-qr-card {
  display:inline-flex; flex-direction:column; align-items:center; gap:8px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:20px; padding:16px;
  backdrop-filter:blur(8px);
}
.wz-succ-qr-img { width:130px; height:130px; border-radius:10px; display:block; }
.wz-succ-qr-label { font-size:10px; font-weight:700; letter-spacing:.12em; color:rgba(255,255,255,.35); text-transform:uppercase; }
.wz-light .wz-succ-qr-card { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.1); }
.wz-light .wz-succ-qr-label { color:#94a3b8; }
.wz-light .wz-succ-pdf { box-shadow:0 6px 20px rgba(239,68,68,.25); }
.wz-new-inv-btn { background:none; border:none; color:rgba(255,255,255,.28); font-family:'Cairo',sans-serif; font-size:13px; cursor:pointer; transition:.12s; display:flex; align-items:center; gap:5px; }
.wz-new-inv-btn:hover { color:rgba(255,255,255,.55); }
.wz-confetti-canvas { position:absolute; inset:0; pointer-events:none; width:100%; height:100%; }

/* ── Nav ── */
.wz-nav {
  position:relative; z-index:2;
  display:flex; align-items:center; gap:10px;
  padding:13px 20px;
  border-top:1px solid rgba(255,255,255,.06);
}
.wz-nav-spacer { flex:1; }
.wz-nav-back {
  width:40px; height:40px; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.55); font-size:17px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.15s;
}
.wz-nav-back:hover { background:rgba(255,255,255,.12); color:#fff; }
.wz-nav-next {
  display:flex; align-items:center; gap:7px;
  padding:10px 22px; border-radius:12px; border:none;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff; font-family:'Cairo',sans-serif;
  font-size:14px; font-weight:700; cursor:pointer; transition:.15s;
  box-shadow:0 6px 20px rgba(99,102,241,.35);
}
.wz-nav-next:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(99,102,241,.45); }
.wz-nav-next:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.wz-nav-next.issue { background:linear-gradient(135deg,#16a34a,#22c55e); box-shadow:0 6px 20px rgba(34,197,94,.3); }
.wz-nav-next.issue:hover { box-shadow:0 10px 28px rgba(34,197,94,.4); }

/* ══════════════════════════════════════════════
   LIGHT MODE — .wz-shell.wz-light
   ══════════════════════════════════════════════ */
/* shell */
.wz-shell.wz-light {
  background:linear-gradient(160deg,#f8f9ff 0%,#eef2ff 45%,#f3f0ff 100%);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 30px 80px rgba(0,0,0,.12);
}
.wz-light .wz-orb { opacity:.06; }

/* topbar */
.wz-light .wz-topbar {
  background:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(0,0,0,.07);
  backdrop-filter:blur(16px);
}
.wz-light #wzBrandName { color:#1e1e2e; }
.wz-light .wz-x { background:rgba(0,0,0,.05); color:#64748b; }
.wz-light .wz-x:hover { background:rgba(0,0,0,.1); color:#1e1e2e; }
.wz-light .wz-theme-btn { background:rgba(0,0,0,.05); color:#64748b; }
.wz-light .wz-theme-btn:hover { background:rgba(0,0,0,.1); color:#f59e0b; }
.wz-light .wz-progress-track { background:rgba(0,0,0,.09); }
.wz-light .wz-progress-label { color:#64748b; }

/* nav */
.wz-light .wz-nav {
  background:rgba(255,255,255,.9);
  border-top:1px solid rgba(0,0,0,.07);
  backdrop-filter:blur(12px);
}
.wz-light .wz-nav-back { background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.1); color:#64748b; }
.wz-light .wz-nav-back:hover { background:rgba(0,0,0,.09); color:#1e1e2e; }

/* S0 language */
.wz-light .wz-splash-title { color:#1e1e2e; }
.wz-light .wz-splash-sub   { color:#64748b; }
.wz-light .wz-lang-btn {
  background:rgba(255,255,255,.85); border-color:rgba(0,0,0,.1);
  color:#1e1e2e; box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.wz-light .wz-lang-btn:hover {
  background:#fff; border-color:rgba(99,102,241,.4);
  box-shadow:0 8px 24px rgba(99,102,241,.14);
}

/* S1 service */
.wz-light .wz-greeting-h   { color:#1e1e2e; }
.wz-light .wz-greeting-sub { color:#64748b; }
.wz-light .wz-svc2-card {
  background:rgba(255,255,255,.8); border-color:rgba(0,0,0,.08);
}
.wz-light .wz-svc2-card:hover { background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.1); }
.wz-light .wz-svc2-card strong { color:#1e1e2e; }
.wz-light .wz-svc2-card > span { color:#94a3b8; }

/* S2 customer */
.wz-light .wz-slide-title { color:#1e1e2e; }
.wz-light .wz-slide-sub   { color:#64748b; }
.wz-light .wz-search-glass {
  background:rgba(255,255,255,.85); border-color:rgba(0,0,0,.1);
}
.wz-light .wz-search-glass i { color:#94a3b8; }
.wz-light .wz-search-glass-inp { color:#1e1e2e; }
.wz-light .wz-search-glass-inp::placeholder { color:#94a3b8; }
.wz-light .wz-search-glass:focus-within { border-color:rgba(99,102,241,.4); background:#fff; }
.wz-light .wz-cust-card {
  background:rgba(255,255,255,.85); border-color:rgba(0,0,0,.08);
}
.wz-light .wz-cust-card:hover {
  background:#fff; box-shadow:0 12px 32px rgba(0,0,0,.1);
}
.wz-light .wz-cust-card.selected {
  box-shadow:0 0 0 2px var(--av-color,#6366f1),0 12px 30px rgba(0,0,0,.1);
}
.wz-light .wz-cc-name { color:#1e1e2e; }
.wz-light .wz-cc-vat  { color:#94a3b8; }
.wz-light .wz-cust-empty { color:#94a3b8; }

/* S3 kiosk */
.wz-light .wz-kcard {
  background:rgba(255,255,255,.85); border-color:rgba(0,0,0,.08);
}
.wz-light .wz-kcard:hover  { background:#fff; box-shadow:0 10px 28px rgba(0,0,0,.1); }
.wz-light .wz-kcard-name   { color:#1e1e2e; }
.wz-light .wz-kcard-price-inp {
  background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.1); color:#1e1e2e;
}
.wz-light .wz-kcard-vat-inp {
  color:#dc2626;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23dc2626'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 6px center;
  background-size:8px;
}
.wz-light .wz-stepper         { background:rgba(0,0,0,.06); }
.wz-light .wz-stepper button { background:rgba(0,0,0,.07); color:#1e1e2e; }
.wz-light .wz-stepper span   { color:#1e1e2e; }
.wz-light .wz-stepper-qty    { color:#1e1e2e; }
.wz-light .wz-manual-btn {
  background:rgba(255,255,255,.7); border-color:rgba(0,0,0,.1); color:#64748b;
}

/* S4 cart */
.wz-light .wz-s4-cust {
  background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(139,92,246,.04));
  border-color:rgba(99,102,241,.2);
}
.wz-light .wz-s4-cust-lbl { color:#94a3b8; }
.wz-light .wz-s4-cust-name { color:#1e1e2e; }
.wz-light .wz-s4-cust-ok { background:rgba(99,102,241,.1); border-color:rgba(99,102,241,.2); }
.wz-light .wz-s4-items-hd { color:#94a3b8; }
.wz-light .wz-s4-count { background:rgba(0,0,0,.06); color:#94a3b8; }
.wz-light .wz-cart-item { background:rgba(255,255,255,.85); border-color:rgba(0,0,0,.08); }
.wz-light .wz-ci-name  { color:#1e1e2e; }
.wz-light .wz-ci-meta  { color:#94a3b8; }
.wz-light .wz-ci-vat   { color:#059669; }
.wz-light .wz-ci-total { color:#6366f1; }
.wz-light .wz-s4-totals { background:rgba(255,255,255,.8); border-color:rgba(0,0,0,.08); }
.wz-light .wz-s4-row { color:#64748b; }
.wz-light .wz-s4-sep { background:linear-gradient(90deg,transparent,rgba(0,0,0,.12),transparent); }
.wz-light .wz-s4-grand-row { background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(139,92,246,.05)); }
.wz-light .wz-s4-grand-row > span { color:#64748b; }
.wz-light .wz-s4-grand-num { text-shadow:0 0 20px rgba(99,102,241,.3); }
.wz-light .wz-s4-trust { color:#94a3b8; }

/* S5 success */
.wz-light .wz-success-title  { color:#1e1e2e; }
.wz-light .wz-success-invnum { color:#64748b; background:rgba(0,0,0,.06); }
.wz-light .wz-success-grand  { color:#4f46e5; }
.wz-light .wz-succ-outline   { background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.13); color:#374151; }
.wz-light .wz-succ-outline:hover { background:rgba(0,0,0,.1); color:#1e1e2e; }
.wz-light .wz-new-inv-btn    { color:#94a3b8; }
.wz-light .wz-new-inv-btn:hover { color:#64748b; }

/* manual panel */
.wz-light .wz-mp-inner {
  background:rgba(248,249,255,.98); border-top-color:rgba(0,0,0,.08);
}
.wz-light .wz-mp-handle { background:rgba(0,0,0,.1); }
.wz-light .wz-mp-title  { color:#1e1e2e; }
.wz-light .wz-mp-field label { color:#94a3b8; }
.wz-light .wz-mp-inp {
  background:#fff; border-color:rgba(0,0,0,.12); color:#1e1e2e;
}
.wz-light .wz-mp-inp::placeholder { color:#94a3b8; }
.wz-light .wz-mp-inp:focus { border-color:rgba(99,102,241,.5); }
.wz-light .wz-mp-cancel { border-color:rgba(0,0,0,.1); color:#64748b; }
.wz-light .wz-mp-cancel:hover { background:rgba(0,0,0,.05); color:#1e1e2e; }

/* skeletons */
.wz-light .wz-skel {
  background:linear-gradient(90deg,rgba(0,0,0,.04) 25%,rgba(0,0,0,.08) 50%,rgba(0,0,0,.04) 75%);
  background-size:200% 100%;
}

/* ── Topbar trigger ── */
.wz-topbar-btn {
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  border:none; color:#fff; width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; cursor:pointer; transition:.15s;
  box-shadow:0 2px 10px rgba(99,102,241,.4);
}
.wz-topbar-btn:hover { transform:scale(1.1) rotate(-5deg); box-shadow:0 4px 16px rgba(99,102,241,.55); }

/* ══════════════════════════════════════════════
   سجلي DatePicker
   ══════════════════════════════════════════════ */
.dp-wrap { display:block; }
.dp-popup {
  position:fixed; z-index:99999;
  width:300px; background:#fff; border-radius:16px;
  box-shadow:0 8px 40px rgba(0,0,0,.14),0 2px 8px rgba(0,0,0,.08);
  border:1px solid #e8edf5; overflow:hidden;
  opacity:0; transform:translateY(-6px) scale(.97);
  pointer-events:none; transition:.18s cubic-bezier(.4,0,.2,1);
}
.dp-popup.open { opacity:1; transform:none; pointer-events:all; }
.dp-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; color:#fff; direction:rtl;
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-3) 52%,var(--navy-4) 100%);
}
.dp-head-label {
  font-size:15px; font-weight:800; font-family:'Cairo',sans-serif;
  cursor:pointer; display:flex; align-items:center; gap:6px;
}
.dp-head-label:hover { opacity:.85; }
.dp-label-icon { font-size:11px; opacity:.7; }
.dp-nav {
  width:30px; height:30px; border-radius:8px; border:none;
  background:rgba(255,255,255,.15); color:#fff; cursor:pointer;
  font-size:15px; transition:.12s; display:flex; align-items:center; justify-content:center;
}
.dp-nav:hover { background:rgba(255,255,255,.28); }
.dp-grid { padding:10px 12px 14px; }
.dp-days-row { display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:6px; }
.dp-day-name { text-align:center; font-size:10.5px; font-weight:700; color:#94a3b8; padding:4px 0; font-family:'Cairo',sans-serif; }
.dp-cells { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.dp-cell {
  text-align:center; padding:6px 2px; border-radius:8px; font-size:13px;
  font-family:'Cairo',sans-serif; font-weight:600; cursor:pointer; color:#334155; transition:.12s;
}
.dp-cell:hover { background:#eff6ff; color:#2563eb; }
.dp-cell.today { color:#2563eb; font-weight:800; }
.dp-cell.today::after { content:''; display:block; width:4px; height:4px; border-radius:50%; background:#2563eb; margin:1px auto 0; }
.dp-cell.selected { background:#2563eb; color:#fff !important; }
.dp-cell.selected.today::after { background:#fff; }
.dp-cell.other { color:#cbd5e1; }
.dp-cell.other:hover { background:#f8fafc; color:#94a3b8; }
.dp-ym-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:12px; direction:rtl; }
.dp-ym-cell {
  text-align:center; padding:10px 4px; border-radius:10px; font-size:13px;
  font-family:'Cairo',sans-serif; font-weight:700; cursor:pointer; color:#334155;
  transition:.12s; border:1.5px solid transparent;
}
.dp-ym-cell:hover { background:#eff6ff; color:#2563eb; }
.dp-ym-cell.active { background:#2563eb; color:#fff !important; }
.dp-ym-cell.current { border-color:#2563eb; color:#2563eb; }
.dp-ym-cell.active.current { background:#2563eb; color:#fff !important; }

/* ═══════════════════════════════════════════════════════
   SETUP WIZARD  —  prefix: swz-
═══════════════════════════════════════════════════════ */
.swz-overlay {
  position:fixed; inset:0; z-index:10000;
  background:rgba(3,10,22,.88);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .3s;
}
.swz-overlay.open { opacity:1; pointer-events:all; }

.swz-panel {
  width:min(640px,96vw);
  background:linear-gradient(160deg,#0d1f3c 0%,#071529 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  box-shadow:0 32px 80px rgba(0,0,0,.6);
  overflow:hidden;
  display:flex; flex-direction:column;
  max-height:92vh;
}

/* ── شريط التقدم ── */
.swz-progress-bar {
  height:4px; background:rgba(255,255,255,.08);
  position:relative; flex-shrink:0;
}
.swz-progress-fill {
  height:100%;
  background:linear-gradient(90deg,#f59e0b,#fbbf24);
  border-radius:4px;
  transition:width .5s cubic-bezier(.4,0,.2,1);
}

/* ── رأس ── */
.swz-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.swz-step-label {
  font-size:.75rem; color:rgba(255,255,255,.4);
  letter-spacing:.5px; text-transform:uppercase;
}
.swz-close {
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.06);
  border:none; color:rgba(255,255,255,.5);
  cursor:pointer; font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  transition:.2s;
}
.swz-close:hover { background:rgba(255,255,255,.12); color:#fff; }

/* ── جسم الشرائح ── */
.swz-body {
  flex:1; overflow-y:auto; padding:28px 28px 20px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.1) transparent;
}

/* ── شريحة ── */
.swz-slide { display:none; animation:swzIn .35s ease; }
.swz-slide.active { display:block; }
@keyframes swzIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

/* ── شاشة الترحيب ── */
.swz-welcome { text-align:center; padding:8px 0 16px; }
.swz-welcome-title {
  font-size:1.7rem; font-weight:800; color:#fff;
  margin:20px 0 8px;
}
.swz-welcome-sub { color:rgba(255,255,255,.55); font-size:1rem; margin-bottom:28px; }
.swz-sindbad {
  width:160px; height:160px; margin:0 auto 4px;
  filter:drop-shadow(0 8px 32px rgba(245,158,11,.3));
  animation:swzFloat 3s ease-in-out infinite;
}
@keyframes swzFloat {
  0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}
}

/* ── عنوان الخطوة ── */
.swz-title {
  font-size:1.3rem; font-weight:700; color:#fff;
  margin:0 0 6px;
}
.swz-subtitle { color:rgba(255,255,255,.5); font-size:.9rem; margin-bottom:24px; }

/* ── حقل الإدخال الضخم ── */
.swz-big-input {
  width:100%; background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.1);
  border-radius:14px; padding:16px 20px;
  color:#fff; font-size:1.1rem; outline:none;
  transition:.2s; font-family:inherit; direction:rtl;
}
.swz-big-input:focus {
  border-color:#f59e0b;
  background:rgba(245,158,11,.06);
  box-shadow:0 0 0 3px rgba(245,158,11,.12);
}
.swz-big-input::placeholder { color:rgba(255,255,255,.25); }

/* ── كروت الحسابات ── */
.swz-accounts-search {
  width:100%; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px; padding:10px 14px;
  color:#fff; font-size:.88rem; outline:none;
  margin-bottom:14px; direction:rtl; font-family:inherit;
}
.swz-accounts-search::placeholder { color:rgba(255,255,255,.3); }
.swz-accounts-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px; max-height:260px; overflow-y:auto;
  padding-left:2px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.1) transparent;
}
.swz-acc-card {
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.08);
  border-radius:12px; padding:12px 14px;
  cursor:pointer; transition:.2s; direction:rtl;
}
.swz-acc-card:hover { background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.3); }
.swz-acc-card.selected {
  background:rgba(245,158,11,.12);
  border-color:#f59e0b;
  box-shadow:0 0 0 2px rgba(245,158,11,.2);
}
.swz-acc-code { font-size:.7rem; color:rgba(255,255,255,.4); margin-bottom:3px; }
.swz-acc-name { font-size:.85rem; color:#fff; font-weight:600; line-height:1.3; }
.swz-acc-selected-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(245,158,11,.15); border:1px solid rgba(245,158,11,.3);
  border-radius:8px; padding:8px 14px; margin-top:10px;
  color:#fbbf24; font-size:.85rem; font-weight:600;
}

/* ── كروت الإجراءات (إكسيل) ── */
.swz-action-cards {
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:8px;
}
.swz-action-card {
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.08);
  border-radius:16px; padding:20px 14px;
  text-align:center; cursor:pointer; transition:.2s;
  text-decoration:none; display:block;
}
.swz-action-card:hover { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.2); transform:translateY(-2px); }
.swz-action-card.primary { border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.08); }
.swz-action-card.primary:hover { background:rgba(245,158,11,.14); }
.swz-action-card i { font-size:1.6rem; margin-bottom:8px; display:block; }
.swz-action-card .swz-ac-label { font-size:.82rem; color:#fff; font-weight:600; }
.swz-action-card .swz-ac-sub { font-size:.72rem; color:rgba(255,255,255,.4); margin-top:3px; }

/* ── كروت البنك ── */
.swz-bank-cards { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.swz-bank-card {
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.08);
  border-radius:12px; padding:12px 16px;
}
.swz-bank-card i { font-size:1.2rem; color:#f59e0b; flex-shrink:0; }
.swz-bank-card-name { font-size:.9rem; color:#fff; font-weight:600; }
.swz-bank-card-sub { font-size:.75rem; color:rgba(255,255,255,.4); }
.swz-add-bank-toggle {
  display:flex; align-items:center; gap:8px;
  background:none; border:1.5px dashed rgba(255,255,255,.15);
  border-radius:12px; padding:12px 16px;
  color:rgba(255,255,255,.5); font-size:.88rem;
  cursor:pointer; width:100%; transition:.2s; font-family:inherit;
}
.swz-add-bank-toggle:hover { border-color:rgba(245,158,11,.4); color:#f59e0b; }

/* ── نموذج إضافة بنك مصغّر ── */
.swz-bank-form {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:16px;
  margin-top:10px; display:none;
}
.swz-bank-form.open { display:block; animation:swzIn .2s ease; }
.swz-bank-form label { font-size:.78rem; color:rgba(255,255,255,.5); display:block; margin-bottom:4px; }
.swz-bank-form input, .swz-bank-form select {
  width:100%; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px; padding:9px 12px;
  color:#fff; font-size:.85rem; outline:none;
  font-family:inherit; direction:rtl; margin-bottom:10px;
}
.swz-bank-form select option { background:#0d1f3c; }

/* ── أزرار التنقل ── */
.swz-nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px 20px; border-top:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.swz-btn {
  padding:10px 24px; border-radius:10px;
  font-size:.9rem; font-weight:600; border:none;
  cursor:pointer; transition:.2s; font-family:inherit;
}
.swz-btn-primary {
  background:linear-gradient(135deg,#f59e0b,#d97706);
  color:#fff;
}
.swz-btn-primary:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(245,158,11,.4); }
.swz-btn-secondary {
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.7);
}
.swz-btn-secondary:hover { background:rgba(255,255,255,.12); color:#fff; }
.swz-btn-skip {
  background:none; border:none;
  color:rgba(255,255,255,.3); font-size:.82rem;
  cursor:pointer; font-family:inherit; padding:4px 8px;
}
.swz-btn-skip:hover { color:rgba(255,255,255,.6); }

/* ── شاشة الاحتفال ── */
.swz-done { text-align:center; padding:20px 0; }
.swz-done-icon { font-size:4rem; margin-bottom:16px; animation:swzPop .5s .1s both cubic-bezier(.175,.885,.32,1.275); }
@keyframes swzPop { from{transform:scale(0)} to{transform:scale(1)} }
.swz-done-title { font-size:1.8rem; font-weight:800; color:#fff; margin-bottom:8px; }
.swz-done-sub { color:rgba(255,255,255,.5); font-size:.95rem; }

/* ── أيقونة التوب بار ── */
.swz-topbar-btn {
  width:36px; height:36px; border-radius:10px;
  background:rgba(245,158,11,.12);
  border:1px solid rgba(245,158,11,.25);
  color:#f59e0b; font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.2s;
}
.swz-topbar-btn:hover {
  background:rgba(245,158,11,.22);
  transform:scale(1.08);
  box-shadow:0 4px 16px rgba(245,158,11,.3);
}

/* ── Setup Wizard — زر التبديل ── */
.swz-theme-btn {
  width:30px; height:30px; border-radius:8px;
  background:rgba(255,255,255,.07);
  border:none; color:rgba(255,255,255,.5);
  cursor:pointer; font-size:.85rem;
  display:flex; align-items:center; justify-content:center;
  transition:.2s;
}
.swz-theme-btn:hover { background:rgba(255,255,255,.14); color:#f59e0b; }

/* ── Setup Wizard — الوضع الفاتح ── */
.swz-overlay.swz-light { background:rgba(15,23,42,.75); }

.swz-light .swz-panel {
  background:linear-gradient(160deg,#f8faff 0%,#eef2ff 100%);
  border-color:rgba(0,0,0,.08);
  box-shadow:0 32px 80px rgba(0,0,0,.18);
}
.swz-light .swz-progress-bar { background:rgba(0,0,0,.08); }
.swz-light .swz-progress-fill { background:linear-gradient(90deg,#d97706,#f59e0b); }
.swz-light .swz-header { border-bottom-color:rgba(0,0,0,.07); }
.swz-light .swz-step-label { color:rgba(0,0,0,.35); }
.swz-light .swz-close { background:rgba(0,0,0,.05); color:#64748b; }
.swz-light .swz-close:hover { background:rgba(0,0,0,.1); color:#1e293b; }
.swz-light .swz-theme-btn { background:rgba(0,0,0,.05); color:#64748b; }
.swz-light .swz-theme-btn:hover { background:rgba(0,0,0,.1); color:#d97706; }

.swz-light .swz-welcome-title { color:#1e293b; }
.swz-light .swz-welcome-sub { color:#64748b; }
.swz-light .swz-title { color:#1e293b; }
.swz-light .swz-subtitle { color:#64748b; }

.swz-light .swz-big-input {
  background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.12); color:#1e293b;
}
.swz-light .swz-big-input:focus {
  border-color:#d97706; background:rgba(217,119,6,.04);
  box-shadow:0 0 0 3px rgba(217,119,6,.1);
}
.swz-light .swz-big-input::placeholder { color:rgba(0,0,0,.25); }

.swz-light .swz-accounts-search {
  background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.1); color:#1e293b;
}
.swz-light .swz-accounts-search::placeholder { color:rgba(0,0,0,.3); }

.swz-light .swz-acc-card {
  background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.08);
}
.swz-light .swz-acc-card:hover { background:rgba(217,119,6,.07); border-color:rgba(217,119,6,.35); }
.swz-light .swz-acc-card.selected { background:rgba(217,119,6,.1); border-color:#d97706; }
.swz-light .swz-acc-code { color:rgba(0,0,0,.35); }
.swz-light .swz-acc-name { color:#1e293b; }

.swz-light .swz-action-card {
  background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.08);
}
.swz-light .swz-action-card:hover { background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.15); }
.swz-light .swz-action-card.primary { background:rgba(217,119,6,.07); border-color:rgba(217,119,6,.35); }
.swz-light .swz-ac-label { color:#1e293b; }
.swz-light .swz-ac-sub { color:#64748b; }

.swz-light .swz-bank-card {
  background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.08);
}
.swz-light .swz-bank-card-name { color:#1e293b; }
.swz-light .swz-bank-card-sub { color:#64748b; }
.swz-light .swz-add-bank-toggle {
  border-color:rgba(0,0,0,.12); color:#64748b;
}
.swz-light .swz-add-bank-toggle:hover { border-color:#d97706; color:#d97706; }
.swz-light .swz-bank-form {
  background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.08);
}
.swz-light .swz-bank-form label { color:#64748b; }
.swz-light .swz-bank-form input,
.swz-light .swz-bank-form select {
  background:#fff; border-color:rgba(0,0,0,.1); color:#1e293b;
}

.swz-light .swz-nav { border-top-color:rgba(0,0,0,.07); }
.swz-light .swz-btn-secondary {
  background:rgba(0,0,0,.06); color:#475569;
}
.swz-light .swz-btn-secondary:hover { background:rgba(0,0,0,.1); color:#1e293b; }
.swz-light .swz-btn-skip { color:rgba(0,0,0,.3); }
.swz-light .swz-btn-skip:hover { color:rgba(0,0,0,.6); }

.swz-light .swz-done-title { color:#1e293b; }
.swz-light .swz-done-sub { color:#64748b; }

.swz-light .swz-acc-selected-badge {
  background:rgba(217,119,6,.1); border-color:rgba(217,119,6,.25); color:#b45309;
}

/* ============================================================
   Payroll Module — الموارد البشرية والرواتب
   ============================================================ */

/* ── Section Banner (لون السايدبار) ── */
.prl-section-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
    color: #fff;
    border-radius: 12px 12px 0 0;
}
.prl-section-banner > i {
    font-size: 22px;
    color: var(--gold);
    flex-shrink: 0;
}
.prl-section-banner h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
}
.prl-section-banner span {
    font-size: 12px;
    color: rgba(255,255,255,.65);
    display: block;
    margin-top: 2px;
}

/* ── كروت الجنسية ── */
.nat-card-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 768px) {
    .nat-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.nat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border: 2px solid #e6eaf2;
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    transition: all .18s ease;
    user-select: none;
}
.nat-card:hover {
    border-color: #0b4f6c;
    background: #f0f7ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(11,79,108,.12);
}
.nat-card.selected {
    border-color: #0b4f6c;
    background: linear-gradient(135deg, #e8f4fd, #f0f9ff);
    box-shadow: 0 0 0 3px rgba(11,79,108,.15);
}
.nat-flag { font-size: 24px; line-height: 1; }
.nat-label { font-size: 12px; font-weight: 800; color: var(--navy); text-align: center; }
.nat-card.selected .nat-label { color: #0b4f6c; }

/* ── كروت البنوك ── */
.bank-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 768px) {
    .bank-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.bank-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    border: 2px solid #e6eaf2;
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    transition: all .18s ease;
    user-select: none;
}
.bank-card:hover {
    border-color: #0b4f6c;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(11,79,108,.12);
}
.bank-card.selected {
    border-color: #0b4f6c;
    background: linear-gradient(135deg, #e8f4fd, #f0f9ff);
    box-shadow: 0 0 0 3px rgba(11,79,108,.15);
}
.bank-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    color: #fff;
    letter-spacing: .5px;
}
.bank-logo-lg {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    color: #fff;
    letter-spacing: .5px;
    flex-shrink: 0;
}
.bank-label {
    font-size: 12px;
    font-weight: 800;
    color: var(--navy);
    text-align: center;
}
.bank-card.selected .bank-label { color: #0b4f6c; }

/* ── GOSI Explainer ── */
.gosi-explainer {
    background: #f5f7fb;
    border: 1px solid #e6eaf2;
    border-radius: 10px;
    overflow: hidden;
}
.gosi-exp-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #edf2f7;
    font-size: 13px;
    font-weight: 700;
    color: #0b4f6c;
    border-bottom: 1px solid #e6eaf2;
}
.gosi-exp-header > i { font-size: 16px; }
.gosi-exp-grid { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.gosi-exp-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e6eaf2;
    font-size: 13px;
    font-weight: 700;
    flex-wrap: wrap;
}
.gosi-exp-row.opacity-50 { opacity: .4; }
.gosi-nat-badge {
    padding: 3px 10px;
    background: #e8f4fd;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    color: #0b4f6c;
    white-space: nowrap;
}
.gosi-nat-badge.expat { background: #fef3c7; color: #92400e; }

/* ── من يدفع GOSI ── */
.gosi-payer-opts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 600px) {
    .gosi-payer-opts { grid-template-columns: 1fr; }
}
.gosi-payer-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 2px solid #e6eaf2;
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    transition: all .18s ease;
}
.gosi-payer-opt input[type="radio"] { display: none; }
.gosi-payer-opt:hover { border-color: #0b4f6c; background: #f0f7ff; }
.gosi-payer-opt.selected {
    border-color: #0b4f6c;
    background: linear-gradient(135deg, #e8f4fd, #f0f9ff);
    box-shadow: 0 0 0 3px rgba(11,79,108,.1);
}
.gosi-payer-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: #e8f4fd;
    color: #0b4f6c;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.gosi-payer-icon.orange { background: #fef3c7; color: #b45309; }
.gosi-payer-icon.red    { background: #fee2e2; color: #c43d4b; }
.gosi-payer-opt strong { font-size: 13px; font-weight: 800; color: var(--navy); display: block; }
.gosi-payer-opt small  { font-size: 11.5px; color: #667085; }

/* ── معاينة GOSI المباشرة ── */
.gosi-live-preview {
    display: flex;
    align-items: center;
    gap: 0;
    background: #f8fafc;
    border: 1px solid #e6eaf2;
    border-radius: 10px;
    overflow: hidden;
    flex-wrap: wrap;
}
.glp-item {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 10px;
    gap: 4px;
}
.glp-item span { font-size: 12px; color: #667085; font-weight: 700; }
.glp-item strong { font-size: 16px; font-weight: 900; }
.glp-sep {
    width: 1px;
    height: 40px;
    background: #e6eaf2;
    align-self: center;
}

/* ── تفاصيل الراتب في صفحة الموظف ── */
.salary-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.salary-item {
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #edf1f6;
    gap: 4px;
}
.salary-item span { font-size: 12px; color: #667085; font-weight: 700; }
.salary-item strong { font-size: 15px; font-weight: 900; color: var(--navy); }
.salary-item.total {
    background: linear-gradient(135deg, #e8f4fd, #f0f9ff);
    border-color: #0b4f6c40;
}
.salary-item.total strong { color: #0b4f6c; font-size: 17px; }

/* ── شريط GOSI في صفحة الموظف ── */
.gosi-info-bar {
    display: flex;
    gap: 0;
    background: #f5f7fb;
    border: 1px solid #e6eaf2;
    border-radius: 10px;
    overflow: hidden;
    flex-wrap: wrap;
}
.gosi-info-item {
    flex: 1;
    min-width: 110px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-left: 1px solid #e6eaf2;
}
.gosi-info-item:last-child { border-left: none; }
.gosi-info-item i { font-size: 20px; flex-shrink: 0; }
.gosi-info-item small { font-size: 11.5px; color: #667085; font-weight: 700; display: block; }
.gosi-info-item strong { font-size: 14px; font-weight: 900; color: var(--navy); }

/* ── DL لبيانات الموظف ── */
.emp-dl {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 6px 12px;
    margin: 0;
}
.emp-dl dt { font-size: 12.5px; color: #667085; font-weight: 800; align-self: center; }
.emp-dl dd { font-size: 13.5px; font-weight: 700; color: var(--navy); margin: 0; align-self: center; }

/* ── Employee Cards ── */
.ccard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
    margin-top: 18px;
}
.ccard {
    background: #fff;
    border: 1px solid #e6eaf2;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(16,24,40,.06);
    transition: transform .18s ease, box-shadow .18s ease;
}
.ccard:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(16,24,40,.1); }
.ccard.inactive { opacity: .65; }
.ccard-top {
    background: linear-gradient(135deg, var(--navy), var(--navy-mid));
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
}
.ccard-avatar {
    width: 54px; height: 54px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ccard-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(217,170,69,.2);
    color: var(--gold);
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 20px;
    border: 1px solid rgba(217,170,69,.3);
}
.ccard-badge-danger {
    position: absolute;
    top: 32px;
    left: 12px;
    background: rgba(196,61,75,.2);
    color: #f87171;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 20px;
}
.ccard-body { padding: 16px; }
.ccard-name {
    font-size: 15px;
    font-weight: 900;
    color: var(--navy);
    text-decoration: none;
    display: block;
    margin-bottom: 6px;
}
.ccard-name:hover { color: #0b4f6c; }
.ccard-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12px;
    color: #667085;
    font-weight: 700;
}
.ccard-meta i { color: var(--accent); }
.ccard-stats {
    display: flex;
    align-items: center;
    gap: 0;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #edf1f6;
    margin-top: 10px;
    overflow: hidden;
}
.ccard-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    gap: 2px;
}
.ccard-stat-num { font-size: 13px; font-weight: 900; color: var(--navy); }
.ccard-stat-lbl { font-size: 10px; color: #667085; font-weight: 700; }
.ccard-divider { width: 1px; height: 30px; background: #e6eaf2; }
.ccard-footer {
    padding: 10px 16px;
    border-top: 1px solid #edf1f6;
    display: flex;
    gap: 6px;
}
.ccard-btn-primary {
    flex: 1;
    text-align: center;
    padding: 7px;
    background: var(--navy);
    color: #fff;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
    transition: background .15s;
}
.ccard-btn-primary:hover { background: #0b4f6c; color: #fff; }

/* ════════════════════ Employee Premium Card — vertical grid (epc-v) ════════════════════ */
.emp-banner {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(8,118,90,.07), rgba(8,118,90,.03));
    border: 1px solid rgba(8,118,90,.18);
    color: #08765a;
    font-size: 12.5px;
    font-weight: 700;
}
.emp-banner i { font-size: 14px; color: #08765a; }
.emp-banner.warn {
    background: linear-gradient(135deg, rgba(220,38,38,.08), rgba(220,38,38,.03));
    border-color: rgba(220,38,38,.22);
    color: #b91c1c;
}
.emp-banner.warn i { color: #dc2626; }

.emp-result-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--navy), var(--navy-mid));
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}
.emp-result-chip i { color: var(--gold-light); font-size: 13px; }
.emp-result-chip strong { color: var(--gold-light); font-weight: 900; margin-left: 3px; }

.epc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 20px;
}

.epc-vcard {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e7f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform .18s, box-shadow .18s;
}
.epc-vcard:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(6,27,53,.18);
}
.epc-vcard.inactive { opacity: .6; }

.epc-vhead {
    position: relative;
    padding: 26px 16px 18px;
    text-align: center;
    background:
        radial-gradient(circle at 85% 12%, rgba(242,193,95,.18), transparent 9rem),
        linear-gradient(160deg, var(--navy) 0%, var(--navy-mid) 55%, var(--navy-5) 100%);
}

.epc-vstatus {
    position: absolute;
    top: 12px;
    right: 12px;
}

.epc-vnumber {
    position: absolute;
    top: 12px;
    left: 12px;
    font-family: monospace;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 9px;
    border-radius: 6px;
    background: rgba(242,193,95,.15);
    color: var(--gold-light);
    border: 1px solid rgba(242,193,95,.25);
}

.epc-vavatar {
    width: 70px;
    height: 70px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--gold-light);
    background: rgba(255,255,255,.08);
    border: 3px solid rgba(255,255,255,.18);
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.epc-vname { margin: 0; color: #fff; font-size: 15.5px; font-weight: 900; }
.epc-vname-en { margin: 2px 0 0; color: rgba(255,255,255,.4); font-size: 11.5px; }
.epc-vtitle { margin: 6px 0 0; color: var(--gold-light); font-size: 12.5px; font-weight: 700; }
.epc-vdept-chip {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.72);
    font-size: 10.5px;
    font-weight: 700;
}

.epc-vdivider {
    height: 3px;
    background: linear-gradient(90deg, var(--gold-light), #fdeab0, var(--gold-light));
}

.epc-vbody {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.epc-vrow { display: flex; align-items: center; gap: 8px; }
.epc-vrow.warn .epc-vvalue { color: #dc2626; font-weight: 900; }
.epc-vbody .epc-icon { width: 22px; height: 22px; font-size: 11px; }
.epc-vlabel { font-size: 11.5px; color: #94a3b8; font-weight: 700; flex: 0 0 auto; }
.epc-vvalue { margin-right: auto; font-size: 12px; color: #1e293b; font-weight: 800; text-align: left; }

.epc-vstats {
    display: flex;
    align-items: center;
    margin: 4px 16px 0;
    padding-top: 12px;
    border-top: 1px dashed #e6eaf2;
}
.epc-vstat { flex: 1; text-align: center; }
.epc-vstat strong { display: block; font-size: 13px; font-weight: 900; color: var(--navy); }
.epc-vstat strong.green { color: #16a34a; }
.epc-vstat small { font-size: 10px; color: #94a3b8; font-weight: 700; }
.epc-vstat-sep { width: 1px; height: 28px; background: #e6eaf2; }

.epc-vfooter { padding: 12px 16px 16px; margin-top: auto; }
.epc-vbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px;
    border-radius: 10px;
    background: rgba(6,27,53,.06);
    color: var(--navy);
    border: 1px solid rgba(6,27,53,.12);
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.epc-vbtn:hover { background: var(--navy); color: var(--gold-light); }

/* ════════════════════ Employee Premium Card — horizontal (epc) ════════════════════ */
.epc-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.epc-card {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #e2e7f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform .15s, box-shadow .15s;
}
.epc-list-head + .epc-list .epc-card:first-child {
    border-radius: 0 0 16px 16px;
}
.epc-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(6,27,53,.16);
}
.epc-card.inactive { opacity: .6; }

.epc-accent {
    width: 4px;
    flex: 0 0 auto;
    background: linear-gradient(180deg, var(--gold-light), #fdeab0, var(--gold-light));
}

.epc-avatar-box {
    flex: 0 0 auto;
    width: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px;
    background:
        radial-gradient(circle at 50% 30%, rgba(242,193,95,.14), transparent 7rem),
        linear-gradient(160deg, var(--navy-5) 0%, var(--navy) 55%, var(--navy-mid) 100%);
}
.epc-avatar-box i { font-size: 27px; color: var(--gold-light); }
.epc-avatar-flag { font-size: 24px; line-height: 1; }
.epc-vavatar-flag { font-size: 26px; line-height: 1; }
.epc-avatar-num {
    font-family: monospace;
    font-size: 9.5px;
    font-weight: 800;
    color: rgba(242,193,95,.7);
    letter-spacing: .03em;
}

.epc-cells {
    flex: 1;
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.epc-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 10px 18px;
    flex: 0 0 175px;
    width: 175px;
    border-left: 1px solid #dde3ec;
}
.epc-cell-employee { flex: 0 0 205px; width: 205px; }
.epc-cell-dept { flex: 0 0 150px; width: 150px; }
.epc-cell-nat { flex: 0 0 130px; width: 130px; }
.epc-cell-id { flex: 0 0 270px; width: 270px; }
.epc-cell .epc-name,
.epc-cell .epc-name-en,
.epc-cell .epc-jobtitle,
.epc-cell .epc-info-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.epc-list-head {
    display: flex;
    align-items: stretch;
    min-height: 58px;
    border-radius: 10px 10px 0 0;
    margin-bottom: 0;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid #e6eaf2;
    border-bottom: 1px solid #e9edf3;
}
.epc-lh-side {
    width: 90px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #dde3ec;
}
.epc-lh-side i { font-size: 14px; color: #98a2b3; }
.epc-lh-cell {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    border-left: 1px solid #dde3ec;
    padding: 16px 18px;
}
.epc-lh-cell i { font-size: 11px; color: #98a2b3; }
.epc-lh-label {
    font-size: 11px;
    font-weight: 800;
    color: #475467;
    letter-spacing: .02em;
}
.epc-lh-end {
    flex: 0 0 170px;
    width: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 18px;
    border-right: 1px solid #dde3ec;
}
.epc-lh-end .epc-lh-label { color: #475467; }
.epc-lh-end i { font-size: 11px; color: #98a2b3; }

@media (max-width: 1300px) {
    .epc-cell-progress { display: none; }
}
@media (max-width: 1100px) {
    .epc-lh-cell.epc-cell-salary, .epc-lh-cell.epc-cell-id { display: none; }
}
@media (max-width: 860px) {
    .epc-lh-cell.epc-cell-nat { display: none; }
}
@media (max-width: 650px) {
    .epc-lh-cell.epc-cell-dept { display: none; }
}

.epc-name { font-size: 13.5px; font-weight: 900; color: var(--navy); line-height: 1.3; }
.epc-name-en { font-size: 10.5px; color: #94a3b8; font-style: italic; margin-top: 1px; }
.epc-jobtitle {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--accent);
}

.epc-info-line { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.epc-info-line:last-child { margin-bottom: 0; }
.epc-info-line.warn .epc-info-text { color: #dc2626; font-weight: 900; }
.epc-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 9.5px;
}
.epc-icon.blue  { background: #eef8fa; color: #0b4f6c; }
.epc-icon.gold  { background: #fef3c7; color: #92400e; }
.epc-icon.green { background: #d1fae5; color: #065f46; }
.epc-icon.red   { background: #fee2e2; color: #991b1b; }
.epc-info-text { font-size: 11.5px; font-weight: 700; color: #374151; }

.epc-cell-progress {
    flex: 1 1 auto;
    min-width: 210px;
    justify-content: center;
    gap: 7px;
}
.epc-lh-cell.epc-cell-progress { flex: 1 1 auto; min-width: 210px; }
.epc-progress-label {
    font-size: 9.5px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.epc-progress-track {
    display: flex;
    height: 10px;
    border-radius: 999px;
    background: #eef1f6;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(16,24,40,.06);
}
.epc-progress-seg { height: 100%; transition: width .25s ease; }
.epc-progress-seg.basic {
    background: linear-gradient(90deg, var(--gold-light), var(--accent));
    box-shadow: 0 0 8px rgba(242,193,95,.55);
}
.epc-progress-seg.allow { background: linear-gradient(90deg, #22d3ee, #0891b2); }
.epc-progress-legend {
    display: flex;
    gap: 14px;
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
}
.epc-pl-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 5px;
}
.epc-pl-dot.gold { background: var(--accent); }
.epc-pl-dot.teal { background: #0891b2; }

.epc-end {
    flex: 0 0 170px;
    width: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 18px;
    border-right: 1px solid #dde3ec;
}

.epc-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 900;
    white-space: nowrap;
}
.epc-status.green { background: #d1fae5; color: #065f46; }
.epc-status.red   { background: #fee2e2; color: #991b1b; }
.epc-status.gold  { background: #fef3c7; color: #92400e; }
.epc-status.grey  { background: #f1f5f9; color: #475569; }

.epc-btn {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(6,27,53,.06);
    color: var(--navy);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.epc-btn:hover { background: var(--navy); color: var(--gold-light); }

@media (max-width: 1100px) {
    .epc-cell-salary, .epc-cell-id { display: none; }
}
@media (max-width: 860px) {
    .epc-cell-nat { display: none; }
}
@media (max-width: 650px) {
    .epc-cell-dept { display: none; }
}

/* ── كروت نوع العقد ── */
.contract-type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 768px) {
    .contract-type-grid { grid-template-columns: 1fr; }
}
.contract-type-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border: 2px solid #e6eaf2;
    border-radius: 12px;
    cursor: pointer;
    background: #fff;
    transition: all .2s ease;
    position: relative;
}
.contract-type-card input[type="radio"] { display: none; }
.contract-type-card:hover {
    border-color: #0b4f6c;
    box-shadow: 0 4px 16px rgba(11,79,108,.12);
    transform: translateY(-2px);
}
.contract-type-card.selected {
    border-color: #0b4f6c;
    background: linear-gradient(135deg, #eaf4fd, #f0f9ff);
    box-shadow: 0 0 0 3px rgba(11,79,108,.12), 0 4px 16px rgba(11,79,108,.1);
}
.contract-type-card.selected::after {
    content: "✓";
    position: absolute;
    top: 12px;
    left: 12px;
    width: 22px; height: 22px;
    background: #0b4f6c;
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 900;
    line-height: 22px;
    text-align: center;
}
.ctc-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.ctc-icon.blue   { background: linear-gradient(135deg,#e8f4fd,#dbeafe); color: #0b4f6c; }
.ctc-icon.gold   { background: linear-gradient(135deg,#fef9e7,#fef3c7); color: #b45309; }
.ctc-icon.grey   { background: linear-gradient(135deg,#f3f4f6,#e5e7eb); color: #6b7280; }
.ctc-body { flex: 1; min-width: 0; }
.ctc-body strong { font-size: 14px; font-weight: 900; color: var(--navy); display: block; margin-bottom: 3px; }
.ctc-body > span { font-size: 12px; color: #667085; display: block; margin-bottom: 8px; }
.ctc-rules { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.ctc-rules li { font-size: 12px; color: #667085; padding-right: 14px; position: relative; }
.ctc-rules li::before { content: "·"; position: absolute; right: 0; color: var(--accent); font-weight: 900; }
.ctc-rules li b { color: var(--navy); }

/* ── شريط معلومات العقد في صفحة الموظف ── */
.contract-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: #f8fafc;
    border: 1px solid #e6eaf2;
    border-radius: 10px;
    overflow: hidden;
}
.cmb-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-left: 1px solid #e6eaf2;
    flex: 1;
    min-width: 130px;
}
.cmb-item:last-child { border-left: none; }
.cmb-item > i { font-size: 18px; flex-shrink: 0; }
.cmb-item small { font-size: 11px; color: #667085; font-weight: 700; display: block; }
.cmb-item strong { font-size: 13px; font-weight: 900; color: var(--navy); display: flex; align-items: center; gap: 4px; }

/* ── صندوق قانون الإشعار ── */
.notice-law-box {
    background: #f8fafc;
    border: 1px solid #e6eaf2;
    border-right: 3px solid var(--accent);
    border-radius: 8px;
    padding: 12px 14px;
}
.nlb-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 900;
    color: #b45309;
    margin-bottom: 6px;
}
.notice-law-box p {
    font-size: 12.5px;
    color: #4b5563;
    margin: 0;
    line-height: 1.6;
}

/* ── Saudi Riyal Symbol (Official SAMA Design) ── */
.sar-sym {
  display:inline-block;
  width:.72em; height:.82em;
  background-color:currentColor;
  -webkit-mask:url('/static/img/sar.svg') no-repeat center/contain;
  mask:url('/static/img/sar.svg') no-repeat center/contain;
  vertical-align:-.1em;
  flex-shrink:0;
}

/* ── Wizard S10: Quotation Accept ── */
.wz-s10-qcard {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:20px;
  text-align:right;
  width:100%;
  max-width:420px;
  margin:0 auto 20px;
}
.wz-s10-qnum  { font-size:17px; font-weight:700; color:#a5b4fc; margin-bottom:4px; }
.wz-s10-qdate { font-size:13px; color:rgba(255,255,255,.45); margin-bottom:8px; }
.wz-s10-qtotal { font-size:26px; font-weight:800; color:#fff; margin-bottom:4px; }
.wz-s10-qstatus { font-size:13px; font-weight:600; margin-bottom:12px; }
.wz-s10-qitems { border-top:1px solid rgba(255,255,255,.1); padding-top:10px; display:flex; flex-direction:column; gap:4px; max-height:130px; overflow-y:auto; }
.wz-s10-qitem  { display:flex; justify-content:space-between; font-size:13px; color:rgba(255,255,255,.65); gap:8px; }
.wz-s10-actions {
  display:flex; gap:12px;
  width:100%; max-width:420px;
  margin:0 auto;
}
.wz-s10-btn {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  border-radius:16px;
  padding:20px 14px;
  cursor:pointer;
  transition:all .2s;
  color:#fff;
}
.wz-s10-btn:hover { transform:translateY(-3px); }
.wz-s10-btn i     { font-size:28px; }
.wz-s10-btn strong { font-size:15px; }
.wz-s10-btn span  { font-size:12px; color:rgba(255,255,255,.5); }
.wz-s10-btn-inv   { border-color:rgba(16,185,129,.35); }
.wz-s10-btn-inv:hover { background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.5); }
.wz-s10-btn-inv i { color:#10b981; }
.wz-s10-btn-cnt   { border-color:rgba(139,92,246,.35); }
.wz-s10-btn-cnt:hover { background:rgba(139,92,246,.12); border-color:rgba(139,92,246,.5); }
.wz-s10-btn-cnt i { color:#a78bfa; }
.wz-s10-btn:disabled { opacity:.45; cursor:default; transform:none; }
/* Light mode */
.wz-light .wz-s10-qcard   { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.08); }
.wz-light .wz-s10-qnum    { color:#4f46e5; }
.wz-light .wz-s10-qdate   { color:rgba(0,0,0,.45); }
.wz-light .wz-s10-qtotal  { color:#111; }
.wz-light .wz-s10-qitems  { border-top-color:rgba(0,0,0,.08); }
.wz-light .wz-s10-qitem   { color:rgba(0,0,0,.6); }
.wz-light .wz-s10-btn     { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.1); color:#111; }
.wz-light .wz-s10-btn span { color:rgba(0,0,0,.5); }


/* ══════════════════════════════════════════════════════════════════════
   Support Tickets Module
══════════════════════════════════════════════════════════════════════ */

/* ── Ticket list ─────────────────────────────────────────────────────── */
.spt-list { display:flex; flex-direction:column; gap:10px; }

.spt-card {
  display:flex; align-items:stretch;
  background:var(--card-bg, #fff);
  border:1px solid var(--border-color, #e2e8f0);
  border-radius:14px; overflow:hidden;
  text-decoration:none; color:inherit;
  transition:box-shadow .2s, transform .15s;
}
.spt-card:hover {
  box-shadow:0 6px 28px rgba(0,0,0,.09);
  transform:translateY(-1px);
  text-decoration:none; color:inherit;
}

/* Colored strip on the right (RTL start edge) */
.spt-card-strip {
  width:5px; flex-shrink:0;
  background:var(--spt-border, #94a3b8);
  border-radius:0 14px 14px 0;
}

.spt-card-body { flex:1; padding:14px 16px; min-width:0; }
.spt-card-arrow {
  display:flex; align-items:center; padding:0 14px;
  color:var(--text-muted, #94a3b8); font-size:.85rem;
  flex-shrink:0;
}

.spt-card-top {
  display:flex; align-items:center; flex-wrap:wrap;
  gap:6px; margin-bottom:6px;
}
.spt-num {
  font-size:.73rem; font-family:monospace;
  font-weight:700; color:var(--text-muted, #64748b);
}
.spt-status {
  font-size:.71rem; font-weight:700;
  padding:2px 9px; border-radius:20px;
}

/* Category chip inside card */
.spt-cat-chip {
  display:inline-flex; align-items:center; gap:4px;
  font-size:.71rem; font-weight:600;
  padding:2px 8px; border-radius:20px;
}
.spt-cat-chip i { font-size:.75rem; }

/* Priority badges */
.spt-priority-badge {
  font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:20px;
}
.spt-priority-badge.high { background:#fef3c7; color:#b45309; }

/* Urgent pulse badge */
.spt-urgent-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:20px;
  background:#fef2f2; color:#dc2626;
}
.spt-pulse {
  width:8px; height:8px; border-radius:50%; background:#ef4444; flex-shrink:0;
  animation:spt-pulse-anim 1.4s ease-in-out infinite;
}
@keyframes spt-pulse-anim {
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.55); opacity:.5; }
}

.spt-subject {
  font-size:.9rem; font-weight:600;
  color:var(--text-primary, #0f172a);
  margin-bottom:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.spt-meta {
  display:flex; flex-wrap:wrap; gap:12px;
  font-size:.76rem; color:var(--text-muted, #64748b);
}
.spt-meta i { margin-left:4px; }

/* ── Category picker (new.html) ──────────────────────────────────────── */
.spt-cat-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:10px;
}
.spt-cat-card {
  position:relative; cursor:pointer;
  border:2px solid var(--border-color, #e2e8f0);
  border-radius:12px; padding:14px 10px 12px;
  text-align:center; transition:all .15s;
  background:var(--card-bg, #fff); user-select:none;
}
.spt-cat-card:hover { border-color:#6366f1; background:#eef2ff; }
.spt-cat-card.selected { border-color:#6366f1; background:#eef2ff; }
.spt-cat-icon {
  width:40px; height:40px; border-radius:10px;
  margin:0 auto 8px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem;
}
.spt-cat-label { font-size:.82rem; font-weight:700; color:var(--text-primary, #0f172a); }
.spt-cat-hint  { font-size:.7rem; color:var(--text-muted, #64748b); margin-top:3px; line-height:1.3; }

/* Priority row */
.spt-priority-row { display:flex; flex-wrap:wrap; gap:8px; }
.spt-pri-opt {
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:2px solid var(--border-color, #e2e8f0);
  border-radius:20px; padding:5px 14px; font-size:.82rem;
  font-weight:600; transition:all .15s; background:var(--card-bg,#fff);
  color:var(--text-muted,#64748b);
}
.spt-pri-opt:hover { border-color:var(--pc, #6366f1); color:var(--pc, #6366f1); }
.spt-pri-opt.selected {
  border-color:var(--pc, #6366f1);
  background:var(--pc, #6366f1); color:#fff;
}

/* ── Status stepper (view.html) ──────────────────────────────────────── */
.spt-stepper {
  display:flex; align-items:flex-start; gap:0; position:relative;
}
.spt-step {
  display:flex; flex-direction:column; align-items:center;
  flex:1; position:relative;
}
.spt-step-dot {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:700; z-index:1;
  background:var(--border-color, #e2e8f0);
  color:var(--text-muted, #94a3b8);
  border:2px solid var(--border-color, #e2e8f0);
  transition:all .2s;
}
.spt-step.done .spt-step-dot  { background:#22c55e; color:#fff; border-color:#22c55e; }
.spt-step.active .spt-step-dot {
  background:#6366f1; color:#fff; border-color:#6366f1;
  box-shadow:0 0 0 4px rgba(99,102,241,.2);
}
.spt-step-label {
  font-size:.7rem; margin-top:7px; font-weight:600; text-align:center;
  color:var(--text-muted, #94a3b8);
}
.spt-step.done   .spt-step-label,
.spt-step.active .spt-step-label { color:var(--text-primary, #0f172a); }

.spt-step-line {
  flex:1; height:2px; background:var(--border-color, #e2e8f0);
  margin-top:-16px; align-self:flex-start; margin-top:15px;
}
.spt-step-line.done { background:#22c55e; }

/* ── Chat bubbles ────────────────────────────────────────────────────── */
.spt-bubble-wrap { display:flex; gap:10px; }
.spt-bubble-wrap.client  { flex-direction:row-reverse; }
.spt-bubble-wrap.support { flex-direction:row; }

.spt-bubble-avatar {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:700;
}

.spt-bubble {
  max-width:78%; padding:12px 16px; border-radius:16px;
  font-size:.88rem; line-height:1.65; white-space:pre-wrap;
  word-break:break-word;
}

.spt-bubble-meta {
  font-size:.7rem; color:var(--text-muted,#94a3b8); margin-top:5px;
}

/* ── Reply box ───────────────────────────────────────────────────────── */
.spt-reply-box {
  background:var(--card-bg, #fff);
  border:2px solid var(--border-color, #e2e8f0);
  border-radius:14px; padding:18px 20px;
  transition:border-color .2s;
}
.spt-reply-box:focus-within { border-color:#6366f1; }

.spt-reply-textarea {
  width:100%; border:none; outline:none; resize:vertical;
  font-size:.9rem; background:transparent; color:inherit;
  font-family:inherit; min-height:80px; line-height:1.6;
}

.spt-reply-footer {
  display:flex; align-items:center;
  justify-content:space-between; margin-top:10px; gap:10px;
  flex-wrap:wrap;
}

/* ── File drop zone ──────────────────────────────────────────────────── */
.spt-file-drop {
  border:2px dashed var(--border-color,#e2e8f0);
  border-radius:12px; padding:28px 20px;
  text-align:center; cursor:pointer;
  transition:border-color .2s, background .2s;
}
.spt-file-drop:hover,
.spt-file-drop-hover { border-color:#6366f1; background:#eef2ff; }

/* Dark mode tweaks */
[data-bs-theme="dark"] .spt-card { background:#1e293b; border-color:#334155; }
[data-bs-theme="dark"] .spt-card:hover { box-shadow:0 6px 28px rgba(0,0,0,.3); }
[data-bs-theme="dark"] .spt-cat-card { background:#1e293b; border-color:#334155; }
[data-bs-theme="dark"] .spt-cat-card:hover,
[data-bs-theme="dark"] .spt-cat-card.selected { background:#1e3a8a33; border-color:#6366f1; }
[data-bs-theme="dark"] .spt-reply-box { background:#1e293b; border-color:#334155; }