/* ============================================================
   CSS INDEX — V459_CSS_CLEANUP_BATCH
   Semantic CSS folder map only.
   Import order is intentionally preserved from V455.
   Do not reorder without comparing the full concatenated CSS output.
   ============================================================ */

/* Base, layout, cards, shared UI */

/* BEGIN css/base/core-layout-cards-settings-sidebar-cases.css */
/* ============================================================
   STYLE BUILD — V428_CONSERVATIVE_DEAD_CSS_REMOVAL_PHASE_1
   Source: style.v426.comments-section-map-cleanup.css
   Scope: very small, audit-backed removal of unused legacy selectors only.
   Sensitive runtime families are intentionally preserved.
   ============================================================ */

/* ============================================================
   CSS SECTION MAP — V4.3.3 CL / PATCHES v418 / STYLE v428
   01) Core variables / base layout / cards / buttons / forms
   02) Modals / login / settings / users / logs / regions / design
   03) Sidebar and mobile app shell — legacy base rules
   04) Case cards / statistics / toast / quick navigation
   05) Image upload / lightbox / crop / add-form polish
   06) Home dashboard / search / add / result UI polish
   07) Data extraction center
   08) Permissions locked UI
   09) Distribution & delivery module
   10) Dark mode legacy layers
   11) Notification center
   12) Background operations / sync center
   13) Final safe fix compatibility layer — v402
   14) Mobile print preview compatibility layer — v403
   15) Legacy non-sidebar distribution cleanup — v408
   16) Recent cases + print actions CSS — v409 class names / v416 JS owner
   17) Unified sidebar CSS — v417 JS owner / v420 CSS compatibility
   18) Distribution performance CSS — app.js / v410 class names
   19) Distribution UX CSS — v415 JS owner / v421 CSS compatibility
   20) Print/mobile CSS — v403/v416/v422 compatibility
   21) Recent cases CSS — v416 JS owner / v423 CSS compatibility
   22) Dark mode final compatibility — v424
   23) General UI layout safety — v425

   Note: v428 removes only a very small Phase 1 set of audit-backed dead selectors; runtime compatibility families remain intact.
   ============================================================ */

:root{
    --primary:#0f766e;
    --secondary:#1d4ed8;
    --light:#f0f6ff;
    --card:#ffffff;
    --border:#e2e8f0;
    --text:#0f172a;
    --muted:#64748b;
    --success:#15803d;
    --danger:#dc2626;
    --warning:#d97706;
    --soft-green:#ecfdf5;
    --soft-blue:#eff6ff;
    --gradient-main:linear-gradient(135deg,#1d4ed8,#0f766e);
    --gradient-bg:linear-gradient(160deg,#f0f6ff 0%,#ecfdf5 100%);
    --shadow-sm:0 2px 8px rgba(15,23,42,.06);
    --shadow-md:0 6px 20px rgba(15,23,42,.08);
    --shadow-lg:0 12px 40px rgba(15,23,42,.12);
    --shadow-xl:0 20px 60px rgba(15,23,42,.15);
    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:22px;
    --radius-xl:28px;
    --transition:.25s cubic-bezier(.4,0,.2,1);
    --soft-orange:#fff7ed;
    --soft-red:#fef2f2;
    --deep-shadow:0 16px 40px rgba(15,23,42,.08);
    --sync-idle:#94a3b8;
    --sync-active:#2563eb;
    --sync-pending:#d97706;
    --sync-failed:#dc2626;
    --sync-done:#16a34a;
    --v4-alert-top:76px;
    --v4-toast-top:138px;
}

/* V5.3.5 plus: region picker for region-manager users */
.region-picker-toolbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:8px;
    align-items:center;
}
.region-picker-list{
    margin-top:10px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:8px;
    max-height:260px;
    overflow:auto;
    padding:10px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#f8fafc;
}
.region-picker-item{
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 10px;
    border:1px solid #e5e7eb;
    border-radius:10px;
    background:#fff;
    font-weight:700;
    color:#111827;
}
.region-picker-item input{width:auto}
.region-picker-empty{
    padding:12px;
    color:#64748b;
    background:#fff;
    border:1px dashed #cbd5e1;
    border-radius:10px;
}
.required-mark{color:#dc2626;font-weight:900}
@media (max-width:640px){
    .region-picker-toolbar{grid-template-columns:1fr}
    .region-picker-toolbar .btn{width:100%}
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:'Cairo',sans-serif;
    background:var(--gradient-bg);
    color:var(--text);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

input,select,textarea,button{
    font-family:inherit;
}

.container{
    width:min(980px,96%);
    margin:auto;
    padding:14px;
}

.header{
    background:var(--gradient-main);
    color:#fff;
    padding:14px 18px;
    border-radius:var(--radius-lg);
    text-align:center;
    box-shadow:var(--shadow-lg);
    margin-bottom:16px;
    position:relative;
    overflow:hidden;
}
.header::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,transparent 60%);
    pointer-events:none;
}
.header h1,.header p,.header .total-cases-badge{position:relative;z-index:1;}

.header h1{
    margin:0;
    font-size:22px;
}

.header p{
    margin-top:5px;
    opacity:.9;
    font-size:13px;
}

.tabs{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:25px;
}
.tab-btn{
    flex:1;
    min-width:180px;
    border:none;
    background:#fff;
    padding:16px;
    border-radius:var(--radius-md);
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    transition:var(--transition);
    border:1.5px solid var(--border);
    box-shadow:var(--shadow-sm);
}

.tab-btn:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-md);
    border-color:rgba(29,78,216,.2);
}

.tab-btn.active{
    background:var(--gradient-main);
    color:#fff;
    border-color:transparent;
    box-shadow:0 8px 24px rgba(15,118,110,.22);
}

.tab-content{
    display:none;
    animation:fade .3s ease;
}

.tab-content.active{
    display:block;
}

@keyframes fade{
    from{
        opacity:0;
        transform:translateY(10px)
    }
    to{
        opacity:1;
        transform:translateY(0)
    }
}

.card{
    background:var(--card);
    border-radius:var(--radius-lg);
    padding:22px;
    margin-bottom:20px;
    box-shadow:var(--shadow-md);
    border:1px solid rgba(226,232,240,.7);
    transition:box-shadow var(--transition);
}

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:18px;
}

.field{
    display:flex;
    flex-direction:column;
}

.field label{
    margin-bottom:8px;
    font-weight:700;
}

.field input,
.field select,
.field textarea{
    padding:14px;
    border-radius:var(--radius-md);
    border:1.5px solid var(--border);
    font-size:15px;
    background:#fff;
    outline:none;
    transition:var(--transition);
    color:var(--text);
    width:100%;
    box-sizing:border-box;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
    border-color:var(--secondary);
    box-shadow:0 0 0 4px rgba(29,78,216,.1);
    background:#fafcff;
}

.field input:hover:not(:focus),
.field select:hover:not(:focus),
.field textarea:hover:not(:focus){
    border-color:#94a3b8;
}

textarea{
    min-height:120px;
    resize:vertical;
}

.btn{
    border:none;
    padding:15px 22px;
    border-radius:var(--radius-md);
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:var(--transition);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    position:relative;
    overflow:hidden;
    white-space:nowrap;
}

.btn::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(255,255,255,0);
    transition:background .2s;
}

.btn:hover::after{
    background:rgba(255,255,255,.08);
}

.btn-primary{
    background:var(--gradient-main);
    color:#fff;
    box-shadow:0 4px 16px rgba(15,118,110,.25);
}

.btn-success{
    background:var(--success);
    color:#fff;
    box-shadow:0 4px 14px rgba(21,128,61,.22);
}

.btn-danger{
    background:var(--danger);
    color:#fff;
    box-shadow:0 4px 14px rgba(220,38,38,.2);
}

.btn-light{
    background:#f1f5f9;
    color:#475569;
    border:1.5px solid var(--border);
}

.btn:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}

.btn:active{
    transform:translateY(0);
}

.results{
    margin-top:25px;
}

.result-card{
    background:#fff;
    border-radius:var(--radius-lg);
    padding:20px;
    margin-bottom:16px;
    border-right:5px solid var(--primary);
    box-shadow:var(--shadow-md);
    position:relative;
    border:1px solid rgba(226,232,240,.6);
    border-right:5px solid var(--primary);
    transition:box-shadow var(--transition), transform var(--transition);
}

.result-card:hover{
    box-shadow:var(--shadow-lg);
    transform:translateY(-2px);
}

.result-card h3{
    margin-top:0;
    color:var(--secondary);
    padding-left:100px;
}

.result-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:10px;
}

.badge{
    background:#eff6ff;
    padding:6px 12px;
    border-radius:10px;
    display:inline-block;
    font-size:14px;
}

.small{
    font-size:13px;
    color:#64748b;
}

.export-box{
    display:flex;
    justify-content:flex-end;
    margin-top:15px;
}

/* 02A) Action icons */
.card-actions{
    position:absolute;
    top:16px;
    left:16px;
    display:flex;
    gap:8px;
}

.icon-btn{
    width:42px;
    height:42px;
    border:none;
    border-radius:12px;
    cursor:pointer;
    font-size:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}

.icon-btn:hover{
    transform:translateY(-2px) scale(1.04);
}

.edit-btn{
    background:#fff7ed;
    color:#c2410c;
    border:1px solid #fed7aa;
}

.delete-btn{
    background:#fef2f2;
    color:#b91c1c;
    border:1px solid #fecaca;
}

/* 02B) Modal base */
.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.6);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:100000;
    padding:15px;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.modal-box{
    background:#fff;
    width:min(560px,95%);
    border-radius:var(--radius-xl);
    padding:24px;
    box-shadow:var(--shadow-xl);
    animation:modalFade .25s cubic-bezier(.34,1.56,.64,1);
    max-height:90vh;
    overflow:auto;
}

.modal-box.small-modal{
    width:min(430px,95%);
}

@keyframes modalFade{
    from{
        opacity:0;
        transform:scale(.95) translateY(10px);
    }
    to{
        opacity:1;
        transform:scale(1) translateY(0);
    }
}

.modal-title{
    margin:0 0 15px;
    font-size:23px;
    color:var(--secondary);
}

.modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:18px;
    flex-wrap:wrap;
}

.modal-note{
    color:var(--muted);
    font-size:14px;
    margin-top:-5px;
    margin-bottom:15px;
}

.password-input{
    text-align:center;
    letter-spacing:8px;
    font-size:22px !important;
    font-weight:700;
}


/* 02C) Login screen base */
.login-screen{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}

.login-card{
    width:min(460px,95%);
    background:#fff;
    border-radius:var(--radius-xl);
    padding:30px;
    box-shadow:var(--shadow-xl);
    border:1px solid rgba(226,232,240,.8);
}

.login-logo{
    width:78px;
    height:78px;
    border-radius:22px;
    margin:0 auto 18px;
    background:linear-gradient(135deg,var(--secondary),var(--primary));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    box-shadow:0 10px 30px rgba(37,99,235,.22);
}

.login-card h1{
    margin:0;
    text-align:center;
    font-size:26px;
    color:var(--secondary);
}

.login-card p{
    text-align:center;
    color:var(--muted);
    margin:10px 0 22px;
}

.login-error{
    display:none;
    background:#fef2f2;
    color:#991b1b;
    border:1px solid #fecaca;
    padding:12px;
    border-radius:14px;
    margin-bottom:14px;
    font-weight:700;
}

.top-user-bar{
    display:none;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:#fff;
    border-radius:18px;
    padding:12px 16px;
    margin-bottom:15px;
    box-shadow:0 6px 18px rgba(0,0,0,.05);
}


/* 02E) Users management base */
.users-toolbar{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
    margin:15px 0;
}
.user-form-box{
    background:#f8fafc;
    border:1px solid var(--border);
    border-radius:18px;
    padding:18px;
    margin-top:15px;
}
.check-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:10px;
    margin-top:10px;
}
.check-item{
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    padding:10px 12px;
    display:flex;
    gap:8px;
    align-items:center;
    font-weight:700;
}
.check-item input{
    width:18px;
    height:18px;
}
.mini-btn{
    border:none;
    border-radius:10px;
    padding:9px 12px;
    font-weight:700;
    cursor:pointer;
}
.mini-edit{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;}
.mini-delete{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;}
.mini-info{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;}
.status-on{background:#dcfce7;color:#166534;}
.status-off{background:#fee2e2;color:#991b1b;}


/* 02F) Refined settings layout — legacy v2.5 */
.settings-hero{
    background:linear-gradient(135deg,#ffffff,#f8fafc);
    border:1px solid var(--border);
    border-radius:24px;
    padding:20px;
    margin-bottom:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}
.settings-hero h2{
    margin:0 0 6px;
    color:var(--secondary);
    font-size:26px;
}
.settings-hero p{
    margin:0;
    color:var(--muted);
}
.settings-layout{
    display:grid;
    grid-template-columns:250px 1fr;
    gap:18px;
    align-items:start;
}
.settings-sidebar{
    background:#fff;
    border:1px solid var(--border);
    border-radius:22px;
    padding:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
    position:sticky;
    top:15px;
}
.settings-nav{
    width:100%;
    border:none;
    background:transparent;
    padding:14px 14px;
    border-radius:14px;
    text-align:right;
    font-weight:800;
    cursor:pointer;
    color:var(--text);
    transition:.25s;
    margin-bottom:6px;
}
.settings-nav:hover{
    background:#f1f5f9;
}
.settings-nav.active{
    background:linear-gradient(135deg,var(--secondary),var(--primary));
    color:#fff;
    box-shadow:0 8px 18px rgba(37,99,235,.18);
}
.settings-main{
    min-width:0;
}
.settings-section{
    display:none;
}
.settings-section.active{
    display:block;
}
.settings-section-head{
    background:#fff;
    border:1px solid var(--border);
    border-radius:22px;
    padding:18px;
    margin-bottom:16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}
.settings-section-head h3{
    margin:0 0 6px;
    color:var(--secondary);
    font-size:22px;
}
.settings-section-head p{
    margin:0;
    color:var(--muted);
    line-height:1.7;
}
.clean-toolbar{
    margin:0;
    flex-shrink:0;
}
.compact-form{
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}
.form-header-line{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
}
.form-header-line h3{
    margin:0;
    color:var(--secondary);
}
.soft-badge{
    background:#f1f5f9;
    color:#475569;
    border-radius:999px;
    padding:7px 11px;
    font-size:12px;
    font-weight:800;
}
.compact-grid{
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.permission-box{
    margin-top:16px;
    padding:14px;
    background:#f8fafc;
    border:1px solid var(--border);
    border-radius:18px;
}
.permission-box h4{
    margin:0 0 10px;
    color:#334155;
}
.tight-checks{
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.three-cols{
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.form-actions-line{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
    margin-top:16px;
}
.empty-settings-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:22px;
    padding:22px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}
.empty-settings-card h3{
    margin-top:0;
    color:var(--secondary);
}
.empty-settings-card p{
    color:var(--muted);
    line-height:1.8;
}
#usersResults .result-card{
    border-right-color:#2563eb;
}

@media(max-width:768px){
    .header h1{
        font-size:25px;
    }

    .tab-btn{
        font-size:15px;
    }

    .card-actions{
        position:static;
        margin-bottom:12px;
        justify-content:flex-start;
    }

    .result-card h3{
        padding-left:0;
    }
}

@media(max-width:900px){
    .settings-layout{grid-template-columns:1fr;}
    .settings-sidebar{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
    .settings-nav{margin-bottom:0;text-align:center;}
    .settings-hero,.settings-section-head{flex-direction:column;align-items:stretch;}
    .clean-toolbar{width:100%;}
    .clean-toolbar .btn{flex:1;}
}
@media(max-width:520px){
    .settings-sidebar{grid-template-columns:1fr;}
    .settings-hero h2{font-size:22px;}
    .form-header-line{align-items:flex-start;flex-direction:column;}
}


/* 03A) Mobile sidebar and app shell layout — legacy v2.6 */
.app-shell-top{
    background:#fff;
    border:1px solid rgba(219,227,239,.9);
    border-radius:22px;
    padding:12px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    box-shadow:0 10px 30px rgba(15,23,42,.06);
    position:sticky;
    top:8px;
    z-index:5000;
}
.menu-trigger{
    width:46px;
    height:46px;
    border:none;
    border-radius:16px;
    background:var(--gradient-main);
    color:#fff;
    font-size:23px;
    font-weight:800;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 20px rgba(15,118,110,.2);
}
.top-identity{
    flex:1;
    min-width:0;
}
.top-identity strong{
    display:block;
    font-size:17px;
    line-height:1.25;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.top-identity span{
    display:block;
    font-size:12px;
    color:var(--muted);
    margin-top:2px;
}
.header{
    margin:10px 0 12px;
    padding:12px 14px;
    border-radius:22px;
    min-height:90px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.header h1{
    font-size:clamp(16px,4vw,22px);
    line-height:1.35;
}
.header p{
    font-size:clamp(12px,2.5vw,14px);
}
.top-user-bar{display:none !important;}
.tabs.main-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    margin-bottom:18px;
}
.main-actions .tab-btn{
    min-width:unset;
    min-height:76px;
    border-radius:22px;
    font-size:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:#fff;
    border:1px solid rgba(219,227,239,.95);
}
.main-actions .tab-btn.active{
    background:linear-gradient(135deg,var(--secondary),var(--primary));
    color:#fff;
    transform:none;
}
.tab-content.active{
    margin-top:6px;
}
.card{
    border:1px solid rgba(219,227,239,.9);
}

.side-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.55);
    backdrop-filter:blur(4px);
    z-index:90000;
    display:none;
}
.side-overlay.open{display:block;}
.side-panel{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:min(340px,86vw);
    background:linear-gradient(180deg,#ffffff,#f8fbff);
    z-index:90001;
    transform:translateX(105%);
    transition:.25s ease;
    box-shadow:-18px 0 45px rgba(15,23,42,.18);
    display:flex;
    flex-direction:column;
    padding:18px;
    border-radius:26px 0 0 26px;
}
.side-panel.open{transform:translateX(0);}
.side-head{
    background:linear-gradient(135deg,var(--secondary),var(--primary));
    color:#fff;
    border-radius:22px;
    padding:18px;
    margin-bottom:14px;
    position:relative;
}
.side-head h3{margin:0;font-size:20px;}
.side-head p{margin:6px 0 0;opacity:.9;font-size:13px;}
.side-close{
    position:absolute;
    top:10px;
    left:10px;
    width:34px;
    height:34px;
    border:none;
    border-radius:12px;
    background:rgba(255,255,255,.18);
    color:#fff;
    font-size:18px;
    cursor:pointer;
}
.side-menu-scroll{
    overflow:auto;
    padding-bottom:10px;
}
.side-item,
.side-parent{
    width:100%;
    border:none;
    background:#fff;
    color:var(--text);
    border:1px solid rgba(219,227,239,.95);
    padding:14px 14px;
    border-radius:18px;
    font-size:16px;
    font-weight:800;
    text-align:right;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:10px;
    box-shadow:0 6px 18px rgba(15,23,42,.04);
}
.side-item:hover,.side-parent:hover{transform:translateY(-1px);}
.side-submenu{
    display:none;
    margin:-4px 10px 12px 0;
    padding:8px;
    border-right:3px solid #dbeafe;
}
.side-submenu.open{display:block;}
.side-submenu button{
    width:100%;
    display:block;
    border:none;
    background:#f8fafc;
    color:#334155;
    padding:11px 12px;
    border-radius:14px;
    text-align:right;
    margin-bottom:7px;
    font-weight:700;
    cursor:pointer;
}
.side-logout{
    margin-top:auto;
    background:#fef2f2 !important;
    color:#991b1b !important;
    border-color:#fecaca !important;
}

.settings-hero{
    padding:14px 16px;
    border-radius:22px;
    min-height:auto;
    margin-bottom:14px;
}
.settings-hero h2{
    font-size:24px;
    margin-bottom:6px;
}
.settings-hero p{font-size:14px;}
.settings-layout{
    display:block;
}
.settings-sidebar{
    position:static;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    margin-bottom:14px;
    padding:8px;
    border-radius:20px;
}
.settings-nav{
    margin:0;
    padding:12px 8px;
    font-size:13px;
    text-align:center;
    border-radius:16px;
}
.settings-main{min-width:0;}
.settings-section-head{
    padding:18px;
    border-radius:24px;
    margin-bottom:14px;
}
.settings-section-head h3{
    font-size:26px;
}
.settings-section-head p{
    font-size:15px;
    max-width:680px;
}
.clean-toolbar{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    width:100%;
    max-width:560px;
    margin-top:12px;
}
.clean-toolbar .btn{
    min-height:72px;
    font-size:18px;
    border-radius:22px;
}
.user-form-box{
    display:none;
}
.user-card-compact{
    border:1px solid rgba(219,227,239,.95);
    border-right:6px solid var(--secondary);
    border-radius:22px;
    padding:16px;
    background:#fff;
    margin-bottom:14px;
    box-shadow:0 8px 22px rgba(15,23,42,.05);
}
.user-card-main{
    display:grid;
    grid-template-columns:1fr auto;
    gap:12px;
    align-items:center;
}
.user-card-info h3{
    padding:0;
    margin:0 0 8px;
    font-size:22px;
    color:var(--secondary);
}
.user-meta{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.user-card-actions{
    display:flex;
    gap:8px;
    flex-direction:column;
    min-width:100px;
}
.user-card-actions .mini-btn{
    width:100%;
    padding:10px 12px;
    border-radius:14px;
}
.permissions-details{
    display:none;
    margin-top:12px;
    padding:12px;
    border-radius:16px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
}
.permissions-details.open{display:block;}
.perm-pills{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.perm-pill{
    padding:6px 10px;
    border-radius:999px;
    font-size:13px;
    font-weight:800;
    background:#f1f5f9;
    color:#475569;
}
.perm-pill.on{background:#dcfce7;color:#166534;}
.perm-pill.off{background:#fee2e2;color:#991b1b;}

/* 02G) Password settings */

.logs-filter-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:16px;
    margin-bottom:14px;
    box-shadow:0 6px 18px rgba(0,0,0,.04);
}

.compact-grid{
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:12px;
}

.logs-list{
    display:grid;
    gap:12px;
}

.log-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:15px;
    box-shadow:0 6px 18px rgba(0,0,0,.04);
}

.log-card-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:10px;
}

.log-action-badge{
    background:#eff6ff;
    color:#1d4ed8;
    border:1px solid #bfdbfe;
    padding:6px 10px;
    border-radius:999px;
    font-size:13px;
    font-weight:800;
}

.log-meta{
    color:var(--muted);
    font-size:13px;
    line-height:1.8;
}

.log-details{
    background:#f8fafc;
    border-radius:14px;
    padding:10px 12px;
    color:#334155;
    font-size:14px;
    margin-top:8px;
}

.muted-note{
    display:block;
    margin:8px 0 12px;
}

.password-settings-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:14px;
}
.password-setting-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:16px;
    box-shadow:0 8px 22px rgba(15,23,42,.04);
}
.password-setting-card.master-card{
    grid-column:1/-1;
    background:linear-gradient(135deg,#eff6ff,#f8fafc);
}
.password-card-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
    margin-bottom:14px;
}
.password-card-head h4{
    margin:0 0 5px;
    font-size:17px;
    color:var(--text);
}
.password-card-head p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.6;
}
.switch-row{
    display:flex;
    align-items:center;
    gap:8px;
    background:#f8fafc;
    border:1px solid var(--border);
    padding:8px 10px;
    border-radius:999px;
    white-space:nowrap;
    font-weight:700;
    color:var(--text);
}
.switch-row input{
    width:18px;
    height:18px;
    accent-color:var(--primary);
}
.password-note-box{
    margin-top:14px;
    background:#fffbeb;
    color:#92400e;
    border:1px solid #fde68a;
    border-radius:16px;
    padding:13px 15px;
    line-height:1.8;
}
.compact-head .clean-toolbar{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.soft-section-title{
    margin:4px 0 12px;
    font-size:18px;
    color:#334155;
}
@media(min-width:720px){
    .tabs.main-actions{
        grid-template-columns:repeat(3,1fr);
    }
}
@media(max-width:768px){
    .container{width:100%;padding:10px;}
    .app-shell-top{border-radius:20px;top:6px;}
    .header{min-height:80px;padding:12px 10px;}
    .settings-sidebar{grid-template-columns:repeat(2,1fr);}
    .settings-section-head{align-items:stretch;}
    .clean-toolbar{grid-template-columns:1fr 1fr;}
    .user-card-main{grid-template-columns:1fr;}
    .user-card-actions{flex-direction:row;min-width:0;}
}
@media(max-width:420px){
    .main-actions .tab-btn{font-size:20px;min-height:68px;}
    .clean-toolbar .btn{font-size:16px;min-height:62px;}
    .settings-sidebar{grid-template-columns:1fr;}
}


/* 03B) Requested layout fixes — legacy v2.7 */
body.home-view .tabs.main-actions{display:grid;}
body:not(.home-view) .tabs.main-actions{display:none !important;}
body.settings-mode .header{
    min-height:82px;
    padding:14px 12px;
    margin:10px 0 12px;
    border-radius:20px;
}
body.settings-mode .header h1{font-size:18px;line-height:1.35;}
body.settings-mode .header p{font-size:12px;margin-top:4px;}
body.settings-mode .settings-hero{padding:12px 14px;margin-bottom:10px;}
body.settings-mode .settings-hero h2{font-size:22px;margin:0;}
body.settings-mode .settings-hero p{display:none !important;}
.side-parent-split{
    padding:0;
    overflow:hidden;
}
.side-parent-split .side-main-link,
.side-parent-split .side-toggle{
    border:none;
    background:transparent;
    color:inherit;
    font:inherit;
    cursor:pointer;
}
.side-parent-split .side-main-link{
    flex:1;
    text-align:right;
    padding:14px;
}
.side-parent-split .side-toggle{
    width:52px;
    align-self:stretch;
    border-right:1px solid #e2e8f0;
    font-size:20px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.settings-section-head .clean-toolbar .btn{
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
}
@media(max-width:480px){
    .settings-section-head h3{font-size:22px;}
    .settings-section-head p{font-size:13px;}
    .settings-section-head .clean-toolbar{grid-template-columns:1fr 1fr;gap:10px;}
    .settings-section-head .clean-toolbar .btn{min-height:62px;font-size:15px;padding:12px 10px;}
}


.region-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:16px;
    margin-bottom:12px;
    box-shadow:0 6px 16px rgba(0,0,0,.04);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.region-card h3{
    margin:0;
    font-size:18px;
    color:var(--secondary);
}
.region-card .region-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
@media(max-width:768px){
    .region-card{align-items:stretch;flex-direction:column;}
    .region-card .region-actions{display:grid;grid-template-columns:1fr 1fr;}
}


/* 02H) Design settings panel */
.design-settings-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px;
    margin-top:14px;
}
.design-preview-card{
    margin-top:14px;
    border:1px solid var(--border);
    border-radius:18px;
    padding:16px;
    background:linear-gradient(135deg,var(--secondary),var(--primary));
    color:#fff;
}
.design-preview-card h4{
    margin:0 0 6px;
    font-size:18px;
}
.design-preview-card p{
    margin:0;
    opacity:.9;
    font-size:13px;
}
.color-preview{
    height:42px;
    border-radius:14px;
    border:1px solid var(--border);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.settings-mini-note{
    color:var(--muted);
    font-size:13px;
    margin-top:6px;
}


/* 04A) Case card view modes */
.case-view-select{
    padding:14px;
    border-radius:14px;
    border:1px solid var(--border);
    font-size:15px;
    background:#fff;
    outline:none;
}

.case-card-compact-pro{
    padding:18px;
    border-right:6px solid var(--primary);
}

.case-pro-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    flex-wrap:wrap;
}

.case-pro-title{
    flex:1;
    min-width:220px;
}

.case-pro-title h3{
    margin:0 0 8px;
    padding-left:0;
    color:var(--secondary);
    font-size:20px;
}

.case-pro-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:8px;
}

.case-pro-pill{
    display:inline-flex;
    align-items:center;
    gap:5px;
    border:1px solid var(--border);
    background:#f8fafc;
    color:var(--text);
    border-radius:999px;
    padding:7px 11px;
    font-size:13px;
    line-height:1.2;
}

.case-pro-pill.primary{
    background:#eff6ff;
    color:var(--secondary);
    border-color:#bfdbfe;
    font-weight:700;
}

.case-pro-pill.warning{
    background:#fff7ed;
    color:#c2410c;
    border-color:#fed7aa;
    font-weight:700;
}

.case-pro-actions{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.case-details-toggle{
    border:1px solid #bfdbfe;
    background:#eff6ff;
    color:var(--secondary);
    border-radius:12px;
    padding:10px 13px;
    cursor:pointer;
    font-weight:700;
    transition:.2s;
}

.case-details-toggle:hover{
    transform:translateY(-1px);
}

.case-pro-details{
    display:none;
    margin-top:14px;
    padding:16px;
    border:1px dashed var(--border);
    border-radius:16px;
    background:#fbfdff;
}

.case-pro-details.open{
    display:block;
}

.case-pro-note{
    margin-top:12px;
    background:#f8fafc;
    border:1px solid var(--border);
    border-radius:14px;
    padding:12px;
    font-size:14px;
    color:var(--text);
}

.case-card-compact-pro{
    width:100%;
    max-width:100%;
    overflow:hidden;
}

.case-pro-head,
.case-pro-title,
.case-pro-actions,
.case-pro-meta,
.case-pro-details{
    max-width:100%;
}

.case-pro-title{
    min-width:0 !important;
}

.case-pro-actions{
    width:100%;
    justify-content:flex-start;
}

.case-pro-actions .icon-btn,
.case-details-toggle{
    flex-shrink:0;
}

.case-images-box{
    width:100%;
    max-width:100%;
}

.case-images-wrap{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:8px;
    max-width:100%;
}

.case-img-thumb{
    width:120px;
    max-width:45%;
    height:auto;
    border-radius:12px;
    border:1px solid #dbe3ef;
    display:block;
}

@media(max-width:768px){
    html, body{
        max-width:100%;
        overflow-x:hidden;
    }

    .container,
    .card,
    .results,
    .result-card,
    .case-card-compact-pro{
        max-width:100%;
        overflow-x:hidden;
    }

    .case-pro-head{
        display:block;
    }

    .case-pro-actions{
        margin-top:12px;
        display:flex;
        flex-wrap:wrap;
    }

    .case-details-toggle{
        flex:1;
        min-width:130px;
    }
}

@media(max-width:768px){
    .case-pro-head{
        flex-direction:column;
    }

    .case-pro-actions{
        width:100%;
        justify-content:flex-start;
    }

    .case-pro-title h3{
        font-size:18px;
    }
}


/* 04B) Statistics / export / toast — legacy v3.8 */
.total-cases-badge{
    margin:12px auto 0;
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.28);
    color:#fff;
    padding:8px 14px;
    border-radius:999px;
    font-size:14px;
    font-weight:700;
}

.toast-container{
    position:fixed;
    top:18px;
    left:18px;
    z-index:200000;
    display:flex;
    flex-direction:column;
    gap:10px;
    max-width:min(360px,90vw);
}

.toast{
    background:#fff;
    border-right:5px solid var(--primary);
    color:var(--text);
    border-radius:16px;
    padding:13px 15px;
    box-shadow:0 12px 35px rgba(0,0,0,.16);
    font-weight:700;
    animation:toastIn .25s ease;
}

.toast.success{border-right-color:var(--success);}
.toast.error{border-right-color:var(--danger);}
.toast.warning{border-right-color:var(--warning);}

@keyframes toastIn{
    from{opacity:0;transform:translateX(-12px);}
    to{opacity:1;transform:translateX(0);}
}

.data-status-badge.complete{
    background:#dcfce7;
    color:#166534;
}

.data-status-badge.incomplete{
    background:#fff7ed;
    color:#c2410c;
}

.export-actions{
    display:flex;
    gap:10px;
    justify-content:flex-end;
    flex-wrap:wrap;
    margin-top:15px;
}

.btn-excel{
    background:#15803d;
    color:#fff;
}

.btn-csv{
    background:#0f766e;
    color:#fff;
}

.manage-mode-tabs{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:10px;
    margin-bottom:16px;
}

.manage-mode-btn{
    border:1px solid var(--border);
    background:#fff;
    border-radius:16px;
    padding:14px;
    font-weight:800;
    cursor:pointer;
    transition:.2s;
}

.manage-mode-btn.active{
    background:linear-gradient(135deg,var(--secondary),var(--primary));
    color:#fff;
    border-color:transparent;
}

.filters-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:14px;
    margin-top:14px;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:14px;
    margin-top:14px;
}

.stat-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:16px;
    box-shadow:0 8px 22px rgba(0,0,0,.05);
}

.stat-card h4{
    margin:0 0 8px;
    color:var(--muted);
    font-size:14px;
}

.stat-card strong{
    font-size:25px;
    color:var(--secondary);
}

.region-stat-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:11px 12px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
    margin-bottom:8px;
}

