/*
 * Anna Company — project overrides on top of the theme (app.min.css).
 * Rule: use theme utility classes first; add here only reusable, system-wide patterns.
 */

/* ---------- SPA navigation progress bar ---------- */
#nav-progress {
    position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 2000;
    height: 3px; width: 0; opacity: 0;
    background: var(--theme-primary);
    box-shadow: 0 0 8px rgba(var(--theme-primary-rgb), .6);
    transition: width .35s ease, opacity .2s ease;
}
#nav-progress.active { opacity: 1; }

/* ---------- RTL typography (Kurdish / Arabic) ---------- */
[dir="rtl"] body, [dir="rtl"] .btn, [dir="rtl"] .form-control, [dir="rtl"] .form-select,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
    font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}
/* Numbers, codes and money always read left-to-right, even in RTL */
.num, .money, .code, td.num, th.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: end; white-space: nowrap; }
.code, .money { white-space: nowrap; }

/* ---------- Cards / lists ---------- */
.card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--theme-box-shadow); }
.min-w-0 { min-width: 0; }

th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
th[data-sort]::after { content: "\21C5"; opacity: .25; margin-inline-start: .35rem; font-size: .8em; }
th.sort-asc::after { content: "\2191"; opacity: .8; }
th.sort-desc::after { content: "\2193"; opacity: .8; }

[data-list] tbody { transition: opacity .15s ease; }

/* Status badges: one mapping for the whole system (see docs/rules/01-ui-ux.md) */
.badge-status { font-weight: 600; text-transform: capitalize; }

/* ---------- Select2 skinned like the theme's form controls & dropdown menus ---------- */
.select2-container { max-width: 100%; }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: calc(1.5em + .9rem + 2px); display: flex; align-items: center;
    border: var(--theme-border-width, 1px) solid var(--theme-border-color);
    border-radius: var(--theme-border-radius); background-color: var(--theme-secondary-bg);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--theme-body-color); line-height: normal; padding-inline: .75rem 2rem; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--theme-secondary-color); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; inset-inline-end: .35rem; }
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
    border-color: var(--theme-primary); box-shadow: 0 0 0 .15rem var(--theme-focus-ring-color);
}
/* The dropdown panel: SOLID background (never transparent), elevated like .dropdown-menu */
.select2-container--open .select2-dropdown,
.select2-dropdown {
    background-color: var(--theme-secondary-bg) !important; color: var(--theme-body-color);
    border: var(--theme-border-width, 1px) solid var(--theme-border-color);
    border-radius: var(--theme-border-radius); box-shadow: var(--theme-box-shadow);
    overflow: hidden; z-index: 2060;   /* above Bootstrap modals (1055) */
}
.select2-container--open .select2-dropdown--below { margin-top: 4px; }
.select2-container--open .select2-dropdown--above { margin-top: -4px; }
.select2-search--dropdown { padding: .5rem; background-color: var(--theme-secondary-bg); }
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: var(--theme-border-width, 1px) solid var(--theme-border-color); border-radius: var(--theme-border-radius);
    background-color: var(--theme-body-bg); color: var(--theme-body-color); padding: .4rem .65rem; outline: 0;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--theme-primary); }
.select2-results__options { padding: .25rem; }
.select2-container--default .select2-results__option { padding: .45rem .65rem; border-radius: calc(var(--theme-border-radius) * .75); background-color: transparent; }
.select2-container--default .select2-results > .select2-results__options { max-height: 280px; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--theme-primary); color: #fff; }
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--selected { background-color: var(--theme-primary-bg-subtle); color: var(--theme-primary); }
.select2-container--default .select2-results__option--disabled { color: var(--theme-secondary-color); }
.is-invalid + .select2-container .select2-selection { border-color: var(--theme-danger) !important; }

/* Native dropdown menus & form-selects always opaque too */
.dropdown-menu { background-color: var(--theme-secondary-bg); }
.form-select option { background-color: var(--theme-secondary-bg); color: var(--theme-body-color); }

/* ---------- Brand logo (sidebar + topbar) ---------- */
.sidenav-menu .logo .logo-lg img,
.logo-topbar .logo-lg img { height: 44px !important; width: auto; max-width: 190px; object-fit: contain; }
.sidenav-menu .logo .logo-sm img,
.logo-topbar .logo-sm img { height: 36px !important; width: auto; object-fit: contain; }
.sidenav-menu .logo { min-height: 75px; display: flex; align-items: center; }
.auth-brand img { height: 56px; width: auto; }

