/* Critical ERP shell styles loaded after the legacy stylesheet. */
:root {
    --shell-width: 292px;
    --topbar-height: 78px;
    --brand-navy: #101f2e;
    --brand-navy-soft: #173247;
    --brand-teal: #086f84;
    --brand-teal-soft: #0b8198;
    --brand-yellow: #e8dc12;
    --brand-foam: #f5f8f8;
    --shell-line: rgba(8, 111, 132, 0.16);
    --shell-shadow: 0 18px 48px rgba(16, 31, 46, 0.14);
}

html {
    background: #fff;
}

.app-splash {
    position: fixed !important;
    inset: 0 !important;
    z-index: 4000 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding-bottom: 16vh !important;
    background-color: var(--brand-navy) !important;
    background-image:
        radial-gradient(120% 120% at 50% 0%, rgba(23,50,71,0.96), rgba(9,20,30,0.99)),
        url('white-shark-mark.jpg') !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center, center 38% !important;
    background-size: cover, min(320px, 62vw) auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 420ms ease, visibility 420ms ease !important;
}

.app-splash.app-splash-hide {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.app-splash-spinner {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 3px solid rgba(232,220,18,0.22) !important;
    border-top-color: var(--brand-yellow) !important;
    animation: app-splash-spin 850ms linear infinite !important;
}

@keyframes app-splash-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 760px) {
    .app-splash {
        padding-bottom: 22vh !important;
        background-size: cover, min(220px, 68vw) auto !important;
    }
}

body.has-erp-shell {
    min-height: 100vh;
    padding: calc(var(--topbar-height) + 18px) 22px 24px !important;
    color: var(--brand-navy);
    background: #fff !important;
    font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: 0;
    direction: rtl;
    text-align: right;
}

.erp-topbar {
    position: fixed !important;
    top: 14px !important;
    left: 16px !important;
    right: 16px !important;
   
    height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 8px 10px !important;
    border: 1px solid var(--shell-line) !important;
    border-radius: 28px !important;
    background: rgba(255,255,255,0.88) !important;
    box-shadow: var(--shell-shadow) !important;
    backdrop-filter: blur(22px) saturate(1.25);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
}

.menu-btn {
    position: static !important;
    z-index: auto !important;
    width: 46px !important;
    height: 38px !important;
    flex: 0 0 46px !important;
    border: 1px solid rgba(15, 16, 18, 0.08) !important;
    border-radius: 999px !important;
    background: linear-gradient(145deg, var(--brand-teal), #064f60) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(16,31,46,0.18) !important;
}

.menu-btn span {
    display: block !important;
    width: 17px !important;
    height: 2px !important;
    margin: 2px 0 !important;
    background: currentColor !important;
    border-radius: 999px !important;
}

.erp-brand,
.sidebar .logo {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    color: inherit !important;
    text-decoration: none !important;
    padding: 0 !important;
    font-size: inherit !important;
}

.erp-brand {
    margin-right: 0 !important;
    margin-left: auto !important;
}

.brand-logo-frame {
    overflow: hidden !important;
    display: grid !important;
    place-items: center !important;
    padding: 3px !important;
    background: #fff !important;
    border: 1px solid var(--shell-line) !important;
    box-shadow: 0 10px 26px rgba(16,31,46,0.10) !important;
}

.brand-logo-frame img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.erp-brand-mark.brand-logo-frame {
    width: 76px !important;
    height: 44px !important;
    flex: 0 0 76px !important;
    border-radius: 14px !important;
}

.erp-brand strong,
.logo-title {
    display: block !important;
    color: var(--brand-navy) !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
}

.erp-brand small,
.logo-subtitle {
    display: block !important;
    color: var(--brand-teal) !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
}

.erp-top-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.erp-status-dot {
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: var(--brand-yellow) !important;
    box-shadow: 0 0 0 4px rgba(232,220,18,0.18) !important;
}

.erp-user-name {
    max-width: 140px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--brand-navy) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.erp-role-chip {
    padding: 7px 10px !important;
    border-radius: 999px !important;
    background: rgba(8,111,132,0.12) !important;
    color: var(--brand-teal) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

.sidebar {
    position: fixed !important;
    top: 90px !important;
    right: 16px !important;
    left: auto !important;
    bottom: 16px !important;
 
    width: var(--shell-width) !important;
    padding: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    background: linear-gradient(158deg, rgba(23,50,71,0.98), rgba(12,25,38,0.99)) !important;
    border: 1px solid rgba(232,220,18,0.16) !important;
    box-shadow: 0 28px 80px rgba(16,31,46,0.32) !important;
    transform: translateX(calc(100% + 28px)) !important;
    transition: transform 180ms ease !important;
}

.sidebar.open,
body.sidebar-open .sidebar {
    transform: translateX(0) !important;
}

.sidebar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.sidebar .logo-mark.brand-logo-frame {
    width: 88px !important;
    height: 58px !important;
    flex: 0 0 88px !important;
    border-radius: 16px !important;
}

.sidebar .logo-title {
    color: #fff !important;
    font-size: 16px !important;
}

.sidebar .logo-subtitle {
    color: rgba(232,220,18,0.86) !important;
    font-size: 12px !important;
}

.close-sidebar {
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.78) !important;
    cursor: pointer !important;
}

.sidebar-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
}

.nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    color: rgba(255,255,255,0.72) !important;
    border: 1px solid transparent !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 760 !important;
}

.nav-item:hover,
.nav-item.active {
    background: rgba(8,111,132,0.20) !important;
    border-color: rgba(232,220,18,0.24) !important;
    color: #fff !important;
    transform: none !important;
}

.nav-item.active {
    box-shadow: inset -3px 0 0 var(--brand-yellow) !important;
}

.nav-icon {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 13px !important;
    background: rgba(232,220,18,0.14) !important;
    color: #f7ee38 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

.nav-group {
    display: grid !important;
    gap: 6px !important;
}

.nav-parent {
    position: relative !important;
}

.nav-chevron {
    margin-right: auto !important;
    color: rgba(255,255,255,0.56) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

.nav-submenu {
    display: grid !important;
    gap: 4px !important;
    padding: 0 46px 4px 4px !important;
}

.nav-nested-group {
    display: grid;
    gap: 3px;
}

.nav-nested-parent-row {
    display: flex;
    align-items: center;
}

.nav-nested-parent {
    font-weight: 700;
    flex: 1;
}

.nav-nested-toggle {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 800;
}

.nav-nested-toggle:hover,
.nav-nested-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.1);
}

.nav-nested-menu {
    display: none;
    gap: 2px;
    margin-inline-start: 18px;
    padding-inline-start: 9px;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
}

.nav-nested-group.is-open > .nav-nested-menu {
    display: grid;
}

.nav-grandchild {
    font-size: 0.86rem;
    min-height: 36px;
}

.header-nav-nested-group {
    display: grid;
    gap: 2px;
}

.header-nav-nested-parent-row {
    display: flex;
    align-items: center;
}

.header-nav-nested-parent {
    font-weight: 800;
    flex: 1;
}

.header-nav-nested-toggle {
    width: 34px;
    height: 34px;
    margin-inline-end: 8px;
    border: 1px solid rgba(18, 50, 60, 0.12);
    border-radius: 9px;
    background: #f5f9fa;
    color: #126a75;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 900;
}

.header-nav-nested-toggle:hover,
.header-nav-nested-toggle:focus-visible {
    background: #e8f3f5;
    border-color: rgba(18, 106, 117, 0.3);
}

.header-nav-nested-menu {
    display: none;
    gap: 2px;
    margin: 0 12px 8px;
    padding-inline-start: 10px;
    border-inline-start: 1px solid rgba(18, 50, 60, 0.14);
}

.header-nav-nested-group.is-open > .header-nav-nested-menu {
    display: grid;
}

.header-nav-grandchild {
    min-height: 34px;
    font-size: 0.82rem;
}

.nav-subitem {
    display: flex !important;
    align-items: center !important;
    min-height: 34px !important;
    padding: 7px 12px !important;
    border-radius: 12px !important;
    color: rgba(255,255,255,0.62) !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    border: 1px solid transparent !important;
}

.nav-subitem:hover,
.nav-subitem.active {
    color: #fff !important;
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(232,220,18,0.18) !important;
}

.sidebar-footer {
    margin-top: auto !important;
    padding: 14px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

.sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1050 !important;
    background: rgba(11, 12, 14, 0.42) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.sidebar-overlay.visible,
body.sidebar-open .sidebar-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.mobile-tabbar {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    z-index: 1160 !important;
    display: none !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 8px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255,255,255,0.60) !important;
    background: rgba(255,255,255,0.86) !important;
    box-shadow: 0 18px 50px rgba(18,19,21,0.20) !important;
    backdrop-filter: blur(22px) saturate(1.25);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
}