.region-stat-row span:last-child{
    font-weight:800;
    color:var(--secondary);
}

@media(max-width:768px){
    .toast-container{
        top:10px;
        left:10px;
        right:10px;
        max-width:none;
    }

    .export-actions{
        justify-content:stretch;
    }

    .export-actions .btn{
        flex:1;
        min-width:145px;
    }
}


/* 02I) Login + version UI update — legacy v3.8.4 */
.login-card{
    position:relative;
    overflow:hidden;
}

.login-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top right, rgba(37,99,235,.10), transparent 34%),
        radial-gradient(circle at bottom left, rgba(15,118,110,.10), transparent 34%);
    pointer-events:none;
}

.login-card > *{
    position:relative;
    z-index:1;
}

.login-input-wrap{
    position:relative;
}

.login-input-wrap .login-field-icon{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    font-size:18px;
    z-index:2;
    opacity:.85;
}

.login-input-wrap input{
    padding-right:46px !important;
}

.login-input-wrap.has-toggle input{
    padding-left:52px !important;
}

.password-toggle-btn{
    position:absolute;
    left:8px;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:#eef6ff;
    color:var(--secondary);
    width:38px;
    height:38px;
    border-radius:12px;
    cursor:pointer;
    font-weight:800;
    z-index:3;
    transition:.2s;
}

.password-toggle-btn:hover{
    background:#dbeafe;
}

.login-version-badge{
    margin:16px auto 0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:7px 13px;
    border-radius:999px;
    background:#f8fafc;
    border:1px solid var(--border);
    color:var(--muted);
    font-size:13px;
    font-weight:800;
}

.sidebar-version{
    margin-top:auto;
    padding:12px 14px;
    border-radius:16px;
    background:rgba(15,118,110,.08);
    color:var(--muted);
    font-size:13px;
    font-weight:800;
    text-align:center;
    border:1px solid rgba(15,118,110,.12);
}

.design-version-note{
    color:var(--muted);
    font-size:13px;
    margin-top:6px;
}


/* 02J) Login + sidebar version polish — legacy v3.8.5 */
.login-card{
    width:min(480px,95%);
    padding:18px;
}

.login-system-card{
    background:linear-gradient(135deg,var(--secondary),var(--primary));
    color:#fff;
    border-radius:28px;
    padding:28px 18px;
    box-shadow:0 14px 34px rgba(37,99,235,.18);
    margin-bottom:18px;
    position:relative;
    overflow:hidden;
}

.login-system-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 45%);
    pointer-events:none;
}

.login-system-card h1,
.login-system-card p{
    position:relative;
    z-index:1;
}

.login-system-card h1{
    margin:0;
    text-align:center;
    color:#fff;
    font-size:clamp(24px,6vw,38px);
    line-height:1.45;
}

.login-system-card p{
    margin:12px 0 0;
    text-align:center;
    color:rgba(255,255,255,.94);
    font-size:clamp(14px,3.7vw,18px);
    line-height:1.8;
}

.login-logo{
    width:88px;
    height:88px;
    margin:8px auto 14px;
}

.login-auth-title{
    margin:0;
    text-align:center;
    font-size:22px;
    font-weight:900;
    color:var(--secondary);
}

.login-auth-appname{
    text-align:center;
    color:var(--muted);
    margin:8px 0 18px;
    font-size:15px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.login-card .field{
    margin-bottom:14px;
}

.login-card .field label{
    display:block;
    margin-bottom:8px;
}

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

.login-version-badge{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin:14px auto 4px;
    background:transparent;
    border:none;
    color:var(--muted);
    font-size:13px;
    font-weight:800;
    padding:0;
}

.sidebar-version{
    margin-top:10px;
    padding:0;
    border-radius:0;
    background:transparent;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    text-align:center;
    border:none;
    opacity:.9;
}


/* 02K) Login duplicate cleanup + equal fields — legacy v3.8.5.1 */
.login-card{
    box-sizing:border-box;
}

.login-card *{
    box-sizing:border-box;
}

.login-field-clean{
    width:100%;
    margin-bottom:16px !important;
}

.login-input-wrap{
    width:100%;
    position:relative;
    display:block;
}

.login-input-wrap input{
    width:100% !important;
    height:58px !important;
    min-height:58px !important;
    display:block !important;
    border-radius:18px !important;
    font-size:16px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    padding-right:52px !important;
}

.login-input-wrap:not(.has-toggle) input{
    padding-left:16px !important;
}

.login-input-wrap.has-toggle input{
    padding-left:58px !important;
}

.login-input-wrap .login-field-icon{
    right:18px !important;
    left:auto !important;
    top:50% !important;
    transform:translateY(-50%) !important;
}

.password-toggle-btn{
    left:10px !important;
    right:auto !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:42px !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.login-submit-btn{
    width:100% !important;
    height:58px !important;
    min-height:58px !important;
    margin-top:6px !important;
}

.login-version-badge{
    width:auto !important;
    min-height:auto !important;
}

@media(max-width:768px){
    .login-card{
        width:min(500px,92vw) !important;
        padding:16px !important;
    }

    .login-system-card{
        padding:24px 14px !important;
    }

    .login-input-wrap input{
        height:56px !important;
        min-height:56px !important;
    }
}

/* 04C) Quick navigation bar */
.quick-nav-bar{
    display:none;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:8px;
    margin:0 0 14px;
    box-shadow:0 8px 22px rgba(15,23,42,.06);
}

.quick-nav-btn{
    border:none;
    background:#f8fafc;
    color:var(--text);
    border-radius:14px;
    padding:10px 8px;
    font-size:15px;
    font-weight:800;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    transition:.2s;
    min-height:46px;

}

.quick-nav-btn:hover{
    transform:translateY(-1px);
    background:#eff6ff;
}

.quick-nav-btn.active{
    background:linear-gradient(135deg,var(--secondary),var(--primary));
    color:#fff;
    box-shadow:0 8px 18px rgba(37,99,235,.16);
}

.quick-nav-btn span{
    font-size:14px;
}

@media(max-width:420px){
    .quick-nav-btn{
        font-size:13px;
        padding:9px 6px;
    }

    .quick-nav-btn span{
        font-size:12px;
    }
}



/* END css/base/core-layout-cards-settings-sidebar-cases.css */


/* BEGIN css/base/professional-ui-polish.css */
/* ============================================================
   05) PROFESSIONAL UI POLISH — image upload / lightbox / add-form polish
   ============================================================ */

/* 05A) Image upload fields */
.field input[type="file"]{
    display:none !important;
}

/* 05B) JS-created image upload wrapper fallback */
.img-upload-zone{
    position:relative;
    border:2px dashed var(--border);
    border-radius:18px;
    background:linear-gradient(135deg,#f8fafc,#f0f6ff);
    padding:0;
    cursor:pointer;
    transition:border-color .25s, background .25s, box-shadow .25s;
    overflow:hidden;
    min-height:160px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:0;
}

.img-upload-zone:hover,
.img-upload-zone.dragover{
    border-color:var(--secondary);
    background:linear-gradient(135deg,#eff6ff,#e8f5fd);
    box-shadow:0 0 0 4px rgba(37,99,235,.09);
}

.img-upload-zone.has-image{
    border-style:solid;
    border-color:var(--primary);
    background:#fff;
}

.img-upload-placeholder{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:28px 20px;
    pointer-events:auto;
}

.img-upload-icon{
    width:58px;
    height:58px;
    border-radius:18px;
    background:linear-gradient(135deg,var(--secondary),var(--primary));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    box-shadow:0 8px 20px rgba(37,99,235,.22);
    flex-shrink:0;
}

.img-upload-text{
    font-size:15px;
    font-weight:700;
    color:var(--text);
    line-height:1.5;
}

.img-upload-hint{
    font-size:12px;
    color:var(--muted);
    margin-top:2px;
}

.upload-source-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    width:100%;
    max-width:260px;
    margin-top:4px;
}

.upload-source-btn{
    border:none;
    border-radius:13px;
    padding:10px 8px;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    background:#fff;
    color:var(--text);
    border:1px solid var(--border);
    box-shadow:0 4px 12px rgba(15,23,42,.05);
    transition:.2s;

}

.upload-source-btn.camera{
    background:linear-gradient(135deg,var(--secondary),var(--primary));
    color:#fff;
    border-color:transparent;
}

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

.compression-note{
    font-size:12px;
    color:var(--primary);
    font-weight:800;
    margin-top:2px;
}

@media(max-width:420px){
    .upload-source-actions{grid-template-columns:1fr;max-width:230px;}
}


/* 05C) Image preview inside upload zone */
.img-preview-wrap{
    position:relative;
    width:100%;
    min-height:160px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
}

.img-preview-wrap img{
    max-width:100%;
    max-height:220px;
    object-fit:contain;
    border-radius:12px;
    display:block;
    box-shadow:0 6px 20px rgba(0,0,0,.10);
}

.img-preview-clear{
    position:absolute;
    top:10px;
    left:10px;
    width:32px;
    height:32px;
    border-radius:50%;
    border:none;
    background:rgba(220,38,38,.88);
    color:#fff;
    font-size:16px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 12px rgba(220,38,38,.32);
    transition:.2s;
    z-index:2;
}

.img-preview-clear:hover{
    background:#b91c1c;
    transform:scale(1.08);
}

/* 05E) Global card polish */
.card{
    border:1px solid rgba(219,227,239,.9);
    box-shadow:0 12px 32px rgba(15,23,42,.06);
}

/* 05F) Result card image thumbnails */
.case-img-thumb{
    width:90px;
    height:68px;
    object-fit:cover;
    border-radius:10px;
    border:2px solid var(--border);
    cursor:pointer;
    transition:transform .2s, box-shadow .2s;
    display:block;
}

.case-img-thumb:hover{
    transform:scale(1.06);
    box-shadow:0 6px 18px rgba(0,0,0,.14);
}

.case-img-thumb.img-load-failed{
    object-fit:contain;
    background:#f8fafc;
    border-style:dashed;
    opacity:.75;
}

.case-images-wrap{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:10px;
}

/* 05G) Image preview lightbox */
#imgLightbox{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(10,15,30,.82);
    z-index:999999;
    justify-content:center;
    align-items:center;
    backdrop-filter:blur(8px);
    cursor:zoom-out;
}

#imgLightbox.open{
    display:flex;
}

#imgLightbox img{
    max-width:min(92vw,700px);
    max-height:88vh;
    border-radius:18px;
    box-shadow:0 24px 70px rgba(0,0,0,.5);
    object-fit:contain;
    animation:lbFade .2s ease;
}

@keyframes lbFade{
    from{opacity:0;transform:scale(.93);}
    to{opacity:1;transform:scale(1);}
}

#imgLightboxClose{
    position:fixed;
    top:18px;
    left:18px;
    width:42px;
    height:42px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,.18);
    color:#fff;
    font-size:22px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    backdrop-filter:blur(4px);
    transition:.2s;
}

#imgLightboxClose:hover{
    background:rgba(255,255,255,.32);
}

/* 05H) Edit modal image upload */
#editModal .img-upload-zone{
    min-height:140px;
}

/* 05I) Add form button spacing */
#add .btn.btn-primary{
    width:100%;
    margin-top:8px;
    min-height:56px;
    font-size:18px;
    border-radius:18px;
    box-shadow:0 10px 28px rgba(37,99,235,.22);
}

/* 05J) Search tab button sizing */
#search .btn.btn-primary{
    min-height:52px;
    padding:14px 28px;
    font-size:16px;
}

/* 05K) Add form grid fix */
#add .card > .grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:16px;
}