/* ---------- Charts never overflow their card ---------- */
.apexcharts-canvas, .apexcharts-canvas svg { max-width: 100%; }
[data-chart-trend], [data-chart-aging], .chart-box { width: 100%; min-width: 0; overflow: hidden; }

/* =====================================================================================
 * DESIGN LAYER (polish pass). Everything below only composes theme tokens (--theme-*);
 * no hard-coded brand colours, logical properties only (RTL), works in light + dark.
 * ===================================================================================== */
:root {
    --anna-radius: var(--theme-border-radius-lg);
    --anna-radius-sm: var(--theme-border-radius);
    --anna-gap: 1rem;
    --anna-muted: var(--theme-secondary-color);
    --anna-surface: var(--theme-secondary-bg);
    --anna-surface-2: var(--theme-tertiary-bg);
    --anna-ring: 0 0 0 .2rem var(--theme-focus-ring-color);
    --anna-transition: .15s ease;
}

/* ---------- Page title bar (View::page): title, breadcrumb, actions on the end side ---------- */
.page-title-head { padding-top: 1.15rem; padding-bottom: .85rem; min-height: 0; margin-bottom: .25rem; row-gap: .75rem !important; }
.page-title-head .page-main-title { font-size: 1.2rem !important; line-height: 1.3; letter-spacing: -.01em; color: var(--theme-heading-color, inherit); }
[dir="rtl"] .page-title-head .page-main-title { letter-spacing: 0; }
.page-title-head .breadcrumb { margin-top: .3rem !important; }
.page-title-head .breadcrumb-item, .page-title-head .breadcrumb-item a { color: var(--anna-muted); }
.page-title-head .breadcrumb-item a:hover { color: var(--theme-primary); }
.page-title-head .breadcrumb-item.active { color: var(--theme-body-color); }
.page-title-head .page-title-actions { flex-wrap: wrap; }
@media (max-width: 575.98px) {
    .page-title-head { padding-top: .85rem; }
    .page-title-head .page-title-actions { width: 100%; }
}

/* ---------- Document action bar (detail pages: print / return / cancel …) ---------- */
.doc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: var(--anna-gap); }

/* ---------- Cards ---------- */
.card { border-radius: var(--anna-radius); }
.card > .card-header:first-child { border-start-start-radius: var(--anna-radius); border-start-end-radius: var(--anna-radius); }
.card-header .card-title, .card-header h5.card-title { font-weight: var(--theme-font-weight-semibold); }
.card-header.border-light, .card-header.border-dashed { border-bottom-color: var(--theme-border-color) !important; }
.card-footer.border-0 { background: transparent; }
/* Section heading inside a card body (settings / forms) */
.form-section-title {
    display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; padding-bottom: .5rem;
    font-size: .78rem; font-weight: var(--theme-font-weight-bold); text-transform: uppercase; letter-spacing: .06em;
    color: var(--anna-muted); border-bottom: 1px dashed var(--theme-border-color);
}
[dir="rtl"] .form-section-title { letter-spacing: 0; }