.mobile-tab {
    min-width: 0 !important;
    border: 0 !important;
    border-radius: 20px !important;
    padding: 8px 4px !important;
    background: transparent !important;
    color: #626872 !important;
    text-decoration: none !important;
    display: grid !important;
    place-items: center !important;
    gap: 2px !important;
    font: inherit !important;
}

.mobile-tab span {
    width: 28px !important;
    height: 24px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: rgba(232,220,18,0.14) !important;
    color: inherit !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

.mobile-tab small {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}

.mobile-tab.active {
    background: var(--brand-navy) !important;
    color: #f7f7f4 !important;
}

.page-content,
.operations-page,
.accounting-page {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding: 0 !important;
}

.page-header {
    margin-bottom: 20px !important;
}

.page-header h1,
h1 {
    color: var(--brand-navy) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    letter-spacing: 0 !important;
}

.page-subtitle {
    color: #516171 !important;
}

.accounting-summary,
.dashboard-summary {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
}

.summary-card,
.accounting-panel,
.table,
.operation-details,
.top-controls,
.operation-toolbar,
.accounting-actions {
    border: 1px solid rgba(255,255,255,0.68) !important;
    background: rgba(255,255,255,0.72) !important;
    box-shadow: 0 16px 42px rgba(16,31,46,0.08) !important;
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

.summary-card,
.accounting-panel,
.operation-details {
    border-radius: 20px !important;
}

.summary-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 16px !important;
}

.summary-card strong,
.accounting-panel h2 {
    color: #516171 !important;
}

.summary-card span {
    color: var(--brand-navy) !important;
    font-size: 24px !important;
    font-weight: 900 !important;
}

.accounting-panel {
    padding: 18px !important;
}

.table,
.accounting-table {
    border-radius: 20px !important;
    overflow: hidden !important;
}

.table-header {
    display: grid !important;
 
    background: var(--brand-navy) !important;
    color: #fff !important;
    border-radius: 0 !important;
}

.table-header > div,
.table-header a {
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}

.table-row {

    color: var(--brand-navy) ;
    border: 1px solid rgba(19,20,23,0.08) !important;
    box-shadow: none !important;
}

.table-row > div {
    color: #102433 !important;
}

.empty-state {
    color: #596778 !important;
    padding: 12px 0 !important;
}

.mini-btn,
.secondary-btn,
.cancel-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(8,111,132,0.18) !important;
    background: #fff !important;

    text-decoration: none !important;
    font-weight: 800 !important;
}

.voucher-modal[hidden] {
    display: none !important;
}

.voucher-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1300 !important;
    display: grid !important;
    place-items: center !important;
    padding: 22px !important;
    background: rgba(16,31,46,0.38) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 180ms ease !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.voucher-modal.active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.voucher-dialog {
    position: relative !important;
    width: min(780px, 100%) !important;
    max-height: min(86vh, 760px) !important;
    overflow: auto !important;
    padding: 22px !important;
    border-radius: 22px !important;
    background: #fff !important;
    border: 1px solid rgba(8,111,132,0.16) !important;
    box-shadow: 0 28px 80px rgba(16,31,46,0.28) !important;
}

.voucher-dialog h2 {
    margin: 0 0 18px !important;
    color: var(--brand-navy) !important;
    font-size: 24px !important;
    font-weight: 950 !important;
}

.voucher-close {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(8,111,132,0.16) !important;
    border-radius: 999px !important;
    background: rgba(245,248,248,0.9) !important;
    color: var(--brand-navy) !important;
    cursor: pointer !important;
    font-size: 22px !important;
    line-height: 1 !important;
}

.voucher-form textarea {
    width: 100% !important;
    min-height: 92px !important;
    resize: vertical !important;
    border: 1px solid rgba(16,31,46,0.10) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    font: inherit !important;
    color: var(--brand-navy) !important;
    background: rgba(255,255,255,0.88) !important;
}

.voucher-actions {
    display: flex !important;
    align-items: end !important;
}

.dashboard-page {
    display: grid !important;
    gap: 18px !important;
}

.dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: start !important;
}

.dashboard-panel {
    min-width: 0 !important;
}

.dashboard-panel-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
}

.dashboard-panel-head h2,
.dashboard-panel h2 {
    margin: 0 !important;
    color: var(--brand-navy) !important;
}

.dashboard-list {
    display: grid !important;
    gap: 10px !important;
}

.dashboard-operation-card {
    display: grid !important;
    gap: 8px !important;
    padding: 13px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(8,111,132,0.10) !important;
    background: rgba(255,255,255,0.76) !important;
}

.dashboard-operation-card > div:first-child {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.dashboard-operation-card strong {
    color: var(--brand-navy) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.dashboard-operation-card span,
.dashboard-operation-card small {
    color: #596778 !important;
}

.dashboard-card-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.dashboard-card-meta > span:first-child {
    min-width: 54px !important;
    font-weight: 900 !important;
    color: var(--brand-teal) !important;
}

.status-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: rgba(8,111,132,0.12) !important;
    color: var(--brand-teal) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.dashboard-table .table-content {
    max-height: 520px !important;
    overflow: auto !important;
}

.dashboard-credit-grid {
    grid-template-columns: minmax(180px, 1.5fr) 100px 140px !important;
}

.dashboard-rank-grid {
    grid-template-columns: minmax(150px, 1.3fr) minmax(120px, 1fr) 100px 100px !important;
}

@media (min-width: 1100px) {
    body.has-erp-shell {
        padding-right: calc(var(--shell-width) + 42px) !important;
        padding-left: 28px !important;
    }

    .erp-topbar {
        right: calc(var(--shell-width) + 34px) !important;
        left: 16px !important;
    }

    .menu-btn,
    .close-sidebar {
        display: none !important;
    }

    .sidebar {
        transform: translateX(0) !important;
    }
}

@media (max-width: 1099px) {
    body.has-erp-shell {
        padding-left: 14px !important;
        padding-right: 14px !important;
        padding-bottom: 108px !important;
    }

    .erp-topbar {
        top: 10px !important;
        left: 10px !important;
        right: 10px !important;
    }

    .sidebar {
        top: 82px !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 92px !important;
        width: auto !important;
        max-width: 390px !important;
    }

    .mobile-tabbar {
        display: grid !important;
    }

    .erp-user-name {
        display: none !important;
    }
}

@media (max-width: 760px) {
    body.has-erp-shell {
        padding-top: 82px !important;
    }

    .erp-topbar {
        height: 54px !important;
        border-radius: 24px !important;
    }

    .erp-brand small,
    .erp-role-chip {
        display: none !important;
    }

    .erp-brand-mark.brand-logo-frame {
        width: 58px !important;
        height: 36px !important;
        flex-basis: 58px !important;
    }
}

@media (max-width: 980px) {
    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }

    .dashboard-credit-grid,
    .dashboard-rank-grid {
        min-width: 620px !important;
    }
}


/* ============================================================
   APP-WIDE PROFESSIONAL STYLING
   Loaded after erp-shell.css on every page that includes main.php,
   plus directly on login.php / access_denied.php (which sit outside
   the authenticated shell and never load erp-shell.css otherwise).
   Fixes real defects (invisible text, unstyled login) and brings
   every remaining page in line with the White Shark brand tokens
   already defined in erp-shell.css's :root.
   ============================================================ */

:root {
    --app-ok: #1f8a5f;
    --app-ok-bg: rgba(31, 138, 95, 0.12);
    --app-warn: #b6841c;
    --app-warn-bg: rgba(182, 132, 28, 0.12);
    --app-danger: #b3403a;
    --app-danger-bg: rgba(179, 64, 58, 0.12);
    --app-info: #086f84;
    --app-info-bg: rgba(8, 111, 132, 0.12);
    --app-neutral: #5b6b78;
    --app-neutral-bg: rgba(91, 107, 120, 0.12);
}

/* ------------------------------------------------------------
   CRITICAL FIX: erp-shell.css sets `.table-row > div { color:
   white !important }`. On the plain white/glass `.table` cards
   used by companies, drivers, vehicles, users, finance, ledger,
   rates, bookings, permissions and reports pages, that renders
   every row as white text on a near-white background — the
   content is effectively invisible. Restoring readable text.
   ------------------------------------------------------------ */
.table-row > div {
    color: var(--brand-navy) !important;
}

.table-row {
    transition: background 120ms ease !important;
}



/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.save-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 10px 18px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, var(--brand-teal), #064f60) !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 10px 24px rgba(8, 111, 132, 0.22) !important;
    transition: transform 140ms ease, box-shadow 140ms ease !important;
}

.save-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 30px rgba(8, 111, 132, 0.30) !important;
}

.cancel-btn,
.secondary-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 10px 18px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(16, 31, 46, 0.14) !important;
    background: #fff !important;
    color: #086f84 !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.cancel-btn:hover,
.secondary-btn:hover {
    background: rgba(245, 248, 248, 0.9) !important;
    color: black !important;
}