/* 05L) Add form images card */
.images-section-card{
    background:linear-gradient(135deg,#f8fafc,#f0f7ff);
    border:1px solid var(--border);
    border-radius:20px;
    padding:18px;
    margin-top:6px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

@media(max-width:520px){
    .images-section-card{
        grid-template-columns:1fr;
    }
}

.images-section-label{
    grid-column:1/-1;
    font-weight:800;
    font-size:16px;
    color:var(--secondary);
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:4px;
}



/* END css/base/professional-ui-polish.css */


/* Primary screens and locked/permission UI */

/* BEGIN css/features/home-search-add-result-ui.css */
/* ============================================================
   06) HOME / SEARCH / ADD / RESULT UI POLISH — legacy safe layer
   ============================================================ */


body{
    background:
        radial-gradient(circle at 10% 5%, rgba(15,118,110,.10), transparent 28%),
        radial-gradient(circle at 90% 15%, rgba(37,99,235,.09), transparent 26%),
        linear-gradient(135deg,#f7fbff,#f1fff8) !important;
}

.app-shell-top{
    border-radius:24px;
    backdrop-filter:blur(8px);
    background:rgba(255,255,255,.92);
}

.header{
    border-radius:26px !important;
    background:linear-gradient(135deg,#0f766e,#2563eb) !important;
    position:relative;
    overflow:hidden;
}
.header::after{
    content:"";
    position:absolute;
    inset:auto -20px -38px auto;
    width:160px;
    height:160px;
    border-radius:50%;
    background:rgba(255,255,255,.10);
    pointer-events:none;
}
.header h1,.header p,.total-cases-badge{position:relative;z-index:1;}

body.home-view .tabs.main-actions{display:none !important;}
.home-dashboard{display:none;margin-bottom:18px;}
body.home-view .home-dashboard{display:block;animation:fade .25s ease;}
.home-hero-card{
    background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(248,250,252,.96));
    border:1px solid rgba(219,227,239,.95);
    border-radius:26px;
    padding:18px;
    box-shadow:var(--deep-shadow);
    margin-bottom:14px;
}
.home-hero-line{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.home-hero-title h2{margin:0 0 4px;color:var(--primary);font-size:23px;line-height:1.4;}
.home-hero-title p{margin:0;color:var(--muted);font-size:13px;}
.home-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px;}
.home-stat-card{background:#fff;border:1px solid rgba(226,232,240,.8);border-radius:var(--radius-lg);padding:15px;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:12px;min-height:92px;transition:var(--transition);}
.home-stat-icon{width:46px;height:46px;border-radius:17px;display:flex;align-items:center;justify-content:center;font-size:23px;flex-shrink:0;}
.home-stat-icon.green{background:var(--soft-green);color:var(--primary);}
.home-stat-icon.orange{background:var(--soft-orange);color:#ea580c;}
.home-stat-icon.red{background:var(--soft-red);color:#dc2626;}
.home-stat-icon.blue{background:var(--soft-blue);color:#2563eb;}
.home-stat-info span{display:block;color:var(--muted);font-size:12px;font-weight:800;line-height:1.4;}
.home-stat-info strong{display:block;color:var(--text);font-size:25px;line-height:1.2;margin-top:4px;}
.home-action-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:14px;}
.home-action-tile{border:1px solid rgba(226,232,240,.8);background:#fff;border-radius:var(--radius-xl);padding:18px 12px;min-height:116px;box-shadow:var(--shadow-md);font-family:inherit;transition:var(--transition);font-weight:900;font-size:16px;color:var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:.2s;}
.home-action-tile:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(15,23,42,.08);}
.home-action-tile .tile-icon{width:50px;height:50px;border-radius:19px;background:var(--soft-green);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:25px;}
.home-activity-card{background:#fff;border:1px solid rgba(219,227,239,.95);border-radius:24px;padding:16px;box-shadow:var(--deep-shadow);}
.home-activity-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.home-activity-head h3{margin:0;color:var(--primary);font-size:18px;}
.home-activity-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #eef2f7;}
.home-activity-row:last-child{border-bottom:none;}
.home-activity-main{min-width:0;}
.home-activity-main strong{display:block;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.home-activity-main span{display:block;font-size:12px;color:var(--muted);margin-top:2px;}
.home-activity-badge{width:36px;height:36px;border-radius:14px;background:var(--soft-green);color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:900;flex-shrink:0;}
.home-empty-note{color:var(--muted);font-size:14px;text-align:center;padding:12px;}
.search-input-row .btn{min-height:54px;border-radius:18px;min-width:115px;}

/* 06B) Add form polish */
.add-polish-card{background:transparent !important;border:none !important;box-shadow:none !important;padding:0 !important;}
.add-section-card{background:#fff;border:1px solid rgba(219,227,239,.95);border-radius:24px;padding:18px;margin-bottom:14px;box-shadow:0 10px 28px rgba(15,23,42,.055);}
.add-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px;}
.add-section-head h3{margin:0;color:var(--primary);font-size:19px;line-height:1.4;}
.add-section-icon{width:42px;height:42px;border-radius:16px;background:var(--soft-green);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.polish-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;}
.add-section-card .field label{font-size:14px;color:#334155;margin-bottom:7px;}
.add-section-card .field input,.add-section-card .field select,.add-section-card .field textarea{border-radius:17px;background:#fbfdff;min-height:52px;}
.add-section-card .field textarea{min-height:104px;}
.polish-images-card{background:linear-gradient(135deg,#ffffff,#f5fbff);}
.polish-save-wrap{position:sticky;bottom:8px;z-index:2500;background:linear-gradient(180deg,rgba(247,251,255,0),rgba(247,251,255,.98) 28%,rgba(247,251,255,.98));padding-top:14px;}
.polish-save-wrap .btn{width:100%;min-height:60px;border-radius:20px;font-size:18px;box-shadow:0 12px 28px rgba(15,118,110,.23);}

/* 06C) Result card polish */
.result-card{border-radius:var(--radius-lg) !important;box-shadow:var(--shadow-md) !important;}
.case-card-compact-pro{border-right-width:5px !important;}
.case-pro-pill{border-radius:999px !important;}
.case-details-toggle{border-radius:15px !important;}
.case-pro-details{border-style:solid !important;background:#fbfdff !important;}
.case-img-thumb{border-radius:14px !important;}

/* 06D) Settings polish */
.settings-hero,.settings-section-head,.empty-settings-card,.password-setting-card,.logs-filter-card,.log-card,.region-card,.user-card-compact{border-radius:var(--radius-xl) !important;box-shadow:var(--shadow-md) !important;}
.settings-nav{border-radius:16px !important;}
.settings-section-head h3{color:var(--primary) !important;}

@media(max-width:768px){
    .home-stats-grid{grid-template-columns:1fr 1fr;gap:10px;}
    .home-stat-card{padding:12px;min-height:86px;}
    .home-stat-icon{width:40px;height:40px;border-radius:15px;font-size:20px;}
    .home-stat-info strong{font-size:21px;}
    .home-action-grid{grid-template-columns:1fr 1fr;}
    .home-action-tile{min-height:104px;font-size:15px;}
    .search-input-row .btn{width:100%;}
    .polish-grid{grid-template-columns:1fr;}
}
@media(max-width:430px){
    .home-hero-line{align-items:flex-start;flex-direction:column;}
    .home-stats-grid{grid-template-columns:1fr;}
    .home-action-grid{grid-template-columns:1fr 1fr;}
    .home-action-tile{padding:14px 8px;min-height:96px;font-size:14px;}
    .home-action-tile .tile-icon{width:44px;height:44px;font-size:22px;}
}


/* 06E) UI refinements */
.home-title-only-card{margin-bottom:12px;}
.home-follow-card{margin-top:4px;margin-bottom:14px;}
.search-simple-card .simple-page-title{margin:0 0 14px;color:var(--primary);font-size:22px;}
.search-main-btn{width:100%;min-height:54px;border-radius:18px;font-size:17px;}
.search-recent-card{margin-top:16px;}
.number-validity-field.is-invalid{border-color:#dc2626 !important;box-shadow:0 0 0 4px rgba(220,38,38,.10) !important;color:#b91c1c !important;}
.number-validity-field.is-valid{border-color:#16a34a !important;box-shadow:0 0 0 4px rgba(22,163,74,.10) !important;color:#166534 !important;}
.number-validity-note{font-size:12px;font-weight:800;margin-top:6px;color:var(--muted);}
.number-validity-note.valid{color:#166534;}
.number-validity-note.invalid{color:#b91c1c;}
.manage-main-buttons{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin:12px 0;}
.manage-show-btn{min-height:62px;border-radius:20px;font-size:18px;}
.manage-clear-btn{min-height:62px;border-radius:20px;font-size:16px;}
.manage-export-actions{justify-content:flex-start;margin-top:8px;}
.export-mini-btn{padding:10px 14px !important;font-size:13px !important;border-radius:12px !important;min-height:42px !important;}
.case-list-view{display:grid;gap:10px;margin-top:12px;}
.case-list-item{background:#fff;border:1px solid rgba(219,227,239,.95);border-right:5px solid var(--primary);border-radius:18px;padding:13px 14px;box-shadow:0 7px 18px rgba(15,23,42,.045);overflow:hidden;}
.case-list-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;}
.case-list-main{min-width:0;overflow:hidden;}
.case-list-main strong{display:block;color:var(--text);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.45;}
.case-list-main span{display:block;color:var(--muted);font-size:12px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5;}
.case-list-actions{display:grid;grid-template-columns:auto auto auto;gap:6px;align-items:center;justify-content:end;min-width:max-content;}
.case-list-open{border:1px solid #bfdbfe;background:#eff6ff;color:var(--secondary);border-radius:12px;padding:9px 11px;font-weight:800;cursor:pointer;white-space:nowrap;min-height:42px;}
.case-list-actions .icon-btn{width:42px;height:42px;min-width:42px;flex:0 0 42px;}
.case-list-details{display:none;margin-top:12px;padding:13px;border-radius:15px;background:#f8fafc;border:1px dashed var(--border);}
.case-list-details.open{display:block;}
.incomplete-filter-card{
    background:#fff;
    border:1px solid rgba(219,227,239,.95);
    border-radius:22px;
    padding:16px;
    margin-bottom:14px;
    box-shadow:0 8px 22px rgba(15,23,42,.045);
}
.incomplete-summary-line{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    margin:12px 0;
}
.incomplete-summary-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#fff7ed;
    color:#c2410c;
    border:1px solid #fed7aa;
    border-radius:999px;
    padding:8px 12px;
    font-size:13px;
    font-weight:900;
}
.crop-modal-box{width:min(520px,96%);}
.crop-stage{background:#0f172a;border-radius:18px;overflow:hidden;touch-action:none;display:flex;align-items:center;justify-content:center;padding:10px;}
#cropCanvas{width:100%;max-width:430px;height:auto;border-radius:12px;background:#111827;display:block;touch-action:none;}
.crop-controls{margin-top:14px;background:#f8fafc;border:1px solid var(--border);border-radius:16px;padding:12px;}
.crop-controls label{display:block;font-weight:900;margin-bottom:8px;color:var(--text);}
.crop-controls input{width:100%;}

/* 06F) Final UI tweaks */
.home-title-only-card{
    padding:13px 16px !important;
    border-radius:22px !important;
    margin-bottom:10px !important;
}
.home-title-only-card .home-hero-title h2{
    font-size:20px !important;
    margin-bottom:2px !important;
}
.home-title-only-card .home-hero-title p{
    font-size:12px !important;
    line-height:1.5 !important;
}
.home-version-footer{
    margin:14px auto 4px;
    width:max-content;
    max-width:100%;
    background:#f8fafc;
    border:1px solid var(--border);
    color:var(--muted);
    border-radius:999px;
    padding:7px 13px;
    font-size:12px;
    font-weight:900;
    text-align:center;
}
.crop-modal-box{
    max-height:92vh;
    overflow:auto;
}
.crop-action-wrap{
    display:grid;
    gap:10px;
    margin-top:14px;
}
.crop-secondary-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}
.crop-secondary-actions .btn,
.crop-confirm-btn{
    min-height:54px;
    border-radius:18px;
    font-size:15px;
}
.crop-confirm-btn{
    width:100%;
    font-size:17px;
}
@media(max-width:420px){
    .crop-secondary-actions .btn{font-size:14px;padding:12px 8px;}
    .crop-confirm-btn{min-height:52px;}
}

@media(max-width:520px){
    .manage-main-buttons{grid-template-columns:1fr;}
    .manage-export-actions .export-mini-btn{flex:1;}
    .case-list-item{padding:12px;}
    .case-list-row{grid-template-columns:1fr;align-items:stretch;}
    .case-list-main strong{font-size:16px;}
    .case-list-actions{width:100%;grid-template-columns:1fr 44px 44px;justify-content:stretch;}
    .case-list-open{width:100%;padding:9px 10px;}
    .case-list-actions .icon-btn{width:44px;height:42px;min-width:44px;}
}



/* END css/features/home-search-add-result-ui.css */


/* BEGIN css/features/data-extraction-center.css */
/* ============================================================
   07) DATA EXTRACTION CENTER — base CSS
   ============================================================ */
.extract-page{display:grid;gap:18px;}
.extract-hero{
    background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(15,118,110,.10));
    border:1px solid rgba(219,227,239,.95);
    border-radius:24px;
    padding:18px;
    box-shadow:0 10px 28px rgba(15,23,42,.06);
}
.extract-hero h2{margin:0 0 6px;color:var(--secondary);font-size:24px;}
.extract-hero p{margin:0;color:var(--muted);line-height:1.8;font-size:14px;}
.extract-section{
    background:#fff;
    border:1px solid rgba(219,227,239,.95);
    border-radius:24px;
    padding:18px;
    box-shadow:0 12px 30px rgba(15,23,42,.06);
}
.extract-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.extract-section-head h3{margin:0 0 5px;color:var(--primary);font-size:22px;}
.extract-section-head p{margin:0;color:var(--muted);font-size:14px;line-height:1.7;}
.extract-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:12px 0;}
.extract-actions-line{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0;}
.extract-actions-line .btn{min-height:46px;}
.extract-selection-summary{
    display:inline-flex;align-items:center;gap:8px;background:#f8fafc;border:1px solid var(--border);
    color:#334155;border-radius:999px;padding:9px 13px;font-weight:800;font-size:13px;
}
.extract-layout{display:grid;grid-template-columns:minmax(280px,1.1fr) minmax(280px,.9fr);gap:16px;align-items:start;margin-top:12px;}
.extract-list-box,.extract-fields-box,.extract-template-box,.extract-output-box{
    border:1px solid var(--border);border-radius:20px;background:#fbfdff;padding:14px;
}
.extract-list-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;}
.extract-list-head strong{color:#334155;}
.extract-case-list{display:grid;gap:8px;max-height:420px;overflow:auto;padding:2px;}
.extract-case-row{
    display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;background:#fff;border:1px solid #e2e8f0;
    border-radius:16px;padding:11px 12px;box-shadow:0 4px 14px rgba(15,23,42,.035);
}
.extract-case-row input{width:20px;height:20px;accent-color:var(--primary);}
.extract-case-main{min-width:0;}
.extract-case-name{font-weight:900;color:var(--text);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.extract-case-meta{color:var(--muted);font-size:12px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.extract-fields-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:8px;margin-top:10px;}
.extract-field-item{
    display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:10px;font-weight:800;color:#334155;font-size:13px;
}
.extract-field-item input{width:18px;height:18px;accent-color:var(--primary);}
.extract-template-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px;}
.extract-inline-form{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:end;margin-top:10px;}
.extract-output-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.extract-output-buttons .btn{flex:1;min-width:140px;}
.extract-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0;}
.extract-mode-btn{border:1px solid var(--border);background:#fff;border-radius:16px;padding:13px;font-weight:900;cursor:pointer;transition:.2s;color:var(--text);}
.extract-mode-btn.active{background:linear-gradient(135deg,var(--secondary),var(--primary));color:#fff;border-color:transparent;}
.extract-note{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:16px;padding:12px;margin-top:12px;line-height:1.8;font-size:13px;}

/* 07A) Data extraction UI rebuild */
.extract-hero-compact{padding:16px 18px;}
.extract-hero-compact h2{font-size:22px;}
.extract-main-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px;}
.extract-main-tab{border:1px solid var(--border);background:#fff;color:var(--text);border-radius:18px;padding:14px 10px;font-weight:900;font-size:15px;cursor:pointer;box-shadow:0 8px 20px rgba(15,23,42,.045);transition:.2s;font-family:inherit;}
.extract-main-tab.active{background:linear-gradient(135deg,var(--secondary),var(--primary));color:#fff;border-color:transparent;box-shadow:0 10px 26px rgba(37,99,235,.16);}
.extract-tab-panel{display:none;}
.extract-tab-panel.active{display:block;}
.compact-extract-head{margin-bottom:10px;}
.extract-actions-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.extract-actions-two .btn{width:100%;}
.extract-side-tools{min-width:0;}
.extract-collapsible-box{padding:0;overflow:hidden;}
.extract-collapse-head{width:100%;border:none;background:#fff;color:var(--secondary);font-family:inherit;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;font-size:16px;font-weight:900;cursor:pointer;}
.extract-collapse-head:hover{background:#f8fafc;}
.extract-collapse-icon{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:900;white-space:nowrap;}
.extract-collapse-body{display:none;border-top:1px solid var(--border);padding:14px;}
.extract-collapse-body.open{display:block;}
.compact-template-form{grid-template-columns:1fr;}
.extract-template-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.extract-template-actions .btn{min-height:46px;}
.extract-pdf-options{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f8fafc;border:1px solid var(--border);border-radius:14px;padding:10px 12px;margin-top:12px;}
.extract-pdf-options label{font-weight:900;color:#334155;}
.extract-pdf-options select{border:1px solid var(--border);border-radius:12px;padding:8px 10px;background:#fff;font-family:inherit;font-weight:900;min-width:76px;text-align:center;}
.compact-output-buttons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.cards-print-options{margin-top:10px;}
.cards-print-options select{min-width:92px;}
.cards-print-hint{display:block;margin-top:7px;color:var(--muted);font-size:12px;line-height:1.7;}
.compact-output-buttons .btn{min-width:0;}
@media(max-width:768px){
  .extract-main-tabs{grid-template-columns:1fr;}
  .compact-output-buttons{grid-template-columns:1fr;}
  .extract-hero-compact p{font-size:13px;}
}

@media(max-width:800px){
    .extract-layout{grid-template-columns:1fr;}
    .extract-inline-form{grid-template-columns:1fr;}
    .extract-output-buttons .btn{min-width:100%;}
    .extract-case-list{max-height:360px;}
}
@media print{
    .a4-print-page{page-break-after:always;}
}



/* END css/features/data-extraction-center.css */


/* BEGIN css/components/permissions-locked-ui.css */
/* ============================================================
   08) PERMISSIONS LOCKED UI
   ============================================================ */
.locked-option{
    opacity:.62 !important;
    filter:grayscale(.35);
    cursor:not-allowed !important;
    position:relative;
    border-style:dashed !important;
}
.locked-option:hover{
    transform:none !important;
    box-shadow:0 6px 18px rgba(15,23,42,.04) !important;
}
.locked-option::before{
    content:"🔒";
    position:absolute;
    top:6px;
    left:7px;
    z-index:5;
    background:#fff7ed;
    color:#c2410c;
    border:1px solid #fed7aa;
    border-radius:999px;
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    line-height:1;
    box-shadow:0 4px 12px rgba(15,23,42,.08);
}
.locked-option .tile-icon,
.locked-option .home-stat-icon{
    opacity:.75;
}
.locked-option-text{
    color:#92400e;
    background:#fffbeb;
    border:1px solid #fde68a;
    border-radius:14px;
    padding:10px 12px;
    font-weight:800;
    font-size:13px;
    margin-top:10px;
}
.permission-group-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}
.permission-group-title small{
    color:var(--muted);
    font-size:12px;
    font-weight:700;
}
.perm-pill.soft-new{
    background:#eff6ff;
    color:#1d4ed8;
}



/* END css/components/permissions-locked-ui.css */


/* Distribution base, dark mode base, notifications */

/* BEGIN css/features/distribution/delivery-base.css */
/* ============================================================
   09) DISTRIBUTION & DELIVERY — base module CSS
   ============================================================ */
html, body{
    max-width:100%;
    overflow-x:hidden;
}
#mainApp,.container,.tab-content,#distribution,.dt-page,.dt-section,.dt-card,.dt-grid,.dt-layout,.dt-list,.dt-list-item,.dt-manage-stack{
    max-width:100%;
    min-width:0;
}
#distribution{
    overflow-x:hidden;
}
body.distribution-mode .header{
    min-height:64px !important;
    padding:8px 10px !important;
    border-radius:18px !important;
    margin:7px 0 9px !important;
}
body.distribution-mode .header h1{
    font-size:clamp(14px,3.6vw,18px) !important;
    line-height:1.28 !important;
}
body.distribution-mode .header p{
    display:none !important;
}
body.distribution-mode .total-cases-badge{
    margin-top:7px !important;
    padding:4px 8px !important;
    font-size:11px !important;
    line-height:1.2 !important;
    gap:6px !important;
    white-space:nowrap;
    flex-wrap:nowrap !important;
}
body.distribution-mode .total-cases-badge button{
    padding:2px 7px !important;
    font-size:11px !important;
    line-height:1.2 !important;
    white-space:nowrap;
}
.home-action-tile.dt-home-tile .tile-icon,
.dt-home-icon{
    background:linear-gradient(135deg,#2563eb,#0f766e) !important;
    color:#fff !important;
}
.dt-page{
    display:grid;
    gap:10px;
    width:100%;
}
.dt-hero{
    background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(15,118,110,.10));
    border:1px solid rgba(219,227,239,.95);
    border-radius:20px;
    padding:12px 14px;
    box-shadow:0 8px 22px rgba(15,23,42,.055);
    overflow:hidden;
}
.dt-hero-line{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
}
.dt-hero h2{
    margin:0;
    color:var(--primary);
    font-size:22px;
    line-height:1.35;
}
.dt-hero p{display:none;}
.dt-version-footer{
    width:max-content;
    max-width:100%;
    margin:4px auto 0;
    color:var(--muted);
    background:#f8fafc;
    border:1px solid var(--border);
    border-radius:999px;
    padding:6px 12px;
    font-size:12px;
    font-weight:900;
}
.dt-tabbar{
    position:sticky;
    top:58px;
    z-index:1000;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    overflow:visible;
    padding:7px;
    border:1px solid var(--border);
    border-radius:17px;
    background:rgba(255,255,255,.96);
    box-shadow:0 8px 20px rgba(15,23,42,.055);
}
.dt-tabbar::-webkit-scrollbar{display:none;}
.dt-subtab-btn{
    width:100%;
    min-width:0;
    border:1px solid var(--border);
    background:#f8fafc;
    color:var(--text);
    border-radius:13px;
    padding:9px 7px;
    font-family:inherit;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
    transition:.2s;
    white-space:normal;
    line-height:1.35;
    min-height:42px;
}
.dt-subtab-btn.active{
    background:linear-gradient(135deg,var(--secondary),var(--primary));
    color:#fff;
    border-color:transparent;
    box-shadow:0 8px 18px rgba(37,99,235,.15);
}
.dt-panel{display:none;}
.dt-panel.active{display:block;animation:fade .25s ease;}
.dt-section{
    background:#fff;
    border:1px solid rgba(219,227,239,.95);
    border-radius:22px;
    padding:14px;
    box-shadow:0 10px 26px rgba(15,23,42,.052);
    margin-bottom:12px;
    overflow:hidden;
}
.dt-section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:12px;
}
.dt-section-head h3{
    margin:0 0 4px;
    color:var(--primary);
    font-size:20px;
    line-height:1.35;
}
.dt-section-head p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.7;
}
.dt-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:11px;
}
.dt-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
    gap:12px;
    align-items:start;
}
.dt-manage-stack{
    display:grid;
    gap:12px;
}
.dt-collapse{
    background:#fff;
    border:1px solid rgba(219,227,239,.95);
    border-radius:22px;
    box-shadow:0 10px 26px rgba(15,23,42,.052);
    overflow:hidden;
}
.dt-collapse > summary{
    list-style:none;
    cursor:pointer;
    padding:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-weight:900;
    color:var(--primary);
    font-size:18px;
}
.dt-collapse > summary::-webkit-details-marker{display:none;}
.dt-collapse > summary::after{
    content:"فتح";
    flex-shrink:0;
    color:#1d4ed8;
    background:#eff6ff;
    border:1px solid #bfdbfe;
    border-radius:999px;
    padding:4px 10px;
    font-size:12px;
    font-weight:900;
}
.dt-collapse[open] > summary::after{content:"إخفاء";}
.dt-collapse-body{
    padding:0 14px 14px;
    border-top:1px solid #eef2f7;
}
.dt-card{
    border:1px solid var(--border);
    border-radius:18px;
    background:#fbfdff;
    padding:13px;
    overflow:hidden;
}
.dt-card-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
    flex-wrap:wrap;
}
.dt-card-title strong{color:#334155;}
.dt-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    margin:11px 0;
}
.dt-actions .btn{
    min-width:0;
    min-height:42px;
}
.dt-actions.two-buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}
.dt-actions.add-selected-line{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
}
.dt-list{
    display:grid;
    gap:8px;
    max-height:430px;
    overflow:auto;
    padding:2px;
}
.dt-list.auto-height{
    max-height:none;
    overflow:visible;
}
.dt-case-row{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:9px;
    align-items:center;
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:15px;
    padding:10px 11px;
    box-shadow:0 4px 14px rgba(15,23,42,.035);
    min-width:0;
    overflow:hidden;
}
.dt-case-row input[type="checkbox"]{
    width:20px;
    height:20px;
    accent-color:var(--primary);
}
.dt-case-main{min-width:0;overflow:hidden;}
.dt-case-name{
    font-weight:900;
    color:var(--text);
    font-size:15px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.45;
}
.dt-case-meta{
    color:var(--muted);
    font-size:12px;
    margin-top:3px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.5;
}
.dt-mini-btn{
    border:1px solid #bfdbfe;
    background:#eff6ff;
    color:#1d4ed8;
    border-radius:12px;
    padding:8px 10px;
    font-weight:900;
    cursor:pointer;
    font-family:inherit;
    white-space:nowrap;
}
.dt-mini-btn.danger{
    background:#fef2f2;
    color:#b91c1c;
    border-color:#fecaca;
}
.dt-status-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    padding:5px 10px;
    font-size:12px;
    font-weight:900;
    border:1px solid #e2e8f0;
    background:#f8fafc;
    color:#334155;
    white-space:nowrap;
}
.dt-status-pill.received{background:#dcfce7;color:#166534;border-color:#bbf7d0;}
.dt-status-pill.not-received{background:#fee2e2;color:#991b1b;border-color:#fecaca;}
.dt-status-pill.absent{background:#fef3c7;color:#92400e;border-color:#fde68a;}
.dt-status-pill.postponed{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe;}
.dt-status-actions{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
    margin-top:9px;
    width:100%;
}
.dt-status-actions button{
    border:1px solid var(--border);
    background:#fff;
    border-radius:12px;
    padding:8px 5px;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
    font-family:inherit;
    min-width:0;
    white-space:nowrap;
}
.dt-status-actions button:hover{background:#f8fafc;}
.dt-summary-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#ecfdf5;
    color:#0f766e;
    border:1px solid rgba(15,118,110,.18);
    border-radius:999px;
    padding:7px 11px;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
}
.dt-report-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(125px,1fr));
    gap:9px;
    margin:11px 0;
}
.dt-report-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:17px;
    padding:12px;
    box-shadow:0 8px 20px rgba(15,23,42,.04);
}
.dt-report-card span{
    display:block;
    color:var(--muted);
    font-size:12px;
    font-weight:900;
    line-height:1.4;
}
.dt-report-card strong{
    display:block;
    color:var(--secondary);
    font-size:23px;
    line-height:1.2;
    margin-top:4px;
}
.dt-saved-list{display:grid;gap:9px;margin-top:11px;}
.dt-saved-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:17px;
    padding:12px;
    box-shadow:0 6px 18px rgba(15,23,42,.04);
    overflow:hidden;
}
.dt-saved-card-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
    flex-wrap:wrap;
}
.dt-saved-card h4{margin:0;color:var(--secondary);font-size:16px;line-height:1.5;}
.dt-saved-card p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.7;}
.dt-saved-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px;}
.dt-list-item{
    background:#fff;
    border:1px solid rgba(219,227,239,.95);
    border-right:5px solid var(--primary);
    border-radius:18px;
    padding:12px;
    margin-bottom:9px;
    box-shadow:0 7px 18px rgba(15,23,42,.045);
    overflow:hidden;
}
.dt-list-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    min-width:0;
}
.dt-list-title{min-width:0;flex:1;overflow:hidden;}
.dt-list-title strong{
    display:block;
    font-size:16px;
    line-height:1.45;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.dt-list-title span{
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-top:3px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.dt-details{
    margin-top:9px;
    color:var(--muted);
    font-size:12px;
    line-height:1.8;
}
.dt-details summary{
    cursor:pointer;
    font-weight:900;
    color:var(--secondary);
}
.dt-empty{
    color:var(--muted);
    font-size:14px;
    text-align:center;
    padding:17px;
    background:#fff;
    border:1px dashed var(--border);
    border-radius:16px;
}
.dt-print-preview{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:13px;
    max-height:450px;
    overflow:auto;
    font-size:13px;
}
.dt-print-preview table{width:100%;border-collapse:collapse;}
.dt-print-preview th,.dt-print-preview td{border:1px solid #dbe3ef;padding:7px;text-align:right;}
.dt-print-preview th{background:#0f766e;color:#fff;}
.dt-field-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
    gap:8px;
    margin-top:10px;
}
.dt-field-item{
    display:flex;
    align-items:center;
    gap:8px;
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:10px;
    font-weight:800;
    color:#334155;
    font-size:13px;
    min-width:0;
}
.dt-field-item input{width:18px;height:18px;accent-color:var(--primary);}
.dt-two-col-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
@media(max-width:860px){
    .dt-layout{grid-template-columns:1fr;}
}
@media(max-width:768px){
    .dt-page{gap:9px;}
    .dt-hero{padding:10px 12px;border-radius:18px;}
    .dt-hero h2{font-size:19px;}
    .dt-tabbar{top:48px;border-radius:15px;gap:6px;padding:6px;}
    .dt-subtab-btn{font-size:12px;padding:8px 5px;min-height:39px;}
    .dt-section,.dt-collapse{border-radius:20px;}
    .dt-section{padding:12px;}
    .dt-collapse > summary{font-size:16px;padding:12px;}
    .dt-collapse-body{padding:0 12px 12px;}
    .dt-section-head h3{font-size:18px;}
    .dt-section-head p{font-size:12px;}
    .dt-grid{grid-template-columns:1fr;}
    .dt-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
    .dt-actions .btn{width:100%;padding-inline:8px;font-size:13px;white-space:normal;}
    .dt-actions.two-buttons{grid-template-columns:1fr 1fr;}
    .dt-actions.add-selected-line{grid-template-columns:1fr;}
    .dt-case-row{grid-template-columns:minmax(0,1fr);max-width:100%;}
    .dt-case-row > *{min-width:0;max-width:100%;}
    .dt-case-row input[type="checkbox"]{justify-self:start;}
    .dt-mini-btn,.dt-status-pill{justify-self:start;}
    .dt-status-actions{grid-template-columns:1fr 1fr;}
    .dt-report-grid{grid-template-columns:1fr 1fr;}
    .dt-list-top{align-items:stretch;flex-direction:column;}
}
@media(max-width:430px){
    .dt-report-grid{grid-template-columns:1fr 1fr;}
    .dt-two-col-actions{grid-template-columns:1fr;}
    .dt-subtab-btn{font-size:11px;}
}


/* 09A) Distribution & delivery refinements */
body.distribution-mode .total-cases-badge{
    min-height:28px !important;
    max-width:100% !important;
}
body.distribution-mode #totalCasesBadgeText{
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
}
.dt-previous-section,
.dt-create-section{
    overflow:hidden;
}
.dt-new-distribution-line{
    display:grid;
    grid-template-columns:1fr;
    margin-top:0;
}
.dt-save-wide-wrap{
    margin-top:12px;
}
.dt-save-wide{
    width:100%;
    min-height:58px !important;
    border-radius:19px !important;
    font-size:18px !important;
    letter-spacing:.5px;
}
.compact-head-line{
    margin-bottom:10px;
}
.btn-warning-soft,
.dt-status-actions .dt-status-postponed{
    background:#fef3c7 !important;
    color:#92400e !important;
    border-color:#fde68a !important;
}
.dt-status-actions{
    grid-template-columns:repeat(3,minmax(0,1fr));
}
.dt-status-actions button{
    min-height:42px;
}
.dt-status-actions .dt-status-received{
    background:#dcfce7;
    color:#166534;
    border-color:#bbf7d0;
}
.dt-status-actions .dt-status-not-received{
    background:#fee2e2;
    color:#991b1b;
    border-color:#fecaca;
}
.dt-status-actions .dt-status-postponed{
    background:#fef3c7;
    color:#92400e;
    border-color:#fde68a;
}
.dt-status-pill.postponed{
    background:#fef3c7 !important;
    color:#92400e !important;
    border-color:#fde68a !important;
}
.dt-status-pill.absent{
    background:#fee2e2 !important;
    color:#991b1b !important;
    border-color:#fecaca !important;
}
.dt-list-item.status-received{
    background:linear-gradient(135deg,rgba(220,252,231,.72),#fff) !important;
    border-color:#bbf7d0 !important;
    border-right-color:#16a34a !important;
}
.dt-list-item.status-not-received,
.dt-list-item.status-absent{
    background:linear-gradient(135deg,rgba(254,226,226,.72),#fff) !important;
    border-color:#fecaca !important;
    border-right-color:#dc2626 !important;
}
.dt-list-item.status-postponed{
    background:linear-gradient(135deg,rgba(254,243,199,.72),#fff) !important;
    border-color:#fde68a !important;
    border-right-color:#d97706 !important;
}
.dt-list-number{
    min-width:34px;
    height:34px;
    border-radius:13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#eff6ff;
    color:#1d4ed8;
    border:1px solid #bfdbfe;
    font-size:13px;
    font-weight:900;
    flex-shrink:0;
}
.dt-list-top.with-number{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:flex-start;
}
.dt-quick-note{
    margin-top:9px;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:8px;
    align-items:center;
}
.dt-quick-note label{
    color:#334155;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
}
.dt-quick-note input{
    min-width:0;
    width:100%;
    border:1px solid var(--border);
    border-radius:12px;
    padding:9px 10px;
    background:#fff;
    font-family:inherit;
    font-size:13px;
}
#dtPrintFieldsModal .modal-box{
    width:min(560px,95%);
}
#dtPrintFieldsModal .dt-field-grid{
    max-height:58vh;
    overflow:auto;
    padding:2px;
}
@media(max-width:768px){
    .dt-status-actions{grid-template-columns:1fr 1fr 1fr;}
    .dt-status-actions button{font-size:11px;padding:8px 4px;white-space:normal;}
    .dt-list-top.with-number{grid-template-columns:auto minmax(0,1fr);}
    .dt-list-top.with-number .dt-status-pill{grid-column:2;justify-self:start;margin-top:4px;}
    .dt-quick-note{grid-template-columns:1fr;}
    .dt-save-wide{font-size:17px !important;}
}
@media(max-width:430px){
    .dt-status-actions{grid-template-columns:1fr;}
}


/* 09B) Distribution manage collapsible polish */
.dt-main-collapse{
    padding:0 !important;
}
.dt-main-collapse > summary{
    list-style:none;
    cursor:pointer;
    padding:13px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    color:var(--primary);
    font-weight:900;
    font-size:19px;
    background:#fff;
}
.dt-main-collapse > summary::-webkit-details-marker{display:none;}
.dt-main-collapse > summary::after{
    content:"فتح";
    flex-shrink:0;
    color:#1d4ed8;
    background:#eff6ff;
    border:1px solid #bfdbfe;
    border-radius:999px;
    padding:4px 10px;
    font-size:12px;
    font-weight:900;
    order:3;
}
.dt-main-collapse[open] > summary::after{content:"إخفاء";}
.dt-main-collapse > summary > span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.dt-main-collapse > summary > small{
    color:var(--muted);
    font-size:12px;
    font-weight:800;
    margin-inline-start:auto;
}
.dt-main-collapse-body{
    padding:0 14px 14px;
    border-top:1px solid #eef2f7;
}
.dt-side-reset-btn{
    order:2;
    border:1px solid #fed7aa;
    background:#fff7ed;
    color:#c2410c;
    border-radius:999px;
    padding:6px 10px;
    font-family:inherit;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
    white-space:nowrap;
    flex-shrink:0;
}
.dt-side-reset-btn:hover{
    background:#ffedd5;
}
@media(max-width:768px){
    .dt-main-collapse > summary{
        padding:12px;
        font-size:16px;
        flex-wrap:wrap;
    }
    .dt-main-collapse > summary > small{
        width:100%;
        order:4;
        margin-inline-start:0;
        font-size:11px;
    }
    .dt-main-collapse-body{
        padding:0 12px 12px;
    }
    .dt-side-reset-btn{
        font-size:11px;
        padding:5px 8px;
        max-width:190px;
        overflow:hidden;
        text-overflow:ellipsis;
    }
}


/* 09C) Soft loading + distribution section color polish */
.soft-loading-bar{
    position:fixed;
    top:max(8px, env(safe-area-inset-top));
    left:50%;
    transform:translateX(-50%) translateY(-12px);
    z-index:220000;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-width:min(330px,92vw);
    max-width:92vw;
    padding:10px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(37,99,235,.18);
    box-shadow:0 14px 34px rgba(15,23,42,.14);
    color:#0f172a;
    font-weight:900;
    font-size:13px;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
.soft-loading-bar.open{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
}
.soft-loading-spinner{
    width:18px;
    height:18px;
    border-radius:50%;
    border:3px solid rgba(15,118,110,.18);
    border-top-color:var(--primary);
    animation:spin .75s linear infinite;
    flex-shrink:0;
}
.dt-previous-section{
    background:linear-gradient(135deg,#eaf3ff,#f8fbff) !important;
    border-color:#bfdbfe !important;
    box-shadow:0 14px 32px rgba(37,99,235,.085) !important;
}
.dt-previous-section > summary{
    background:linear-gradient(135deg,#dbeafe,#eff6ff) !important;
    border-bottom:1px solid rgba(191,219,254,.75);
}
.dt-previous-section .dt-main-collapse-body{
    background:linear-gradient(180deg,rgba(239,246,255,.78),rgba(255,255,255,.84));
}
.dt-previous-section .dt-report-card,
.dt-previous-section .dt-card,
.dt-previous-section .dt-list-item,
.dt-previous-section .dt-empty{
    background:rgba(255,255,255,.86) !important;
}
.dt-create-section{
    background:linear-gradient(135deg,#e8fff7,#f6fffb) !important;
    border-color:#a7f3d0 !important;
    box-shadow:0 14px 32px rgba(15,118,110,.085) !important;
}
.dt-create-section > summary{
    background:linear-gradient(135deg,#d1fae5,#ecfdf5) !important;
    border-bottom:1px solid rgba(167,243,208,.85);
}
.dt-create-section .dt-main-collapse-body{
    background:linear-gradient(180deg,rgba(236,253,245,.76),rgba(255,255,255,.88));
}
.dt-create-section .dt-collapse,
.dt-create-section .dt-card,
.dt-create-section .dt-list-item,
.dt-create-section .dt-case-row,
.dt-create-section .dt-empty{
    background:rgba(255,255,255,.90) !important;
}
.dt-create-head-pro{
    align-items:flex-start;
}
.dt-inline-reset-btn{
    margin-top:8px;
    border:1px solid #fed7aa;
    background:#fff7ed;
    color:#c2410c;
    border-radius:999px;
    padding:7px 12px;
    font-family:inherit;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
    white-space:normal;
    line-height:1.35;
    box-shadow:0 6px 14px rgba(194,65,12,.08);
}
.dt-inline-reset-btn:hover{
    background:#ffedd5;
    transform:translateY(-1px);
}
.dt-main-collapse > summary .dt-side-reset-btn{
    display:none !important;
}
@media(max-width:768px){
    .soft-loading-bar{
        top:max(7px, env(safe-area-inset-top));
        min-width:min(300px,88vw);
        font-size:12px;
        padding:9px 12px;
    }
    .dt-inline-reset-btn{
        max-width:100%;
        font-size:11px;
        padding:6px 10px;
    }
    .dt-previous-section > summary,
    .dt-create-section > summary{
        background-size:100% 100% !important;
    }
}



/* END css/features/distribution/delivery-base.css */


/* BEGIN css/theme/dark-mode-base.css */
/* ============================================================
   10) DARK MODE — base rules + compact top/user controls
   ============================================================ */
.sidebar-dark-toggle{
    position:absolute;
    top:10px;
    left:52px;
    width:34px;
    height:34px;
    border:none;
    border-radius:12px;
    background:rgba(255,255,255,.18);
    color:#fff;
    font-size:17px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s;
}
.sidebar-dark-toggle:hover{background:rgba(255,255,255,.32);transform:translateY(-1px);}
.app-shell-top{
    padding:8px 12px !important;
    min-height:58px !important;
    border-radius:18px !important;
}
.app-shell-top .menu-trigger{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    border-radius:14px !important;
    font-size:20px !important;
}
.app-shell-top .top-identity strong{font-size:15px !important;line-height:1.2 !important;}
.app-shell-top .top-identity span{font-size:11px !important;margin-top:1px !important;}
.manage-clear-btn{
    min-height:44px !important;
    height:44px !important;
    border-radius:15px !important;
    font-size:14px !important;
    padding:10px 14px !important;
    align-self:end;
}
.manage-export-actions{
    display:flex !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
}
.manage-export-actions .export-mini-btn{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:92px !important;
    min-height:40px !important;
    padding:9px 13px !important;
    font-size:13px !important;
    border-radius:12px !important;
}
@media(max-width:520px){
    .manage-export-actions{justify-content:stretch !important;}
    .manage-export-actions .export-mini-btn{flex:1 1 0 !important;min-width:0 !important;}
}
body.dark-mode{
    --card:#172033;
    --border:#2b3b55;
    --text:#eaf2ff;
    --muted:#a9b6ca;
    --light:#111827;
    --soft-green:#0e332f;
    --soft-blue:#10213b;
    --gradient-bg:linear-gradient(160deg,#0b1220 0%,#0f1b2d 55%,#0b2b28 100%);
    background:
        radial-gradient(circle at 10% 5%, rgba(20,184,166,.12), transparent 28%),
        radial-gradient(circle at 90% 15%, rgba(59,130,246,.10), transparent 26%),
        linear-gradient(135deg,#08111f,#0f172a 58%,#0b2f2a) !important;
    color:var(--text);
}
body.dark-mode .app-shell-top,
body.dark-mode .card,
body.dark-mode .home-hero-card,
body.dark-mode .home-activity-card,
body.dark-mode .home-stat-card,
body.dark-mode .home-action-tile,
body.dark-mode .result-card,
body.dark-mode .add-section-card,
body.dark-mode .extract-section,
body.dark-mode .extract-list-box,
body.dark-mode .extract-fields-box,
body.dark-mode .extract-template-box,
body.dark-mode .extract-output-box,
body.dark-mode .settings-hero,
body.dark-mode .settings-sidebar,
body.dark-mode .settings-section-head,
body.dark-mode .empty-settings-card,
body.dark-mode .password-setting-card,
body.dark-mode .logs-filter-card,
body.dark-mode .log-card,
body.dark-mode .region-card,
body.dark-mode .user-card-compact,
body.dark-mode .dt-section,
body.dark-mode .dt-card,
body.dark-mode .dt-collapse,
body.dark-mode .dt-list-item,
body.dark-mode .dt-case-row,
body.dark-mode .dt-saved-card,
body.dark-mode .dt-report-card,
body.dark-mode .modal-box{
    background:#111827 !important;
    color:var(--text) !important;
    border-color:#26364f !important;
    box-shadow:0 14px 34px rgba(0,0,0,.28) !important;
}
body.dark-mode .side-panel{background:linear-gradient(180deg,#111827,#0b1220) !important;color:var(--text) !important;}
body.dark-mode .side-item,
body.dark-mode .side-parent,
body.dark-mode .side-submenu button,
body.dark-mode .settings-nav,
body.dark-mode .quick-nav-bar,
body.dark-mode .quick-nav-btn,
body.dark-mode .manage-mode-btn,
body.dark-mode .extract-main-tab,
body.dark-mode .extract-mode-btn,
body.dark-mode .dt-subtab-btn,
body.dark-mode .dt-collapse > summary,
body.dark-mode .extract-collapse-head{
    background:#162238 !important;
    color:var(--text) !important;
    border-color:#2b3b55 !important;
}
body.dark-mode .side-item:hover,
body.dark-mode .side-parent:hover,
body.dark-mode .quick-nav-btn:hover,
body.dark-mode .manage-mode-btn:hover,
body.dark-mode .extract-main-tab:hover,
body.dark-mode .dt-subtab-btn:hover{background:#1b2a44 !important;}
body.dark-mode .side-item.active,
body.dark-mode .settings-nav.active,
body.dark-mode .quick-nav-btn.active,
body.dark-mode .manage-mode-btn.active,
body.dark-mode .extract-main-tab.active,
body.dark-mode .extract-mode-btn.active,
body.dark-mode .dt-subtab-btn.active{
    background:linear-gradient(135deg,var(--secondary),var(--primary)) !important;
    color:#fff !important;
    border-color:transparent !important;
}
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .field input,
body.dark-mode .field select,
body.dark-mode .field textarea,
body.dark-mode .dt-quick-note input{
    background:#0f172a !important;
    color:var(--text) !important;
    border-color:#334155 !important;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder{color:#7f8da3 !important;}
body.dark-mode .small,
body.dark-mode .modal-note,
body.dark-mode .home-hero-title p,
body.dark-mode .dt-section-head p,
body.dark-mode .extract-section-head p,
body.dark-mode .case-list-main span,
body.dark-mode .dt-case-meta,
body.dark-mode .dt-list-title span,
body.dark-mode .home-activity-main span{color:var(--muted) !important;}
body.dark-mode .badge,
body.dark-mode .soft-badge,
body.dark-mode .case-pro-pill,
body.dark-mode .extract-selection-summary,
body.dark-mode .home-version-footer,
body.dark-mode .dt-version-footer,
body.dark-mode .sidebar-version{
    background:#172a42 !important;
    color:#dbeafe !important;
    border-color:#2b3b55 !important;
}
body.dark-mode .dt-previous-section,
body.dark-mode .dt-create-section,
body.dark-mode .polish-images-card,
body.dark-mode .images-section-card,
body.dark-mode .img-upload-zone,
body.dark-mode .user-form-box,
body.dark-mode .permission-box,
body.dark-mode .password-note-box,
body.dark-mode .extract-note,
body.dark-mode .case-pro-details,
body.dark-mode .case-list-details,
body.dark-mode .log-details{
    background:#111c2e !important;
    color:var(--text) !important;
    border-color:#2b3b55 !important;
}
body.dark-mode .dt-previous-section > summary,
body.dark-mode .dt-create-section > summary{
    background:#172a42 !important;
}
body.dark-mode .home-action-tile .tile-icon,
body.dark-mode .home-stat-icon.green,
body.dark-mode .home-stat-icon.blue,
body.dark-mode .home-stat-icon.orange,
body.dark-mode .home-stat-icon.red,
body.dark-mode .add-section-icon{
    background:#172a42 !important;
    color:#5eead4 !important;
}
body.dark-mode .soft-loading-bar{background:rgba(17,24,39,.96) !important;color:var(--text) !important;border-color:#2b3b55 !important;}
body.dark-mode .modal-overlay{background:rgba(0,0,0,.68) !important;}
body.dark-mode .img-preview-wrap img,
body.dark-mode .case-img-thumb{border-color:#334155 !important;}
body.dark-mode .sidebar-dark-toggle{background:#ecfdf5;color:#0f766e;}
body.dark-mode .btn-light{background:#172a42 !important;color:#dbeafe !important;border-color:#334155 !important;}

/* 10A) DARK MODE — color completion layer */
body.dark-mode .toast{
    background:#111827 !important;
    color:#eaf2ff !important;
    border-color:#2b3b55 !important;
    box-shadow:0 16px 40px rgba(0,0,0,.42) !important;
}
body.dark-mode .toast.success{border-right-color:#22c55e !important;}
body.dark-mode .toast.error{border-right-color:#ef4444 !important;}
body.dark-mode .toast.warning{border-right-color:#f59e0b !important;}
body.dark-mode .toast.info{border-right-color:#38bdf8 !important;}

body.dark-mode .case-list-item,
body.dark-mode .case-card-compact-pro,
body.dark-mode .case-pro-note,
body.dark-mode .case-images-box,
body.dark-mode .extract-case-row,
body.dark-mode .extract-field-item,
body.dark-mode .extract-pdf-options,
body.dark-mode .check-item,
body.dark-mode .stat-card,
body.dark-mode .region-stat-row,
body.dark-mode .incomplete-filter-card,
body.dark-mode .img-preview-wrap,
body.dark-mode .dt-print-preview,
body.dark-mode .dt-field-item,
body.dark-mode .dt-saved-card,
body.dark-mode .dt-list.auto-height,
body.dark-mode .home-empty-note,
body.dark-mode #globalLoader > div{
    background:#111827 !important;
    color:var(--text) !important;
    border-color:#26364f !important;
    box-shadow:0 14px 34px rgba(0,0,0,.26) !important;
}

body.dark-mode .case-list-details,
body.dark-mode .case-pro-details,
body.dark-mode .extract-collapse-body,
body.dark-mode .permissions-details,
body.dark-mode .crop-controls,
body.dark-mode .logs-filter-card,
body.dark-mode .log-details{
    background:#0f1b2d !important;
    color:var(--text) !important;
    border-color:#2b3b55 !important;
}

body.dark-mode .case-list-main strong,
body.dark-mode .case-pro-title h3,
body.dark-mode .case-pro-note,
body.dark-mode .extract-case-name,
body.dark-mode .dt-case-name,
body.dark-mode .dt-list-title strong,
body.dark-mode .home-activity-main strong,
body.dark-mode .region-stat-row span,
body.dark-mode .stat-card strong,
body.dark-mode .field label,
body.dark-mode .modal-title,
body.dark-mode .settings-section-head h3,
body.dark-mode .extract-section-head h3,
body.dark-mode .dt-section-head h3,
body.dark-mode .add-section-head h3,
body.dark-mode .search-simple-card .simple-page-title,
body.dark-mode .home-activity-head h3,
body.dark-mode .soft-section-title{
    color:var(--text) !important;
}

body.dark-mode .case-list-main span,
body.dark-mode .case-pro-pill,
body.dark-mode .case-pro-details,
body.dark-mode .extract-case-meta,
body.dark-mode .dt-details,
body.dark-mode .dt-details summary,
body.dark-mode .home-empty-note,
body.dark-mode .cards-print-hint,
body.dark-mode .settings-mini-note,
body.dark-mode .muted-note,
body.dark-mode .img-upload-hint{
    color:var(--muted) !important;
}

body.dark-mode .case-list-open,
body.dark-mode .case-details-toggle,
body.dark-mode .mini-info,
body.dark-mode .dt-mini-btn,
body.dark-mode .extract-collapse-icon,
body.dark-mode .upload-source-btn,
body.dark-mode .password-toggle-btn{
    background:#172a42 !important;
    color:#dbeafe !important;
    border-color:#334155 !important;
}
body.dark-mode .upload-source-btn.camera,
body.dark-mode .btn-primary{
    color:#fff !important;
}
body.dark-mode .edit-btn,
body.dark-mode .mini-edit{
    background:#2b2116 !important;
    color:#fdba74 !important;
    border-color:#7c2d12 !important;
}
body.dark-mode .delete-btn,
body.dark-mode .mini-delete{
    background:#2b1418 !important;
    color:#fca5a5 !important;
    border-color:#7f1d1d !important;
}

body.dark-mode .data-status-badge.complete,
body.dark-mode .status-on,
body.dark-mode .dt-status-pill.received,
body.dark-mode .perm-pill.on{
    background:rgba(34,197,94,.18) !important;
    color:#86efac !important;
    border-color:rgba(34,197,94,.35) !important;
}
body.dark-mode .data-status-badge.incomplete,
body.dark-mode .incomplete-summary-badge,
body.dark-mode .status-off,
body.dark-mode .dt-status-pill.not-received,
body.dark-mode .dt-status-pill.absent,
body.dark-mode .perm-pill.off{
    background:rgba(239,68,68,.16) !important;
    color:#fca5a5 !important;
    border-color:rgba(239,68,68,.35) !important;
}
body.dark-mode .dt-status-pill.postponed,
body.dark-mode .btn-warning-soft,
body.dark-mode .dt-status-actions .dt-status-postponed{
    background:rgba(245,158,11,.18) !important;
    color:#fcd34d !important;
    border-color:rgba(245,158,11,.35) !important;
}
body.dark-mode .soft-badge,
body.dark-mode .perm-pill,
body.dark-mode .case-pro-pill.primary,
body.dark-mode .dt-summary-badge,
body.dark-mode .log-action-badge{
    background:#10213b !important;
    color:#93c5fd !important;
    border-color:#334155 !important;
}

body.dark-mode .dt-status-actions button{
    background:#172a42 !important;
    color:#dbeafe !important;
    border-color:#334155 !important;
}
body.dark-mode .dt-status-actions .dt-status-received{
    background:rgba(34,197,94,.18) !important;
    color:#86efac !important;
    border-color:rgba(34,197,94,.35) !important;
}
body.dark-mode .dt-status-actions .dt-status-not-received{
    background:rgba(239,68,68,.16) !important;
    color:#fca5a5 !important;
    border-color:rgba(239,68,68,.35) !important;
}

body.dark-mode .dt-list-item.status-received{
    background:linear-gradient(135deg,rgba(34,197,94,.16),#111827) !important;
    border-color:rgba(34,197,94,.32) !important;
    border-right-color:#22c55e !important;
}
body.dark-mode .dt-list-item.status-not-received,
body.dark-mode .dt-list-item.status-absent{
    background:linear-gradient(135deg,rgba(239,68,68,.15),#111827) !important;
    border-color:rgba(239,68,68,.32) !important;
    border-right-color:#ef4444 !important;
}
body.dark-mode .dt-list-item.status-postponed{
    background:linear-gradient(135deg,rgba(245,158,11,.16),#111827) !important;
    border-color:rgba(245,158,11,.32) !important;
    border-right-color:#f59e0b !important;
}

body.dark-mode .dt-print-preview th{
    background:#0f766e !important;
    color:#fff !important;
}
body.dark-mode .dt-print-preview td,
body.dark-mode .dt-print-preview th{
    border-color:#334155 !important;
}
body.dark-mode .home-activity-row{
    border-bottom-color:#26364f !important;
}
body.dark-mode .locked-option-text,
body.dark-mode .password-note-box,
body.dark-mode .extract-note{
    background:#2b2116 !important;
    color:#fdba74 !important;
    border-color:#7c2d12 !important;
}
body.dark-mode .login-card{
    background:#111827 !important;
    color:var(--text) !important;
    border-color:#26364f !important;
}
body.dark-mode .login-auth-title,
body.dark-mode .login-card h1{
    color:var(--text) !important;
}
body.dark-mode .login-card p,
body.dark-mode .login-auth-appname,
body.dark-mode .login-version-badge{
    color:var(--muted) !important;
}
body.dark-mode .login-error{
    background:#2b1418 !important;
    color:#fca5a5 !important;
    border-color:#7f1d1d !important;
}


/* 10B) DARK MODE — strict final fallback layer */
body.dark-mode .result-card,
body.dark-mode .case-card-compact-pro,
body.dark-mode .case-list-item,
body.dark-mode .case-list-details,
body.dark-mode .case-pro-details,
body.dark-mode .case-pro-note,
body.dark-mode .case-images-box,
body.dark-mode .case-list-view,
body.dark-mode .result-grid > div,
body.dark-mode #searchResults > .result-card,
body.dark-mode #manageResults > .result-card,
body.dark-mode #missingDataResults > .result-card,
body.dark-mode #usersResults > .result-card,
body.dark-mode #regionsResults > .result-card,
body.dark-mode #msg > .result-card{
    background:#111827 !important;
    color:#eaf2ff !important;
    border-color:#26364f !important;
    box-shadow:0 14px 34px rgba(0,0,0,.30) !important;
}
body.dark-mode .case-list-details,
body.dark-mode .case-pro-details,
body.dark-mode .case-pro-note,
body.dark-mode .case-images-box,
body.dark-mode .result-grid > div{
    background:#0f1b2d !important;
    color:#eaf2ff !important;
}
body.dark-mode .result-card strong,
body.dark-mode .result-card h3,
body.dark-mode .case-list-main strong,
body.dark-mode .case-pro-title h3,
body.dark-mode .case-pro-note strong,
body.dark-mode .result-grid strong{
    color:#f8fbff !important;
}
body.dark-mode .case-list-main span,
body.dark-mode .result-card .small,
body.dark-mode .case-pro-note,
body.dark-mode .result-grid,
body.dark-mode .result-grid div{
    color:#cbd5e1 !important;
}
body.dark-mode .badge,
body.dark-mode .case-pro-pill,
body.dark-mode .case-pro-pill:not(.warning),
body.dark-mode .case-pro-pill.primary,
body.dark-mode .case-list-open,
body.dark-mode .case-details-toggle{
    background:#172a42 !important;
    color:#dbeafe !important;
    border-color:#334155 !important;
}
body.dark-mode .case-pro-pill.warning{
    background:rgba(245,158,11,.18) !important;
    color:#fcd34d !important;
    border-color:rgba(245,158,11,.38) !important;
}
body.dark-mode .toast,
body.dark-mode .toast-container .toast{
    background:#111827 !important;
    color:#eaf2ff !important;
    border-color:#26364f !important;
    box-shadow:0 16px 40px rgba(0,0,0,.45) !important;
}
body.dark-mode .toast.success{border-right-color:#22c55e !important;}
body.dark-mode .toast.error{border-right-color:#ef4444 !important;}
body.dark-mode .toast.warning{border-right-color:#f59e0b !important;}
body.dark-mode .toast.info{border-right-color:#38bdf8 !important;}
body.dark-mode .home-empty-note,
body.dark-mode .empty-settings-card,
body.dark-mode .muted-note{
    background:#111c2e !important;
    color:#cbd5e1 !important;
    border-color:#2b3b55 !important;
}
body.dark-mode .locked-option-text,
body.dark-mode .password-note-box,
body.dark-mode .extract-note{
    background:#2b2116 !important;
    color:#fdba74 !important;
    border-color:#7c2d12 !important;
}
body.dark-mode .modal-box,
body.dark-mode #globalLoader > div,
body.dark-mode .soft-loading-bar{
    background:#111827 !important;
    color:#eaf2ff !important;
    border-color:#26364f !important;
}
body.dark-mode table,
body.dark-mode .dt-print-preview,
body.dark-mode .dt-print-preview td,
body.dark-mode .dt-print-preview th{
    background:#111827 !important;
    color:#eaf2ff !important;
    border-color:#334155 !important;
}
body.dark-mode .dt-print-preview th{
    background:#0f766e !important;
    color:#fff !important;
}
body.dark-mode .side-parent-split .side-toggle{
    color:#eaf2ff !important;
}



/* END css/theme/dark-mode-base.css */


/* BEGIN css/features/notifications/notification-center.css */
/* ============================================================
   11) NOTIFICATION CENTER CSS
   ============================================================ */
.notification-bar-host{
    position:fixed;
    top:76px;
    left:50%;
    transform:translateX(-50%);
    z-index:210000;
    width:min(720px,94vw);
    display:grid;
    gap:8px;
    pointer-events:none;
}
.notification-bar{
    pointer-events:auto;
    background:#ffffff;
    border:1px solid var(--border);
    border-right:6px solid var(--secondary);
    color:var(--text);
    border-radius:18px;
    padding:12px 14px;
    box-shadow:0 16px 40px rgba(15,23,42,.14);
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    align-items:start;
    animation:toastIn .22s ease;
}
.notification-bar strong{display:block;color:var(--secondary);font-size:15px;margin-bottom:3px;line-height:1.5;}
.notification-bar span{display:block;color:var(--text);font-size:13px;line-height:1.8;}
.notification-bar button{
    border:none;
    background:#f1f5f9;
    color:#334155;
    width:34px;
    height:34px;
    border-radius:12px;
    cursor:pointer;
    font-weight:900;
}
.notification-bar.success{border-right-color:var(--success);}
.notification-bar.warning{border-right-color:var(--warning);}
.notification-bar.danger{border-right-color:var(--danger);}
.notification-modal-box .notification-modal-level{
    display:inline-flex;
    padding:6px 11px;
    border-radius:999px;
    background:#eff6ff;
    color:var(--secondary);
    border:1px solid #bfdbfe;
    font-size:12px;
    font-weight:900;
    margin-bottom:10px;
}
.notification-center-page{display:grid;gap:14px;}
.notification-hero{
    background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(15,118,110,.10));
    border:1px solid rgba(219,227,239,.95);
    border-radius:24px;
    padding:18px;
    box-shadow:0 12px 30px rgba(15,23,42,.06);
}
.notification-hero h2{margin:0 0 6px;color:var(--primary);font-size:24px;line-height:1.4;}
.notification-hero p{margin:0;color:var(--muted);font-size:14px;line-height:1.8;}
.notification-collapse{
    background:#fff;
    border:1px solid rgba(219,227,239,.95);
    border-radius:24px;
    box-shadow:0 12px 30px rgba(15,23,42,.06);
    overflow:hidden;
}
.notification-collapse > summary{
    list-style:none;
    cursor:pointer;
    padding:16px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    color:var(--primary);
    font-weight:900;
    font-size:19px;
}
.notification-collapse > summary::-webkit-details-marker{display:none;}
.notification-collapse > summary::after{
    content:"فتح";
    flex-shrink:0;
    color:#1d4ed8;
    background:#eff6ff;
    border:1px solid #bfdbfe;
    border-radius:999px;
    padding:4px 10px;
    font-size:12px;
    font-weight:900;
}
.notification-collapse[open] > summary::after{content:"إخفاء";}
.notification-collapse-body{border-top:1px solid #eef2f7;padding:16px 18px 18px;}
.notification-form-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:12px;
}
.notification-list{display:grid;gap:10px;margin-top:12px;}
.notification-card{
    background:#fff;
    border:1px solid var(--border);
    border-right:6px solid var(--secondary);
    border-radius:20px;
    padding:14px;
    box-shadow:0 8px 22px rgba(15,23,42,.055);
}
.notification-card.disabled{opacity:.72;filter:grayscale(.25);}
.notification-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.notification-card h4{margin:0 0 5px;color:var(--secondary);font-size:17px;line-height:1.5;}
.notification-card p{margin:0;color:var(--text);font-size:13px;line-height:1.8;}
.notification-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px;}
.notification-meta .badge{font-size:12px;font-weight:900;background:#f8fafc;border:1px solid var(--border);}
.notification-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px;}
.notification-actions .mini-btn{min-height:38px;}
.notification-status-on{background:#dcfce7!important;color:#166534!important;border:1px solid #bbf7d0!important;}
.notification-status-off{background:#fee2e2!important;color:#991b1b!important;border:1px solid #fecaca!important;}
.notification-preview-area{
    border:1px dashed var(--border);
    background:#fbfdff;
    border-radius:18px;
    padding:13px;
    margin-top:12px;
    color:var(--muted);
    line-height:1.8;
    font-size:13px;
}
.toast.info{border-right-color:var(--secondary);}
.toast.danger{border-right-color:var(--danger);}

body.dark-mode .notification-hero,
body.dark-mode .notification-collapse,
body.dark-mode .notification-card,
body.dark-mode .notification-bar,
body.dark-mode .notification-preview-area{
    background:#172033 !important;
    border-color:#334155 !important;
    color:#e5e7eb !important;
    box-shadow:0 14px 34px rgba(0,0,0,.24) !important;
}
body.dark-mode .notification-hero{background:linear-gradient(135deg,#172033,#111827) !important;}
body.dark-mode .notification-collapse > summary,
body.dark-mode .notification-hero h2,
body.dark-mode .notification-card h4,
body.dark-mode .notification-bar strong{color:#7dd3fc !important;}
body.dark-mode .notification-hero p,
body.dark-mode .notification-card p,
body.dark-mode .notification-bar span,
body.dark-mode .notification-preview-area{color:#cbd5e1 !important;}
body.dark-mode .notification-collapse-body{border-top-color:#334155 !important;}
body.dark-mode .notification-meta .badge,
body.dark-mode .notification-collapse > summary::after{
    background:#0f172a !important;
    color:#bfdbfe !important;
    border-color:#334155 !important;
}
body.dark-mode .notification-bar button{background:#0f172a !important;color:#e5e7eb !important;}
body.dark-mode .notification-modal-box .notification-modal-level{background:#0f172a;color:#bfdbfe;border-color:#334155;}
@media(max-width:768px){
    .notification-bar-host{top:66px;width:94vw;}
    .notification-hero{padding:15px;}
    .notification-collapse > summary{font-size:17px;padding:14px;}
    .notification-collapse-body{padding:14px;}
    .notification-card-head{display:block;}
    .notification-actions .mini-btn{flex:1;min-width:120px;}
}


/* END css/features/notifications/notification-center.css */


/* Background operations and legacy safety fixes */

/* BEGIN css/features/background-operations-sync.css */
/* ============================================================
   12) BACKGROUND OPERATIONS / SYNC CENTER CSS
   ============================================================ */

.v4-svg-icon{width:1.15em;height:1.15em;display:inline-flex;vertical-align:-.18em;flex-shrink:0;align-items:center;justify-content:center}
.v4-svg-icon svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none;stroke-width:2.35;stroke-linecap:round;stroke-linejoin:round}
.v4-icon-circle{font-family:Arial,Tahoma,sans-serif!important;line-height:1!important}
.home-action-tile .tile-icon,
.home-stat-icon,
.add-section-icon,
.login-logo,
.dt-home-icon,
.menu-trigger,
.side-main-link,
.side-item,
.settings-nav,
.dt-subtab-btn,
.quick-nav-btn,
.btn{
    font-family:"Cairo","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","Apple Color Emoji",sans-serif;
}
.v4-sync-top-btn{
    border:1px solid var(--border);
    background:#fff;
    color:var(--text);
    min-width:46px;
    height:46px;
    border-radius:16px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    position:relative;
    box-shadow:0 8px 18px rgba(15,23,42,.05);
    transition:.2s;
    flex-shrink:0;
}
.v4-sync-top-btn:hover{transform:translateY(-1px);background:#eff6ff;color:#1d4ed8}
.v4-sync-top-btn .v4-sync-badge{
    position:absolute;
    top:-5px;
    left:-5px;
    min-width:21px;
    height:21px;
    border-radius:999px;
    display:none;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:900;
    background:var(--sync-idle);
    color:#fff;
    border:2px solid #fff;
}
.v4-sync-top-btn.has-items .v4-sync-badge{display:flex}
.v4-sync-top-btn.is-processing{color:var(--sync-active);border-color:#bfdbfe;background:#eff6ff}
.v4-sync-top-btn.is-processing .v4-svg-icon{animation:spin .9s linear infinite}
.v4-sync-top-btn.has-failed{color:var(--sync-failed);border-color:#fecaca;background:#fef2f2}
.v4-sync-top-btn.has-pending:not(.is-processing):not(.has-failed){color:var(--sync-pending);border-color:#fde68a;background:#fffbeb}
.v4-sync-alert-bar{
    position:fixed;
    top:max(62px, calc(env(safe-area-inset-top) + 62px));
    left:50%;
    transform:translateX(-50%) translateY(-10px);
    z-index:210000;
    width:min(560px,94vw);
    border-radius:18px;
    background:rgba(255,255,255,.97);
    border:1px solid rgba(37,99,235,.2);
    box-shadow:0 16px 38px rgba(15,23,42,.14);
    padding:10px 13px;
    display:none;
    align-items:center;
    gap:10px;
    color:var(--text);
    font-weight:900;
    font-size:13px;
    backdrop-filter:blur(10px);
}
.v4-sync-alert-bar.open{display:flex;animation:fade .2s ease}
.v4-sync-alert-bar .v4-sync-alert-icon{color:var(--sync-active);display:flex;align-items:center}
.v4-sync-alert-bar.processing .v4-sync-alert-icon{animation:spin .9s linear infinite}
.v4-sync-alert-bar.failed{border-color:#fecaca;background:#fff7f7;color:#991b1b}
.v4-sync-alert-bar.failed .v4-sync-alert-icon{color:#dc2626;animation:none}
.v4-sync-alert-bar.done{border-color:#bbf7d0;background:#f0fdf4;color:#166534}
.v4-sync-alert-bar.done .v4-sync-alert-icon{color:#16a34a;animation:none}
.v4-sync-page{display:grid;gap:14px}
.v4-sync-hero{background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(15,118,110,.10));border:1px solid rgba(219,227,239,.95);border-radius:24px;padding:16px;box-shadow:0 10px 28px rgba(15,23,42,.06)}
.v4-sync-hero h2{margin:0 0 6px;color:var(--primary);font-size:23px}.v4-sync-hero p{margin:0;color:var(--muted);line-height:1.8;font-size:14px}
.v4-sync-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.v4-sync-stat{background:#fff;border:1px solid var(--border);border-radius:18px;padding:13px;box-shadow:0 8px 20px rgba(15,23,42,.04)}
.v4-sync-stat span{display:block;color:var(--muted);font-size:12px;font-weight:900}.v4-sync-stat strong{display:block;margin-top:4px;font-size:24px;color:var(--secondary)}
.v4-sync-actions{display:flex;gap:8px;flex-wrap:wrap}.v4-sync-actions .btn{min-height:44px;padding:10px 14px;border-radius:14px;font-size:14px}
.v4-sync-list{display:grid;gap:10px}
.v4-sync-item{background:#fff;border:1px solid var(--border);border-right:5px solid var(--sync-pending);border-radius:18px;padding:13px;box-shadow:0 8px 20px rgba(15,23,42,.045)}
.v4-sync-item.processing{border-right-color:var(--sync-active)}.v4-sync-item.done{border-right-color:var(--sync-done)}.v4-sync-item.failed{border-right-color:var(--sync-failed)}
.v4-sync-item-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.v4-sync-item-title{min-width:0}.v4-sync-item-title strong{display:block;color:var(--text);font-size:15px}.v4-sync-item-title span{display:block;color:var(--muted);font-size:12px;margin-top:3px;word-break:break-word}
.v4-sync-status-pill{border-radius:999px;padding:5px 9px;font-size:12px;font-weight:900;border:1px solid var(--border);white-space:nowrap;background:#f8fafc;color:#334155}
.v4-sync-status-pill.pending{background:#fffbeb;color:#92400e;border-color:#fde68a}.v4-sync-status-pill.processing{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}.v4-sync-status-pill.done{background:#dcfce7;color:#166534;border-color:#bbf7d0}.v4-sync-status-pill.failed{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.v4-sync-item-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.v4-sync-item-actions button{border:1px solid var(--border);background:#f8fafc;border-radius:12px;padding:8px 11px;cursor:pointer;font-weight:900;color:#334155;font-family:inherit}
.v4-sync-empty{background:#fff;border:1px dashed var(--border);border-radius:18px;padding:18px;text-align:center;color:var(--muted);font-weight:800}
.dt-print-preview{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.dt-print-preview table{min-width:720px;max-width:none}.dt-actions{max-width:100%}.dt-actions .btn{min-width:0}.dt-panel,.dt-section,.dt-card,.dt-print-preview{max-width:100%;overflow-wrap:anywhere}
@media(max-width:768px){
    .v4-sync-stats{grid-template-columns:repeat(2,1fr)}
    .v4-sync-alert-bar{top:max(58px, calc(env(safe-area-inset-top) + 58px));font-size:12px}
    .v4-sync-actions{display:grid;grid-template-columns:1fr 1fr}.v4-sync-actions .btn{width:100%}
    #dtPanelPrint .dt-actions{display:grid!important;grid-template-columns:1fr 1fr!important}#dtPanelPrint .dt-actions .btn{width:100%;white-space:normal;font-size:12px;padding:10px 8px}
}
@media(max-width:430px){.v4-sync-stats{grid-template-columns:1fr 1fr}.v4-sync-actions{grid-template-columns:1fr}#dtPanelPrint .dt-actions{grid-template-columns:1fr!important}.dt-print-preview table{min-width:650px}}
body.dark-mode .v4-sync-top-btn,
body.dark-mode .v4-sync-alert-bar,
body.dark-mode .v4-sync-stat,
body.dark-mode .v4-sync-item,
body.dark-mode .v4-sync-empty{background:#1e293b!important;color:#e5e7eb!important;border-color:#334155!important}
body.dark-mode .v4-sync-hero{background:linear-gradient(135deg,#172033,#12302f)!important;border-color:#334155!important}
body.dark-mode .v4-sync-hero h2,body.dark-mode .v4-sync-stat strong{color:#5eead4!important}
body.dark-mode .v4-sync-hero p,body.dark-mode .v4-sync-stat span,body.dark-mode .v4-sync-item-title span{color:#cbd5e1!important}
body.dark-mode .v4-sync-item-title strong{color:#f8fafc!important}



/* END css/features/background-operations-sync.css */


/* BEGIN css/overrides/final-safe-fix-v402.css */
/* ============================================================
   13) FINAL SAFE FIX LAYER — v402 compatibility
   ============================================================ */


html,body{max-width:100%;overflow-x:hidden!important;}
*{box-sizing:border-box;}
/* Keep operation alert and toasts below the fixed user card/header. */
.v4-sync-alert-bar{
    top:var(--v4-alert-top)!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    max-width:calc(100vw - 24px)!important;
    z-index:199500!important;
    pointer-events:auto;
}
.toast-container{
    top:var(--v4-toast-top)!important;
    left:12px!important;
    right:auto!important;
    max-width:min(390px,calc(100vw - 24px))!important;
    z-index:199450!important;
    pointer-events:none;
}
.toast-container .toast{pointer-events:auto;max-width:100%;}
.app-shell-top{z-index:200100!important;}
#v4SyncTopBtn{position:relative;z-index:200150!important;}
/* Safer mobile distribution/print layout */
#distribution,
#distribution *{max-width:100%;}
#dtPanelPrint,
#dtPrintPreview,
.dt-print-preview,
.delivery-print-preview,
.print-preview,
.report-preview{
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    -webkit-overflow-scrolling:touch!important;
}
#dtPrintPreview table,
.dt-print-preview table,
.delivery-print-preview table,
.report-preview table{
    min-width:680px!important;
    width:max-content!important;
    max-width:none!important;
    table-layout:auto!important;
}
#dtPrintPreview th,
#dtPrintPreview td,
.dt-print-preview th,
.dt-print-preview td{
    white-space:normal!important;
    word-break:break-word!important;
}
#dtPanelPrint .dt-actions,
#dtPanelPrint .export-actions,
#dtPanelPrint .print-actions{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    max-width:100%!important;
}
#dtPanelPrint .dt-actions .btn,
#dtPanelPrint .export-actions .btn,
#dtPanelPrint .print-actions .btn,
#dtPanelPrint button{
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
@media(max-width:640px){
    .v4-sync-alert-bar{font-size:12px!important;padding:9px 11px!important;}
    .toast-container{left:8px!important;right:8px!important;max-width:calc(100vw - 16px)!important;}
    #dtPanelPrint .dt-actions,
    #dtPanelPrint .export-actions,
    #dtPanelPrint .print-actions{
        grid-template-columns:1fr!important;
    }
    #dtPrintPreview table,
    .dt-print-preview table,
    .delivery-print-preview table,
    .report-preview table{min-width:640px!important;}
}
/* Windows emoji fallback: keep any remaining symbols visible where possible. */
.tile-icon,.side-item span:first-child,.menu-trigger,.mini-btn,.v4-svg-icon,.dt-tab-btn,.login-logo{
    font-family:"Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","Apple Color Emoji","Cairo",Tahoma,Arial,sans-serif!important;
}
body.dark-mode .v4-sync-alert-bar,
body.dark-mode .toast-container .toast{background:#1e293b!important;color:#f8fafc!important;border-color:#334155!important;}



/* END css/overrides/final-safe-fix-v402.css */


/* Print preview, recent cases, unified sidebar, distribution UX */

/* BEGIN css/features/print/mobile-print-preview-v403.css */
/* ============================================================
   14) MOBILE PRINT PREVIEW — v403 compatibility
   ============================================================ */

    #dtPanelPrint,
    #dtPanelPrint .dt-section,
    #dtPrintPreview{width:100% !important;max-width:100% !important;min-width:0 !important;overflow-x:hidden !important;box-sizing:border-box !important;}
    .v403-mobile-print-preview{width:100%;max-width:100%;min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:12px;box-sizing:border-box;}
    .v403-mobile-report-card{width:100%;max-width:100%;min-width:0;border:1px solid rgba(15,118,110,.18);background:linear-gradient(180deg,rgba(240,253,250,.95),rgba(255,255,255,.95));border-radius:18px;padding:14px;box-shadow:0 8px 22px rgba(15,23,42,.06);box-sizing:border-box;overflow:hidden;}
    body.dark-mode .v403-mobile-report-card,body.dark .v403-mobile-report-card{background:linear-gradient(180deg,rgba(15,23,42,.95),rgba(17,24,39,.95));border-color:rgba(45,212,191,.24);color:#e5e7eb;}
    .v403-mobile-report-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
    .v403-mobile-report-title h4{margin:0;font-size:18px;color:#0f766e;line-height:1.4;}
    body.dark-mode .v403-mobile-report-title h4,body.dark .v403-mobile-report-title h4{color:#5eead4;}
    .v403-mobile-pill{flex:0 0 auto;padding:5px 9px;border-radius:999px;background:rgba(37,99,235,.10);color:#1d4ed8;font-weight:800;font-size:12px;white-space:nowrap;}
    body.dark-mode .v403-mobile-pill,body.dark .v403-mobile-pill{background:rgba(96,165,250,.16);color:#bfdbfe;}
    .v403-mobile-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0;}
    .v403-mobile-meta-item{border:1px solid rgba(148,163,184,.25);background:rgba(248,250,252,.9);border-radius:14px;padding:10px;min-width:0;}
    body.dark-mode .v403-mobile-meta-item,body.dark .v403-mobile-meta-item{background:rgba(30,41,59,.72);border-color:rgba(148,163,184,.20);}
    .v403-mobile-meta-item span{display:block;font-size:11px;color:#64748b;margin-bottom:4px;}
    body.dark-mode .v403-mobile-meta-item span,body.dark .v403-mobile-meta-item span{color:#94a3b8;}
    .v403-mobile-meta-item strong{display:block;font-size:15px;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    body.dark-mode .v403-mobile-meta-item strong,body.dark .v403-mobile-meta-item strong{color:#f8fafc;}
    .v403-region-summary{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
    .v403-region-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid rgba(15,118,110,.16);background:#fff;border-radius:13px;padding:10px 12px;min-width:0;}
    body.dark-mode .v403-region-row,body.dark .v403-region-row{background:rgba(15,23,42,.9);border-color:rgba(45,212,191,.18);}
    .v403-region-row strong{font-size:14px;color:#0f172a;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    body.dark-mode .v403-region-row strong,body.dark .v403-region-row strong{color:#e2e8f0;}
    .v403-region-row span{font-size:13px;font-weight:900;color:#0f766e;white-space:nowrap;}
    body.dark-mode .v403-region-row span,body.dark .v403-region-row span{color:#5eead4;}
    .v403-mobile-actions{display:grid;grid-template-columns:1fr;gap:9px;margin-top:12px;}
    .v403-mobile-actions .btn{width:100%;min-width:0;max-width:100%;}
    .v403-mobile-note{margin-top:10px;font-size:12px;color:#64748b;line-height:1.7;}
    body.dark-mode .v403-mobile-note,body.dark .v403-mobile-note{color:#94a3b8;}
    .v403-full-preview-modal{position:fixed;inset:0;z-index:300000;background:rgba(15,23,42,.62);display:none;align-items:stretch;justify-content:center;padding:10px;box-sizing:border-box;}
    .v403-full-preview-modal.active{display:flex;}
    .v403-full-preview-box{width:min(1200px,100%);height:100%;max-height:calc(100vh - 20px);background:#fff;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.28);direction:rtl;}
    body.dark-mode .v403-full-preview-box,body.dark .v403-full-preview-box{background:#0f172a;color:#e5e7eb;}
    .v403-full-preview-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(148,163,184,.25);flex:0 0 auto;}
    .v403-full-preview-head h3{margin:0;font-size:17px;color:#0f766e;}
    body.dark-mode .v403-full-preview-head h3,body.dark .v403-full-preview-head h3{color:#5eead4;}
    .v403-close-preview{border:0;border-radius:12px;background:#fee2e2;color:#b91c1c;font-weight:900;padding:8px 12px;cursor:pointer;}
    .v403-full-preview-body{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;padding:12px;max-width:100%;}
    .v403-full-preview-body .report-page{min-width:720px;width:max-content;max-width:none;background:#fff;padding:10px;margin:0 auto 14px;border:1px solid rgba(148,163,184,.25);border-radius:10px;}
    .v403-full-preview-body table{min-width:700px;width:max-content;max-width:none;}
    @media(max-width:768px){#dtPrintPreview{padding:0 !important;border:0 !important;background:transparent !important;}#dtPanelPrint .dt-actions{grid-template-columns:1fr !important;}#dtPanelPrint .dt-actions .btn{min-height:46px;}}


#homeSubmenu.v408-hidden-old-home{
        display:none !important;
    }
    #sideHomeItem,
    #sideExtractItem,
    #sideBackgroundOpsItem,
    #sideNotificationsItem{
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        width:100% !important;
    }
    #sideHomeItem span:first-child,
    #sideExtractItem span:first-child,
    #sideBackgroundOpsItem span:first-child,
    #sideNotificationsItem span:first-child,
    #sideDistributionGroup .side-main-link{
        display:flex !important;
        align-items:center !important;
        gap:7px !important;
    }
    /* Remove old dropdown/open block inside previous distributions; cards are now the only entry point */
    #dtPreviousDistributionsBox .dt-main-collapse-body > .dt-grid{
        display:none !important;
    }
    #dtPreviousDistributionsBox .compact-head-line p{
        margin-bottom:4px !important;
    }
    #dtPreviousDistributionsBox .dt-saved-list{
        margin-top:8px !important;
    }



/* END css/features/print/mobile-print-preview-v403.css */


/* BEGIN css/features/recent-cases/recent-print-v409-v416.css */
/* ============================================================
   16) RECENT CASES + PRINT ACTIONS CSS — v409 classes / v416 JS owner
   ============================================================ */

/* V4.3.3 CL sidebar compacting */
#sidePanel{
    padding:10px 12px !important;
    gap:6px !important;
}
#sidePanel .side-head{
    padding:12px 14px !important;
    margin-bottom:8px !important;
    border-radius:18px !important;
}
#sidePanel .side-head h3{
    font-size:17px !important;
    line-height:1.3 !important;
    margin-inline-end:42px !important;
}
#sidePanel .side-head p{
    font-size:11px !important;
    margin-top:3px !important;
    line-height:1.4 !important;
}
#sidePanel .side-close,
#sidePanel .sidebar-dark-toggle{
    width:30px !important;
    height:30px !important;
    border-radius:10px !important;
    top:8px !important;
}
#sidePanel .sidebar-dark-toggle{left:44px !important;}
#sidePanel .side-menu-scroll{
    flex:1 1 auto !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:4px !important;
    overflow-y:auto !important;
    padding:2px 0 6px !important;
}
#sidePanel .side-item,
#sidePanel .side-parent{
    margin-bottom:3px !important;
    padding:9px 11px !important;
    min-height:39px !important;
    border-radius:14px !important;
    font-size:13px !important;
    line-height:1.35 !important;
    box-shadow:0 4px 12px rgba(15,23,42,.035) !important;
}
#sidePanel .side-parent-split{padding:0 !important;}
#sidePanel .side-parent-split .side-main-link{
    padding:9px 11px !important;
    min-height:39px !important;
    font-size:13px !important;
}
#sidePanel .side-parent-split .side-toggle{
    width:42px !important;
    font-size:18px !important;
    color:var(--secondary) !important;
    font-weight:900 !important;
}
#sidePanel .side-submenu{
    margin:-1px 8px 5px 0 !important;
    padding:5px 6px !important;
    border-right-width:2px !important;
}
#sidePanel .side-submenu button{
    padding:7px 9px !important;
    margin-bottom:4px !important;
    min-height:33px !important;
    border-radius:11px !important;
    font-size:12px !important;
    line-height:1.35 !important;
}
#sidePanel .side-item > span:nth-child(2){display:none !important;}
#sidePanel .side-parent-split .side-toggle{display:flex !important;}
#sidePanel .sidebar-version{
    order:90 !important;
    margin:6px 0 5px !important;
    padding:3px 4px !important;
    font-size:11px !important;
    line-height:1.4 !important;
    opacity:.78 !important;
}
#sidePanel .side-logout{
    order:99 !important;
    margin-top:0 !important;
    margin-bottom:2px !important;
    flex-shrink:0 !important;
    min-height:40px !important;
}
#sidePanel .v409-dropdown-hint{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:24px !important;
    height:24px !important;
    border-radius:999px !important;
    background:#eff6ff !important;
    color:#1d4ed8 !important;
    border:1px solid #bfdbfe !important;
    font-size:15px !important;
    font-weight:900 !important;
}
body.dark-mode #sidePanel .v409-dropdown-hint{
    background:#10213b !important;
    color:#bfdbfe !important;
    border-color:#334155 !important;
}

/* Recent cases actions */
.home-activity-row.v409-recent-row{
    align-items:center !important;
    gap:10px !important;
}
.v409-recent-actions{
    display:flex;
    gap:6px;
    flex-wrap:nowrap;
    flex-shrink:0;
}
.v409-recent-actions .mini-btn{
    min-height:34px;
    padding:7px 10px;
    border-radius:11px;
    font-size:12px;
    white-space:nowrap;
}
.v409-recent-modal-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:10px;
    margin-top:12px;
}
.v409-recent-modal-grid div{
    background:#f8fafc;
    border:1px solid var(--border);
    border-radius:14px;
    padding:10px 12px;
    line-height:1.8;
}
.v409-recent-modal-grid span{
    display:block;
    color:var(--muted);
    font-size:12px;
    font-weight:900;
    margin-bottom:2px;
}
.v409-recent-images{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
}
@media(max-width:430px){
    .home-activity-row.v409-recent-row{
        display:grid !important;
        grid-template-columns:auto minmax(0,1fr);
    }
    .v409-recent-actions{
        grid-column:1 / -1;
        display:grid;
        grid-template-columns:1fr 1fr;
        width:100%;
    }
}
body.dark-mode .v409-recent-modal-grid div{
    background:#0f1b2d !important;
    border-color:#2b3b55 !important;
    color:#eaf2ff !important;
}

/* Print/kashf actions: remove crowded top buttons and put compact actions under preview */
#dtPanelPrint .v409-print-old-actions{display:none !important;}
#dtPanelPrint .v403-mobile-actions{display:none !important;}
.v409-print-action-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:8px;
    margin:12px 0 4px;
    width:100%;
}
.v409-print-action-grid .btn{
    min-width:0 !important;
    width:100% !important;
    min-height:44px !important;
    border-radius:14px !important;
    padding:10px 8px !important;
    font-size:13px !important;
    white-space:normal !important;
    line-height:1.35 !important;
}
.v409-print-action-grid .v409-span-3{grid-column:span 3;}
.v409-print-action-grid .v409-span-2{grid-column:span 2;}
@media(max-width:430px){
    .v409-print-action-grid{gap:7px;}
    .v409-print-action-grid .btn{font-size:12px !important;padding:9px 5px !important;}
}



/* END css/features/recent-cases/recent-print-v409-v416.css */


/* BEGIN css/ui/unified-sidebar-v417.css */
/* ============================================================
   17) UNIFIED SIDEBAR CSS — v417 JS owner / v420 compatibility
   ============================================================ */

#sidePanel{
    display:flex !important;
    flex-direction:column !important;
}
#sidePanel .side-menu-scroll.v417-clean-scroll,
#sidePanel .side-menu-scroll.v410-clean-scroll{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow:auto !important;
    padding:0 0 8px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:7px !important;
}
#sidePanel .v417-side-group{
    display:block !important;
    width:100% !important;
    margin:0 !important;
}
#sidePanel .v417-side-item,
#sidePanel .v417-side-parent,
#sidePanel .v410-side-item,
#sidePanel .v410-side-parent{
    width:100% !important;
    min-height:50px !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:17px !important;
    border:1px solid rgba(219,227,239,.95) !important;
    background:#fff !important;
    color:var(--text) !important;
    box-shadow:0 6px 16px rgba(15,23,42,.045) !important;
    overflow:hidden !important;
}
#sidePanel .v417-side-item,
#sidePanel .v410-side-item{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    padding:11px 13px !important;
    font-size:16px !important;
    font-weight:900 !important;
    text-align:right !important;
    font-family:inherit !important;
}
#sidePanel .v417-side-item .v417-label,
#sidePanel .v417-side-parent .side-main-link .v417-label,
#sidePanel .v410-side-item .v410-label,
#sidePanel .v410-side-parent .side-main-link .v410-label{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}
#sidePanel .v417-side-parent,
#sidePanel .v410-side-parent{
    display:flex !important;
    align-items:stretch !important;
    justify-content:space-between !important;
}
#sidePanel .v417-side-parent .side-main-link,
#sidePanel .v410-side-parent .side-main-link{
    flex:1 1 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    min-width:0 !important;
    padding:11px 13px !important;
    font-size:16px !important;
    font-weight:900 !important;
    color:inherit !important;
    text-align:right !important;
    border:0 !important;
    background:transparent !important;
    font-family:inherit !important;
}
#sidePanel .v417-side-parent .side-toggle,
#sidePanel .v410-side-parent .side-toggle{
    flex:0 0 52px !important;
    width:52px !important;
    min-width:52px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:0 !important;
    border-right:1px solid rgba(219,227,239,.95) !important;
    background:transparent !important;
    color:#1d4ed8 !important;
    font-size:0 !important;
    cursor:pointer !important;
    font-family:inherit !important;
}
#sidePanel .v417-side-parent .side-toggle::before,
#sidePanel .v410-side-parent .side-toggle::before{
    content:'⌄';
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#eff6ff;
    border:1px solid #bfdbfe;
    color:#1d4ed8;
    font-size:17px;
    line-height:1;
    font-weight:900;
}
#sidePanel .v417-icon,
#sidePanel .v410-icon{
    width:22px !important;
    height:22px !important;
    flex:0 0 22px !important;
    color:currentColor !important;
}
#sidePanel .v417-icon svg,
#sidePanel .v410-icon svg{
    width:100%;
    height:100%;
    display:block;
    stroke:currentColor;
    fill:none;
    stroke-width:2.25;
    stroke-linecap:round;
    stroke-linejoin:round;
}
#sidePanel .v417-submenu,
#sidePanel .v410-submenu{
    display:none;
    margin:2px 10px 2px 0 !important;
    padding:7px !important;
    border-right:3px solid #dbeafe !important;
    background:transparent !important;
}
#sidePanel .v417-submenu.open,
#sidePanel .v410-submenu.open{
    display:block !important;
}
#sidePanel .v417-submenu button,
#sidePanel .v410-submenu button{
    width:100% !important;
    display:block !important;
    border:none !important;
    background:#f8fafc !important;
    color:#334155 !important;
    padding:10px 12px !important;
    border-radius:13px !important;
    text-align:right !important;
    margin:0 0 6px !important;
    font-size:14px !important;
    font-weight:800 !important;
    cursor:pointer !important;
    font-family:inherit !important;
}
#sidePanel #sidebarVersionBadge{
    flex:0 0 auto !important;
    margin:8px 0 7px !important;
    padding:4px 6px !important;
    font-size:11px !important;
    line-height:1.4 !important;
    opacity:.78 !important;
    order:90 !important;
}
#sidePanel .side-logout{
    order:99 !important;
    flex:0 0 auto !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    min-height:48px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    font-size:17px !important;
    font-weight:900 !important;
}
#sidePanel .v417-hidden-legacy-sidebar-item,
#sidePanel .v410-hidden-legacy-sidebar-item{
    display:none !important;
}
body.dark-mode #sidePanel .v417-side-item,
body.dark-mode #sidePanel .v417-side-parent,
body.dark-mode #sidePanel .v410-side-item,
body.dark-mode #sidePanel .v410-side-parent{
    background:#162238 !important;
    color:#eaf2ff !important;
    border-color:#2b3b55 !important;
    box-shadow:0 10px 24px rgba(0,0,0,.22) !important;
}
body.dark-mode #sidePanel .v417-side-parent .side-toggle,
body.dark-mode #sidePanel .v410-side-parent .side-toggle{
    border-right-color:#2b3b55 !important;
}
body.dark-mode #sidePanel .v417-side-parent .side-toggle::before,
body.dark-mode #sidePanel .v410-side-parent .side-toggle::before{
    background:#10213b !important;
    color:#bfdbfe !important;
    border-color:#334155 !important;
}
body.dark-mode #sidePanel .v417-submenu button,
body.dark-mode #sidePanel .v410-submenu button{
    background:#0f172a !important;
    color:#dbeafe !important;
}
@media(max-width:430px){
    #sidePanel .v417-side-item,
    #sidePanel .v417-side-parent .side-main-link,
    #sidePanel .v410-side-item,
    #sidePanel .v410-side-parent .side-main-link{
        font-size:15px !important;
        padding:10px 12px !important;
    }
    #sidePanel .v417-side-item,
    #sidePanel .v417-side-parent,
    #sidePanel .v410-side-item,
    #sidePanel .v410-side-parent{
        min-height:47px !important;
        border-radius:16px !important;
    }
    #sidePanel .v417-submenu button,
    #sidePanel .v410-submenu button{
        font-size:13px !important;
        padding:9px 10px !important;
    }
}



/* END css/ui/unified-sidebar-v417.css */


/* BEGIN css/features/distribution/performance-v410.css */
/* ============================================================
   18) DISTRIBUTION PERFORMANCE CSS — app.js / v410 class names
   ============================================================ */


.v410-status-chip{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    border-radius:999px;padding:5px 10px;font-size:12px;font-weight:900;
    border:1px solid var(--border);background:#f8fafc;color:#334155;white-space:nowrap;
}
.v410-status-draft{background:#f8fafc;color:#334155;border-color:#e2e8f0}
.v410-status-ready{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.v410-status-running{background:#ecfdf5;color:#0f766e;border-color:#a7f3d0}
.v410-status-closed{background:#fff7ed;color:#c2410c;border-color:#fed7aa}
.v410-status-archived{background:#f1f5f9;color:#64748b;border-color:#cbd5e1}
.v410-distribution-card{
    background:#fff;border:1px solid var(--border);border-radius:18px;padding:12px;
    box-shadow:0 8px 22px rgba(15,23,42,.045);display:grid;gap:9px;min-width:0;overflow:hidden;
}
.v410-distribution-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-width:0;}
.v410-distribution-card-title{min-width:0;overflow:hidden;}
.v410-distribution-card-title h4{margin:0;color:var(--secondary);font-size:16px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.v410-distribution-card-title p{margin:3px 0 0;color:var(--muted);font-size:12px;line-height:1.65;}
.v410-card-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;}
.v410-card-stat{background:#f8fafc;border:1px solid var(--border);border-radius:13px;padding:7px 5px;text-align:center;min-width:0;}
.v410-card-stat span{display:block;color:var(--muted);font-size:10px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.v410-card-stat strong{display:block;color:var(--secondary);font-size:16px;line-height:1.2;margin-top:2px;}
.v410-card-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
.v410-card-actions .mini-btn{min-width:0;min-height:34px;padding:7px 6px;border-radius:11px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.v410-status-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;}
.v410-status-actions button{border:1px solid var(--border);background:#fff;border-radius:11px;padding:7px 4px;font-family:inherit;font-size:11px;font-weight:900;cursor:pointer;min-width:0;white-space:nowrap;}
.v410-status-actions button:hover{background:#f8fafc;}
.v410-report-modal .modal-box{width:min(900px,96vw);max-height:90vh;}
.v410-report-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:10px 0 14px;}
.v410-report-cell{background:#fff;border:1px solid var(--border);border-radius:15px;padding:11px;text-align:center;}
.v410-report-cell span{display:block;color:var(--muted);font-size:12px;font-weight:900;}
.v410-report-cell strong{display:block;color:var(--secondary);font-size:22px;margin-top:4px;}
.v410-report-list{display:grid;gap:8px;max-height:52vh;overflow:auto;padding:2px;}
.v410-report-row{background:#fff;border:1px solid var(--border);border-radius:14px;padding:10px;display:grid;gap:4px;}
.v410-report-row strong{color:var(--text);font-size:14px;}
.v410-report-row span{color:var(--muted);font-size:12px;line-height:1.6;}
.v410-row-saving::after{content:'جاري الحفظ...';display:inline-flex;margin-inline-start:7px;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;border-radius:999px;padding:3px 7px;font-size:11px;font-weight:900;}
.v410-row-failed::after{content:'لم يتم الحفظ';display:inline-flex;margin-inline-start:7px;background:#fee2e2;color:#991b1b;border:1px solid #fecaca;border-radius:999px;padding:3px 7px;font-size:11px;font-weight:900;}
.v410-performance-note{background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8;border-radius:16px;padding:10px 12px;font-size:12px;font-weight:800;line-height:1.8;margin:8px 0;}
body.dark-mode .v410-distribution-card, body.dark-mode .v410-report-cell, body.dark-mode .v410-report-row{
    background:#111827!important;color:#eaf2ff!important;border-color:#26364f!important;box-shadow:0 12px 30px rgba(0,0,0,.28)!important;
}
body.dark-mode .v410-card-stat{background:#0f1b2d!important;border-color:#334155!important;}
body.dark-mode .v410-card-stat span, body.dark-mode .v410-distribution-card-title p, body.dark-mode .v410-report-row span{color:#a9b6ca!important;}
body.dark-mode .v410-distribution-card-title h4, body.dark-mode .v410-report-row strong{color:#f8fbff!important;}
body.dark-mode .v410-status-actions button{background:#172a42!important;color:#dbeafe!important;border-color:#334155!important;}
@media(max-width:768px){
    .v410-card-stats{grid-template-columns:repeat(2,1fr);}
    .v410-card-actions{grid-template-columns:repeat(3,1fr);}
    .v410-status-actions{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:430px){
    .v410-card-actions{grid-template-columns:repeat(2,1fr);}
    .v410-status-actions{grid-template-columns:1fr;}
}



/* END css/features/distribution/performance-v410.css */


/* BEGIN css/features/distribution/ux-v415.css */
/* ============================================================
   19) DISTRIBUTION UX CSS — v415 JS owner / v421 compatibility
   ============================================================ */
.v415-distribution-card{
    padding:12px 13px!important;
    border-radius:16px!important;
    border:1px solid rgba(20,121,110,.16)!important;
    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(241,253,250,.92))!important;
    box-shadow:0 8px 22px rgba(15,23,42,.045)!important;
    margin-bottom:10px!important;
}
.v415-card-main{
    min-width:0;
}
.v415-card-title{
    font-size:16px;
    font-weight:1000;
    color:#0f766e;
    margin-bottom:5px;
    line-height:1.5;
}
.v415-card-meta{
    font-size:12px;
    color:#64748b;
    line-height:1.7;
}
.v415-card-count{
    font-size:13px;
    color:#334155;
    margin-top:5px;
    font-weight:900;
}
.v415-card-count strong{
    color:#2563eb;
    font-size:16px;
}
.v415-card-actions{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    margin-top:10px!important;
}
.v415-card-actions .dt-mini-btn{
    width:100%!important;
    min-height:31px!important;
    padding:6px 5px!important;
    border-radius:10px!important;
    font-size:11.5px!important;
    line-height:1.25!important;
}
.v415-card-actions .dt-mini-btn:nth-child(3){
    font-size:10.5px!important;
}
.v415-card-stats{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
    margin:10px 0;
}
.v415-card-stats span{
    background:rgba(15,118,110,.08);
    border:1px solid rgba(15,118,110,.12);
    border-radius:12px;
    padding:8px 6px;
    text-align:center;
    font-size:12px;
    color:#334155;
}
.v415-card-stats b{
    display:block;
    font-size:17px;
    color:#0f766e;
    margin-top:2px;
}
.v415-modal{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.45);
    z-index:99999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:14px;
}
.v415-modal-card{
    position:relative;
    width:min(720px,96vw);
    max-height:86vh;
    overflow:auto;
    background:#fff;
    border-radius:22px;
    padding:22px;
    box-shadow:0 24px 80px rgba(0,0,0,.22);
    direction:rtl;
}
.v415-modal-close{
    position:absolute;
    top:10px;
    left:10px;
    border:0;
    background:#f1f5f9;
    border-radius:999px;
    width:36px;
    height:36px;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    color:#0f172a;
}
.v415-modal-card h2{
    margin:0 0 6px;
    color:#0f766e;
    font-size:24px;
}
.v415-modal-sub{
    margin:0 0 14px;
    color:#64748b;
}
.v415-modal-section{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:12px;
    margin:10px 0;
    color:#334155;
}
.v415-modal-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:14px;
}
.v415-modal-actions .dt-mini-btn{
    min-width:120px;
}
body.dark-mode .v415-distribution-card{
    background:linear-gradient(135deg,rgba(15,23,42,.98),rgba(17,94,89,.28))!important;
    border-color:rgba(45,212,191,.22)!important;
}
body.dark-mode .v415-card-title,
.dark-mode .v415-card-title{
    color:#5eead4!important;
}
body.dark-mode .v415-card-meta,
.dark-mode .v415-card-meta{
    color:#cbd5e1!important;
}
body.dark-mode .v415-card-count,
.dark-mode .v415-card-count{
    color:#e2e8f0!important;
}
body.dark-mode .v415-card-count strong,
.dark-mode .v415-card-count strong{
    color:#93c5fd!important;
}
body.dark-mode .v415-card-stats span{
    background:rgba(45,212,191,.08);
    border-color:rgba(45,212,191,.18);
    color:#cbd5e1;
}
body.dark-mode .v415-card-stats b{
    color:#5eead4;
}
body.dark-mode .v415-modal-card{
    background:#0f172a;
    color:#e2e8f0;
}
body.dark-mode .v415-modal-close{
    background:#1e293b;
    color:#e2e8f0;
}
body.dark-mode .v415-modal-section{
    background:#111827;
    border-color:#334155;
    color:#e2e8f0;
}
@media(max-width:640px){
    .v415-card-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .v415-card-actions{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
    }
    .v415-card-actions .dt-mini-btn{
        font-size:10.5px!important;
        padding:6px 3px!important;
    }
    .v415-card-title{
        font-size:15px;
    }
    .v415-card-meta{
        font-size:11.5px;
    }
    .v415-modal-card{
        padding:18px 14px;
        border-radius:18px;
    }
    .v415-modal-actions .dt-mini-btn{
        width:100%;
    }
}


/* END css/features/distribution/ux-v415.css */


/* Final mobile/theme/layout safety overrides */

/* BEGIN css/features/print/print-mobile-v422.css */
/* ============================================================
   20) PRINT / MOBILE CSS — v403/v416/v422 compatibility
   ============================================================ */

#dtPanelPrint,
#dtPanelPrint .dt-section,
#dtPrintPreview,
.dt-print-preview,
.delivery-print-preview,
.print-preview,
.report-preview{
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
}

/* Desktop/tablet: allow the full table preview to scroll horizontally instead of clipping. */
@media(min-width:769px){
    #dtPrintPreview,
    .dt-print-preview,
    .delivery-print-preview,
    .print-preview,
    .report-preview{
        overflow-x:auto !important;
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch !important;
    }

    #dtPrintPreview table,
    .dt-print-preview table,
    .delivery-print-preview table,
    .report-preview table{
        min-width:720px !important;
        width:max-content !important;
        max-width:none !important;
        table-layout:auto !important;
    }
}

/* Mobile: v403 replaces the heavy table with a compact summary card. */
@media(max-width:768px){
    #dtPanelPrint,
    #dtPanelPrint .dt-section,
    #dtPrintPreview{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        overflow-x:hidden !important;
        box-sizing:border-box !important;
    }

    #dtPrintPreview{
        padding:0 !important;
        border:0 !important;
        background:transparent !important;
    }
}

/* Current print action grid still uses v409 class names; v416 owns its JS lifecycle. */
.v409-print-action-grid,
.v416-print-action-grid{
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:8px !important;
    margin:12px 0 4px !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
}

.v409-print-action-grid .btn,
.v416-print-action-grid .btn{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    min-height:44px !important;
    border-radius:14px !important;
    padding:10px 8px !important;
    font-size:13px !important;
    white-space:normal !important;
    line-height:1.35 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.v409-print-action-grid .v409-span-3,
.v416-print-action-grid .v416-span-3{grid-column:span 3 !important;}

.v409-print-action-grid .v409-span-2,
.v416-print-action-grid .v416-span-2{grid-column:span 2 !important;}

/* The original top row is hidden after v416 inserts the cleaner grid below the preview. */
#dtPanelPrint .v409-print-old-actions,
#dtPanelPrint .v416-print-old-actions{
    display:none !important;
}

/* Avoid duplicate mobile buttons inside the v403 summary; v416 grid is the active action area. */
#dtPanelPrint .v403-mobile-actions{
    display:none !important;
}

@media(max-width:520px){
    .v409-print-action-grid,
    .v416-print-action-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:7px !important;
    }

    .v409-print-action-grid .v409-span-3,
    .v409-print-action-grid .v409-span-2,
    .v416-print-action-grid .v416-span-3,
    .v416-print-action-grid .v416-span-2{
        grid-column:span 1 !important;
    }

    .v409-print-action-grid .btn,
    .v416-print-action-grid .btn{
        font-size:12px !important;
        padding:9px 6px !important;
        min-height:42px !important;
    }
}

@media(max-width:360px){
    .v409-print-action-grid,
    .v416-print-action-grid{
        grid-template-columns:1fr !important;
    }
}

/* Full preview modal must keep its own internal scroll, especially on mobile. */
.v403-full-preview-modal{
    box-sizing:border-box !important;
}

.v403-full-preview-box{
    max-width:100% !important;
    min-width:0 !important;
}

.v403-full-preview-body{
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
    max-width:100% !important;
}

.v403-full-preview-body .report-page,
.v403-full-preview-body table{
    min-width:700px !important;
    width:max-content !important;
    max-width:none !important;
}

body.dark-mode #dtPrintPreview,
body.dark-mode .dt-print-preview,
body.dark-mode .delivery-print-preview,
body.dark-mode .print-preview,
body.dark-mode .report-preview{
    background:#111827 !important;
    color:#eaf2ff !important;
    border-color:#26364f !important;
}

body.dark-mode .v403-full-preview-body .report-page,
body.dark-mode .v403-full-preview-body table{
    background:#111827 !important;
    color:#eaf2ff !important;
    border-color:#334155 !important;
}


/* END css/features/print/print-mobile-v422.css */


/* BEGIN css/features/recent-cases/recent-cases-v423.css */
/* ============================================================
   21) RECENT CASES CSS — v416 JS owner / v423 compatibility
   ============================================================ */

#homeRecentCases,
#searchRecentCases{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
}

.home-activity-row.v409-recent-row,
.home-activity-row.v416-recent-row{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
}

.home-activity-row.v409-recent-row .home-activity-main,
.home-activity-row.v416-recent-row .home-activity-main{
    min-width:0 !important;
    overflow:hidden !important;
}

.home-activity-row.v409-recent-row .home-activity-main strong,
.home-activity-row.v409-recent-row .home-activity-main span,
.home-activity-row.v416-recent-row .home-activity-main strong,
.home-activity-row.v416-recent-row .home-activity-main span{
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

.v409-recent-actions,
.v416-recent-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
    flex:0 0 auto !important;
    align-items:center !important;
    min-width:0 !important;
}

.v409-recent-actions .mini-btn,
.v416-recent-actions .mini-btn{
    min-height:34px !important;
    padding:7px 10px !important;
    border-radius:11px !important;
    font-size:12px !important;
    line-height:1.35 !important;
    white-space:nowrap !important;
    min-width:0 !important;
}

#v409RecentCaseModal .modal-box,
#v416RecentCaseModal .modal-box{
    width:min(640px,95vw) !important;
    max-height:90vh !important;
    overflow:auto !important;
}

.v409-recent-modal-grid,
.v416-recent-modal-grid{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr)) !important;
    gap:10px !important;
    margin-top:12px !important;
    width:100% !important;
    min-width:0 !important;
}

.v409-recent-modal-grid div,
.v416-recent-modal-grid div{
    background:#f8fafc !important;
    border:1px solid var(--border) !important;
    border-radius:14px !important;
    padding:10px 12px !important;
    line-height:1.8 !important;
    min-width:0 !important;
    overflow:hidden !important;
}

.v409-recent-modal-grid span,
.v416-recent-modal-grid span{
    display:block !important;
    color:var(--muted) !important;
    font-size:12px !important;
    font-weight:900 !important;
    margin-bottom:2px !important;
}

.v409-recent-images,
.v416-recent-images{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    margin-top:12px !important;
    max-width:100% !important;
}

.v409-recent-images .case-img-thumb,
.v416-recent-images .case-img-thumb{
    width:120px !important;
    max-width:calc(50% - 4px) !important;
    height:90px !important;
    object-fit:cover !important;
}

@media(max-width:520px){
    .home-activity-row.v409-recent-row,
    .home-activity-row.v416-recent-row{
        grid-template-columns:auto minmax(0,1fr) !important;
        align-items:start !important;
    }

    .v409-recent-actions,
    .v416-recent-actions{
        grid-column:1 / -1 !important;
        width:100% !important;
    }

    .v409-recent-actions .mini-btn,
    .v416-recent-actions .mini-btn{
        width:100% !important;
        min-height:38px !important;
    }

    .v409-recent-modal-grid,
    .v416-recent-modal-grid{
        grid-template-columns:1fr !important;
    }

    .v409-recent-images .case-img-thumb,
    .v416-recent-images .case-img-thumb{
        flex:1 1 calc(50% - 4px) !important;
        width:auto !important;
        max-width:100% !important;
    }
}

body.dark-mode .v409-recent-modal-grid div,
body.dark-mode .v416-recent-modal-grid div{
    background:#0f1b2d !important;
    border-color:#2b3b55 !important;
    color:#eaf2ff !important;
}

body.dark-mode .v409-recent-modal-grid span,
body.dark-mode .v416-recent-modal-grid span{
    color:#a9b6ca !important;
}


/* END css/features/recent-cases/recent-cases-v423.css */


/* BEGIN css/theme/dark-mode-final-v424.css */
/* ============================================================
   22) DARK MODE CSS — v424 final compatibility
   ============================================================ */

body.dark-mode .side-panel,
body.dark-mode #sidePanel{
    background:linear-gradient(180deg,#111827,#0b1220) !important;
    color:#eaf2ff !important;
    border-color:#26364f !important;
}

body.dark-mode #sidePanel .side-head{
    background:linear-gradient(135deg,#1d4ed8,#0f766e) !important;
    color:#fff !important;
}

body.dark-mode #sidePanel .side-close,
body.dark-mode #sidePanel .sidebar-dark-toggle{
    background:rgba(255,255,255,.16) !important;
    color:#fff !important;
}

body.dark-mode #sidePanel .v417-side-item,
body.dark-mode #sidePanel .v417-side-parent,
body.dark-mode #sidePanel .v410-side-item,
body.dark-mode #sidePanel .v410-side-parent,
body.dark-mode #sidePanel .side-item,
body.dark-mode #sidePanel .side-parent{
    background:#162238 !important;
    color:#eaf2ff !important;
    border-color:#2b3b55 !important;
    box-shadow:0 10px 24px rgba(0,0,0,.22) !important;
}

body.dark-mode #sidePanel .v417-side-parent .side-toggle,
body.dark-mode #sidePanel .v410-side-parent .side-toggle,
body.dark-mode #sidePanel .side-parent-split .side-toggle{
    border-right-color:#2b3b55 !important;
    color:#bfdbfe !important;
}

body.dark-mode #sidePanel .v417-side-parent .side-toggle::before,
body.dark-mode #sidePanel .v410-side-parent .side-toggle::before,
body.dark-mode #sidePanel .v409-dropdown-hint{
    background:#10213b !important;
    color:#bfdbfe !important;
    border-color:#334155 !important;
}

body.dark-mode #sidePanel .v417-submenu,
body.dark-mode #sidePanel .v410-submenu,
body.dark-mode #sidePanel .side-submenu{
    border-right-color:#334155 !important;
}

body.dark-mode #sidePanel .v417-submenu button,
body.dark-mode #sidePanel .v410-submenu button,
body.dark-mode #sidePanel .side-submenu button{
    background:#0f172a !important;
    color:#dbeafe !important;
    border-color:#2b3b55 !important;
}

body.dark-mode #sidePanel .side-logout{
    background:#2b1418 !important;
    color:#fca5a5 !important;
    border-color:#7f1d1d !important;
}

body.dark-mode .v415-distribution-card,
body.dark-mode .v410-distribution-card,
body.dark-mode .dt-saved-card,
body.dark-mode .dt-report-card,
body.dark-mode .dt-list-item,
body.dark-mode .dt-case-row,
body.dark-mode .dt-card,
body.dark-mode .dt-section,
body.dark-mode .dt-collapse{
    background:#111827 !important;
    color:#eaf2ff !important;
    border-color:#26364f !important;
    box-shadow:0 14px 34px rgba(0,0,0,.28) !important;
}

body.dark-mode .v415-card-count,
body.dark-mode .v415-card-stats span,
body.dark-mode .v410-card-stat,
body.dark-mode .v410-report-cell,
body.dark-mode .v410-report-row,
body.dark-mode .dt-empty,
body.dark-mode .dt-print-preview,
body.dark-mode #dtPrintPreview{
    background:#0f1b2d !important;
    color:#eaf2ff !important;
    border-color:#334155 !important;
}

body.dark-mode .v415-card-title,
body.dark-mode .v410-distribution-card-title h4,
body.dark-mode .dt-list-title strong,
body.dark-mode .dt-case-name,
body.dark-mode .v410-report-row strong{
    color:#f8fbff !important;
}

body.dark-mode .v415-card-meta,
body.dark-mode .v410-distribution-card-title p,
body.dark-mode .v410-card-stat span,
body.dark-mode .dt-list-title span,
body.dark-mode .dt-case-meta,
body.dark-mode .dt-details,
body.dark-mode .v410-report-row span{
    color:#a9b6ca !important;
}

body.dark-mode .v415-modal-card,
body.dark-mode .v410-report-modal .modal-box,
body.dark-mode .v403-full-preview-box,
body.dark-mode .modal-box{
    background:#111827 !important;
    color:#eaf2ff !important;
    border-color:#26364f !important;
}

body.dark-mode .v415-modal-section,
body.dark-mode .v403-full-preview-body,
body.dark-mode .v403-full-preview-body .report-page,
body.dark-mode .v403-full-preview-body table,
body.dark-mode .v409-recent-modal-grid div,
body.dark-mode .v416-recent-modal-grid div{
    background:#0f1b2d !important;
    color:#eaf2ff !important;
    border-color:#334155 !important;
}

body.dark-mode .v415-modal-close,
body.dark-mode .v403-close-preview{
    background:#2b1418 !important;
    color:#fca5a5 !important;
    border-color:#7f1d1d !important;
}

body.dark-mode .v409-print-action-grid .btn.btn-light,
body.dark-mode .v416-print-action-grid .btn.btn-light,
body.dark-mode .v415-card-actions .dt-mini-btn,
body.dark-mode .v415-modal-actions .dt-mini-btn,
body.dark-mode .v410-status-actions button,
body.dark-mode .dt-mini-btn,
body.dark-mode .mini-info,
body.dark-mode .case-list-open,
body.dark-mode .case-details-toggle{
    background:#172a42 !important;
    color:#dbeafe !important;
    border-color:#334155 !important;
}

body.dark-mode .v409-print-action-grid .btn.btn-primary,
body.dark-mode .v416-print-action-grid .btn.btn-primary,
body.dark-mode .v415-card-actions .btn-primary,
body.dark-mode .v415-modal-actions .btn-primary{
    color:#fff !important;
}

body.dark-mode .v409-recent-actions .mini-edit,
body.dark-mode .v416-recent-actions .mini-edit,
body.dark-mode .mini-edit,
body.dark-mode .edit-btn{
    background:#2b2116 !important;
    color:#fdba74 !important;
    border-color:#7c2d12 !important;
}

body.dark-mode .v409-recent-actions .mini-delete,
body.dark-mode .v416-recent-actions .mini-delete,
body.dark-mode .mini-delete,
body.dark-mode .delete-btn{
    background:#2b1418 !important;
    color:#fca5a5 !important;
    border-color:#7f1d1d !important;
}

body.dark-mode .v403-mobile-report-card,
body.dark-mode .v403-mobile-meta-item,
body.dark-mode .v403-region-row{
    background:#0f1b2d !important;
    color:#eaf2ff !important;
    border-color:#334155 !important;
}

body.dark-mode .v403-mobile-report-title h4,
body.dark-mode .v403-region-row span,
body.dark-mode .v410-status-chip.v410-status-running,
body.dark-mode .v410-status-running{
    color:#5eead4 !important;
}

body.dark-mode .v403-mobile-meta-item span,
body.dark-mode .v403-mobile-note,
body.dark-mode .v403-region-row strong{
    color:#cbd5e1 !important;
}

body.dark-mode .notification-hero,
body.dark-mode .notification-collapse,
body.dark-mode .notification-card,
body.dark-mode .notification-bar,
body.dark-mode .notification-preview-area,
body.dark-mode .v4-sync-hero,
body.dark-mode .v4-sync-stat,
body.dark-mode .v4-sync-item,
body.dark-mode .v4-sync-empty,
body.dark-mode .v4-sync-alert-bar{
    background:#172033 !important;
    color:#eaf2ff !important;
    border-color:#334155 !important;
    box-shadow:0 14px 34px rgba(0,0,0,.24) !important;
}

body.dark-mode .soft-loading-bar,
body.dark-mode .toast,
body.dark-mode .toast-container .toast,
body.dark-mode #globalLoader > div{
    background:#111827 !important;
    color:#eaf2ff !important;
    border-color:#26364f !important;
}

body.dark-mode .locked-option{
    opacity:.68 !important;
    filter:grayscale(.25) !important;
}

body.dark-mode .locked-option::before{
    background:#2b2116 !important;
    color:#fdba74 !important;
    border-color:#7c2d12 !important;
}



/* END css/theme/dark-mode-final-v424.css */


/* BEGIN css/overrides/general-ui-layout-safety-v425.css */
/* ============================================================
   23) GENERAL UI CSS — v425 layout safety
   ============================================================ */
html,
body,
#mainApp,
.container,
.tab-content,
.card,
.results,
.result-card,
.settings-main,
.extract-page,
.dt-page,
.notification-center-page{
    min-width:0 !important;
    max-width:100% !important;
}

html,
body{
    overscroll-behavior-y:contain;
}

.card,
.result-card,
.home-hero-card,
.home-activity-card,
.home-stat-card,
.home-action-tile,
.add-section-card,
.settings-section-head,
.extract-section,
.dt-section,
.notification-collapse,
.notification-card,
.modal-box{
    overflow-wrap:anywhere;
}

.grid,
.polish-grid,
.filters-grid,
.settings-layout,
.settings-main,
.extract-layout,
.dt-grid,
.dt-layout,
.dt-list,
.home-action-grid,
.home-stats-grid,
.notification-form-grid{
    min-width:0 !important;
}

.field,
.field input,
.field select,
.field textarea,
input,
select,
textarea{
    min-width:0 !important;
    max-width:100% !important;
}

button,
.btn,
.mini-btn,
.icon-btn,
.tab-btn,
.quick-nav-btn,
.settings-nav,
.manage-mode-btn,
.extract-main-tab,
.extract-mode-btn,
.dt-subtab-btn,
.home-action-tile,
.side-item,
.side-main-link,
.side-toggle{
    min-width:0;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}

.btn,
.mini-btn,
.icon-btn{
    user-select:none;
}

.btn:focus-visible,
.mini-btn:focus-visible,
.icon-btn:focus-visible,
.tab-btn:focus-visible,
.quick-nav-btn:focus-visible,
.settings-nav:focus-visible,
.manage-mode-btn:focus-visible,
.extract-main-tab:focus-visible,
.extract-mode-btn:focus-visible,
.dt-subtab-btn:focus-visible,
.side-item:focus-visible,
.side-main-link:focus-visible,
.side-toggle:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:3px solid rgba(29,78,216,.28);
    outline-offset:2px;
}

.modal-overlay{
    overscroll-behavior:contain;
}

.modal-box{
    max-width:calc(100vw - 24px) !important;
}

.modal-actions .btn{
    max-width:100%;
}

img,
canvas,
svg,
video{
    max-width:100%;
}

@media(max-width:768px){
    .container{
        width:100% !important;
    }

    .modal-actions{
        align-items:stretch;
    }

    .modal-actions .btn{
        flex:1 1 140px;
        white-space:normal;
    }

    .export-actions .btn,
    .dt-actions .btn,
    .extract-output-buttons .btn{
        min-width:0 !important;
    }
}

@media(max-width:430px){
    .modal-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .modal-actions .btn{
        width:100%;
    }

    .toast-container,
    .notification-bar-host,
    .soft-loading-bar,
    .v4-sync-alert-bar{
        max-width:calc(100vw - 16px) !important;
    }
}

@media print{
    .app-shell-top,
    .side-overlay,
    .side-panel,
    .toast-container,
    .notification-bar-host,
    .soft-loading-bar,
    .v4-sync-alert-bar{
        display:none !important;
    }
}


/* END css/overrides/general-ui-layout-safety-v425.css */


/* BEGIN css/overrides/scroll-behavior-fix-v4281.css */
/* ============================================================
   24) SCROLL BEHAVIOR FIX — v428.1
   هدفها علاج ثِقَل/مقاومة التمرير العام بعد طبقات الـ overflow safety.
   لا تغيّر ألوان أو أحجام أو layout؛ فقط تعيد السحب الرأسي الطبيعي للصفحات.
   ============================================================ */
html,
body{
    height:auto !important;
    min-height:100% !important;
    overflow-y:auto !important;
    overscroll-behavior-y:auto !important;
    scroll-behavior:auto !important;
    -webkit-overflow-scrolling:touch;
}

body{
    touch-action:pan-y pinch-zoom;
}

#mainApp,
.container,
.tab-content,
.card,
.results,
.result-card,
.home-dashboard,
.home-activity-card,
.search-simple-card,
.add-polish-card,
.settings-main,
.extract-page,
.dt-page,
.notification-center-page{
    overflow-y:visible !important;
}

/* Keep the intentionally scrollable inner areas smooth on mobile. */
.side-menu-scroll,
.modal-box,
.dt-list,
.dt-print-preview,
.extract-case-list,
.v403-full-preview-body,
.v410-report-list{
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:auto !important;
}

/* Do not let fixed overlays steal page scroll unless they are actually visible. */
.side-overlay:not(.open),
#globalLoader[style*="display:none"],
#softLoadingBar:not(.open){
    pointer-events:none !important;
}


/* END css/overrides/scroll-behavior-fix-v4281.css */


/* V477 sidebar layer hotfix — keep last */

/* BEGIN css/overrides/sidebar-layer-hotfix-v477.css */
/* ============================================================
   V477 SIDEBAR LAYER HOTFIX
   الهدف: جعل السايدبار والـ overlay فوق كارت المستخدم/المزامنة عند فتح القائمة.
   نطاق التعديل: طبقات العرض فقط — لا يغير layout أو JS أو DOM.
   ============================================================ */

/* The app header/user card is intentionally high (v402 safety layer).
   The sidebar must be higher while open, otherwise the header card covers
   the top of the mobile side menu. */
#sideOverlay.open,
.side-overlay.open{
    z-index:260000 !important;
}

#sidePanel,
#sidePanel.open,
.side-panel,
.side-panel.open{
    z-index:260001 !important;
}

/* Prevent the sticky top card from receiving taps through the overlay on
   modern browsers, without hiding it during normal app usage. */
body:has(#sidePanel.open) .app-shell-top{
    pointer-events:none !important;
}

/* END css/overrides/sidebar-layer-hotfix-v477.css */


/* V478 UX + performance overrides — keep after V477 */

/* BEGIN css/overrides/ux-performance-v478.css */
/* ============================================================
   V478 UX PERFORMANCE BATCH
   Compact notifications + smooth distribution tab shells.
   ============================================================ */

/* Distribution: keep delivery status buttons on one compact row, including small phones. */
.dt-status-actions{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:5px !important;
    align-items:stretch !important;
}
.dt-status-actions button{
    min-height:34px !important;
    padding:6px 4px !important;
    border-radius:10px !important;
    font-size:11px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}
@media(max-width:430px){
    .dt-status-actions{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
    .dt-status-actions button{font-size:10.5px !important;padding-inline:3px !important;}
}

.v478-tab-shell{
    display:grid !important;
    justify-items:center;
    gap:6px;
    padding:16px 12px !important;
    text-align:center;
    border-style:dashed !important;
}
.v478-tab-shell strong{
    font-size:13px;
    color:var(--primary);
}
.v478-tab-shell span{
    display:block;
    color:var(--muted);
    font-size:12px;
    line-height:1.7;
}
.v478-shell-spinner{
    width:18px;
    height:18px;
    border-radius:999px;
    border:2px solid #dbeafe;
    border-top-color:var(--secondary);
    animation:v478Spin .75s linear infinite;
}
@keyframes v478Spin{to{transform:rotate(360deg)}}
.v478-shell-action,
.v478-more-btn{
    margin-top:8px;
    width:100%;
    max-width:280px;
}

/* Lite toasts: fixed stack, capped by JS, compact and non-noisy. */
.toast-container{
    top:auto !important;
    bottom:16px !important;
    left:14px !important;
    right:auto !important;
    width:min(320px,calc(100vw - 28px)) !important;
    max-width:min(320px,calc(100vw - 28px)) !important;
    gap:6px !important;
    z-index:260000 !important;
    pointer-events:none !important;
}
.toast.v478-lite-toast{
    pointer-events:auto;
    display:grid;
    grid-template-columns:22px minmax(0,1fr);
    align-items:center;
    gap:7px;
    width:100%;
    min-height:34px;
    padding:7px 9px !important;
    border-radius:12px !important;
    border-right-width:3px !important;
    box-shadow:0 8px 22px rgba(15,23,42,.13) !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.45 !important;
    opacity:.96;
}
.v478-toast-icon{
    width:20px;
    height:20px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#f1f5f9;
    color:#334155;
    font-size:11px;
    font-weight:900;
}
.v478-toast-text{min-width:0;overflow:hidden;text-overflow:ellipsis;display:block;}
.toast.v478-lite-toast.is-hiding,
.notification-bar.v478-lite-notification-bar.is-hiding{
    opacity:0 !important;
    transform:translateY(8px) !important;
    transition:.22s ease !important;
}

/* App notifications: small, centered, and limited by JS. */
.notification-bar-host.v478-lite-notifications{
    top:auto !important;
    bottom:64px !important;
    left:14px !important;
    right:auto !important;
    transform:none !important;
    width:min(340px,calc(100vw - 28px)) !important;
    gap:6px !important;
    z-index:259000 !important;
}
.notification-bar.v478-lite-notification-bar{
    grid-template-columns:22px minmax(0,1fr) 24px !important;
    gap:8px !important;
    padding:8px 9px !important;
    border-radius:12px !important;
    border-right-width:3px !important;
    box-shadow:0 10px 24px rgba(15,23,42,.13) !important;
    align-items:center !important;
}
.v478-notification-icon{
    width:20px;
    height:20px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#eff6ff;
    color:#1d4ed8;
    font-size:11px;
    font-weight:900;
}
.v478-notification-body strong{
    font-size:12px !important;
    line-height:1.35 !important;
    margin:0 0 2px !important;
}
.v478-notification-body span{
    font-size:11px !important;
    line-height:1.45 !important;
    max-height:32px;
    overflow:hidden;
}
.notification-bar.v478-lite-notification-bar button{
    width:24px !important;
    height:24px !important;
    border-radius:8px !important;
    font-size:14px !important;
    line-height:1 !important;
}

body.dark-mode .v478-tab-shell strong{color:#7dd3fc !important;}
body.dark-mode .v478-tab-shell span{color:#cbd5e1 !important;}
body.dark-mode .v478-toast-icon,
body.dark-mode .v478-notification-icon{background:#0f172a;color:#bfdbfe;}

@media(max-width:768px){
    .toast-container{bottom:12px !important;left:10px !important;right:10px !important;width:auto !important;max-width:none !important;}
    .notification-bar-host.v478-lite-notifications{bottom:58px !important;left:10px !important;right:10px !important;width:auto !important;}
}

/* END css/overrides/ux-performance-v478.css */


/* V479 home navigation + login loading UX */

/* BEGIN css/overrides/home-nav-loading-v479.css */
/* ============================================================
   V479 HOME NAV + LOGIN LOADING UX
   Scope:
   1) Glass Pulse + Progress global login loader.
   2) Wide compact home shortcut for Distribution & Delivery.
   3) Compact header card on all non-home pages.
   4) Light component loader state for home Distribution tile.
   ============================================================ */

/* Global loader: default professional glass card, with special login copy. */
.global-loader-overlay{
    position:fixed;
    inset:0;
    z-index:99999;
    background:rgba(15,23,42,.36);
    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
    justify-content:center;
    align-items:center;
    padding:18px;
}
.global-loader-card{
    width:min(430px,calc(100vw - 42px));
    min-height:112px;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(226,232,240,.95);
    border-radius:24px;
    box-shadow:0 24px 70px rgba(15,23,42,.22);
    padding:18px 20px 16px;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:14px;
    align-items:center;
    font-family:'Cairo',sans-serif;
    overflow:hidden;
    position:relative;
}
.global-loader-card::before{
    content:"";
    position:absolute;
    inset:-80px auto auto -80px;
    width:170px;
    height:170px;
    border-radius:999px;
    background:radial-gradient(circle,rgba(15,130,119,.16),transparent 64%);
    pointer-events:none;
}
.global-loader-copy{
    min-width:0;
    position:relative;
    z-index:1;
}
.global-loader-copy strong{
    display:block;
    color:#111827;
    font-size:clamp(17px,4.8vw,23px);
    line-height:1.45;
    font-weight:950;
    letter-spacing:-.2px;
}
.global-loader-copy small{
    display:block;
    margin-top:4px;
    color:#64748b;
    font-size:12px;
    line-height:1.7;
    font-weight:800;
}
.global-loader-pulse{
    width:44px;
    height:44px;
    border-radius:18px;
    background:linear-gradient(135deg,rgba(15,130,119,.12),rgba(37,99,235,.10));
    border:1px solid rgba(15,130,119,.16);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    color:#0f8277;
    position:relative;
    z-index:1;
}
.global-loader-pulse span{
    width:6px;
    height:18px;
    border-radius:999px;
    background:#0f8277;
    animation:v479PulseBars .86s ease-in-out infinite;
    transform-origin:center;
}
.global-loader-pulse span:nth-child(2){animation-delay:.12s;background:#2563eb;}
.global-loader-pulse span:nth-child(3){animation-delay:.24s;}
@keyframes v479PulseBars{
    0%,100%{transform:scaleY(.42);opacity:.48;}
    45%{transform:scaleY(1);opacity:1;}
}
.global-loader-progress{
    grid-column:1/-1;
    height:5px;
    border-radius:999px;
    background:#e8eef2;
    overflow:hidden;
    position:relative;
    z-index:1;
}
.global-loader-progress span{
    display:block;
    height:100%;
    width:42%;
    border-radius:999px;
    background:linear-gradient(90deg,#2563eb,#0f8277,#22c55e);
    animation:v479ProgressSlide 1.25s ease-in-out infinite;
}
@keyframes v479ProgressSlide{
    0%{transform:translateX(135%);}
    100%{transform:translateX(-245%);}
}
#globalLoader.login-auth-loading .global-loader-card{
    min-height:124px;
}
#globalLoader.login-auth-loading .global-loader-copy small{
    font-size:13px;
}
body.dark-mode .global-loader-card{
    background:rgba(15,23,42,.94);
    border-color:rgba(148,163,184,.35);
    box-shadow:0 24px 70px rgba(0,0,0,.45);
}
body.dark-mode .global-loader-copy strong{color:#f8fafc;}
body.dark-mode .global-loader-copy small{color:#cbd5e1;}
body.dark-mode .global-loader-progress{background:rgba(148,163,184,.25);}

/* Home: wide compact Distribution shortcut under the 2x2 quick actions. */
#homeDistributionTile{
    display:flex !important;
    grid-column:1 / -1 !important;
    min-height:76px !important;
    padding:13px 16px !important;
    flex-direction:row !important;
    justify-content:center !important;
    gap:12px !important;
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#ffffff,#f8fbfc) !important;
}
#homeDistributionTile .tile-icon,
#homeDistributionTile .dt-home-icon{
    width:44px !important;
    height:44px !important;
    border-radius:16px !important;
    font-size:22px !important;
    flex:0 0 auto !important;
}
#homeDistributionTile > span:last-child{
    font-size:18px;
    font-weight:950;
}
#homeDistributionTile::after{
    content:"جاري تجهيز التوزيع والتسليم...";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    background:rgba(255,255,255,.88);
    color:#0f8277;
    font-size:13px;
    font-weight:950;
    opacity:0;
    pointer-events:none;
    transition:opacity .15s ease;
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
}
#homeDistributionTile::before{
    content:"";
    position:absolute;
    width:18px;
    height:18px;
    border-radius:999px;
    border:2px solid rgba(15,130,119,.18);
    border-top-color:#0f8277;
    left:calc(50% + 112px);
    top:50%;
    margin-top:-9px;
    opacity:0;
    z-index:2;
    animation:v479Spin .75s linear infinite;
    pointer-events:none;
}
#homeDistributionTile.v479-loading::after,
#homeDistributionTile.v479-loading::before{
    opacity:1;
}
@keyframes v479Spin{to{transform:rotate(360deg);}}
body.dark-mode #homeDistributionTile::after{
    background:rgba(15,23,42,.86);
    color:#5eead4;
}
@media(max-width:430px){
    #homeDistributionTile{
        min-height:68px !important;
        padding:11px 12px !important;
        gap:10px !important;
    }
    #homeDistributionTile > span:last-child{font-size:16px;}
    #homeDistributionTile .tile-icon,
    #homeDistributionTile .dt-home-icon{width:38px !important;height:38px !important;}
    #homeDistributionTile::before{left:calc(50% + 104px);}
}

/* Header: keep full title card only on Home; use compact version everywhere else. */
body.compact-header-mode .header{
    min-height:64px !important;
    padding:8px 10px !important;
    border-radius:18px !important;
    margin:7px 0 9px !important;
}
body.compact-header-mode .header h1{
    font-size:clamp(14px,3.6vw,18px) !important;
    line-height:1.28 !important;
}
body.compact-header-mode .header p{
    display:none !important;
}
body.compact-header-mode .total-cases-badge{
    margin-top:7px !important;
    padding:4px 8px !important;
    font-size:11px !important;
    line-height:1.2 !important;
    gap:6px !important;
    white-space:nowrap;
    flex-wrap:nowrap !important;
}
body.compact-header-mode .total-cases-badge button{
    padding:2px 7px !important;
    font-size:11px !important;
    line-height:1.2 !important;
    white-space:nowrap;
}
body.home-view .header{
    min-height:initial;
}

/* END css/overrides/home-nav-loading-v479.css */


/* V480 full loading system + settings grid + manage print preview */

/* BEGIN css/overrides/loading-system-v480.css */
/* ============================================================
   V480 LOADING SYSTEM + SETTINGS GRID + MANAGE PDF UI
   Scope:
   1) Shared loading UX primitives: top progress, skeleton, component, retry/empty states, button loader.
   2) Settings page navigation as responsive card/grid buttons.
   3) Manage page wide PDF preview button under CSV/Excel.
   ============================================================ */

/* Top linear loading bar */
.az-v480-top-progress{
    position:fixed;
    top:0;
    right:0;
    width:0%;
    height:4px;
    z-index:100000;
    opacity:0;
    pointer-events:none;
    background:linear-gradient(90deg,#2563eb,#0f8277,#22c55e);
    box-shadow:0 0 13px rgba(37,99,235,.45);
    transition:width .25s ease, opacity .2s ease;
}
.az-v480-top-progress.active{opacity:1;}

/* Component loader overlay */
.az-v480-component-host{position:relative;}
.az-v480-component-loader{
    position:absolute;
    inset:0;
    z-index:25;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-align:center;
    border-radius:inherit;
    background:rgba(255,255,255,.86);
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
    color:#0f8277;
    font-family:'Cairo',sans-serif;
    font-weight:950;
    padding:14px;
}
.az-v480-component-loader small{font-size:12px;color:#64748b;font-weight:800;line-height:1.65;}
.az-v480-spinner{
    width:26px;
    height:26px;
    border-radius:999px;
    border:3px solid rgba(15,130,119,.18);
    border-top-color:#0f8277;
    animation:azV480Spin .78s linear infinite;
    flex:0 0 auto;
}
@keyframes azV480Spin{to{transform:rotate(360deg);}}

/* Skeleton loading */
.az-v480-skeleton-wrap{display:grid;gap:10px;padding:8px 0;}
.az-v480-skeleton-row{
    min-height:74px;
    border-radius:18px;
    border:1px solid rgba(226,232,240,.95);
    background:
        linear-gradient(90deg,#edf3f6 24%,#f9fbfc 38%,#edf3f6 62%);
    background-size:420% 100%;
    animation:azV480Shimmer 1.08s ease-in-out infinite;
    box-shadow:0 6px 14px rgba(15,23,42,.035);
}
.az-v480-skeleton-row.compact{min-height:58px;}
.az-v480-skeleton-line{
    display:block;
    height:15px;
    border-radius:999px;
    background:linear-gradient(90deg,#edf3f6 24%,#f9fbfc 38%,#edf3f6 62%);
    background-size:420% 100%;
    animation:azV480Shimmer 1.08s ease-in-out infinite;
}
@keyframes azV480Shimmer{0%{background-position:100% 0;}100%{background-position:0 0;}}

/* Empty and retry states */
.az-v480-state{
    border:1px solid #e2e8f0;
    background:rgba(255,255,255,.92);
    border-radius:22px;
    padding:18px 14px;
    text-align:center;
    box-shadow:0 8px 20px rgba(15,23,42,.055);
    color:#111827;
    font-family:'Cairo',sans-serif;
}
.az-v480-state-icon{
    width:54px;
    height:54px;
    border-radius:18px;
    margin:0 auto 10px;
    display:grid;
    place-items:center;
    background:#eefaf6;
    font-size:24px;
}
.az-v480-state.retry .az-v480-state-icon{background:#fff1f2;}
.az-v480-state-title{font-weight:950;font-size:16px;margin-bottom:4px;}
.az-v480-state-note{font-weight:750;font-size:12px;line-height:1.7;color:#64748b;margin-bottom:12px;}
.az-v480-state .btn{min-height:42px;padding:9px 14px;border-radius:14px;}

/* Button loader */
.btn.az-v480-btn-loading,
button.az-v480-btn-loading{
    position:relative;
    pointer-events:none !important;
    opacity:.82;
    overflow:hidden;
}
.btn.az-v480-btn-loading::after,
button.az-v480-btn-loading::after{
    content:"";
    display:inline-block;
    width:15px;
    height:15px;
    border-radius:999px;
    border:2px solid rgba(255,255,255,.45);
    border-top-color:#fff;
    animation:azV480Spin .74s linear infinite;
    margin-inline-start:8px;
    vertical-align:-2px;
}
.btn-light.az-v480-btn-loading::after,
.manage-clear-btn.az-v480-btn-loading::after{
    border-color:rgba(15,130,119,.18);
    border-top-color:#0f8277;
}

/* Soft loading bar enhancement */
.soft-loading-bar.open{
    box-shadow:0 12px 28px rgba(15,23,42,.13);
}

/* Settings nav becomes card/grid actions */
#settings .settings-layout{
    gap:14px;
}
#settings .settings-sidebar{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    align-items:stretch;
    background:rgba(255,255,255,.88);
    border:1px solid rgba(226,232,240,.92);
    border-radius:24px;
    padding:14px;
    box-shadow:0 10px 26px rgba(15,23,42,.065);
}
#settings .settings-nav{
    min-height:74px;
    border-radius:20px !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    text-align:center;
    white-space:normal;
    line-height:1.45;
    font-size:clamp(14px,3.7vw,18px) !important;
    font-weight:950 !important;
    padding:12px 10px !important;
    border:1px solid rgba(226,232,240,.98) !important;
    background:linear-gradient(180deg,#fff,#f8fbfc) !important;
    color:#111827 !important;
    box-shadow:0 7px 18px rgba(15,23,42,.045);
}
#settings .settings-nav.active{
    background:linear-gradient(135deg,#2563eb,#0f8277) !important;
    color:#fff !important;
    border-color:rgba(37,99,235,.28) !important;
    box-shadow:0 12px 24px rgba(37,99,235,.16);
}
@media(min-width:760px){
    #settings .settings-sidebar{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:380px){
    #settings .settings-sidebar{grid-template-columns:1fr;}
}

/* Manage export row + wide PDF button */
.manage-export-actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px !important;
    align-items:stretch;
}
.manage-export-actions .export-mini-btn{
    width:100% !important;
    min-height:46px;
}
.manage-pdf-preview-btn{
    grid-column:1 / -1;
    width:100% !important;
    min-height:52px;
    border-radius:18px !important;
    font-size:clamp(15px,4vw,18px) !important;
}

/* Lightweight print preview output */
.az-v480-print-table{width:100%;border-collapse:collapse;font-family:'Cairo',Tahoma,Arial,sans-serif;font-size:12px;}
.az-v480-print-table th,.az-v480-print-table td{border:1px solid #dbe4ea;padding:7px;text-align:right;vertical-align:top;}
.az-v480-print-table th{background:#eefaf6;color:#0f8277;font-weight:950;}
.az-v480-print-title{font-family:'Cairo',Tahoma,Arial,sans-serif;text-align:center;color:#0f8277;margin:0 0 12px;font-size:22px;}
.az-v480-print-note{font-family:'Cairo',Tahoma,Arial,sans-serif;text-align:center;color:#64748b;margin:0 0 14px;font-size:12px;}

body.dark-mode .az-v480-component-loader{background:rgba(15,23,42,.86);color:#5eead4;}
body.dark-mode .az-v480-component-loader small{color:#cbd5e1;}
body.dark-mode .az-v480-state,
body.dark-mode #settings .settings-sidebar{background:rgba(15,23,42,.88);border-color:rgba(148,163,184,.25);color:#f8fafc;}
body.dark-mode #settings .settings-nav{background:rgba(15,23,42,.68) !important;color:#f8fafc !important;border-color:rgba(148,163,184,.25) !important;}
body.dark-mode .az-v480-state-note{color:#cbd5e1;}

/* END css/overrides/loading-system-v480.css */


/* V481 premium UI: cases progress, soft loading polish, compact header, settings cards */

/* BEGIN css/overrides/premium-ui-v481.css */
/* ============================================================
   V481 ULTRA UI / LOADING / COMPACT HEADER PATCH
   Scope:
   - Moving Progress Bar for cases loading inside main title card.
   - Lite moving soft-loading bar for users/settings/general non-blocking loading.
   - Compact settings cards and smaller settings hero.
   - Floating Glass compact user header on scroll, configurable from Design settings.
   ============================================================ */

/* ---------- Cases loading progress inside title card ---------- */
.header{ position:relative; }
.az-v481-cases-progress{
    position:relative;
    z-index:2;
    width:min(520px,92%);
    margin:10px auto 0;
    padding:8px 10px;
    border-radius:18px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.24);
    color:#fff;
    display:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
}
.az-v481-cases-progress.is-active{display:block;animation:azV481FadeIn .18s ease;}
.az-v481-cases-progress-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    font-size:11px;
    font-weight:900;
    margin-bottom:6px;
    color:rgba(255,255,255,.94);
}
.az-v481-cases-progress-track{
    height:7px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.22);
    position:relative;
}
.az-v481-cases-progress-fill{
    width:0%;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#ffffff,#9ee7df,#ffffff);
    box-shadow:0 0 13px rgba(255,255,255,.45);
    transition:width .22s ease;
}
.az-v481-cases-progress-track::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
    transform:translateX(120%);
    animation:azV481ProgressSweep 1.05s ease-in-out infinite;
}
body:not(.home-view) .az-v481-cases-progress{display:none!important;}
@keyframes azV481ProgressSweep{to{transform:translateX(-120%);}}
@keyframes azV481FadeIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}

/* ---------- Soft loading: smaller, transparent, animated, not blocking content ---------- */
.soft-loading-bar{
    top:auto !important;
    bottom:max(14px, calc(env(safe-area-inset-bottom) + 14px)) !important;
    min-width:auto !important;
    width:auto !important;
    max-width:min(360px, calc(100vw - 28px)) !important;
    padding:7px 11px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.72) !important;
    border:1px solid rgba(255,255,255,.62) !important;
    color:#0f172a !important;
    font-size:11.5px !important;
    line-height:1.35 !important;
    gap:7px !important;
    box-shadow:0 10px 26px rgba(15,23,42,.10) !important;
    -webkit-backdrop-filter:blur(16px) saturate(150%) !important;
    backdrop-filter:blur(16px) saturate(150%) !important;
    transform:translateX(-50%) translateY(16px) scale(.98) !important;
}
.soft-loading-bar.open{
    transform:translateX(-50%) translateY(0) scale(1) !important;
}
.soft-loading-spinner{
    width:15px !important;
    height:15px !important;
    border-radius:999px !important;
    border:2px solid rgba(15,130,119,.16) !important;
    border-top-color:#0f8277 !important;
    border-right-color:#2563eb !important;
    animation:azV481SoftSpin .62s linear infinite, azV481SoftPulse 1.2s ease-in-out infinite !important;
}
.soft-loading-bar::after{
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    bottom:4px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,transparent,#0f8277,#2563eb,transparent);
    animation:azV481MiniSweep 1.05s ease-in-out infinite;
    opacity:.72;
}
@keyframes azV481SoftSpin{to{transform:rotate(360deg);}}
@keyframes azV481SoftPulse{0%,100%{opacity:.68;}50%{opacity:1;}}
@keyframes azV481MiniSweep{0%{transform:translateX(48%);opacity:.25;}50%{opacity:.82;}100%{transform:translateX(-48%);opacity:.25;}}
body.dark-mode .soft-loading-bar{
    background:rgba(15,23,42,.72) !important;
    color:#f8fafc !important;
    border-color:rgba(148,163,184,.38) !important;
}

/* ---------- Settings page: smaller hero + compact 2/3 cards row ---------- */
#settings .settings-hero{
    min-height:unset !important;
    padding:10px 14px !important;
    margin:7px 0 10px !important;
    border-radius:20px !important;
}
#settings .settings-hero h2{
    font-size:clamp(20px,5vw,28px) !important;
    line-height:1.35 !important;
    margin:0 !important;
}
#settings .settings-layout{
    display:block !important;
    gap:10px !important;
}
#settings .settings-sidebar{
    position:static !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
    padding:10px !important;
    margin:0 0 12px !important;
    border-radius:20px !important;
    background:rgba(255,255,255,.72) !important;
    -webkit-backdrop-filter:blur(12px) !important;
    backdrop-filter:blur(12px) !important;
    box-shadow:0 8px 22px rgba(15,23,42,.055) !important;
}
#settings .settings-nav{
    min-height:54px !important;
    padding:8px 7px !important;
    border-radius:16px !important;
    font-size:clamp(12.5px,3.5vw,15px) !important;
    line-height:1.35 !important;
    margin:0 !important;
    box-shadow:0 5px 14px rgba(15,23,42,.04) !important;
}
@media(min-width:720px){
    #settings .settings-sidebar{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}
@media(max-width:330px){
    #settings .settings-sidebar{grid-template-columns:1fr !important;}
}
#settings .settings-main{min-width:0;}
#settings .design-settings-grid,
#settings .password-settings-grid{
    gap:10px !important;
}
#settings .design-preview-card{border-radius:18px !important;padding:12px !important;}

/* ---------- Design settings additions ---------- */
.v481-compact-switch{
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border:1px solid rgba(226,232,240,.9);
    border-radius:16px;
    background:rgba(248,250,252,.84);
}
.v481-compact-switch span{font-size:12px;font-weight:900;color:#334155;}
body.dark-mode .v481-compact-switch{background:rgba(15,23,42,.45);border-color:rgba(148,163,184,.25);}
body.dark-mode .v481-compact-switch span{color:#e5e7eb;}

/* ---------- Floating Glass Header — Model 2 compact capsule ---------- */
.app-shell-top.v481-floating-ready{
    transition:width .24s ease,max-width .24s ease,border-radius .24s ease,padding .24s ease,background .24s ease,box-shadow .24s ease,transform .24s ease,margin .24s ease,min-height .24s ease;
    will-change:width,border-radius,transform;
}
.v481-compact-title{
    display:none;
    flex:1 1 auto;
    min-width:0;
    text-align:center;
    color:#0f172a;
    font-size:15px;
    font-weight:950;
    line-height:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    padding:0 8px;
}
body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact{
    width:calc(100% - 44px) !important;
    max-width:390px !important;
    min-height:54px !important;
    margin:0 auto 8px !important;
    padding:6px 8px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.78) !important;
    border:1px solid rgba(255,255,255,.65) !important;
    box-shadow:0 12px 35px rgba(15,23,42,.10) !important;
    -webkit-backdrop-filter:blur(16px) saturate(150%) !important;
    backdrop-filter:blur(16px) saturate(150%) !important;
    gap:6px !important;
}
body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact .top-identity{
    display:none !important;
}
body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact .v481-compact-title{
    display:block;
}
body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact .menu-trigger,
body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact .v4-sync-top-btn{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    border-radius:999px !important;
    box-shadow:none !important;
    flex:0 0 auto;
}
body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact .menu-trigger{
    background:linear-gradient(135deg,#2563eb,#0f8277) !important;
}
body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact .v4-sync-top-btn{
    background:rgba(255,255,255,.58) !important;
    border-color:rgba(15,130,119,.16) !important;
}
body.v481-compact-header-disabled .app-shell-top.v481-floating-ready .v481-compact-title{display:none!important;}
body.dark-mode.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact{
    background:rgba(15,23,42,.76) !important;
    border-color:rgba(148,163,184,.30) !important;
}
body.dark-mode .v481-compact-title{color:#f8fafc;}
body.dark-mode.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact .v4-sync-top-btn{
    background:rgba(30,41,59,.58) !important;
    color:#e5e7eb !important;
}
@media(max-width:430px){
    body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact{
        width:calc(100% - 36px) !important;
        min-height:52px !important;
        max-width:390px !important;
    }
    .v481-compact-title{font-size:14px;}
}

/* END css/overrides/premium-ui-v481.css */


/* V482 compact header stability hotfix — keep after V481 */

/* BEGIN css/overrides/compact-header-stability-v482.css */
/* ============================================================
   V482 COMPACT HEADER STABILITY HOTFIX
   Scope: only the existing app-shell-top compact header.
   Fixes:
   - compact header stays fixed at top while scrolling;
   - no width/height morph jitter;
   - fade-in transition for compact mode;
   - no duplicate header and no change to sidebar/sync actions.
   ============================================================ */

.app-shell-top.v481-floating-ready{
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    backface-visibility:hidden;
    transition:
        opacity .18s ease,
        filter .18s ease,
        background-color .18s ease,
        box-shadow .18s ease,
        border-color .18s ease !important;
    will-change:opacity,filter;
}

body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact{
    position:fixed !important;
    top:max(8px, calc(env(safe-area-inset-top) + 8px)) !important;
    left:50% !important;
    right:auto !important;
    bottom:auto !important;
    transform:translate3d(-50%,0,0) !important;
    width:min(390px, calc(100vw - 36px)) !important;
    max-width:390px !important;
    min-height:54px !important;
    margin:0 !important;
    padding:6px 8px !important;
    border-radius:999px !important;
    z-index:240000 !important;
    opacity:1 !important;
    animation:azV482CompactHeaderFade .18s ease both !important;
    contain:layout paint style;
}

body.v482-compact-header-fading .app-shell-top.v481-floating-ready{
    opacity:.22 !important;
    filter:blur(1.2px) saturate(.92);
    pointer-events:none !important;
}

body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact .top-identity{
    opacity:0 !important;
    visibility:hidden !important;
}

body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact .v481-compact-title{
    display:block !important;
    opacity:1 !important;
    animation:azV482CompactTitleFade .20s ease both !important;
}

body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact .menu-trigger,
body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact .v4-sync-top-btn{
    transform:none !important;
    transition:background-color .16s ease, box-shadow .16s ease, opacity .16s ease !important;
}

body:has(#sidePanel.open) .app-shell-top.v481-floating-ready.is-compact{
    pointer-events:none !important;
}

@keyframes azV482CompactHeaderFade{
    from{opacity:0;filter:blur(2px) saturate(.9);}
    to{opacity:1;filter:blur(0) saturate(1);}
}

@keyframes azV482CompactTitleFade{
    from{opacity:0;transform:translateY(2px);}
    to{opacity:1;transform:translateY(0);}
}

@media(max-width:430px){
    body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact{
        width:calc(100vw - 36px) !important;
        min-height:52px !important;
        top:max(7px, calc(env(safe-area-inset-top) + 7px)) !important;
    }
}

@media(prefers-reduced-motion:reduce){
    .app-shell-top.v481-floating-ready,
    body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact,
    body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact .v481-compact-title{
        animation:none !important;
        transition:none !important;
    }
}

/* END css/overrides/compact-header-stability-v482.css */


/* V483 single-header compact rework — solution 1, keep after V482 */

/* BEGIN css/overrides/single-header-compact-v483.css */
/* ============================================================
   V483 SINGLE HEADER COMPACT REWORK
   Scope: existing .app-shell-top only.
   Goal:
   - one header element only, no duplicate visual header;
   - sticky from the start to avoid fixed/normal jump;
   - internal fade between user identity and center title;
   - normal readable font for compact title "صناع الحياة";
   - neutralizes the V482 fade-mask/fixed behavior without touching data logic.
   ============================================================ */

.app-shell-top.v481-floating-ready{
    position:sticky !important;
    top:max(8px, calc(env(safe-area-inset-top) + 8px)) !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    z-index:200100 !important;
    isolation:isolate;
    overflow:hidden;
    -webkit-transform:translateZ(0) !important;
    transform:translateZ(0) !important;
    backface-visibility:hidden;
    will-change:width,border-radius,background,box-shadow,padding;
    transition:
        width .28s cubic-bezier(.22,.61,.36,1),
        max-width .28s cubic-bezier(.22,.61,.36,1),
        min-height .28s cubic-bezier(.22,.61,.36,1),
        padding .28s cubic-bezier(.22,.61,.36,1),
        margin .28s cubic-bezier(.22,.61,.36,1),
        border-radius .28s cubic-bezier(.22,.61,.36,1),
        background-color .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        backdrop-filter .22s ease !important;
}

/* Neutralize V482 temporary fading. The old mask made the header feel like two headers. */
body.v482-compact-header-fading .app-shell-top.v481-floating-ready{
    opacity:1 !important;
    filter:none !important;
    pointer-events:auto !important;
}

/* Keep the compact title inside the same header, hidden until scroll. */
.app-shell-top.v481-floating-ready .v481-compact-title{
    display:block !important;
    position:absolute;
    inset-inline:64px;
    top:50%;
    transform:translateY(-50%) scale(.98);
    opacity:0;
    pointer-events:none;
    text-align:center;
    color:#0f172a;
    font-family:"Cairo", Tahoma, Arial, sans-serif !important;
    font-size:14.5px;
    font-weight:800;
    letter-spacing:0;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    transition:opacity .22s ease, transform .22s ease, color .2s ease;
}

.app-shell-top.v481-floating-ready .top-identity{
    opacity:1;
    transform:translateY(0) scale(1);
    transition:opacity .20s ease, transform .20s ease, max-width .20s ease;
    will-change:opacity,transform;
}

/* Compact state: same header, same buttons, only inner content fades. */
body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact{
    position:sticky !important;
    top:max(8px, calc(env(safe-area-inset-top) + 8px)) !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:translateZ(0) !important;
    width:min(390px, calc(100% - 44px)) !important;
    max-width:390px !important;
    min-height:54px !important;
    margin:0 auto 8px !important;
    padding:6px 8px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.78) !important;
    border:1px solid rgba(255,255,255,.65) !important;
    box-shadow:0 12px 35px rgba(15,23,42,.10) !important;
    -webkit-backdrop-filter:blur(16px) saturate(150%) !important;
    backdrop-filter:blur(16px) saturate(150%) !important;
    gap:6px !important;
    animation:none !important;
    contain:layout paint;
}

body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact .top-identity{
    opacity:0 !important;
    visibility:visible !important;
    pointer-events:none !important;
    transform:translateY(-2px) scale(.96);
    position:absolute;
    inset-inline:58px;
    max-width:calc(100% - 116px);
}

body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact .v481-compact-title{
    opacity:1 !important;
    transform:translateY(-50%) scale(1);
    animation:none !important;
}

body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact .menu-trigger,
body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact .v4-sync-top-btn{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    border-radius:999px !important;
    flex:0 0 auto;
    transform:none !important;
    transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease !important;
}

body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact .menu-trigger{
    background:linear-gradient(135deg,#2563eb,#0f8277) !important;
}

body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact .v4-sync-top-btn{
    background:rgba(255,255,255,.58) !important;
    border-color:rgba(15,130,119,.16) !important;
    box-shadow:none !important;
}

/* Preserve sidebar fix: the header should not sit over the open side menu. */
body:has(#sidePanel.open) .app-shell-top.v481-floating-ready.is-compact,
body:has(#sidePanel.open) .app-shell-top.v481-floating-ready{
    pointer-events:none !important;
}

body.dark-mode.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact{
    background:rgba(15,23,42,.76) !important;
    border-color:rgba(148,163,184,.30) !important;
    box-shadow:0 12px 35px rgba(0,0,0,.22) !important;
}
body.dark-mode .app-shell-top.v481-floating-ready .v481-compact-title{color:#f8fafc;}
body.dark-mode.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact .v4-sync-top-btn{
    background:rgba(30,41,59,.58) !important;
    color:#e5e7eb !important;
}

@media(max-width:430px){
    body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact{
        width:calc(100% - 36px) !important;
        min-height:52px !important;
        padding:5px 7px !important;
    }
    .app-shell-top.v481-floating-ready .v481-compact-title{
        inset-inline:56px;
        font-size:14px;
        font-weight:800;
    }
}

@media(prefers-reduced-motion:reduce){
    .app-shell-top.v481-floating-ready,
    .app-shell-top.v481-floating-ready .top-identity,
    .app-shell-top.v481-floating-ready .v481-compact-title{
        animation:none !important;
        transition:none !important;
    }
}

/* END css/overrides/single-header-compact-v483.css */


/* V484 fixed-from-start header hotfix — final header controller */

/* BEGIN css/overrides/fixed-header-from-start-v484.css */
/* ============================================================
   V484 FIXED HEADER FROM START HOTFIX
   Scope: existing .app-shell-top only.
   Goal:
   - stop sticky/scroll-container disappearance by using fixed positioning from start;
   - reserve stable top space so content never jumps under the fixed header;
   - keep one header element only; internal fade only between user identity and center title;
   - neutralize V482/V483 visual jitter without touching app logic.
   ============================================================ */

:root{
    --az-v484-header-space:88px;
    --az-v484-header-top:max(10px, calc(env(safe-area-inset-top) + 10px));
}

/* Reserve space for the fixed header while the app is visible. */
#mainApp.v484-fixed-header-ready{
    padding-top:var(--az-v484-header-space) !important;
}

/* The same current user header is fixed from the first frame; it never switches from normal/sticky to fixed. */
body.v484-fixed-header-from-start #mainApp .app-shell-top.v481-floating-ready,
body.v484-fixed-header-from-start #mainApp .app-shell-top.v483-single-header-ready,
body.v484-fixed-header-from-start #mainApp .app-shell-top.v484-fixed-header-ready{
    position:fixed !important;
    top:var(--az-v484-header-top) !important;
    left:50% !important;
    right:auto !important;
    bottom:auto !important;
    width:min(980px, calc(100vw - 20px)) !important;
    max-width:calc(100vw - 20px) !important;
    min-height:68px !important;
    margin:0 !important;
    padding:10px 13px !important;
    border-radius:24px !important;
    z-index:240000 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    overflow:hidden !important;
    opacity:1 !important;
    filter:none !important;
    transform:translate3d(-50%,0,0) !important;
    -webkit-transform:translate3d(-50%,0,0) !important;
    backface-visibility:hidden !important;
    isolation:isolate !important;
    contain:none !important;
    will-change:width,min-height,padding,border-radius,background-color,box-shadow,border-color !important;
    transition:
        width .26s cubic-bezier(.22,.61,.36,1),
        max-width .26s cubic-bezier(.22,.61,.36,1),
        min-height .26s cubic-bezier(.22,.61,.36,1),
        padding .26s cubic-bezier(.22,.61,.36,1),
        border-radius .26s cubic-bezier(.22,.61,.36,1),
        background-color .20s ease,
        border-color .20s ease,
        box-shadow .20s ease,
        backdrop-filter .20s ease !important;
}

/* Kill old header-wide fade mask. It created the feeling that a second header appears. */
body.v482-compact-header-fading #mainApp .app-shell-top.v481-floating-ready,
body.v484-fixed-header-from-start #mainApp .app-shell-top.v481-floating-ready{
    pointer-events:auto !important;
}
body.v484-fixed-header-from-start.v482-compact-header-fading #mainApp .app-shell-top.v481-floating-ready{
    opacity:1 !important;
    filter:none !important;
}

/* Compact title is always inside the same header, hidden until compact state. */
body.v484-fixed-header-from-start #mainApp .app-shell-top.v481-floating-ready .v481-compact-title,
body.v484-fixed-header-from-start #mainApp .app-shell-top.v484-fixed-header-ready .v481-compact-title{
    display:block !important;
    position:absolute !important;
    inset-inline:62px !important;
    top:50% !important;
    transform:translateY(-50%) scale(.98) !important;
    opacity:0 !important;
    visibility:visible !important;
    pointer-events:none !important;
    text-align:center !important;
    color:#0f172a !important;
    font-family:"Cairo", Tahoma, Arial, sans-serif !important;
    font-size:14.5px !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    padding:0 6px !important;
    transition:opacity .22s ease, transform .22s ease, color .18s ease !important;
}

body.v484-fixed-header-from-start #mainApp .app-shell-top.v481-floating-ready .top-identity{
    display:block !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:translateY(0) scale(1) !important;
    transition:opacity .20s ease, transform .20s ease !important;
    will-change:opacity,transform !important;
}

/* Compact state: the header stays fixed in the exact same top layer; only dimensions and inner content change. */
body.v484-fixed-header-from-start.v481-compact-header-active #mainApp .app-shell-top.v481-floating-ready.is-compact,
body.v484-fixed-header-from-start.v481-compact-header-active #mainApp .app-shell-top.v484-fixed-header-ready.is-compact{
    position:fixed !important;
    top:max(8px, calc(env(safe-area-inset-top) + 8px)) !important;
    left:50% !important;
    right:auto !important;
    bottom:auto !important;
    width:min(390px, calc(100vw - 36px)) !important;
    max-width:390px !important;
    min-height:54px !important;
    margin:0 !important;
    padding:6px 8px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.78) !important;
    border:1px solid rgba(255,255,255,.65) !important;
    box-shadow:0 12px 35px rgba(15,23,42,.10) !important;
    -webkit-backdrop-filter:blur(16px) saturate(150%) !important;
    backdrop-filter:blur(16px) saturate(150%) !important;
    gap:6px !important;
    transform:translate3d(-50%,0,0) !important;
    -webkit-transform:translate3d(-50%,0,0) !important;
    animation:none !important;
    opacity:1 !important;
    filter:none !important;
}

body.v484-fixed-header-from-start.v481-compact-header-active #mainApp .app-shell-top.v481-floating-ready.is-compact .top-identity{
    opacity:0 !important;
    pointer-events:none !important;
    transform:translateY(-2px) scale(.96) !important;
}

body.v484-fixed-header-from-start.v481-compact-header-active #mainApp .app-shell-top.v481-floating-ready.is-compact .v481-compact-title{
    opacity:1 !important;
    transform:translateY(-50%) scale(1) !important;
    animation:none !important;
}

body.v484-fixed-header-from-start.v481-compact-header-active #mainApp .app-shell-top.v481-floating-ready.is-compact .menu-trigger,
body.v484-fixed-header-from-start.v481-compact-header-active #mainApp .app-shell-top.v481-floating-ready.is-compact .v4-sync-top-btn{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    flex:0 0 auto !important;
    border-radius:999px !important;
    transform:none !important;
    transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, opacity .18s ease !important;
}

body.v484-fixed-header-from-start.v481-compact-header-active #mainApp .app-shell-top.v481-floating-ready.is-compact .menu-trigger{
    background:linear-gradient(135deg,#2563eb,#0f8277) !important;
}
body.v484-fixed-header-from-start.v481-compact-header-active #mainApp .app-shell-top.v481-floating-ready.is-compact .v4-sync-top-btn{
    background:rgba(255,255,255,.58) !important;
    border-color:rgba(15,130,119,.16) !important;
    box-shadow:none !important;
}

/* Sidebar must stay above the fixed header. */
body.v484-fixed-header-from-start:has(#sidePanel.open) #mainApp .app-shell-top.v481-floating-ready,
body.v484-fixed-header-from-start:has(#sidePanel.open) #mainApp .app-shell-top.v484-fixed-header-ready{
    pointer-events:none !important;
}

body.dark-mode.v484-fixed-header-from-start.v481-compact-header-active #mainApp .app-shell-top.v481-floating-ready.is-compact{
    background:rgba(15,23,42,.76) !important;
    border-color:rgba(148,163,184,.30) !important;
    box-shadow:0 12px 35px rgba(0,0,0,.22) !important;
}
body.dark-mode.v484-fixed-header-from-start #mainApp .app-shell-top.v481-floating-ready .v481-compact-title{color:#f8fafc !important;}
body.dark-mode.v484-fixed-header-from-start.v481-compact-header-active #mainApp .app-shell-top.v481-floating-ready.is-compact .v4-sync-top-btn{
    background:rgba(30,41,59,.58) !important;
    color:#e5e7eb !important;
}

@media(max-width:430px){
    #mainApp.v484-fixed-header-ready{padding-top:var(--az-v484-header-space) !important;}
    body.v484-fixed-header-from-start #mainApp .app-shell-top.v481-floating-ready,
    body.v484-fixed-header-from-start #mainApp .app-shell-top.v484-fixed-header-ready{
        width:calc(100vw - 20px) !important;
        min-height:66px !important;
        padding:9px 10px !important;
        border-radius:22px !important;
    }
    body.v484-fixed-header-from-start.v481-compact-header-active #mainApp .app-shell-top.v481-floating-ready.is-compact,
    body.v484-fixed-header-from-start.v481-compact-header-active #mainApp .app-shell-top.v484-fixed-header-ready.is-compact{
        width:calc(100vw - 36px) !important;
        min-height:52px !important;
        padding:5px 7px !important;
    }
    body.v484-fixed-header-from-start #mainApp .app-shell-top.v481-floating-ready .v481-compact-title{
        inset-inline:56px !important;
        font-size:14px !important;
        font-weight:800 !important;
    }
}

@media(prefers-reduced-motion:reduce){
    body.v484-fixed-header-from-start #mainApp .app-shell-top.v481-floating-ready,
    body.v484-fixed-header-from-start #mainApp .app-shell-top.v481-floating-ready .top-identity,
    body.v484-fixed-header-from-start #mainApp .app-shell-top.v481-floating-ready .v481-compact-title{
        animation:none !important;
        transition:none !important;
    }
}

/* END css/overrides/fixed-header-from-start-v484.css */



/* V485 print/header/loading polish — keep last */

/* BEGIN css/overrides/print-header-loading-v485.css */
/* ============================================================
   V486 HOTFIX over V485 PRINT / HEADER / CASES-LOADING POLISH
   Scope:
   - cases loading progress appears on every tab only while loading;
   - title card returns to its natural size after loading;
   - compact header title/font and fade polish remain active.
   ============================================================ */

/* Cases loading progress: available on all tabs, but does not reserve space after loading. */
#mainApp .header .az-v481-cases-progress,
body:not(.home-view) #mainApp .header .az-v481-cases-progress{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    min-height:0 !important;
    height:0 !important;
    margin:0 auto !important;
    padding:0 !important;
    transform:translateY(-4px) !important;
    overflow:hidden !important;
    transition:opacity .24s ease, transform .24s ease, visibility .24s ease !important;
}

#mainApp .header .az-v481-cases-progress.is-active,
body:not(.home-view) #mainApp .header .az-v481-cases-progress.is-active{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    width:min(520px,92%) !important;
    height:auto !important;
    min-height:0 !important;
    margin:10px auto 0 !important;
    padding:8px 10px !important;
    transform:translateY(0) !important;
    overflow:hidden !important;
}

/* Restore normal title-card sizing after progress disappears. */
body.compact-header-mode #mainApp .header{
    min-height:64px !important;
}
body.home-view #mainApp .header{
    min-height:initial !important;
}

/* Compact header: normal readable font, less squeezed/heavy than previous hotfixes. */
body.v484-fixed-header-from-start #mainApp .app-shell-top.v481-floating-ready .v481-compact-title,
body.v484-fixed-header-from-start #mainApp .app-shell-top.v484-fixed-header-ready .v481-compact-title{
    font-family:Tahoma, Arial, "Cairo", sans-serif !important;
    font-size:15px !important;
    font-weight:700 !important;
    letter-spacing:0 !important;
    line-height:1.25 !important;
    transition:
        opacity .42s ease,
        transform .42s cubic-bezier(.22,.61,.36,1),
        color .28s ease !important;
}

body.v484-fixed-header-from-start #mainApp .app-shell-top.v481-floating-ready .top-identity{
    transition:
        opacity .38s ease,
        transform .38s cubic-bezier(.22,.61,.36,1) !important;
}

body.v484-fixed-header-from-start #mainApp .app-shell-top.v481-floating-ready,
body.v484-fixed-header-from-start #mainApp .app-shell-top.v483-single-header-ready,
body.v484-fixed-header-from-start #mainApp .app-shell-top.v484-fixed-header-ready{
    transition:
        width .34s cubic-bezier(.22,.61,.36,1),
        max-width .34s cubic-bezier(.22,.61,.36,1),
        min-height .34s cubic-bezier(.22,.61,.36,1),
        padding .34s cubic-bezier(.22,.61,.36,1),
        border-radius .34s cubic-bezier(.22,.61,.36,1),
        background-color .26s ease,
        border-color .26s ease,
        box-shadow .26s ease,
        backdrop-filter .26s ease !important;
}

@media(max-width:430px){
    body.v484-fixed-header-from-start #mainApp .app-shell-top.v481-floating-ready .v481-compact-title,
    body.v484-fixed-header-from-start #mainApp .app-shell-top.v484-fixed-header-ready .v481-compact-title{
        font-size:14.5px !important;
        font-weight:700 !important;
    }
}

/* END css/overrides/print-header-loading-v485.css */


/* V491 premium image editor final integration — keep last */

/* BEGIN css/overrides/full-image-editor-v491.css */
/* ============================================================
   V491 — Premium full-screen card image editor integration
   Purpose: replace the long modal editor with a native fullscreen editor.
   Scope: image editor UI only; no upload schema/backend changes.
   ============================================================ */

html.azkar-image-editor-open,
body.azkar-image-editor-open{
  overflow: hidden !important;
  touch-action: none;
  overscroll-behavior: none;
}

.azkar-image-editor-overlay{
  --az-editor-bg:#070b12;
  --az-editor-panel:#0c1320;
  --az-editor-line:rgba(255,255,255,.12);
  --az-editor-text:#f8fafc;
  --az-editor-muted:#a3adba;
  --az-editor-accent:#18d68f;
  --az-editor-danger:#ef4444;
  --az-editor-safe-top:env(safe-area-inset-top,0px);
  --az-editor-safe-bottom:env(safe-area-inset-bottom,0px);
  --az-editor-top-h:54px;
  --az-editor-bottom-h:114px;
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: none;
  overflow: hidden;
  background: #000;
  color: var(--az-editor-text);
  font-family: "Cairo", "Tahoma", Arial, sans-serif;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.azkar-image-editor-overlay *{
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.azkar-image-editor-overlay button{
  font-family: inherit;
}

.azkar-image-editor{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: radial-gradient(circle at 50% -10%, #1b2d3e 0, #08101b 46%, #03060a 100%);
}

.azkar-image-editor-topbar{
  height: calc(var(--az-editor-top-h) + var(--az-editor-safe-top));
  padding-top: var(--az-editor-safe-top);
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  gap: 4px;
  align-items: center;
  background: rgba(8,13,21,.82);
  border-bottom: 1px solid var(--az-editor-line);
  backdrop-filter: blur(18px);
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

.azkar-editor-title{
  text-align: center;
  line-height: 1.1;
  padding-top: 2px;
  min-width: 0;
}

.azkar-editor-title strong{
  display: block;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .2px;
}

.azkar-editor-title span{
  display: block;
  margin-top: 5px;
  color: var(--az-editor-muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.azkar-editor-top-btn{
  width: 40px;
  height: 40px;
  border-radius: 15px;
  margin: auto;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.azkar-editor-top-btn svg{
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

.azkar-editor-top-btn.danger{
  font-size: 28px;
}

.azkar-editor-stage-wrap{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.azkar-editor-stage{
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 580px;
  border-radius: 28px;
  overflow: hidden;
  background: #02050a;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 26px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}

.azkar-editor-stage::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.035) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.035) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.035) 75%);
  background-size: 32px 32px;
  background-position: 0 0, 0 16px, 16px -16px, -16px 0;
  opacity: .42;
  pointer-events: none;
  z-index: 0;
}

#cropViewCanvas,
#cropLayerCanvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

#cropViewCanvas{ z-index: 1; }
#cropLayerCanvas{ z-index: 4; }

.azkar-editor-mode-pill{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 8;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(11,17,27,.66);
  color: #eafaf3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
  backdrop-filter: blur(16px);
  pointer-events: none;
}

.azkar-editor-mode-pill i{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--az-editor-accent);
  box-shadow: 0 0 0 5px rgba(24,214,143,.12);
}

.azkar-editor-lens{
  position: absolute;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 18px 45px rgba(0,0,0,.42), 0 0 0 2px rgba(24,214,143,.36);
  z-index: 30;
  pointer-events: none;
  display: none;
  background: #000;
  transform: translateZ(0);
}

.azkar-editor-lens canvas{
  width: 100%;
  height: 100%;
  display: block;
}

.azkar-editor-toolbar{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 12;
  min-height: 54px;
  border-radius: 23px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,13,21,.74);
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px;
  box-shadow: 0 18px 54px rgba(0,0,0,.36);
}

.azkar-editor-tool{
  height: 42px;
  min-width: 42px;
  border-radius: 17px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.045);
  color: #f7fbff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 9px;
  font-weight: 900;
  font-size: 11px;
  white-space: nowrap;
}

.azkar-editor-tool svg{
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.azkar-editor-tool.active{
  border-color: rgba(24,214,143,.62);
  background: rgba(24,214,143,.14);
  color: #c8ffe8;
}

.azkar-editor-tool.warning{
  color: #facc15;
}

.azkar-editor-tool span{ display: none; }
.azkar-editor-tool.wide span{ display: inline; }

.azkar-editor-bottombar{
  height: calc(var(--az-editor-bottom-h) + var(--az-editor-safe-bottom));
  padding: 12px 12px calc(12px + var(--az-editor-safe-bottom));
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  gap: 10px;
  background: rgba(7,11,18,.96);
  border-top: 1px solid var(--az-editor-line);
  box-shadow: 0 -12px 30px rgba(0,0,0,.34);
  z-index: 20;
}

.azkar-editor-action{
  height: 60px;
  border-radius: 23px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.azkar-editor-action.primary{
  background: linear-gradient(135deg, #19dc8b, #0db976 55%, #1767ff);
  border-color: rgba(255,255,255,.18);
  color: #06140f;
  box-shadow: 0 12px 36px rgba(24,214,143,.25), inset 0 1px 0 rgba(255,255,255,.25);
}

.azkar-editor-status{
  position: absolute;
  left: 50%;
  bottom: 78px;
  transform: translateX(-50%) translateY(20px);
  z-index: 40;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #111827;
  font-size: 12px;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  transition: .22s ease;
  white-space: nowrap;
}

.azkar-editor-status.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.azkar-image-editor.preview-mode #cropLayerCanvas,
.azkar-image-editor.preview-mode .azkar-editor-toolbar,
.azkar-image-editor.preview-mode .azkar-editor-mode-pill{
  display: none;
}

.azkar-image-editor.preview-mode .azkar-editor-stage::after{
  content: "معاينة النتيجة";
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 8;
  height: 36px;
  border-radius: 999px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  background: rgba(24,214,143,.12);
  border: 1px solid rgba(24,214,143,.42);
  color: #c8ffe8;
  font-size: 12px;
  font-weight: 900;
  backdrop-filter: blur(14px);
}

.azkar-editor-processing{
  position: fixed;
  inset: 0;
  z-index: 2147483640;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2,6,12,.72);
  backdrop-filter: blur(10px);
  padding: 22px;
}

.azkar-editor-processing.show{ display: flex; }

.azkar-editor-processing-card{
  min-width: 230px;
  border-radius: 26px;
  padding: 22px 18px;
  background: linear-gradient(180deg, rgba(17,24,39,.94), rgba(7,11,18,.96));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 70px rgba(0,0,0,.48);
  display: grid;
  gap: 13px;
  justify-items: center;
  text-align: center;
}

.azkar-editor-spinner{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.12);
  border-top-color: var(--az-editor-accent);
  animation: az-editor-spin .8s linear infinite;
}

.azkar-editor-processing-title{
  font-weight: 900;
  font-size: 16px;
}

.azkar-editor-processing-sub{
  font-size: 12px;
  color: var(--az-editor-muted);
  line-height: 1.7;
}

@keyframes az-editor-spin{ to{ transform: rotate(360deg); } }

@media(max-width:390px){
  .azkar-editor-title strong{ font-size:18px; }
  .azkar-editor-title span{ font-size:10.5px; }
  .azkar-editor-tool{ min-width:38px; height:40px; padding:0 7px; }
  .azkar-editor-bottombar{ gap:8px; padding-left:8px; padding-right:8px; }
  .azkar-editor-action{ font-size:13.5px; }
  .azkar-editor-stage-wrap{ padding:8px; }
  .azkar-editor-toolbar{ left:8px; right:8px; gap:5px; }
  .azkar-editor-mode-pill{ font-size:11px; }
}

/* END css/overrides/full-image-editor-v491.css */


/* V492 region manager security UI + role structure + image lens polish */

/* BEGIN css/overrides/region-manager-role-structure-v492.css */

/* ============================================================
   V492 — Region Manager / Role Structure / Premium User UI
   ============================================================ */
.role-structure-grid,
.region-manager-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;
}
.v492-premium-panel,
.v492-role-card,
.v492-region-scope-card{
  border:1px solid rgba(29,120,255,.14);
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(244,249,255,.86));
  border-radius:24px;
  box-shadow:0 18px 44px rgba(14,55,98,.10);
  padding:18px;
  margin:14px 0;
}
.v492-panel-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px;
}
.v492-panel-head h4,.v492-panel-head h3{margin:0;color:#0f172a;font-weight:900;}
.v492-panel-head p{margin:6px 0 0;color:#64748b;line-height:1.7;}
.v492-role-card{position:relative;overflow:hidden;}
.v492-role-card:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#168b78,#276ef1);}
.v492-role-meta{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;}
.v492-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 11px;background:#edf6ff;color:#155e75;font-weight:800;font-size:.85rem;border:1px solid rgba(21,94,117,.12);}
.v492-chip.lock{background:#fff1f2;color:#be123c;border-color:rgba(190,18,60,.12);}
.v492-chip.ok{background:#ecfdf5;color:#047857;border-color:rgba(4,120,87,.14);}
.v492-lock-card{position:relative;}
.v492-lock-card.locked-option,.locked-option{
  position:relative;
  filter:saturate(.75);
}
.locked-option:after{
  content:"🔒";
  position:absolute;
  top:6px;
  inset-inline-start:7px;
  width:24px;height:24px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#0f172a,#334155);
  color:#fff;font-size:13px;box-shadow:0 8px 18px rgba(15,23,42,.18);
  pointer-events:none;
}
.v492-region-scope-card{background:linear-gradient(145deg,#f8fbff,#ffffff);}
.v492-scope-badge{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:18px;
  background:linear-gradient(135deg,#0f9f8c,#2f6df6);color:#fff;font-weight:900;box-shadow:0 10px 28px rgba(47,109,246,.18);
}
.v492-regions-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;margin-top:10px;max-height:210px;overflow:auto;padding:8px;border-radius:18px;background:rgba(248,250,252,.75);border:1px solid rgba(148,163,184,.18);}
.v492-regions-box label,
.v492-check-card{
  display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:15px;background:#fff;border:1px solid rgba(148,163,184,.22);font-weight:800;color:#1e293b;
}
.v492-check-card input,.v492-regions-box input{accent-color:#138b7d;transform:scale(1.15)}
.v492-permission-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.v492-perm-group{border:1px solid rgba(148,163,184,.2);border-radius:18px;padding:12px;background:rgba(255,255,255,.78);}
.v492-perm-group h5{margin:0 0 10px;color:#1d4ed8;font-weight:900;}
.v492-premium-user-form .permission-box{border-radius:24px;border:1px solid rgba(148,163,184,.18);box-shadow:0 12px 28px rgba(15,23,42,.06);}
.v492-denied-toast{font-weight:900;}
.v492-role-builder-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.v492-role-builder-form .wide{grid-column:1/-1;}
.v492-mini-help{font-size:.86rem;color:#64748b;line-height:1.7;margin-top:6px;}
.v492-toolbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin:10px 0;}
.v492-soft-list{display:flex;flex-wrap:wrap;gap:8px;}
body.dark-mode .v492-premium-panel,
body.dark-mode .v492-role-card,
body.dark-mode .v492-region-scope-card,
body.dark-mode .v492-perm-group,
body.dark-mode .v492-check-card,
body.dark-mode .v492-regions-box label{background:linear-gradient(145deg,rgba(15,23,42,.92),rgba(17,24,39,.86));border-color:rgba(148,163,184,.18);color:#e5e7eb;}
body.dark-mode .v492-panel-head h4,body.dark-mode .v492-panel-head h3{color:#f8fafc;}
body.dark-mode .v492-panel-head p,body.dark-mode .v492-mini-help{color:#94a3b8;}
/* Lens polish — bigger lens + wider preview range */
.azkar-editor-lens{width:118px!important;height:118px!important;border-width:2px!important;}
@media(max-width:480px){
  .v492-permission-groups,.role-structure-grid,.region-manager-grid{grid-template-columns:1fr;}
  .v492-panel-head{flex-direction:column;}
  .azkar-editor-lens{width:112px!important;height:112px!important;}
}

/* END css/overrides/region-manager-role-structure-v492.css */


/* V493 region manager hotfix + users/roles polish — keep after V492 */

/* BEGIN css/overrides/region-manager-hotfix-v493.css */
/* ============================================================
   V493 — Region Manager Hotfix UI polish
   Conservative layer after V492.
   ============================================================ */
body.v493-region-manager-user #homeDashboard .home-follow-card,
body.v493-region-manager-user #homeDashboard > .home-activity-card{
  display:none !important;
}
.v493-region-scope-home-card{
  margin:14px 0;
  padding:16px 18px;
  border-radius:24px;
  border:1px solid rgba(20,184,166,.20);
  background:linear-gradient(135deg,rgba(236,253,245,.92),rgba(239,246,255,.94));
  box-shadow:0 16px 38px rgba(15,23,42,.08);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.v493-region-scope-home-card strong{
  font-weight:900;
  color:#0f766e;
  font-size:1rem;
}
.v493-region-scope-home-card span{
  color:#334155;
  line-height:1.7;
  font-weight:800;
}
.v493-manual-region-entry{
  grid-column:1/-1;
  border:1px dashed rgba(37,99,235,.30);
  background:rgba(239,246,255,.72);
  border-radius:18px;
  padding:12px;
}
.v493-manual-region-entry label{
  display:block;
  padding:0 0 7px 0;
  background:transparent;
  border:0;
  font-weight:900;
  color:#1e3a8a;
}
.v493-manual-region-entry input{
  width:100%;
  min-height:42px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.35);
  padding:10px 12px;
  font-weight:800;
  background:#fff;
}
.v493-user-card.user-card-compact{
  border:1px solid rgba(37,99,235,.12) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,250,252,.94));
}
.v493-user-card .user-card-main{
  align-items:center;
}
.v493-user-card .user-card-info h3{
  font-size:1.02rem;
  font-weight:950;
  letter-spacing:-.2px;
}
.v493-user-card .permissions-details.open{
  background:linear-gradient(145deg,rgba(248,250,252,.95),rgba(255,255,255,.98));
  border-radius:20px;
  margin-top:12px;
  padding:14px;
  border:1px solid rgba(148,163,184,.18);
}
.v493-perm-header{
  flex-basis:100%;
  font-weight:950;
  color:#0f172a;
  margin:0 0 4px;
}
.v493-user-card .perm-pills{
  gap:8px;
}
.v493-user-card .perm-pill{
  border-radius:999px;
  padding:7px 11px;
  font-weight:850;
}
.v493-role-card.v492-role-card{
  min-height:190px;
  border-color:rgba(20,184,166,.18);
}
.v493-role-card .v492-panel-head h4{
  font-size:1.05rem;
}
.v493-role-card .modal-actions{
  margin-top:14px;
}
.v493-role-card .mini-btn{
  border-radius:14px;
  padding:10px 14px;
  font-weight:900;
}
body.dark-mode .v493-region-scope-home-card,
body.dark-mode .v493-user-card.user-card-compact,
body.dark-mode .v493-user-card .permissions-details.open,
body.dark-mode .v493-manual-region-entry{
  background:linear-gradient(145deg,rgba(15,23,42,.92),rgba(17,24,39,.88));
  border-color:rgba(148,163,184,.22);
}
body.dark-mode .v493-region-scope-home-card strong,
body.dark-mode .v493-perm-header,
body.dark-mode .v493-manual-region-entry label{
  color:#67e8f9;
}
body.dark-mode .v493-region-scope-home-card span{
  color:#cbd5e1;
}
body.dark-mode .v493-manual-region-entry input{
  background:#0f172a;
  color:#e5e7eb;
  border-color:rgba(148,163,184,.28);
}

/* END css/overrides/region-manager-hotfix-v493.css */



/* V496 admin modal screens + role nav + lock-not-hide polish */

/* BEGIN css/overrides/v496-admin-role-ui-locks-fix.css */
/* ============================================================
   V496 — Admin / Roles modal screens + lock-not-hide polish
   ============================================================ */
body.v496-admin-modal-open{overflow:hidden!important;}
.v496-admin-modal-backdrop{
  position:fixed; inset:0; z-index:9997;
  background:rgba(12,24,39,.46);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
#userFormBox.v496-admin-modal,
#roleDefinitionFormBox.v496-admin-modal{
  position:fixed!important;
  inset:calc(env(safe-area-inset-top,0px) + 10px) 12px calc(env(safe-area-inset-bottom,0px) + 10px) 12px!important;
  z-index:9998!important;
  display:block!important;
  width:auto!important;
  max-width:980px!important;
  margin:0 auto!important;
  overflow:auto!important;
  border-radius:28px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,251,255,.96))!important;
  border:1px solid rgba(37,99,235,.16)!important;
  box-shadow:0 24px 80px rgba(15,23,42,.30), inset 0 1px 0 rgba(255,255,255,.78)!important;
  padding:18px 16px 22px!important;
  direction:rtl;
  overscroll-behavior:contain;
}
#userFormBox.v496-admin-modal:before,
#roleDefinitionFormBox.v496-admin-modal:before{
  content:""; position:sticky; top:-18px; display:block; height:5px; width:92px; margin:0 auto 12px;
  border-radius:999px; background:rgba(15,23,42,.18); z-index:2;
}
.v496-admin-modal .form-header-line,
#roleDefinitionFormBox.v496-admin-modal .v492-panel-head{
  position:sticky; top:0; z-index:3;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.88));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-radius:22px;
  padding:12px 14px;
  margin:-4px 0 14px;
  border:1px solid rgba(15,23,42,.08);
}
.v496-modal-close{
  position:absolute; top:18px; inset-inline-start:18px; z-index:4;
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.88);
  color:#0f172a; font-size:24px; font-weight:900; line-height:1;
  box-shadow:0 10px 28px rgba(15,23,42,.12);
  cursor:pointer;
}
.v496-admin-modal .permission-box,
.v496-admin-modal .v492-region-scope-card,
.v496-admin-modal .v492-perm-group{
  border-radius:22px!important;
  border:1px solid rgba(15,23,42,.08)!important;
  background:rgba(255,255,255,.82)!important;
  box-shadow:0 12px 32px rgba(15,23,42,.06)!important;
}
.v496-admin-modal .form-actions-line,
.v496-admin-modal .modal-actions{
  position:sticky; bottom:-22px; z-index:3;
  background:linear-gradient(0deg,rgba(255,255,255,.98),rgba(255,255,255,.88));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(15,23,42,.08);
  padding:12px 0 4px;
  margin-top:16px;
}
.locked-option,
.v496-locked-panel{
  position:relative!important;
  opacity:.78;
  filter:saturate(.82);
}
.locked-option:after,
.v496-locked-panel:after{
  content:"🔒";
  position:absolute;
  top:10px;
  inset-inline-start:10px;
  min-width:30px; height:30px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 8px 24px rgba(15,23,42,.16);
  font-size:15px;
  z-index:5;
  pointer-events:none;
}
.side-submenu .locked-option,
.settings-sidebar .locked-option{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  padding-inline-start:42px!important;
}
.side-submenu .locked-option:after,
.settings-sidebar .locked-option:after{
  top:50%; transform:translateY(-50%);
  inset-inline-start:8px;
  width:26px; height:26px; min-width:26px;
  font-size:13px;
}
#sideNotificationsItem.locked-option{display:flex!important;}
.v496-locked-panel{pointer-events:auto;}
.v496-locked-panel > *{pointer-events:none;}
.v496-locked-panel:before{
  content:"ليس من صلاحياتك الوصول لهذه البيانات";
  position:absolute;
  inset:auto 16px 16px 16px;
  z-index:4;
  border-radius:18px;
  padding:12px 14px;
  text-align:center;
  font-weight:800;
  color:#334155;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 12px 30px rgba(15,23,42,.10);
  pointer-events:none;
}
body.dark-mode #userFormBox.v496-admin-modal,
body.dark-mode #roleDefinitionFormBox.v496-admin-modal{
  background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(17,24,39,.96))!important;
  border-color:rgba(148,163,184,.22)!important;
}
body.dark-mode .v496-admin-modal .form-header-line,
body.dark-mode #roleDefinitionFormBox.v496-admin-modal .v492-panel-head,
body.dark-mode .v496-admin-modal .form-actions-line,
body.dark-mode .v496-admin-modal .modal-actions{
  background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(15,23,42,.86));
  border-color:rgba(148,163,184,.18);
}
body.dark-mode .v496-modal-close{background:rgba(15,23,42,.90); color:#f8fafc; border-color:rgba(148,163,184,.22);}
@media (min-width:820px){
  #userFormBox.v496-admin-modal,
  #roleDefinitionFormBox.v496-admin-modal{inset-inline:50%; transform:translateX(50%); width:min(960px,calc(100vw - 40px))!important;}
}
@media (max-width:560px){
  #userFormBox.v496-admin-modal,
  #roleDefinitionFormBox.v496-admin-modal{inset:calc(env(safe-area-inset-top,0px) + 6px) 8px calc(env(safe-area-inset-bottom,0px) + 6px) 8px!important; border-radius:24px!important; padding:14px 12px 18px!important;}
  .v496-modal-close{top:14px; inset-inline-start:14px; width:38px; height:38px;}
}

/* END css/overrides/v496-admin-role-ui-locks-fix.css */



/* V498 sidebar lock normalization + sensitive admin nav hiding */

/* BEGIN css/overrides/v498-sidebar-locks-security-ui.css */
/* ============================================================
   V498 — Sidebar lock normalization + sensitive admin nav hiding
   ============================================================ */
.v498-sensitive-hidden{display:none!important;visibility:hidden!important;pointer-events:none!important;}

.side-submenu .locked-option,
.settings-sidebar .locked-option,
.v417-side-item.locked-option,
#sideNotificationsItem.locked-option{
  display:flex!important;
  position:relative!important;
  opacity:.64!important;
  filter:saturate(.74) contrast(.96)!important;
  cursor:not-allowed!important;
}

.side-submenu .locked-option::after,
.settings-sidebar .locked-option::after,
.v417-side-item.locked-option::after,
#sideNotificationsItem.locked-option::after{
  content:"🔒"!important;
  position:absolute!important;
  top:50%!important;
  inset-inline-start:10px!important;
  transform:translateY(-50%)!important;
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  border-radius:999px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(15,23,42,.12)!important;
  box-shadow:0 8px 22px rgba(15,23,42,.14)!important;
  font-size:13px!important;
  line-height:1!important;
  pointer-events:none!important;
  z-index:8!important;
}

