/* =====================================================================
   أريكة — FurnWeb UI Design System
   Arabic RTL · Furniture-inspired palette (walnut / charcoal / beige)
   Font: Cairo
   ===================================================================== */

:root{
    /* Palette */
    --ink:#2c2118;
    --ink-soft:#55432e;
    --muted:#98836b;
    --paper:#f6f1e8;
    --cream:#fbf8f2;
    --card:#ffffff;
    --line:#e7dccb;
    --line-soft:#efe7d8;

    --walnut:#4e3826;
    --walnut-strong:#3d2b1c;
    --walnut-deep:#2a1d12;
    --charcoal:#241e18;

    --wood:#c89b62;
    --wood-soft:#ead6b8;
    --beige:#efe6d6;
    --brass:#b4762e;
    --brass-deep:#96601f;

    --danger:#a8402f;
    --danger-bg:#fbece9;
    --danger-line:#eccdc5;
    --ok:#4e7a51;
    --ok-bg:#ecf3ec;

    --shadow-sm:0 1px 2px rgba(44,33,24,.06),0 1px 3px rgba(44,33,24,.08);
    --shadow-md:0 4px 14px rgba(44,33,24,.09);
    --shadow-lg:0 18px 44px rgba(42,29,18,.16);

    --radius:14px;
    --radius-lg:20px;
    --radius-sm:10px;

    --sidebar-w:278px;
    --topbar-h:66px;

    --font:'Cairo','Segoe UI',Tahoma,Arial,sans-serif;
}