/* ---------- KPI / stat cards: ONE pattern everywhere (partials/kpi.php + Anna.kpi()) ---------- */
.kpi-card .card-body { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.15rem; min-width: 0; }
.kpi-icon {
    flex: 0 0 46px; width: 46px; height: 46px; border-radius: .8rem;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.kpi-body { flex: 1 1 auto; min-width: 0; }
.kpi-label {
    font-size: .72rem; line-height: 1.3; font-weight: var(--theme-font-weight-semibold); text-transform: uppercase;
    letter-spacing: .04em; color: var(--anna-muted); margin-bottom: .3rem;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
[dir="rtl"] .kpi-label { letter-spacing: 0; text-transform: none; font-size: .8rem; }
.kpi-value {
    font-size: 1.35rem; line-height: 1.2; font-weight: var(--theme-font-weight-bold); color: var(--theme-heading-color, inherit);
    display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .3rem;
}
.kpi-value > .num { white-space: nowrap; }
/* RTL: "1,500 IQD" reads left-to-right like the money columns, but stays on the reading-start (right) side */
[dir="rtl"] .kpi-value:not(.kpi-value-sm) { direction: ltr; justify-content: flex-end; }
.kpi-value > .kpi-unit { margin-inline-start: 0; }
/* Narrow cards (dense KPI rows): shrink icon + value instead of truncating numbers */
.kpi-card { container-type: inline-size; }
@container (max-width: 230px) {
    .kpi-card .card-body { gap: .65rem; padding-inline: .9rem; }
    .kpi-icon { flex-basis: 36px; width: 36px; height: 36px; font-size: 1.1rem; border-radius: .6rem; }
    .kpi-value { font-size: 1.12rem; }
}
.kpi-value.kpi-value-sm { font-size: .95rem; font-weight: var(--theme-font-weight-semibold); }
.kpi-value.kpi-value-sm > span { flex: 1 1 100%; min-width: 0; white-space: normal; }
.kpi-unit { font-size: .72rem; font-weight: var(--theme-font-weight-semibold); color: var(--anna-muted); margin-inline-start: .3rem; }
.kpi-sub { font-size: .75rem; color: var(--anna-muted); margin-top: .25rem; line-height: 1.35; }
.kpi-card.kpi-clickable { cursor: pointer; transition: border-color var(--anna-transition), box-shadow var(--anna-transition), transform var(--anna-transition); }
.kpi-card.kpi-clickable:hover { transform: translateY(-1px); box-shadow: var(--theme-box-shadow); }
.kpi-card.kpi-clickable:focus-visible { outline: 0; box-shadow: var(--anna-ring); }
.kpi-card.is-active { box-shadow: inset 0 0 0 2px var(--theme-primary); }
@media (max-width: 575.98px) {
    .kpi-card .card-body { padding: .8rem .9rem; gap: .7rem; }
    .kpi-icon { flex-basis: 38px; width: 38px; height: 38px; font-size: 1.15rem; border-radius: .65rem; }
    .kpi-value { font-size: 1.1rem; }
}

/* ---------- List card header = filter bar (search, primary action, filters, per page) ---------- */
[data-list] > .card-header { gap: .6rem !important; padding-block: .9rem; }
[data-list] > .card-header .app-search .form-control,
[data-list] > .card-header .form-select { min-height: calc(1.5em + .9rem + 2px); }
/* Phones: every control takes a full row (inline widths are desktop hints only) */
@media (max-width: 575.98px) {
    [data-list] > .card-header, .filter-bar { align-items: stretch !important; }
    [data-list] > .card-header > *, .filter-bar > * { width: 100%; }
    [data-list] > .card-header > .d-flex, .filter-bar > .d-flex { flex-wrap: wrap; }
    [data-list] > .card-header .app-search,
    [data-list] > .card-header .d-flex > div[style],
    [data-list] > .card-header .d-flex > .form-control,
    [data-list] > .card-header .d-flex > .form-select,
    [data-list] > .card-header .d-flex > input,
    [data-list] > .card-header .d-flex > .select2-container { flex: 1 1 100%; width: 100% !important; min-width: 0 !important; max-width: none !important; }
    [data-list] > .card-header .d-flex > [data-list-per-page] { flex: 0 0 auto; width: 90px !important; }
    [data-list] > .card-header .d-flex > .btn, [data-list] > .card-header .d-flex > .btn-group { flex: 1 1 auto; }
    [data-list] > .card-header .app-search .form-control,
    [data-list] > .card-header .app-search .form-select { width: 100% !important; min-width: 0 !important; }
}

/* ---------- Tables ---------- */
.table-custom > thead th { font-weight: var(--theme-font-weight-bold); letter-spacing: .03em; color: var(--anna-muted); }
[dir="rtl"] .table-custom > thead th { letter-spacing: 0; }
.table-custom > tbody > tr:last-child > td { border-bottom-width: 0; }
.table > tfoot > tr > td, .table > tfoot > tr > th { font-weight: var(--theme-font-weight-semibold); background-color: var(--anna-surface-2); }
.table-hover > tbody > tr:hover > * { --theme-table-bg-state: rgba(var(--theme-primary-rgb), .035); }
.table td a.fw-semibold, .table td a.link-reset { text-decoration: none; }
.table .btn-icon.btn-sm { width: 32px; height: 32px; }
/* sticky header for long tables inside a scroll box */
.table-sticky thead th { position: sticky; top: 0; z-index: 2; background-color: var(--anna-surface); }

/* ---------- Empty state & loading skeleton (Anna.list / Anna.emptyState) ---------- */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 2.5rem 1rem; text-align: center; color: var(--anna-muted); }
.empty-state-icon {
    width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem; background-color: var(--anna-surface-2); color: var(--anna-muted);
}
.empty-state-text { font-size: .9rem; max-width: 34rem; }
td > .empty-state { padding-block: 2rem; }
.table > tbody > tr.empty-row > td, .table > tbody > tr.empty-row:hover > td { background: transparent !important; box-shadow: none; }

.skeleton-line {
    display: block; height: .7rem; border-radius: 4px; width: 70%;
    background: linear-gradient(90deg, var(--anna-surface-2) 25%, rgba(var(--theme-body-color-rgb), .08) 37%, var(--anna-surface-2) 63%);
    background-size: 400% 100%; animation: anna-shimmer 1.3s ease infinite;
}
tr.skeleton-row > td { padding-block: 1rem !important; }
tr.skeleton-row > td:nth-child(3n) .skeleton-line { width: 45%; }
tr.skeleton-row > td:nth-child(3n+1) .skeleton-line { width: 85%; }
@keyframes anna-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .skeleton-line { animation: none; } }