.side-submenu .locked-option,
.settings-sidebar .locked-option{
  padding-inline-start:46px!important;
}

.side-submenu .locked-option:hover,
.settings-sidebar .locked-option:hover,
.v417-side-item.locked-option:hover,
#sideNotificationsItem.locked-option:hover{
  opacity:.78!important;
  transform:none!important;
}

.v498-settings-denied-panel.active{display:block!important;}
.v498-denied-card{
  margin:18px 0;
  padding:22px 18px;
  border-radius:24px;
  text-align:center;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 14px 36px rgba(15,23,42,.08);
  color:#334155;
}
.v498-denied-card strong{display:block;font-size:18px;color:#0f172a;margin-bottom:8px;}
.v498-denied-card p{margin:0;color:#64748b;font-weight:700;line-height:1.8;}

body.dark-mode .side-submenu .locked-option::after,
body.dark-mode .settings-sidebar .locked-option::after,
body.dark-mode .v417-side-item.locked-option::after,
body.dark-mode #sideNotificationsItem.locked-option::after{
  background:rgba(15,23,42,.92)!important;
  border-color:rgba(148,163,184,.22)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.24)!important;
}
body.dark-mode .v498-denied-card{
  background:rgba(15,23,42,.88);
  border-color:rgba(148,163,184,.18);
  color:#cbd5e1;
}
body.dark-mode .v498-denied-card strong{color:#f8fafc;}
body.dark-mode .v498-denied-card p{color:#94a3b8;}

/* END css/overrides/v498-sidebar-locks-security-ui.css */


/* V499 dynamic controlled runtime — keep after sidebar/security UI */

/* BEGIN css/overrides/v499-dynamic-controlled-runtime.css */
/* V499 Dynamic Controlled Runtime */
.dynamic-form-source-note{margin:0 0 12px;padding:10px 12px;border-radius:14px;background:rgba(15,118,110,.08);color:#0f766e;font-weight:800;font-size:13px}.required-star{color:var(--danger,#dc2626)}.dynamic-case-field textarea{min-height:96px}.dynamic-section{animation:none}

/* END css/overrides/v499-dynamic-controlled-runtime.css */


/* BEGIN css/overrides/v510-clean-overlay-stack.css */
/* V510 Clean Overlay Stack
   One final owner for visual layers. Keep this block last. */
:root{
  --sona3-z-header:200000;
  --sona3-z-sidebar-backdrop:260000;
  --sona3-z-sidebar:260001;
  --sona3-z-notification:300000;
  --sona3-z-toast:300100;
  --sona3-z-modal:420000;
  --sona3-z-admin-backdrop:430000;
  --sona3-z-admin-modal:430001;
  --sona3-z-loader:460000;
  --sona3-z-lightbox:470000;
  --sona3-z-image-editor:2147483600;
  --sona3-z-image-processing:2147483640;
}

.app-shell-top,
.app-shell-top.v481-floating-ready,
body.v481-compact-header-active .app-shell-top.v481-floating-ready.is-compact,
body.v484-fixed-header-from-start #mainApp .app-shell-top.v481-floating-ready,
body.v484-fixed-header-from-start #mainApp .app-shell-top.v483-single-header-ready,
body.v484-fixed-header-from-start #mainApp .app-shell-top.v484-fixed-header-ready{
  z-index:var(--sona3-z-header)!important;
}

#v4SyncTopBtn{z-index:calc(var(--sona3-z-header) + 1)!important;}

#sideOverlay.open,
.side-overlay.open{
  z-index:var(--sona3-z-sidebar-backdrop)!important;
}

#sidePanel,
#sidePanel.open,
.side-panel,
.side-panel.open{
  z-index:var(--sona3-z-sidebar)!important;
}

.notification-bar-host,
.v4-sync-alert-bar{
  z-index:var(--sona3-z-notification)!important;
}

.toast-container{
  z-index:var(--sona3-z-toast)!important;
}

.modal-overlay,
#passwordModal,
#notificationModal,
#editModal,
#dtPrintFieldsModal,
#v410ReportModal,
.v415-modal,
.med-modal,
.v086-med-permission-modal{
  z-index:var(--sona3-z-modal)!important;
}

.soc-permission-loader-overlay,
#globalLoader,
.global-loader-overlay{
  z-index:var(--sona3-z-loader)!important;
}

.v496-admin-modal-backdrop{
  z-index:var(--sona3-z-admin-backdrop)!important;
}

#userFormBox.v496-admin-modal,
#roleDefinitionFormBox.v496-admin-modal{
  z-index:var(--sona3-z-admin-modal)!important;
}

#imgLightbox,
.v403-full-preview-modal{
  z-index:var(--sona3-z-lightbox)!important;
}

.azkar-image-editor-overlay{
  z-index:var(--sona3-z-image-editor)!important;
}

.azkar-editor-processing{
  z-index:var(--sona3-z-image-processing)!important;
}

body.sona3-v510-overlay-active .app-shell-top{
  pointer-events:none!important;
}

body.sona3-v510-overlay-active #sidePanel:not(.open),
body.sona3-v510-overlay-active .side-panel:not(.open){
  pointer-events:none!important;
}

body.sona3-v510-overlay-active .modal-overlay[style*="display: flex"],
body.sona3-v510-overlay-active .modal-overlay[style*="display:flex"],
body.sona3-v510-overlay-active .v415-modal[style*="display: flex"],
body.sona3-v510-overlay-active .v415-modal[style*="display:flex"],
body.sona3-v510-overlay-active .med-modal.open,
body.sona3-v510-overlay-active .v086-med-permission-modal,
body.sona3-v510-overlay-active .v496-admin-modal-backdrop{
  isolation:isolate;
}

@media(max-width:720px){
  .modal-overlay,
  .v415-modal,
  .med-modal,
  .v086-med-permission-modal{
    align-items:flex-end!important;
  }
}
.sona3-v510-watchdog-controls{
  position:relative;
  z-index:3;
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:14px;
}
.sona3-v510-watchdog-btn{
  border:1px solid rgba(15,23,42,.16);
  border-radius:12px;
  padding:9px 13px;
  background:#fff;
  color:#0f172a;
  cursor:pointer;
  font-weight:900;
}
.sona3-v510-watchdog-btn.primary{
  background:#0f766e;
  color:#fff;
  border-color:#0f766e;
}
/* END css/overrides/v510-clean-overlay-stack.css */
/* Sona3 v528 result pagination */
.sona3-results-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}
.sona3-results-page-info{
    color:var(--muted, #64748b);
    font-size:13px;
}
.sona3-page-size-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--muted, #64748b);
}
.sona3-page-size-label select{
    min-width:72px;
    border:1px solid var(--border, #d8dee8);
    border-radius:8px;
    padding:6px 8px;
    background:var(--card-bg, #fff);
    color:inherit;
}
.sona3-results-pager{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:14px 0 4px;
}
.sona3-results-pager button{
    border:1px solid var(--border, #d8dee8);
    border-radius:8px;
    padding:8px 14px;
    background:var(--card-bg, #fff);
    cursor:pointer;
}
.sona3-results-pager button:disabled{
    opacity:.45;
    cursor:not-allowed;
}