/* ---------------------------------------------------------------------
   Base
--------------------------------------------------------------------- */
html{scroll-behavior:smooth;}
body{
    font-family:var(--font);
    background:var(--paper);
    color:var(--ink);
    font-size:15px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
}
body.fw-app{min-height:100vh;}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--paper);}
::-webkit-scrollbar-thumb{background:#cdbba2;border-radius:8px;border:2px solid var(--paper);}
::-webkit-scrollbar-thumb:hover{background:#b49a79;}

::selection{background:var(--wood-soft);color:var(--walnut-deep);}

a{color:var(--brass);}
h1,h2,h3,h4,h5,h6{font-weight:700;color:var(--ink);}

/* Numbers render LTR with tabular figures inside RTL text */
.num{
    direction:ltr;
    unicode-bidi:embed;
    font-variant-numeric:tabular-nums;
    font-weight:600;
    color:var(--walnut-strong);
    white-space:nowrap;
}

/* Chips */
.chip{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:5px 13px;
    border-radius:999px;
    background:var(--beige);
    color:var(--walnut-strong);
    font-size:.82rem;
    font-weight:600;
}
.chip svg{width:14px;height:14px;color:var(--brass);}

/* ---------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------- */
.btn{font-family:var(--font);border-radius:12px;font-weight:700;}
.btn-brass{
    --bs-btn-color:#fff;
    color:#fff;
    background:linear-gradient(135deg,var(--brass) 0%,#c98a45 100%);
    border:none;
    box-shadow:0 6px 16px rgba(180,118,46,.30);
    padding:.62rem 1.6rem;
    transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.btn-brass:hover,.btn-brass:focus{
    color:#fff;filter:brightness(1.07);
    transform:translateY(-1px);
    box-shadow:0 9px 22px rgba(180,118,46,.38);
}
.btn-brass:active{color:#fff;transform:translateY(0);filter:brightness(.96);}
.btn-brass:focus-visible{outline:3px solid rgba(180,118,46,.35);outline-offset:2px;}

.btn-wood{
    color:#fff;background:linear-gradient(135deg,#5a4028 0%,var(--walnut-strong) 100%);
    border:none;padding:.62rem 1.6rem;
    box-shadow:0 6px 16px rgba(62,43,28,.25);
    transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.btn-wood:hover,.btn-wood:focus{
    color:#fff;filter:brightness(1.12);transform:translateY(-1px);
    box-shadow:0 9px 22px rgba(62,43,28,.32);
}
.btn-wood:active{color:#fff;transform:translateY(0);}
.btn-wood:focus-visible{outline:3px solid rgba(78,56,38,.30);outline-offset:2px;}

.btn-outline-wood{
    color:var(--walnut-strong);
    background:transparent;
    border:1.6px solid #c9b394;
    padding:.55rem 1.4rem;
    transition:all .15s ease;
}
.btn-outline-wood:hover,.btn-outline-wood:focus{
    color:var(--walnut-deep);
    background:var(--beige);
    border-color:#b39a76;
}
.btn-outline-wood:active{color:#fff!important;background:var(--walnut-strong)!important;}

.btn-soft{
    color:var(--walnut-strong);
    background:var(--beige);
    border:none;
    padding:.55rem 1.4rem;
    transition:background .15s ease,color .15s ease;
}
.btn-soft:hover,.btn-soft:focus{color:#fff;background:var(--walnut-strong);}
.btn-soft:active{color:#fff;background:var(--walnut-deep)!important;}

.btn-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;padding:0;border-radius:12px;
    color:var(--ink-soft);background:transparent;border:none;
    transition:background .15s ease,color .15s ease;
}
.btn-icon svg{width:20px;height:20px;}
.btn-icon:hover,.btn-icon:focus{background:var(--beige);color:var(--walnut-deep);}
.btn-icon.danger:hover,.btn-icon.danger:focus{background:var(--danger-bg);color:var(--danger);}

/* ---------------------------------------------------------------------
   App shell — sidebar (RTL right side), topbar, content, footer
--------------------------------------------------------------------- */
.app-shell{display:block;}

.app-sidebar{
    position:fixed;top:0;bottom:0;right:0;z-index:1040;
    width:var(--sidebar-w);
    display:flex;flex-direction:column;
    background:
        radial-gradient(circle at 100% 0%,rgba(200,155,98,.10) 0%,rgba(200,155,98,0) 45%),
        linear-gradient(195deg,#37281a 0%,#241a10 60%,#1d1409 100%);
    color:#e9dcc4;
    transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.sidebar-backdrop{
    position:fixed;inset:0;z-index:1035;
    background:rgba(30,21,12,.55);
    opacity:0;visibility:hidden;
    transition:opacity .25s ease,visibility .25s ease;
}
body.sidebar-open .sidebar-backdrop{opacity:1;visibility:visible;}

.side-brand{
    display:flex;align-items:center;gap:13px;
    padding:20px 22px 18px;
    border-bottom:1px solid rgba(233,220,196,.10);
}
.side-brand-name{font-size:1.05rem;font-weight:800;color:#fdf6ea;line-height:1.3;margin:0;}
.side-brand-sub{font-size:.72rem;font-weight:500;color:rgba(233,220,196,.55);margin:0;letter-spacing:.4px;}
.brand-logo{
    width:42px;height:auto;flex:0 0 auto;
    border-radius:9px;
    background:#fbf8f2;
    box-shadow:0 2px 8px rgba(0,0,0,.35);
}

.side-nav{flex:1 1 auto;overflow-y:auto;padding:14px 12px 10px;}
.nav-section-label{
    margin:16px 12px 8px;
    font-size:.70rem;font-weight:700;letter-spacing:1.6px;
    color:rgba(233,220,196,.42);
    text-transform:uppercase;
}
.side-link{
    display:flex;align-items:center;gap:12px;
    padding:11px 14px;margin:3px 0;
    border-radius:12px;
    color:#ddceb2;text-decoration:none;
    font-size:.92rem;font-weight:600;
    border:1px solid transparent;
    transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.side-link svg{width:19px;height:19px;flex:0 0 auto;color:rgba(224,199,158,.75);transition:color .15s ease;}
.side-link:hover{background:rgba(233,220,196,.08);color:#fdf6ea;}
.side-link:hover svg{color:var(--wood);}
.side-link.active{
    background:linear-gradient(90deg,rgba(200,155,98,.22) 0%,rgba(200,155,98,.10) 100%);
    border-color:rgba(200,155,98,.35);
    color:#fdf3df;
}
.side-link.active svg{color:var(--wood);}
.side-link.active::after{
    content:"";width:7px;height:26px;border-radius:4px;
    background:var(--wood);margin-inline-start:auto;
}
.side-link:focus-visible{outline:2px solid var(--wood);outline-offset:2px;}

.side-foot{
    padding:16px 18px;
    border-top:1px solid rgba(233,220,196,.10);
    font-size:.74rem;color:rgba(233,220,196,.45);
    text-align:center;line-height:1.8;
}
.side-foot b{color:rgba(233,220,196,.7);font-weight:700;}

.app-main{
    /* RTL: inline-start = RIGHT side → reserves space for the fixed right sidebar.
       The topbar, content, and footer all live inside .app-main,
       so the whole column (topbar included) respects the sidebar. */
    margin-inline-start:var(--sidebar-w);
    min-height:100vh;
    display:flex;flex-direction:column;
}

.app-topbar{
    position:sticky;top:0;z-index:1020;
    min-height:var(--topbar-h);
    display:flex;align-items:center;gap:14px;
    padding:10px clamp(16px,3vw,34px);
    background:rgba(251,248,242,.86);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
}
.topbar-title{
    font-size:1.02rem;font-weight:800;color:var(--walnut-strong);
    margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.burger{display:inline-flex;}
.topbar-side{margin-inline-start:auto;display:flex;align-items:center;gap:12px;}
.user-chip{
    display:flex;align-items:center;gap:10px;
    padding:6px 14px 6px 18px;border-radius:999px;
    background:#fff;border:1px solid var(--line);
}
.user-avatar{
    width:34px;height:34px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#5a4028,var(--walnut-strong));
    color:var(--wood-soft);font-weight:800;font-size:.95rem;
    flex:0 0 auto;
}
.user-meta{display:flex;flex-direction:column;line-height:1.25;max-width:150px;}
.user-meta b{font-size:.82rem;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-meta small{font-size:.68rem;color:var(--muted);}

.app-content{flex:1 1 auto;padding:clamp(18px,3vw,34px);}
.content-wrap{max-width:1240px;margin:0 auto;}

.app-footer{
    padding:18px clamp(16px,3vw,34px) 26px;
    text-align:center;font-size:.76rem;color:var(--muted);
}

@media (max-width:991.98px){
    .app-sidebar{transform:translateX(100%);}
    body.sidebar-open .app-sidebar{transform:translateX(0);box-shadow:-18px 0 50px rgba(20,13,7,.35);}
    .app-main{margin-inline-start:0;width:100%;}
    .user-meta{display:none;}
    .user-chip{padding:5px;border-radius:50%;}
}

/* ---------------------------------------------------------------------
   Breadcrumb + page head
--------------------------------------------------------------------- */
.fw-crumb{
    display:flex;align-items:center;gap:10px;
    margin-bottom:14px;
    font-size:.82rem;font-weight:600;
}
.fw-crumb a{
    display:inline-flex;align-items:center;gap:6px;
    color:var(--muted);text-decoration:none;
    transition:color .15s ease;
}
.fw-crumb a svg{width:15px;height:15px;}
.fw-crumb a:hover{color:var(--brass);}
.crumb-sep{
    width:5px;height:5px;border-radius:50%;
    background:#cdbba2;display:inline-block;
}
.crumb-current{color:var(--walnut-strong);}

.page-head{
    display:flex;flex-wrap:wrap;align-items:center;gap:12px;
    margin-bottom:22px;
}
.page-title{
    position:relative;
    font-size:clamp(1.35rem,2.6vw,1.7rem);
    font-weight:800;color:var(--walnut-deep);
    margin:0;padding-inline-start:16px;
}
.page-title::before{
    content:"";position:absolute;inset-inline-start:0;top:50%;
    transform:translateY(-50%);
    width:6px;height:calc(100% - 6px);border-radius:4px;
    background:linear-gradient(180deg,var(--wood),var(--brass));
}
.page-actions{margin-inline-start:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

/* ---------------------------------------------------------------------
   Cards
--------------------------------------------------------------------- */
.card-base{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
}

.card-head{
    display:flex;align-items:center;gap:11px;
    padding:16px 22px;
    border-bottom:1px solid var(--line-soft);
}
.card-head-icon{
    width:38px;height:38px;border-radius:11px;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
    background:var(--beige);color:var(--brass);
}
.card-head-icon svg{width:19px;height:19px;}
.card-head h2{font-size:.98rem;font-weight:800;color:var(--walnut-deep);margin:0;}
.card-head p{font-size:.76rem;color:var(--muted);margin:0;}
.card-body-pad{padding:clamp(18px,3vw,28px);}

/* Filter card */
.filter-card{max-width:900px;}
.filter-note{
    display:inline-flex;align-items:center;gap:8px;
    font-size:.8rem;color:var(--muted);font-weight:600;
    margin-top:14px;
}
.filter-note svg{width:15px;height:15px;color:var(--wood);flex:0 0 auto;}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;}
.form-grid .span-2{grid-column:1 / -1;}
@media (max-width:767.98px){.form-grid{grid-template-columns:1fr;}}
.form-actions{
    display:flex;justify-content:flex-start;gap:12px;
    margin-top:26px;padding-top:20px;
    border-top:1px dashed var(--line);
}

/* Report card */
.report-card{overflow:hidden;}
.report-head{
    display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
    padding:18px clamp(18px,3vw,26px);
    background:linear-gradient(120deg,var(--walnut-strong) 0%,var(--walnut-deep) 100%);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.report-head h2{
    color:#fdf3df;font-size:1.02rem;font-weight:800;margin:0;
    display:flex;align-items:center;gap:10px;
}
.report-head h2 svg{width:20px;height:20px;color:var(--wood);}
.report-meta{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin-top:2px;}
.report-meta .chip{
    background:rgba(253,243,223,.12);
    border:1px solid rgba(253,243,223,.18);
    color:#ecdcc0;font-size:.76rem;
}
.report-meta .chip svg{color:var(--wood);}
.report-actions{margin-inline-start:auto;display:flex;align-items:center;gap:10px;}
.report-body{padding:0;}

/* KPI cards */
.kpi-row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:16px;
    margin-bottom:22px;
}
.kpi-card{
    position:relative;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:18px 20px 16px;
    box-shadow:var(--shadow-sm);
    overflow:hidden;
}
.kpi-card::before{
    content:"";position:absolute;inset-inline:0;top:0;height:4px;
    background:linear-gradient(90deg,var(--wood),var(--brass));
}
.kpi-label{font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:4px;}
.kpi-value{font-size:clamp(1.35rem,2.4vw,1.65rem);font-weight:800;color:var(--walnut-deep);}
.kpi-value.num{font-size:clamp(1.3rem,2.4vw,1.6rem);}
.kpi-icon{
    position:absolute;inset-inline-end:16px;top:16px;
    width:38px;height:38px;border-radius:11px;
    display:flex;align-items:center;justify-content:center;
    background:var(--beige);color:var(--brass);
}
.kpi-icon svg{width:18px;height:18px;}

/* ---------------------------------------------------------------------
   Dashboard — hero, sections, tiles
--------------------------------------------------------------------- */
.hero{
    position:relative;
    border-radius:var(--radius-lg);
    padding:clamp(24px,3.4vw,38px);
    margin-bottom:26px;
    overflow:hidden;
    color:#f4e9d3;
    background:
        repeating-linear-gradient(-55deg,rgba(255,255,255,.022) 0 2px,transparent 2px 14px),
        radial-gradient(circle at 85% -20%,rgba(200,155,98,.28) 0%,rgba(200,155,98,0) 55%),
        linear-gradient(130deg,#3d2b1c 0%,#2a1d12 55%,#20160c 100%);
    box-shadow:var(--shadow-md);
}
.hero-greet{font-size:.85rem;font-weight:600;color:var(--wood-soft);margin:0 0 6px;}
.hero h1{
    color:#fdf6ea;font-size:clamp(1.4rem,3vw,1.95rem);
    font-weight:800;margin:0 0 8px;
}
.hero p{color:rgba(244,233,211,.72);max-width:560px;margin:0;font-size:.92rem;}
.hero-stats{
    display:flex;flex-wrap:wrap;gap:12px;
    margin-top:22px;
}
.hero-stat{
    display:flex;align-items:center;gap:11px;
    padding:11px 18px;border-radius:14px;
    background:rgba(253,243,223,.07);
    border:1px solid rgba(253,243,223,.14);
    backdrop-filter:blur(4px);
}
.hero-stat b{font-size:1.25rem;font-weight:800;color:#fdf3df;line-height:1;}
.hero-stat span{font-size:.76rem;color:rgba(244,233,211,.68);font-weight:600;}
.hero-stat svg{width:20px;height:20px;color:var(--wood);}

.dash-section{margin-bottom:26px;scroll-margin-top:calc(var(--topbar-h) + 16px);}
.section-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    overflow:hidden;
}
.section-head{
    display:flex;align-items:center;gap:13px;
    padding:17px clamp(18px,3vw,26px);
    border-bottom:1px solid var(--line-soft);
}
.section-head-icon{
    width:42px;height:42px;border-radius:12px;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
    color:#fdf3df;
    background:linear-gradient(135deg,#5a4028,var(--walnut-strong));
    box-shadow:0 5px 12px rgba(62,43,28,.28);
}
.section-head-icon svg{width:21px;height:21px;}
.section-head h2{font-size:1.05rem;font-weight:800;color:var(--walnut-deep);margin:0;}
.section-count{
    margin-inline-start:auto;
    font-size:.74rem;font-weight:700;color:var(--brass);
    background:var(--beige);
    padding:5px 13px;border-radius:999px;
    white-space:nowrap;
}
.tile-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
    gap:14px;
    padding:clamp(16px,2.6vw,24px);
}
.tile{
    display:flex;flex-direction:column;align-items:flex-start;gap:13px;
    width:100%;
    padding:19px 18px;
    background:linear-gradient(180deg,#fffdf9 0%,var(--cream) 100%);
    border:1px solid var(--line);
    border-radius:var(--radius);
    color:var(--ink);text-decoration:none;text-align:start;
    cursor:pointer;
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.tile svg.tile-icon{
    width:24px;height:24px;
    padding:11px;border-radius:12px;
    background:var(--beige);color:var(--brass);
    box-sizing:content-box;
    transition:background .16s ease,color .16s ease;
}
.tile span.t-label{font-size:.93rem;font-weight:700;color:var(--ink);line-height:1.4;}
.tile small.t-hint{font-size:.73rem;color:var(--muted);font-weight:600;margin-top:-8px;}
.tile:hover{
    transform:translateY(-3px);
    border-color:#d3bd9c;
    box-shadow:var(--shadow-md);
    color:var(--ink);
}
.tile:hover .tile-icon{background:var(--walnut-strong);color:var(--wood-soft);}
.tile:focus-visible{outline:3px solid rgba(180,118,46,.35);outline-offset:2px;}
.tile.inert{cursor:default;}
.tile.inert:hover{transform:none;border-color:var(--line);box-shadow:none;}

@media (max-width:640px){
    .tile-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px;}
    .tile{padding:15px 14px;gap:10px;}
    .hero-stats{gap:9px;}
    .hero-stat{padding:9px 14px;}
}

/* ---------------------------------------------------------------------
   Tables — ERP style
--------------------------------------------------------------------- */
.table-responsive{max-height:72vh;}
table.fw-table{
    width:100%;
    margin:0;
    border-collapse:separate;
    border-spacing:0;
    font-size:.9rem;
}
table.fw-table thead th{
    position:sticky;top:0;z-index:5;
    background:var(--beige);
    color:var(--walnut-strong);
    font-size:.80rem;font-weight:800;
    letter-spacing:.3px;
    padding:13px 18px;
    text-align:right;
    border-bottom:2px solid #ddcbaa;
    white-space:nowrap;
}
table.fw-table tbody td{
    padding:12px 18px;
    color:var(--ink);
    vertical-align:middle;
    border-bottom:1px solid var(--line-soft);
    background:#fff;
}
table.fw-table tbody tr:nth-child(even) td{background:var(--cream);}
table.fw-table tbody tr{transition:background .12s ease;}
table.fw-table tbody tr:hover td{background:#faf3e5 !important;}
table.fw-table tbody td.num{text-align:left;}
table.fw-table thead th.num-h{text-align:left;}
table.fw-table tfoot th{
    position:sticky;bottom:0;z-index:5;
    background:linear-gradient(120deg,var(--walnut-strong),var(--walnut-deep));
    color:#fdf3df;
    font-size:.86rem;font-weight:800;
    padding:13px 18px;
    white-space:nowrap;
    text-align:right;
}
table.fw-table tfoot th .num{color:#f2ddb6;}
table.fw-table tfoot th:first-child{border-start-start-radius:0;}

.cell-strong{font-weight:700;color:var(--walnut-strong);}

/* ---------------------------------------------------------------------
   Forms
--------------------------------------------------------------------- */
.fw-label{
    display:block;margin-bottom:.45rem;
    font-size:.87rem;font-weight:700;color:var(--ink);
}
.fw-label small{color:var(--muted);font-weight:600;}
.form-control,.form-select{
    font-family:var(--font);
    font-size:.92rem;color:var(--ink);
    background-color:#fff;
    border:1.5px solid var(--line);
    border-radius:12px;
    padding:.62rem .95rem;
    transition:border-color .15s ease,box-shadow .15s ease;
    box-shadow:none;
}
.form-control::placeholder{color:#c2b29b;font-size:.88em;}
.form-control:hover,.form-select:hover{border-color:#d5c3a4;}
.form-control:focus,.form-select:focus{
    border-color:var(--wood);
    box-shadow:0 0 0 3.5px rgba(200,155,98,.20);
}
input[type="date"].form-control{min-height:46px;}

/* Autocomplete (light theme; class hooks used by autocomplete.js) */
.autocomplete-wrapper{position:relative;width:100%;}
.autocomplete-wrapper.js-active select.autocomplete-select{display:none !important;}
.autocomplete-wrapper .autocomplete-field{position:relative;display:none;}
.autocomplete-wrapper.js-active .autocomplete-field{display:block;}
.autocomplete-wrapper .autocomplete-input{padding-inline-start:.95rem;padding-inline-end:42px;}
.autocomplete-wrapper .autocomplete-hint{
    position:absolute;inset-inline-end:13px;top:50%;
    transform:translateY(-50%);
    width:18px;height:18px;
    display:flex;align-items:center;justify-content:center;
    color:var(--muted);pointer-events:none;
}
.autocomplete-wrapper .autocomplete-hint svg{width:18px;height:18px;}
.autocomplete-wrapper .autocomplete-results{
    position:absolute;top:calc(100% + 5px);
    inset-inline:0;z-index:1060;
    margin:0;padding:6px 0;
    list-style:none;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:var(--shadow-lg);
    max-height:270px;overflow-y:auto;
    text-align:right;
}
.autocomplete-wrapper .autocomplete-results[hidden]{display:none;}
.autocomplete-wrapper .autocomplete-item{
    padding:9.5px 15px;
    cursor:pointer;
    color:var(--ink);
    font-size:.89rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.autocomplete-wrapper .autocomplete-item.active,
.autocomplete-wrapper .autocomplete-item:hover{
    background:var(--beige);color:var(--walnut-deep);
}
.autocomplete-wrapper .autocomplete-empty{
    padding:11px 15px;color:var(--muted);font-size:.84rem;
}

/* Validation */
.field-validation-error,.text-danger{
    display:block;margin-top:6px;
    color:var(--danger);font-size:.78rem;font-weight:600;
}
.input-validation-error{border-color:#d99a8b !important;}

/* ---------------------------------------------------------------------
   Alerts & empty states
--------------------------------------------------------------------- */
.alert{border-radius:14px;border:none;font-size:.9rem;font-weight:600;}
.alert-danger{
    display:flex;align-items:center;gap:10px;
    color:var(--danger);background:var(--danger-bg);
    border:1px solid var(--danger-line);
    border-inline-start:5px solid var(--danger);
    padding:.85rem 1.15rem;
}
.alert-danger svg{width:19px;height:19px;flex:0 0 auto;}
.alert-info{
    color:var(--walnut-strong);background:var(--beige);
    border:1px solid var(--line);
}

.empty-state{
    display:flex;flex-direction:column;align-items:center;
    gap:6px;text-align:center;
    padding:54px 20px 58px;
    margin:18px;
    border:1.6px dashed #d9c8ab;
    border-radius:var(--radius);
    background:var(--cream);
}
.empty-state .es-icon{
    width:64px;height:64px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--beige);color:var(--muted);
    margin-bottom:8px;
}
.empty-state .es-icon svg{width:28px;height:28px;color:var(--muted);}
.empty-state h3{font-size:1rem;font-weight:800;color:var(--ink-soft);margin:0;}
.empty-state p{font-size:.83rem;color:var(--muted);margin:0;}

/* ---------------------------------------------------------------------
   Login page (scoped to /Login — class names kept for login.js)
--------------------------------------------------------------------- */
.login-page{
    --lg-cream:#fbf8f2;
    --lg-walnut:#2a1d12;
    --gold:var(--wood);
    --gold-strong:var(--brass);
    --gold-dim:#96601f;
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    width:100%;
    min-height:100vh;min-height:100dvh;
    overflow:hidden;
    /* Premium showroom backdrop: deep walnut base with a soft warm light
       falling from the top and a subtle brass glow — CSS only. */
    background:
        radial-gradient(1100px 620px at 78% -12%, rgba(200,155,98,.16), transparent 62%),
        radial-gradient(900px 520px at 8% 112%, rgba(150,96,31,.10), transparent 60%),
        linear-gradient(165deg,#241a10 0%,#1c130c 55%,#120d08 100%);
}
.login-page *,.login-page *::before,.login-page *::after{box-sizing:border-box;}

/* Brand panel */
.login-brand{
    position:relative;
    display:flex;flex-direction:column;justify-content:space-between;
    padding:clamp(30px,4.5vw,58px);
    background-image:url("../images/login-bg.svg");
    background-size:cover;background-position:center;
}
/* Soft showroom lighting: gentle light wash at the top fading into a deep
   walnut vignette so the photo reads calm and premium, never busy. */
.login-brand::before{
    content:"";position:absolute;inset:0;
    background:
        radial-gradient(720px 420px at 30% 0%, rgba(255,236,205,.14), transparent 65%),
        linear-gradient(200deg, rgba(26,18,10,.42) 0%, rgba(32,22,12,.74) 58%, rgba(18,13,8,.92) 100%);
}
.login-brand > *{position:relative;}
.login-brand-top{display:flex;align-items:center;gap:13px;}
.login-brand-top span{font-size:1.05rem;font-weight:800;color:#fdf6ea;letter-spacing:.4px;}
.login-brand-main{max-width:480px;}
.login-badge{
    display:inline-flex;align-items:center;gap:8px;
    padding:7px 16px;margin-bottom:20px;
    border-radius:999px;
    background:rgba(200,155,98,.16);
    border:1px solid rgba(200,155,98,.38);
    color:var(--wood-soft);font-size:.78rem;font-weight:700;
}
.login-badge svg{width:14px;height:14px;}
.login-brand h1{
    color:#fdf6ea;font-size:clamp(1.7rem,3.4vw,2.5rem);
    font-weight:800;line-height:1.45;margin:0 0 14px;
}
.login-brand h1 em{font-style:normal;color:var(--wood);}
.login-brand-main p{color:rgba(244,233,211,.72);font-size:.97rem;line-height:2;margin:0 0 30px;}
.login-feats{list-style:none;margin:0;padding:0;display:grid;gap:13px;}
.login-feats li{
    display:flex;align-items:center;gap:11px;
    color:#ecdcc0;font-size:.88rem;font-weight:600;
}
.login-feats li svg{
    width:20px;height:20px;padding:3.5px;flex:0 0 auto;
    border-radius:50%;
    background:rgba(200,155,98,.20);
    color:var(--wood);
    box-sizing:content-box;
}
.login-brand-foot{font-size:.74rem;color:rgba(233,220,196,.45);}

/* Form panel */
.login-panel{
    display:flex;align-items:center;justify-content:center;
    padding:clamp(26px,4vw,48px);
    background:linear-gradient(180deg,var(--lg-cream) 0%,#f3ecdf 100%);
}
.login-card{
    width:100%;max-width:420px;
    animation:loginCardIn .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes loginCardIn{
    from{opacity:0;transform:translateY(18px);}
    to{opacity:1;transform:translateY(0);}
}
.login-title{
    text-align:center;
    font-size:1.45rem;font-weight:800;color:var(--walnut-deep);
    margin:0;
}
.login-subtitle{
    text-align:center;
    margin:6px 0 30px;
    font-size:.8rem;font-weight:600;color:var(--muted);
    letter-spacing:.4px;
}
.login-form{text-align:right;}
.login-field{margin-bottom:19px;}
.login-label{
    display:block;margin-bottom:8px;
    font-size:.85rem;font-weight:700;color:var(--ink);
}
.login-control{position:relative;}
.login-icon{
    position:absolute;inset-inline-start:15px;top:50%;
    transform:translateY(-50%);
    width:19px;height:19px;
    color:var(--muted);pointer-events:none;
}
.login-input{
    width:100%;height:50px;
    padding:0 47px;
    font-family:var(--font);font-size:.95rem;color:var(--ink);
    background:#fff;
    border:1.5px solid var(--line);
    border-radius:13px;
    caret-color:var(--brass);
    transition:border-color .15s ease,box-shadow .15s ease;
    appearance:none;
}
.login-input::placeholder{color:#c2b29b;}
.login-input:hover{border-color:#d5c3a4;}
.login-input:focus{
    outline:none;border-color:var(--wood);
    box-shadow:0 0 0 3.5px rgba(200,155,98,.22);
}
.login-page .login-eyetoggle{
    position:absolute;inset-inline-end:9px;top:50%;
    transform:translateY(-50%);
    display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;padding:0;
    color:var(--muted);background:transparent;border:none;border-radius:9px;
    cursor:pointer;transition:color .15s ease,background .15s ease;
}
.login-page .login-eyetoggle svg{width:19px;height:19px;}
.login-page .login-eyetoggle:hover{color:var(--brass);background:var(--beige);}
.login-page .login-eyetoggle:focus-visible{outline:2px solid var(--wood);outline-offset:2px;}
.login-action{margin-top:26px;}
.login-button{
    width:100%;height:51px;
    border:none;border-radius:13px;
    font-family:var(--font);font-size:1rem;font-weight:800;
    letter-spacing:.3px;
    color:#fff;
    background:linear-gradient(135deg,var(--brass) 0%,#c98a45 100%);
    box-shadow:0 10px 24px rgba(180,118,46,.35);
    cursor:pointer;
    transition:transform .15s ease,box-shadow .15s ease,filter .15s ease,opacity .15s ease;
}
.login-button:hover{
    transform:translateY(-2px);filter:brightness(1.06);
    box-shadow:0 14px 30px rgba(180,118,46,.42);
    color:#fff;
}
.login-button:active{transform:translateY(0);}
.login-button:focus-visible{outline:3px solid rgba(180,118,46,.4);outline-offset:2px;}
.login-button.loading{opacity:.75;pointer-events:none;}
.login-error{
    display:flex;align-items:flex-start;gap:10px;
    margin:0 0 19px;padding:13px 15px;
    text-align:right;
    color:var(--danger);
    background:var(--danger-bg);
    border:1px solid var(--danger-line);
    border-inline-start:4px solid var(--danger);
    border-radius:12px;
    font-size:.84rem;font-weight:600;line-height:1.7;
    animation:loginCardIn .4s ease both;
}
.login-error svg{width:18px;height:18px;flex:0 0 auto;margin-top:2px;}
.login-foot{
    margin-top:26px;text-align:center;
    font-size:.75rem;color:var(--muted);font-weight:600;
}

@media (max-width:991.98px){
    .login-page{grid-template-columns:1fr;grid-template-rows:auto 1fr;}
    .login-brand{
        justify-content:flex-start;gap:14px;
        padding:26px clamp(22px,6vw,40px) 30px;
        background-position:center 30%;
    }
    .login-brand-main p,.login-brand-foot{display:none;}
    .login-brand h1{font-size:1.35rem;margin-bottom:0;}
    .login-feats{display:none;}
    .login-badge{margin-bottom:12px;}
    .login-panel{padding:30px 20px 44px;}
}

/* ---------------------------------------------------------------------
   Standalone screens (Logout transient, Error)
--------------------------------------------------------------------- */
.standalone-screen{
    min-height:100vh;min-height:100dvh;
    display:flex;align-items:center;justify-content:center;
    padding:24px;
    background:
        radial-gradient(circle at 80% 0%,rgba(200,155,98,.12) 0%,rgba(200,155,98,0) 45%),
        linear-gradient(165deg,#3d2b1c 0%,#241a10 100%);
}
.standalone-card{
    width:100%;max-width:430px;
    padding:clamp(30px,5vw,46px);
    text-align:center;
    background:rgba(251,248,242,.97);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    animation:loginCardIn .5s ease both;
}
.standalone-card h1{font-size:1.2rem;font-weight:800;color:var(--walnut-deep);margin:0 0 8px;}
.standalone-card p{font-size:.88rem;color:var(--muted);margin:0 0 22px;}
.spinner-wood{
    width:34px;height:34px;margin:6px auto 0;
    border-radius:50%;
    border:3.5px solid var(--beige);
    border-top-color:var(--brass);
    animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.error-code{
    font-size:2.6rem;font-weight:800;color:var(--walnut);
    line-height:1;margin-bottom:10px;
}

/* ---------------------------------------------------------------------
   Print
--------------------------------------------------------------------- */
@media print{
    .app-sidebar,.sidebar-backdrop,.app-topbar,.app-footer,
    .page-actions,.report-actions,.no-print,.fw-crumb{display:none !important;}
    body{background:#fff;}
    .app-main{margin:0;}
    .app-content{padding:0;}
    .card-base,.section-card{box-shadow:none;border-color:#bbb;break-inside:avoid;}
    .report-card{border-radius:0;}
    .report-head{background:#3d2b1c !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
    .kpi-row{break-inside:avoid;}
    .table-responsive{max-height:none;overflow:visible;}
    table.fw-table thead th{position:static;background:#efe6d6 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}

/* ---------------------------------------------------------------------
   Reduced motion
--------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}