.header__item[style*="color:#f87171"],
button.header__item {
    color: var(--app-danger) !important;
    background: none !important;
    border: 0 !important;
    cursor: pointer !important;
    font-weight: 800 !important;
}

a.header__item {
    color: var(--brand-teal) !important;
    text-decoration: none !important;
    font-weight: 800 !important;
}

a.header__item:hover,
button.header__item:hover {
    text-decoration: underline !important;
}

/* ------------------------------------------------------------
   Alerts / flash messages
   ------------------------------------------------------------ */
.alert {
    margin-bottom: 18px !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    background: var(--app-info-bg) !important;
    color: var(--app-info) !important;
    border: 1px solid rgba(8, 111, 132, 0.22) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.alert.success-alert {
    background: var(--app-ok-bg) !important;
    color: var(--app-ok) !important;
    border-color: rgba(31, 138, 95, 0.24) !important;
}

.alert ul {
    margin: 0 !important;
    padding-inline-start: 18px !important;
}

/* ------------------------------------------------------------
   Generic form fields (add/edit/settings/reports pages that
   don't use a dedicated component class)
   ------------------------------------------------------------ */
.page-content input[type="text"],
.page-content input[type="email"],
.page-content input[type="password"],
.page-content input[type="search"],
.page-content input[type="date"],
.page-content input[type="number"],
.page-content select,
.page-content textarea {
    width: 100% !important;
    min-height: 42px !important;
    padding: 9px 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(16, 31, 46, 0.14) !important;
    background: #fff !important;
    color: var(--brand-navy) !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.page-content textarea {
    min-height: 84px !important;
    resize: vertical !important;
}

.page-content input:focus,
.page-content select:focus,
.page-content textarea:focus {
    outline: none !important;
    border-color: var(--brand-teal) !important;
    box-shadow: 0 0 0 3px rgba(8, 111, 132, 0.14) !important;
}

.page-content form label {
    display: block !important;
    margin-bottom: 2px !important;
    color: #5b6b78 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

/* ------------------------------------------------------------
   Stat cards (reports.php summary tiles)
   ------------------------------------------------------------ */
.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;
    margin:20px 0;
}

.card{
    display:flex;
    align-items:center;
    gap:15px;
    background:#fff;
    padding:18px;
    border-radius:12px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.card .icon{
    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    color:#fff;
}

.card h4{
    margin:0;
    font-size:14px;
    color:#666;
    font-weight:500;
}

.card h2{
    margin-top:6px;
    font-size:24px;
    font-weight:700;
}

.revenue .icon{background:#22c55e;}
.profit .icon{background:#3b82f6;}
.expense .icon{background:#ef4444;}
.cash .icon{background:#f59e0b;}
.receivable .icon{background:#8b5cf6;}
.payable .icon{background:#06b6d4;}
/* ------------------------------------------------------------
   Status pills — every variant used across the app.
   (erp-shell.css forces every pill to the same teal via a
   blanket `!important`; these class-specific overrides restore
   semantic color coding, and win because they're more specific.)
   ------------------------------------------------------------ */
.status-pill.pending,
.status-pill.not_submitted,
.status-pill.partial {
    background: var(--app-warn-bg) !important;
    color: var(--app-warn) !important;
}

.status-pill.in_progress,
.status-pill.dispatched,
.status-pill.submitted {
    background: var(--app-info-bg) !important;
    color: var(--app-info) !important;
}

.status-pill.completed,
.status-pill.confirmed,
.status-pill.active,
.status-pill.paid,
.status-pill.valid {
    background: var(--app-ok-bg) !important;
    color: var(--app-ok) !important;
}

.status-pill.cancelled,
.status-pill.inactive,
.status-pill.unpaid,
.status-pill.invalid {
    background: var(--app-danger-bg) !important;
    color: var(--app-danger) !important;
}

.status-pill.draft {
    background: var(--app-neutral-bg) !important;
    color: var(--app-neutral) !important;
}

/* ------------------------------------------------------------
   Permissions page
   ------------------------------------------------------------ */
.permission-user-card {
    transition: background 140ms ease, border-color 140ms ease !important;
}

.permission-user-card:hover,
.permission-user-card.active {
    border-color: rgba(8, 111, 132, 0.30) !important;
    background: var(--app-info-bg) !important;
}

.permission-default {
    background: var(--app-info-bg) !important;
    color: var(--app-info) !important;
}

.permission-check:has(input:checked) {
    border-color: rgba(8, 111, 132, 0.30) !important;
    background: var(--app-info-bg) !important;
}

/* ------------------------------------------------------------
   Login page (does not include main.php, so it never loads
   erp-shell.css by default — link both stylesheets on it directly)
   ------------------------------------------------------------ */
.login-page {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    background: radial-gradient(120% 120% at 50% 0%, rgba(23, 50, 71, 0.98), rgba(9, 20, 30, 0.99)) !important;
}

.login-card {
    width: min(400px, 100%) !important;
    padding: 36px 32px !important;
    border-radius: 26px !important;
    background: #fff !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35) !important;
    text-align: center !important;
}

.login-logo {
    width: 120px !important;
    margin: 0 auto 18px !important;
    display: block !important;
}

.login-card h1 {
    color: var(--brand-navy) !important;
    font-size: 22px !important;
    font-weight: 950 !important;
    margin-bottom: 6px !important;
}

.login-card .page-subtitle {
    color: #5b6b78 !important;
    font-size: 13px !important;
    margin-bottom: 22px !important;
}

.login-form {
    display: grid !important;
    gap: 14px !important;
    text-align: right !important;
}

.login-form label {
    color: #5b6b78 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

.login-form input {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(16, 31, 46, 0.14) !important;
    background: #fff !important;
    color: var(--brand-navy) !important;
    font: inherit !important;
}

.login-form input:focus {
    outline: none !important;
    border-color: var(--brand-teal) !important;
    box-shadow: 0 0 0 3px rgba(8, 111, 132, 0.14) !important;
}

.login-form .save-btn {
    margin-top: 6px !important;
    width: 100% !important;
}

.alert-error {
    margin-bottom: 16px !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    background: var(--app-danger-bg) !important;
    color: var(--app-danger) !important;
    border: 1px solid rgba(179, 64, 58, 0.24) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-align: right !important;
}

.alert-error ul {
    margin: 0 !important;
    padding-inline-start: 18px !important;
}

@media (max-width: 480px) {
    .login-card {
        padding: 28px 22px !important;
    }
}

/* ------------------------------------------------------------
   Destructive mini-buttons (cancel booking, deactivate rate,
   etc.). The base `.mini-btn` rule above forces a white/teal
   background with !important, which was silently swallowing
   the old theme's `.danger-mini` red background — destructive
   actions looked identical to safe ones. Restoring the warning
   color with equal specificity + !important so it actually wins.
   ------------------------------------------------------------ */
.mini-btn.danger-mini {
    border-color: rgba(179, 64, 58, 0.30) !important;
    background: var(--app-danger-bg) !important;
    color: var(--app-danger) !important;
}

.mini-btn.danger-mini:hover {
    background: var(--app-danger) !important;
    color: #fff !important;
}

/* ============================================================
   2026-08-01 FINAL ERP UI LAYER
   One shared polish layer for all authenticated pages.
   It intentionally loads last through main.php to neutralize
   legacy dark styles and duplicated page-level CSS.
   ============================================================ */

:root {
    --erp-bg: #ffffff;
    --erp-surface: #ffffff;
    --erp-surface-soft: #f7fafb;
    --erp-surface-tint: #eef7f8;
    --erp-text: #101f2e;
    --erp-muted: #647484;
    --erp-line: rgba(16, 31, 46, 0.12);
    --erp-line-strong: rgba(8, 111, 132, 0.22);
    --erp-shadow-soft: 0 10px 26px rgba(16, 31, 46, 0.07);
    --erp-shadow-panel: 0 18px 46px rgba(16, 31, 46, 0.10);
    --erp-radius: 16px;
    --erp-radius-lg: 22px;
}

html,
body,
body.has-erp-shell {
    background: var(--erp-bg) !important;
    color: var(--erp-text) !important;
    direction: rtl !important;
    text-align: right !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    letter-spacing: 0 !important;
}

body.has-erp-shell {
    overflow-x: hidden !important;
}

body.has-erp-shell a {
    color: var(--brand-teal) !important;
}

.page-content,
.operations-page,
.accounting-page,
.settings-container,
.reports-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--erp-text) !important;
}

.page-header {
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.page-header h1,
.page-header h2,
h1 {
    margin: 0 0 6px !important;
    color: var(--erp-text) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: clamp(24px, 2.4vw, 34px) !important;
    line-height: 1.25 !important;
    font-weight: 950 !important;
    text-align: right !important;
    letter-spacing: 0 !important;
}

.page-subtitle,
.page-header p,
.accounting-panel p,
.dashboard-panel p {
    color: var(--erp-muted) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    font-weight: 650 !important;
    text-align: right !important;
}

.erp-topbar {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: var(--erp-line) !important;
    box-shadow: 0 14px 34px rgba(16, 31, 46, 0.12) !important;
}

.sidebar {
    z-index: 1200 !important;
}

.sidebar-overlay {
    z-index: 1150 !important;
}

.sidebar-menu,
.nav-submenu {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(232, 220, 18, 0.45) transparent !important;
}

.accounting-panel,
.summary-card,
.dashboard-operation-card,
.permission-user-card,
.permission-group,
.permission-check,
.top-controls,
.operation-toolbar,
.settings-nav-section,
.print-modal,
.voucher-dialog,
.modal-content,
.operation-details,
.login-card,
.table,
.accounting-table,
.report-hero,
.report-filter-card,
.report-table-card,
.report-summary-card {
    background: var(--erp-surface) !important;
    border: 1px solid var(--erp-line) !important;
    border-radius: var(--erp-radius-lg) !important;
    box-shadow: var(--erp-shadow-soft) !important;
    color: var(--erp-text) !important;
}

.accounting-panel,
.settings-nav-section,
.report-filter-card,
.report-table-card,
.permission-group {
    padding: 18px !important;
}

.summary-card {
    min-height: 86px !important;
    padding: 16px !important;
}

.summary-card strong,
.accounting-panel h2,
.dashboard-panel-head h2,
.settings-nav-title,
.permission-group h3,
.report-card-head h2,
.report-table-head h2 {
    color: var(--erp-text) !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
}

.summary-card strong {
    color: var(--erp-muted) !important;
    font-size: 12px !important;
}

.summary-card span {
    color: var(--erp-text) !important;
    font-size: 24px !important;
    font-weight: 950 !important;
}

.top-controls,
.operation-toolbar,
.accounting-actions,
.report-actions,
.toolbar-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
}

.top-controls,
.operation-toolbar,
.accounting-actions {
    justify-content: space-between !important;
    padding: 14px !important;
    margin-bottom: 18px !important;
}

.date-filter-form,
.settings-grid,
.ledger-filters,
.booking-form-grid,
.report-filter-grid,
.voucher-form {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    gap: 12px !important;
    align-items: end !important;
}

.date-filter-form {
    display: flex !important;
    flex-wrap: wrap !important;
}

.date-filter-group,
.report-field,
.booking-form-grid > div,
.settings-grid > div,
.ledger-filters > div,
.voucher-form > div {
    min-width: 0 !important;
}

label,
.date-filter-group label,
.date-filter-group .lable,
.report-field span,
.booking-form-grid label,
.settings-grid label,
.ledger-filters label,
.voucher-form label,
.login-form label,
#operationForm label {
    display: block !important;
    margin: 0 0 6px !important;
    color: var(--erp-muted) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 850 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

input,
select,
textarea,
.date-filter-group input,
.date-filter-group select,
.report-field input,
.report-field select,
.booking-form-grid input,
.booking-form-grid select,
.booking-form-grid textarea,
.settings-grid input,
.settings-grid select,
.settings-grid textarea,
.ledger-filters input,
.ledger-filters select,
.voucher-form input,
.voucher-form select,
.voucher-form textarea,
.login-form input,
#operationForm input,
#operationForm select,
#operationForm textarea {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 9px 12px !important;
    border: 1px solid var(--erp-line) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--erp-text) !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

textarea {
    min-height: 88px !important;
    resize: vertical !important;
}

input::placeholder,
textarea::placeholder {
    color: #8a98a6 !important;
}

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--brand-teal) !important;
    box-shadow: 0 0 0 3px rgba(8, 111, 132, 0.14) !important;
}

.save-btn,
button.save-btn,
.print-btn,
.report-btn-primary,
.screen-print-actions button:first-child {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 9px 16px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, var(--brand-teal), #064f60) !important;
    color: #fff !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 10px 22px rgba(8, 111, 132, 0.18) !important;
}

.save-btn:hover,
button.save-btn:hover,
.print-btn:hover,
.report-btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 28px rgba(8, 111, 132, 0.26) !important;
}

.secondary-btn,
.cancel-btn,
.mini-btn,
.report-btn-secondary,
.screen-print-actions button + button,
.logout-btn,
.date-nav-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 8px 13px !important;
    border: 1px solid var(--erp-line) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--erp-text) !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.secondary-btn:hover,
.cancel-btn:hover,
.mini-btn:hover,
.report-btn-secondary:hover,
.date-nav-btn:hover {
    background: var(--erp-surface-tint) !important;
    color: var(--brand-teal) !important;
    border-color: var(--erp-line-strong) !important;
}

.savee {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 9px 16px !important;
    border: 1px solid rgba(31, 138, 95, 0.26) !important;
    border-radius: 12px !important;
    background: var(--app-ok-bg) !important;
    color: var(--app-ok) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.mini-btn.danger-mini,
.row-action.danger,
button.danger-mini {
    border-color: rgba(179, 64, 58, 0.28) !important;
    background: var(--app-danger-bg) !important;
    color: var(--app-danger) !important;
}

.mini-btn.danger-mini:hover,
.row-action.danger:hover,
button.danger-mini:hover {
    background: var(--app-danger) !important;
    color: #fff !important;
}

.alert,
.success-alert,
.alert-error {
    margin: 0 0 16px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    border: 1px solid var(--erp-line) !important;
    background: var(--erp-surface-soft) !important;
    color: var(--erp-text) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.success-alert,
.alert.success-alert {
    border-color: rgba(31, 138, 95, 0.24) !important;
    background: var(--app-ok-bg) !important;
    color: var(--app-ok) !important;
}

.alert.error,
.alert-error {
    border-color: rgba(179, 64, 58, 0.24) !important;
    background: var(--app-danger-bg) !important;
    color: var(--app-danger) !important;
}

.table,
.accounting-table,
.wide-table,
.report-table-scroll {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    background: #fff !important;
    border-radius: var(--erp-radius-lg) !important;
}

.table-content {
    min-width: 0 !important;
}

.table-header,
.table-row,
.booking-grid,
.booking-rate-grid,
.ledger-grid,
.account-ledger-grid,
.dashboard-credit-grid,
.dashboard-rank-grid,
.report-grid {
    align-items: stretch !important;
}

.table-header {
    background: var(--brand-navy) !important;
    color: #fff !important;
    border-radius: 0 !important;
}

.table-header > div,
.table-header a,
.table-header .header__item,
.report-grid-head > div {
    min-width: 0 !important;
    padding: 12px 10px !important;
    color: #fff !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 950 !important;
    text-align: center !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.table-row,
.booking-grid.table-row,
.booking-rate-grid.table-row,
.ledger-grid.table-row,
.account-ledger-grid.table-row,
.dashboard-credit-grid.table-row,
.dashboard-rank-grid.table-row,
.report-grid-row {
    background: #fff !important;
    color: var(--erp-text) !important;
    border-bottom: 1px solid rgba(16, 31, 46, 0.07) !important;
    box-shadow: none !important;
}

.table-row:nth-child(even),
.booking-grid.table-row:nth-child(even),
.booking-rate-grid.table-row:nth-child(even),
.ledger-grid.table-row:nth-child(even),
.account-ledger-grid.table-row:nth-child(even),
.report-grid-row:nth-child(even) {
    background: var(--erp-surface-soft) !important;
}

.table-row:hover,
.booking-grid.table-row:hover,
.booking-rate-grid.table-row:hover,
.ledger-grid.table-row:hover,
.account-ledger-grid.table-row:hover,
.report-grid-row:hover {
    background: var(--erp-surface-tint) !important;
    transform: none !important;
}

.table-row > div,
.booking-grid.table-row > div,
.booking-rate-grid.table-row > div,
.ledger-grid.table-row > div,
.account-ledger-grid.table-row > div,
.dashboard-credit-grid.table-row > div,
.dashboard-rank-grid.table-row > div,
.report-grid-row > div {
    min-width: 0 !important;
    padding: 11px 10px !important;
    color: var(--erp-text) !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

.row-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
}

.empty-state {
    grid-column: 1 / -1 !important;
    padding: 26px 16px !important;
    color: var(--erp-muted) !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.empty-state::before {
    content: none !important;
}

.status-pill,
.type-badge,
.permission-default {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 26px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}

.status-pill.pending,
.status-pill.draft,
.status-pill.partial,
.status-pill.not_submitted {
    background: var(--app-warn-bg) !important;
    color: var(--app-warn) !important;
}

.status-pill.in_progress,
.status-pill.dispatched,
.status-pill.submitted,
.type-badge.type-asset {
    background: var(--app-info-bg) !important;
    color: var(--app-info) !important;
}

.status-pill.completed,
.status-pill.confirmed,
.status-pill.active,
.status-pill.paid,
.status-pill.valid,
.type-badge.type-revenue {
    background: var(--app-ok-bg) !important;
    color: var(--app-ok) !important;
}

.status-pill.cancelled,
.status-pill.inactive,
.status-pill.unpaid,
.status-pill.invalid,
.type-badge.type-expense {
    background: var(--app-danger-bg) !important;
    color: var(--app-danger) !important;
}

.dashboard-grid,
.permissions-layout {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.dashboard-summary,
.accounting-summary,
.report-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap: 12px !important;
}

.dashboard-list {
    display: grid !important;
    gap: 10px !important;
}

.dashboard-operation-card {
    display: grid !important;
    gap: 8px !important;
    padding: 14px !important;
}

.dashboard-card-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

/* 2026-08-01 dashboard home polish */
.dashboard-page {
    width: min(100%, 1540px) !important;
    margin-inline: auto !important;
}

.dashboard-page .page-header {
    margin-bottom: 4px !important;
}

.dashboard-summary .summary-card {
    min-height: 96px !important;
    position: relative !important;
    overflow: hidden !important;
}

.dashboard-summary .summary-card::after {
    content: "" !important;
    position: absolute !important;
    inset-inline-start: 16px !important;
    bottom: 14px !important;
    width: 38px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: var(--brand-yellow, #e8dc12) !important;
}

.dashboard-panel {
    padding: 18px !important;
}

.dashboard-panel-head {
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--erp-line, #dfe8ec) !important;
}

.dashboard-panel-head .mini-btn,
.dashboard-panel > .mini-btn {
    min-height: 34px !important;
    padding: 7px 12px !important;
    border-radius: 11px !important;
}

.dashboard-operation-card {
    border-radius: 14px !important;
    border: 1px solid rgba(16, 31, 46, 0.08) !important;
    background: #fff !important;
    box-shadow: 0 8px 20px rgba(16, 31, 46, 0.05) !important;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease !important;
}

.dashboard-operation-card:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(8, 111, 132, 0.24) !important;
    box-shadow: 0 14px 28px rgba(16, 31, 46, 0.09) !important;
}

.dashboard-operation-card strong {
    font-size: 14px !important;
    line-height: 1.35 !important;
}

.dashboard-card-money {
    padding: 9px 10px !important;
    border-radius: 12px !important;
    background: rgba(8, 111, 132, 0.07) !important;
}

.dashboard-card-money span {
    color: var(--brand-teal, #086f84) !important;
    font-weight: 900 !important;
}

.dashboard-card-money strong {
    color: var(--brand-navy, #102433) !important;
    direction: ltr !important;
    font-size: 14px !important;
}

.dashboard-table {
    border-radius: 15px !important;
    overflow: hidden !important;
}

.dashboard-credit-grid.table-row > div:nth-child(3),
.dashboard-rank-grid.table-row > div:nth-child(3),
.dashboard-rank-grid.table-row > div:nth-child(4) {
    direction: ltr !important;
    text-align: left !important;
    font-weight: 900 !important;
}

.status-pill.confirmed {
    background: rgba(8, 111, 132, 0.12) !important;
    color: var(--brand-teal, #086f84) !important;
}

.status-pill.dispatched {
    background: rgba(232, 220, 18, 0.22) !important;
    color: #6b6500 !important;
}

.status-pill.cancelled {
    background: rgba(179, 64, 58, 0.12) !important;
    color: #b3403a !important;
}

@media (max-width: 760px) {
    .dashboard-panel-head {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .dashboard-panel-head .mini-btn {
        width: 100% !important;
    }

    .dashboard-card-meta {
        align-items: stretch !important;
    }

    .dashboard-card-money {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
    }
}

.operation-card {
    background: #fff !important;
    color: var(--erp-text) !important;
}

.operation-card .card-row {
    color: var(--erp-text) !important;
}

.operations-left,
.operations-right {
    background: #fff !important;
}

.operations-left .table-header,
.operations-left .table-row {
    grid-template-columns: 70px 150px 150px 150px 130px 120px 140px 160px 140px 140px 80px !important;
    min-width: 1530px !important;
}

.operations-table,
.operations-table .table {
    overflow-x: auto !important;
}

.operations-table .table-content,
.operations-table #operationsLeft {
    min-width: 1530px !important;
}

.booking-grid {
      display: grid !important;
    grid-template-columns: repeat(19, minmax(140px, 1fr)) !important;
    min-width: 2670px !important;
}

.booking-rate-grid {
    grid-template-columns: minmax(150px, 1.2fr) minmax(150px, 1.1fr) minmax(170px, 1.25fr) minmax(120px, 0.9fr) 110px 110px 95px 95px 95px minmax(180px, 1.25fr) !important;
    min-width: 1280px !important;
}

.ledger-grid {
    grid-template-columns: 115px 130px minmax(190px, 1.5fr) minmax(240px, 2fr) 110px 110px !important;
    min-width: 900px !important;
}

.account-ledger-grid {
    grid-template-columns: 90px minmax(180px, 1.7fr) 120px 110px 110px minmax(150px, 1.2fr) 110px 90px !important;
    min-width: 980px !important;
}

.settings-container {
    display: grid !important;
    gap: 18px !important;
}

.nav-items-grid,
.permission-check-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 12px !important;
}

.permission-check {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px !important;
}

.permission-check input {
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    flex: 0 0 18px !important;
    margin-top: 2px !important;
}

#formModal,
.voucher-modal,
.print-modal-overlay {
    background: rgba(16, 31, 46, 0.42) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

#formModal .modal-content,
.operation-modal,
.voucher-dialog,
.print-modal {
    width: min(760px, calc(100vw - 28px)) !important;
    max-height: min(88vh, 820px) !important;
    overflow: auto !important;
    background: #fff !important;
    color: var(--erp-text) !important;
}

.form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.print-header,
.print-footer,
.voucher-actions,
.modal-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
}

.print-header,
.print-footer {
    justify-content: space-between !important;
}

.login-page {
    min-height: 100vh !important;
    padding: 24px !important;
    background:
        linear-gradient(rgba(16, 31, 46, 0.70), rgba(16, 31, 46, 0.84)),
        url("white-shark.jpg") center / cover no-repeat !important;
}

.login-card {
    width: min(420px, 100%) !important;
    border-top: 4px solid var(--brand-yellow) !important;
}

.login-logo {
    width: min(190px, 72vw) !important;
    height: auto !important;
    border-radius: 14px !important;
    background: #fff !important;
}

@media (min-width: 1100px) {
    body.has-erp-shell {
        padding-right: calc(var(--shell-width) + 42px) !important;
        padding-left: 28px !important;
    }

    .erp-topbar {
        right: calc(var(--shell-width) + 34px) !important;
        left: 16px !important;
    }
}

@media (max-width: 1099px) {
    .dashboard-grid,
    .permissions-layout {
        grid-template-columns: 1fr !important;
    }

    .top-controls,
    .operation-toolbar,
    .accounting-actions {
        align-items: stretch !important;
    }

    .date-filter-form,
    .toolbar-actions {
        width: 100% !important;
    }
}

@media (max-width: 760px) {
    body.has-erp-shell {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    .page-header h1,
    h1 {
        font-size: 24px !important;
    }

    .top-controls,
    .operation-toolbar,
    .accounting-actions,
    .accounting-panel,
    .summary-card {
        border-radius: 16px !important;
    }

    .date-filter-form,
    .settings-grid,
    .ledger-filters,
    .booking-form-grid,
    .report-filter-grid,
    .voucher-form,
    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .toolbar-actions,
    .report-actions,
    .modal-buttons,
    .print-footer {
        align-items: stretch !important;
    }

    .toolbar-actions > *,
    .report-actions > *,
    .modal-buttons > *,
    .print-footer > * {
        width: 100% !important;
    }

    .mobile-tabbar {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        border-radius: 20px !important;
    }
}

/* 2026-08-01 header navigation: desktop menu in topbar, mobile drawer preserved */
.erp-header-menu {
    display: none !important;
}

.erp-topbar {
    z-index: 1200 !important;
}

body.sidebar-open .top-controls,
body.sidebar-open .operations-wrapper,
body.sidebar-open .page-subtitle,
body.sidebar-open h1 {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
}

.top-logout-form {
    margin: 0 !important;
}

.top-logout-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 7px 12px !important;
    border: 1px solid rgba(179, 64, 58, 0.20) !important;
    border-radius: 999px !important;
    background: rgba(179, 64, 58, 0.08) !important;
    color: #b3403a !important;
    font: inherit !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.top-logout-btn:hover {
    background: #b3403a !important;
    color: #fff !important;
}

@media (min-width: 1100px) {
    body.has-erp-shell {
        padding: calc(var(--topbar-height) + 18px) 24px 28px !important;
    }

    .erp-topbar {
        right: 16px !important;
        left: 16px !important;
        height: 64px !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 8px 12px !important;
        overflow: visible !important;
    }

    .menu-btn,
    .close-sidebar,
    .sidebar,
    .sidebar-overlay,
    .mobile-tabbar {
        display: none !important;
    }

    .erp-brand {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .erp-brand-mark.brand-logo-frame {
        width: 66px !important;
        height: 40px !important;
        flex-basis: 66px !important;
    }

    .erp-brand strong {
        font-size: 14px !important;
    }

    .erp-brand small {
        max-width: 170px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .erp-header-menu {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        overflow: visible !important;
    }

    .header-nav-group {
        position: relative !important;
        flex: 0 0 auto !important;
    }

    .header-nav-group::after {
        content: "" !important;
        position: absolute !important;
        top: 100% !important;
        inset-inline-start: 0 !important;
        width: 100% !important;
        height: 8px !important;
        z-index: 1399 !important;
    }

    .header-nav-item {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        min-height: 40px !important;
        padding: 8px 10px !important;
        border: 1px solid transparent !important;
        border-radius: 999px !important;
        color: #405160 !important;
        background: transparent !important;
        text-decoration: none !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
        transition: background 140ms ease, color 140ms ease, border-color 140ms ease !important;
    }

    .header-nav-item:hover,
    .header-nav-item.active,
    .header-nav-group.active > .header-nav-item {
        background: rgba(8, 111, 132, 0.10) !important;
        border-color: rgba(8, 111, 132, 0.16) !important;
        color: var(--brand-teal, #086f84) !important;
    }

    .header-nav-item.active,
    .header-nav-group.active > .header-nav-item {
        box-shadow: inset 0 -3px 0 var(--brand-yellow, #e8dc12) !important;
    }

    .header-nav-icon {
        width: 27px !important;
        height: 27px !important;
        flex: 0 0 27px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 999px !important;
        background: rgba(232, 220, 18, 0.16) !important;
        color: #6d6800 !important;
        font-size: 10px !important;
        font-weight: 950 !important;
    }

    .header-nav-label {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .header-nav-chevron {
        color: #7c8a96 !important;
        font-size: 15px !important;
        font-weight: 950 !important;
        transform: rotate(-90deg) !important;
    }

    .header-nav-submenu {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        inset-inline-start: 0 !important;
        z-index: 1400 !important;
        min-width: 210px !important;
        display: grid !important;
        gap: 5px !important;
        padding: 9px !important;
        border: 1px solid var(--shell-line, rgba(8, 111, 132, 0.16)) !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 22px 54px rgba(16, 31, 46, 0.18) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(6px) !important;
        transition: opacity 140ms ease, transform 140ms ease !important;
        backdrop-filter: blur(18px) saturate(1.2) !important;
        -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
    }

    .header-nav-group:hover .header-nav-submenu,
    .header-nav-group:focus-within .header-nav-submenu {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    .header-nav-subitem {
        display: flex !important;
        align-items: center !important;
        min-height: 36px !important;
        padding: 8px 11px !important;
        border-radius: 11px !important;
        color: var(--brand-navy, #101f2e) !important;
        text-decoration: none !important;
        font-size: 12.5px !important;
        font-weight: 850 !important;
        white-space: nowrap !important;
    }

    .header-nav-subitem:hover,
    .header-nav-subitem.active {
        background: rgba(8, 111, 132, 0.10) !important;
        color: var(--brand-teal, #086f84) !important;
    }

    .erp-top-actions {
        flex: 0 0 auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 1099px) {
    .erp-header-menu {
        display: none !important;
    }

    .top-logout-form {
        display: none !important;
    }

    .menu-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .sidebar {
        display: flex !important;
    }
}

@media (max-width: 1280px) and (min-width: 1100px) {
    .header-nav-item {
        padding-inline: 8px !important;
        font-size: 12px !important;
    }

    .header-nav-icon {
        width: 24px !important;
        height: 24px !important;
        flex-basis: 24px !important;
    }

    .erp-user-name {
        max-width: 92px !important;
    }

    .top-logout-btn {
        padding-inline: 10px !important;
    }
}

@media print {
    .erp-topbar,
    .sidebar,
    .sidebar-overlay,
    .mobile-tabbar,
    .top-controls,
    .operation-toolbar,
    .accounting-actions {
        display: none !important;
    }

    body.has-erp-shell,
    body {
        padding: 0 !important;
        background: #fff !important;
    }

    .accounting-panel,
    .summary-card,
    .table,
    .accounting-table {
        box-shadow: none !important;
        border-color: #d8dee4 !important;
    }
}

/* ============================================================
   WHITE SHARK ERP — UNIFIED PRODUCT SYSTEM
   Final visual layer for the imported PHP application.
   This layer is intentionally presentation-only: routes, forms,
   permissions, requests, queries, and database contracts remain
   untouched.
   ============================================================ */

:root {
    --erp-ink: #102a3a;
    --erp-ink-soft: #294556;
    --erp-teal: #087f86;
    --erp-teal-dark: #06616d;
    --erp-gold: #c69b3a;
    --erp-gold-soft: #f3e6c5;
    --erp-canvas: #f4f7f9;
    --erp-surface: #ffffff;
    --erp-surface-soft: #f8fafb;
    --erp-line: #dce6ea;
    --erp-line-strong: #c4d4da;
    --erp-muted: #657987;
    --erp-success: #1d8660;
    --erp-warning: #ad7417;
    --erp-danger: #b64542;
    --erp-shadow-sm: 0 5px 18px rgba(16, 42, 58, 0.06);
    --erp-shadow-md: 0 14px 34px rgba(16, 42, 58, 0.09);
    --erp-shadow-lg: 0 24px 58px rgba(16, 42, 58, 0.15);
    --erp-radius-sm: 10px;
    --erp-radius-md: 16px;
    --erp-radius-lg: 22px;
}

html {
    background: var(--erp-canvas) !important;
}

body.has-erp-shell {
    min-height: 100vh !important;
    padding: calc(var(--topbar-height) + 28px) 28px 32px !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(198, 155, 58, 0.08), transparent 28rem),
        linear-gradient(135deg, #f8fafb 0%, var(--erp-canvas) 60%, #eef4f5 100%) !important;
    color: var(--erp-ink) !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
}

body.has-erp-shell::selection {
    background: rgba(8, 127, 134, 0.20);
}

body.has-erp-shell a {
    color: var(--erp-teal) !important;
}

body.has-erp-shell button,
body.has-erp-shell input,
body.has-erp-shell select,
body.has-erp-shell textarea {
    font-family: inherit !important;
}

.erp-topbar {
    top: 16px !important;
    left: 24px !important;
    right: calc(var(--shell-width) + 38px) !important;
    height: 66px !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(196, 212, 218, 0.84) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: var(--erp-shadow-md) !important;
    backdrop-filter: blur(18px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
}

.erp-brand {
    gap: 12px !important;
}

.erp-brand-mark.brand-logo-frame {
    width: 70px !important;
    height: 44px !important;
    flex-basis: 70px !important;
    border-radius: 12px !important;
    border-color: rgba(8, 127, 134, 0.20) !important;
    box-shadow: var(--erp-shadow-sm) !important;
}

.erp-brand strong {
    color: var(--erp-ink) !important;
    font-size: 15px !important;
    letter-spacing: 0.01em !important;
}

.erp-brand small {
    margin-top: 3px !important;
    color: var(--erp-teal) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.erp-top-actions {
    gap: 10px !important;
    padding-inline-start: 4px !important;
}

.erp-status-dot {
    width: 8px !important;
    height: 8px !important;
    background: var(--erp-success) !important;
    box-shadow: 0 0 0 4px rgba(29, 134, 96, 0.12) !important;
}

.erp-user-name {
    color: var(--erp-ink) !important;
    font-size: 13px !important;
}

.erp-role-chip {
    padding: 7px 11px !important;
    background: var(--erp-surface-soft) !important;
    border: 1px solid var(--erp-line) !important;
    color: var(--erp-teal-dark) !important;
    font-size: 11px !important;
}

.top-logout-btn {
    min-height: 36px !important;
    padding: 7px 13px !important;
    border: 1px solid rgba(182, 69, 66, 0.22) !important;
    border-radius: var(--erp-radius-sm) !important;
    background: #fff8f7 !important;
    color: var(--erp-danger) !important;
    font-size: 12px !important;
}

.top-logout-btn:hover {
    background: var(--erp-danger) !important;
}

.sidebar {
    top: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    width: var(--shell-width) !important;
    padding: 20px 16px !important;
    border: 1px solid rgba(198, 155, 58, 0.20) !important;
    border-radius: 24px !important;
    background:
        linear-gradient(160deg, rgba(16, 42, 58, 0.99), rgba(7, 55, 66, 0.99)) !important;
    box-shadow: 0 24px 64px rgba(16, 42, 58, 0.28) !important;
}

.sidebar-header {
    padding: 2px 2px 17px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.sidebar .logo-mark.brand-logo-frame {
    width: 82px !important;
    height: 54px !important;
    flex-basis: 82px !important;
    border-radius: 13px !important;
}

.sidebar .logo-title {
    color: #fff !important;
    font-size: 16px !important;
}

.sidebar .logo-subtitle {
    margin-top: 4px !important;
    color: rgba(243, 230, 197, 0.82) !important;
    font-size: 11px !important;
}

.sidebar-menu {
    gap: 5px !important;
    padding-top: 2px !important;
}

.nav-item {
    min-height: 46px !important;
    gap: 11px !important;
    padding: 8px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    color: rgba(255, 255, 255, 0.70) !important;
    font-size: 13px !important;
    font-weight: 750 !important;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
}

.nav-item.active {
    background: linear-gradient(90deg, rgba(8, 127, 134, 0.44), rgba(8, 127, 134, 0.18)) !important;
    border-color: rgba(198, 155, 58, 0.30) !important;
    color: #fff !important;
    box-shadow: inset -3px 0 0 var(--erp-gold), 0 8px 18px rgba(4, 30, 40, 0.16) !important;
}

.nav-icon {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
    border-radius: 10px !important;
    background: rgba(243, 230, 197, 0.12) !important;
    color: var(--erp-gold-soft) !important;
    font-size: 10px !important;
}

.nav-item.active .nav-icon,
.nav-item:hover .nav-icon {
    background: rgba(243, 230, 197, 0.20) !important;
    color: #fff !important;
}

.nav-submenu {
    gap: 3px !important;
    padding: 0 42px 3px 3px !important;
}

.nav-subitem {
    min-height: 32px !important;
    padding: 6px 10px !important;
    border-radius: 9px !important;
    color: rgba(255, 255, 255, 0.58) !important;
    font-size: 11px !important;
}

.nav-subitem:hover,
.nav-subitem.active {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.sidebar-footer {
    padding: 13px !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, 0.055) !important;
}

.footer-label {
    color: rgba(255, 255, 255, 0.56) !important;
    font-size: 10px !important;
}

.footer-badge {
    background: rgba(243, 230, 197, 0.13) !important;
    color: var(--erp-gold-soft) !important;
    box-shadow: none !important;
}

.logout-btn {
    min-height: 38px !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.78) !important;
}

.logout-btn:hover {
    background: rgba(182, 69, 66, 0.20) !important;
    border-color: rgba(255, 170, 165, 0.34) !important;
    color: #fff !important;
}

.page-content,
.operations-page,
.accounting-page,
.settings-container,
.reports-page {
    width: 100% !important;
    max-width: 1560px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.page-header {
    position: relative !important;
    margin: 0 0 24px !important;
    padding: 2px 18px 2px 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.page-header::before {
    content: "" !important;
    position: absolute !important;
    top: 2px !important;
    right: 0 !important;
    width: 4px !important;
    height: 50px !important;
    border-radius: 999px !important;
    background: linear-gradient(var(--erp-gold), var(--erp-teal)) !important;
}

.page-header h1,
h1 {
    color: var(--erp-ink) !important;
    font-size: clamp(24px, 2.3vw, 34px) !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
}

.page-subtitle {
    margin-top: 6px !important;
    color: var(--erp-muted) !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
}

.accounting-summary,
.dashboard-summary,
.cards {
    gap: 14px !important;
    margin: 0 0 18px !important;
}

.summary-card,
.accounting-panel,
.table,
.accounting-table,
.operation-details,
.top-controls,
.operation-toolbar,
.accounting-actions,
.dashboard-panel,
.card,
.settings-section,
.permission-group {
    border: 1px solid var(--erp-line) !important;
    border-radius: var(--erp-radius-md) !important;
    background: var(--erp-surface) !important;
    box-shadow: var(--erp-shadow-sm) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.summary-card,
.card {
    min-height: 96px !important;
    padding: 17px !important;
}

.summary-card:hover,
.card:hover {
    border-color: var(--erp-line-strong) !important;
    box-shadow: var(--erp-shadow-md) !important;
    transform: translateY(-2px) !important;
}

.summary-card strong,
.card h4 {
    color: var(--erp-muted) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.summary-card span,
.card h2 {
    color: var(--erp-ink) !important;
    font-size: 25px !important;
    font-weight: 900 !important;
}

.summary-card::after,
.card::after {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    align-self: flex-start !important;
    border-radius: 50% !important;
    background: var(--erp-gold) !important;
    box-shadow: 0 0 0 5px rgba(198, 155, 58, 0.12) !important;
}

.accounting-panel,
.dashboard-panel {
    padding: 20px !important;
}

.accounting-panel > h2,
.dashboard-panel h2,
.dashboard-panel-head h2 {
    color: var(--erp-ink) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

.dashboard-panel-head {
    padding-bottom: 13px !important;
    border-bottom: 1px solid var(--erp-line) !important;
}

.dashboard-operation-card {
    padding: 14px !important;
    border: 1px solid var(--erp-line) !important;
    border-radius: 12px !important;
    background: var(--erp-surface-soft) !important;
}

.dashboard-operation-card:hover {
    border-color: rgba(8, 127, 134, 0.34) !important;
    background: #fff !important;
}

.table,
.accounting-table {
    border-radius: var(--erp-radius-md) !important;
    border-color: var(--erp-line) !important;
    overflow: hidden !important;
}

.table-header {
    min-height: 48px !important;
    align-items: center !important;
    background: var(--erp-ink) !important;
    color: #fff !important;
}

.table-header > div,
.table-header a,
.header__item {
    color: rgba(255, 255, 255, 0.90) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: 0.02em !important;
}

.table-row {
    min-height: 52px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--erp-line) !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: var(--erp-ink) !important;
}

.table-row:nth-child(even) {
    background: #fbfcfd !important;
}

.table-row:hover {
    background: #f0f8f8 !important;
}

.table-row > div {
    color: var(--erp-ink) !important;
    font-size: 12px !important;
}

.empty-state {
    min-height: 120px !important;
    display: grid !important;
    place-items: center !important;
    padding: 28px !important;
    background: var(--erp-surface-soft) !important;
    color: var(--erp-muted) !important;
    font-size: 13px !important;
}

body.has-erp-shell input[type="text"],
body.has-erp-shell input[type="email"],
body.has-erp-shell input[type="password"],
body.has-erp-shell input[type="search"],
body.has-erp-shell input[type="date"],
body.has-erp-shell input[type="time"],
body.has-erp-shell input[type="number"],
body.has-erp-shell select,
body.has-erp-shell textarea {
    min-height: 43px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--erp-line-strong) !important;
    border-radius: var(--erp-radius-sm) !important;
    background: #fff !important;
    color: var(--erp-ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

body.has-erp-shell textarea {
    min-height: 90px !important;
}

body.has-erp-shell input::placeholder,
body.has-erp-shell textarea::placeholder {
    color: #91a0a8 !important;
    font-weight: 500 !important;
}

body.has-erp-shell input:focus,
body.has-erp-shell select:focus,
body.has-erp-shell textarea:focus {
    outline: none !important;
    border-color: var(--erp-teal) !important;
    box-shadow: 0 0 0 3px rgba(8, 127, 134, 0.13) !important;
}

body.has-erp-shell label {
    color: var(--erp-muted) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

.save-btn,
button.save-btn,
.print-btn {
    min-height: 42px !important;
    padding: 10px 17px !important;
    border: 0 !important;
    border-radius: var(--erp-radius-sm) !important;
    background: linear-gradient(135deg, var(--erp-teal), var(--erp-teal-dark)) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(8, 127, 134, 0.19) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.save-btn:hover,
button.save-btn:hover,
.print-btn:hover {
    background: linear-gradient(135deg, #0a9295, var(--erp-teal)) !important;
    box-shadow: 0 11px 24px rgba(8, 127, 134, 0.27) !important;
    transform: translateY(-1px) !important;
}

.secondary-btn,
.mini-btn,
.cancel-btn {
    min-height: 42px !important;
    padding: 9px 15px !important;
    border: 1px solid var(--erp-line-strong) !important;
    border-radius: var(--erp-radius-sm) !important;
    background: #fff !important;
    color: var(--erp-ink-soft) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.secondary-btn:hover,
.mini-btn:hover,
.cancel-btn:hover {
    border-color: var(--erp-teal) !important;
    background: #f1f9f9 !important;
    color: var(--erp-teal-dark) !important;
}

.alert {
    border-radius: var(--erp-radius-sm) !important;
    border-color: rgba(8, 127, 134, 0.20) !important;
    background: #eff9f9 !important;
    color: var(--erp-teal-dark) !important;
}

.alert.success-alert {
    border-color: rgba(29, 134, 96, 0.22) !important;
    background: #effaf5 !important;
    color: var(--erp-success) !important;
}

.status-pill {
    min-height: 26px !important;
    padding: 5px 9px !important;
    border: 1px solid transparent !important;
    font-size: 11px !important;
    font-weight: 850 !important;
}

.status-pill.pending,
.status-pill.not_submitted,
.status-pill.partial {
    background: #fff7e6 !important;
    color: var(--erp-warning) !important;
    border-color: #f0dcae !important;
}

.status-pill.in_progress,
.status-pill.dispatched,
.status-pill.submitted {
    background: #edf7f8 !important;
    color: var(--erp-teal-dark) !important;
    border-color: #bfe0e2 !important;
}

.status-pill.completed,
.status-pill.confirmed,
.status-pill.active,
.status-pill.paid,
.status-pill.valid {
    background: #edf9f3 !important;
    color: var(--erp-success) !important;
    border-color: #bfe4d1 !important;
}

.status-pill.cancelled,
.status-pill.inactive,
.status-pill.unpaid,
.status-pill.invalid {
    background: #fff2f1 !important;
    color: var(--erp-danger) !important;
    border-color: #edc5c2 !important;
}

.status-pill.draft {
    background: #f1f4f5 !important;
    color: var(--erp-muted) !important;
    border-color: #d9e1e4 !important;
}

.driver-alert-card {
    border-color: #f0d0cd !important;
    background: #fffafa !important;
    box-shadow: var(--erp-shadow-sm) !important;
}

.driver-alert-icon {
    background: #fff0ef !important;
    color: var(--erp-danger) !important;
}

.driver-alert-driver strong {
    color: var(--erp-ink) !important;
}

.permission-user-card,
.permission-check,
.permission-group {
    border-color: var(--erp-line) !important;
    background: #fff !important;
}

.permission-user-card:hover,
.permission-user-card.active,
.permission-check:has(input:checked) {
    border-color: rgba(8, 127, 134, 0.35) !important;
    background: #eff9f9 !important;
}

.permission-default {
    background: #edf7f8 !important;
    color: var(--erp-teal-dark) !important;
}

.login-page {
    position: relative !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    padding: 32px !important;
    background:
        radial-gradient(circle at 14% 16%, rgba(198, 155, 58, 0.24), transparent 22rem),
        radial-gradient(circle at 88% 82%, rgba(8, 127, 134, 0.28), transparent 25rem),
        linear-gradient(135deg, #102a3a 0%, #073742 100%) !important;
}

.login-page::before,
.login-page::after {
    content: "" !important;
    position: absolute !important;
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

.login-page::before {
    width: 520px !important;
    height: 520px !important;
    top: -270px !important;
    left: -150px !important;
}

.login-page::after {
    width: 680px !important;
    height: 680px !important;
    right: -330px !important;
    bottom: -360px !important;
}

.login-card {
    position: relative !important;
    z-index: 1 !important;
    width: min(430px, 100%) !important;
    padding: 42px 38px 38px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-top: 4px solid var(--erp-gold) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 30px 80px rgba(2, 19, 28, 0.34) !important;
}

.login-logo {
    width: 154px !important;
    max-height: 112px !important;
    object-fit: contain !important;
    margin: 0 auto 22px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(16, 42, 58, 0.11) !important;
}

.login-card h1 {
    color: var(--erp-ink) !important;
    font-size: 25px !important;
    font-weight: 900 !important;
}

.login-card .page-subtitle {
    margin-bottom: 26px !important;
    color: var(--erp-muted) !important;
}

.login-form {
    gap: 10px !important;
}

.login-form label {
    margin-top: 5px !important;
    color: var(--erp-muted) !important;
    font-size: 11px !important;
}

.login-form input {
    min-height: 48px !important;
    border: 1px solid var(--erp-line-strong) !important;
    border-radius: 11px !important;
    background: #fbfcfd !important;
    color: var(--erp-ink) !important;
}

.login-form .save-btn {
    min-height: 48px !important;
    margin-top: 13px !important;
}

@media (min-width: 1100px) {
    body.has-erp-shell {
        padding: calc(var(--topbar-height) + 28px) 28px 32px !important;
    }

    .erp-topbar {
        right: 24px !important;
        left: 24px !important;
    }

    .sidebar,
    .sidebar-overlay,
    .mobile-tabbar {
        display: none !important;
    }
}

@media (max-width: 1099px) {
    body.has-erp-shell {
        padding: 84px 16px 112px !important;
    }

    .erp-topbar {
        top: 12px !important;
        left: 12px !important;
        right: 12px !important;
        height: 60px !important;
        border-radius: 16px !important;
    }

    .sidebar {
        top: 84px !important;
        right: 12px !important;
        left: 12px !important;
        bottom: 96px !important;
        max-width: 390px !important;
        border-radius: 20px !important;
    }

    .page-content,
    .operations-page,
    .accounting-page,
    .settings-container,
    .reports-page {
        max-width: none !important;
    }
}

@media (max-width: 760px) {
    body.has-erp-shell {
        padding: 76px 12px 104px !important;
    }

    .erp-topbar {
        height: 54px !important;
        border-radius: 14px !important;
    }

    .erp-brand-mark.brand-logo-frame {
        width: 58px !important;
        height: 36px !important;
        flex-basis: 58px !important;
    }

    .page-header {
        margin-bottom: 18px !important;
        padding-right: 14px !important;
    }

    .page-header::before {
        height: 42px !important;
    }

    .page-header h1,
    h1 {
        font-size: 23px !important;
    }

    .accounting-panel,
    .dashboard-panel {
        padding: 15px !important;
        border-radius: 15px !important;
    }

    .summary-card,
    .card {
        min-height: 84px !important;
        padding: 14px !important;
    }

    .summary-card span,
    .card h2 {
        font-size: 22px !important;
    }

    .login-page {
        padding: 18px !important;
    }

    .login-card {
        padding: 34px 22px 28px !important;
        border-radius: 18px !important;
    }
}

@media print {
    body.has-erp-shell {
        background: #fff !important;
    }

    .page-header::before,
    .summary-card::after,
    .card::after {
        display: none !important;
    }

    .summary-card,
    .accounting-panel,
    .table,
    .accounting-table,
    .card {
        box-shadow: none !important;
        border-color: #cfd7dc !important;
    }
}

/* Refined navigation icons and active states. */
.shell-svg-icon {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
}

.shell-icon-fallback {
    display: block !important;
    font-size: 10px !important;
    line-height: 1 !important;
}

.header-nav-item {
    gap: 8px !important;
    min-height: 44px !important;
    padding-inline: 11px !important;
    border-radius: 14px !important;
}

.header-nav-item:hover,
.header-nav-item.active,
.header-nav-group.active > .header-nav-item {
    background: linear-gradient(135deg, rgba(8, 111, 132, 0.14), rgba(232, 220, 18, 0.08)) !important;
    border-color: rgba(8, 111, 132, 0.24) !important;
    box-shadow: 0 8px 18px rgba(8, 111, 132, 0.08) !important;
}

.header-nav-icon {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
    border-radius: 10px !important;
    background: rgba(8, 111, 132, 0.09) !important;
    color: var(--brand-teal, #086f84) !important;
}

.header-nav-item:hover .header-nav-icon,
.header-nav-item.active .header-nav-icon,
.header-nav-group.active > .header-nav-item .header-nav-icon {
    color: var(--brand-navy, #101f2e) !important;
    background: var(--brand-yellow, #e8dc12) !important;
}

.header-nav-subitem {
    gap: 9px !important;
}

.header-nav-subicon {
    width: 25px !important;
    height: 25px !important;
    flex: 0 0 25px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    color: var(--brand-teal, #086f84) !important;
    background: rgba(8, 111, 132, 0.08) !important;
}

.header-nav-subicon .shell-svg-icon {
    width: 13px !important;
    height: 13px !important;
}

.header-nav-subitem:hover .header-nav-subicon,
.header-nav-subitem.active .header-nav-subicon {
    color: var(--brand-navy, #101f2e) !important;
    background: var(--brand-yellow, #e8dc12) !important;
}

.nav-item {
    gap: 13px !important;
    min-height: 52px !important;
    border-radius: 17px !important;
}

.nav-icon {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(247, 238, 56, 0.92) !important;
}

.nav-icon .shell-svg-icon {
    width: 18px !important;
    height: 18px !important;
}

.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
    color: var(--brand-navy, #101f2e) !important;
    background: var(--brand-yellow, #e8dc12) !important;
}

.nav-subitem {
    gap: 9px !important;
}

.nav-subicon {
    width: 25px !important;
    height: 25px !important;
    flex: 0 0 25px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    color: rgba(247, 238, 56, 0.82) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.nav-subicon .shell-svg-icon {
    width: 13px !important;
    height: 13px !important;
}

.nav-subitem:hover .nav-subicon,
.nav-subitem.active .nav-subicon {
    color: var(--brand-navy, #101f2e) !important;
    background: var(--brand-yellow, #e8dc12) !important;
}

.mobile-tab span .shell-svg-icon {
    width: 15px !important;
    height: 15px !important;
}

.mobile-tab.active span {
    color: var(--brand-navy, #101f2e) !important;
    background: var(--brand-yellow, #e8dc12) !important;
}