/* ---------- Badges ---------- */
.badge.badge-label { font-weight: var(--theme-font-weight-semibold); letter-spacing: .01em; border-radius: var(--theme-border-radius-sm); }
.table .badge.badge-label { font-size: .7rem; }
[dir="rtl"] .badge.badge-label { letter-spacing: 0; }

/* ---------- Tabs (details pages, settings) ---------- */
.nav-tabs.nav-bordered { gap: .25rem; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.nav-tabs.nav-bordered .nav-link { white-space: nowrap; color: var(--anna-muted); padding: .75rem .9rem; border-bottom: 2px solid transparent !important; margin-bottom: -1px; }
.nav-tabs.nav-bordered .nav-link:hover { color: var(--theme-body-color); }
.nav-tabs.nav-bordered .nav-link.active { color: var(--theme-primary); border-bottom-color: var(--theme-primary) !important; background: transparent; }
.nav-tabs .nav-link .badge { margin-inline-start: .3rem; }

/* ---------- Forms ---------- */
.form-label { font-weight: var(--theme-font-weight-medium); margin-bottom: .4rem; }
.form-text { color: var(--anna-muted); }
.form-control:focus, .form-select:focus { box-shadow: var(--anna-ring); }
input.num, .form-control.num { text-align: end; }
[dir="rtl"] input.num, [dir="rtl"] .form-control.num { text-align: left; }
.form-switch .form-check-input { cursor: pointer; }

/* ---------- Modals ---------- */
.modal-content { border: 0; border-radius: var(--anna-radius); box-shadow: var(--theme-box-shadow-lg); }
.modal-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--theme-border-color); }
.modal-header .modal-title { font-size: 1.05rem; font-weight: var(--theme-font-weight-semibold); display: flex; align-items: center; gap: .5rem; }
.modal-body { padding: 1.25rem; }
.modal-footer { padding: .85rem 1.25rem; border-top: 1px solid var(--theme-border-color); background-color: var(--anna-surface-2); border-end-start-radius: var(--anna-radius); border-end-end-radius: var(--anna-radius); }

/* ---------- Focus visibility (keyboard users) ---------- */
.btn:focus-visible, .page-link:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible, a:focus-visible { outline: 0; box-shadow: var(--anna-ring); }
.side-nav-link:focus-visible { outline: 2px solid var(--theme-primary); outline-offset: -2px; }

/* ---------- Sidebar: clearer active state + section rhythm ---------- */
.side-nav .side-nav-title { margin-top: 1rem !important; opacity: .65; }
.side-nav .side-nav-title:first-child { margin-top: .25rem !important; }
.side-nav > .side-nav-item > .side-nav-link.active::before {
    content: ""; position: absolute; inset-block: 22%; inset-inline-start: 0; width: 3px; border-radius: 3px;
    background-color: var(--theme-primary);
}
.side-nav .sub-menu .side-nav-link.active { color: var(--theme-sidenav-item-active-color, #fff); font-weight: var(--theme-font-weight-semibold); }
.side-nav .sub-menu .side-nav-link.active::before {
    content: ""; position: absolute; inset-inline-start: calc(var(--theme-sidenav-item-padding-x) + var(--theme-sidenav-item-icon-size) / 2 + 4px);
    top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background-color: var(--theme-primary);
}

/* ---------- Topbar ---------- */
.app-topbar .topbar-link { border-radius: var(--theme-border-radius); }
.app-topbar .nav-user .avatar-title { font-size: .85rem; }

/* ---------- Footer ---------- */
.footer { font-size: .8rem; color: var(--anna-muted); }

/* ---------- Detail key/value list (header summary cards) ---------- */
.kv-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--anna-muted); margin-bottom: .15rem; font-weight: var(--theme-font-weight-semibold); }
[dir="rtl"] .kv-label { text-transform: none; letter-spacing: 0; font-size: .8rem; }

/* ---------- Print (generic) ---------- */
@media print {
    .app-topbar, .sidenav-menu, .footer, .page-title-head .btn, #nav-progress, .no-print { display: none !important; }
    .content-page { margin: 0 !important; padding: 0 !important; }
}