/*
====================================================
AME OPERATIONS
Global Stylesheet
Version : 1.0
====================================================
*/

/* ==========================================
   ROOT VARIABLES
========================================== */

:root{

    --ame-primary:#0b2e75;
    --ame-primary-hover:#143d92;

    --ame-success:#198754;
    --ame-danger:#dc3545;
    --ame-warning:#ffc107;
    --ame-info:#0f8b8d;
    --ame-info-hover:#0b6f71;
    --ame-secondary:#6c757d;
    --ame-secondary-hover:#565e64;

    --ame-button-height:44px;
    --ame-button-padding:10px 16px;
    --ame-button-font-size:14px;
    --ame-button-radius:8px;
    --ame-button-gap:12px;

    --ame-bg:#f4f6f9;
    --ame-surface:#ffffff;
    --ame-text:#24364b;
    --ame-muted:#607086;
    --ame-border:#dfe5ee;
    --ame-focus:#0f8b8d;
    --ame-space-1:4px;
    --ame-space-2:8px;
    --ame-space-3:12px;
    --ame-space-4:16px;
    --ame-space-5:24px;
    --ame-space-6:32px;
    --ame-card-radius:14px;

    --ame-shadow:0 2px 12px rgba(0,0,0,.08);

}

/* ==========================================
   GLOBAL STYLES
========================================== */

body{

    margin:0;

    background:#f4f6f9;

    font-family:Arial,sans-serif;

    color:var(--ame-text);

}

.wrapper{

    display:flex;

    min-height:100vh;

}

/* ==========================================
   LAYOUT
========================================== */

.content{

    margin-left:220px;

    width:calc(100% - 220px);

    padding:20px;

}

/* ==========================================
   SIDEBAR
========================================== */

.sidebar{

    width:220px;

    background:#0b2e75;

    color:white;

    padding:20px;

    position:fixed;

    top:0;

    left:0;

    bottom:0;

    overflow-y:auto;

    z-index:1000;

}

.sidebar-title{

    font-size:11px;

    font-weight:bold;

    opacity:.70;

    margin-top:25px;

    margin-bottom:8px;

    text-transform:uppercase;

}

.sidebar a{

    display:block;

    padding:9px 12px;

    margin-bottom:4px;

    border-radius:6px;

    text-decoration:none;

    font-size:14px;

    color:white;

    transition:.2s;

}

.sidebar a:hover{

    background:#143d92;

}

/* ==========================================
   TOPBAR
========================================== */

/* Reserved */

/* ==========================================
   BUTTONS
========================================== */

.btn:not(.btn-close):not(.gallery-trigger):not(.photo-indicator),
.stores-btn,
.search-btn,
.btn-delete{

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:var(--ame-button-height) !important;
    max-width:100%;
    box-sizing:border-box;
    padding:var(--ame-button-padding) !important;
    margin:0 !important;
    border-radius:var(--ame-button-radius) !important;
    font-size:var(--ame-button-font-size) !important;
    font-weight:600 !important;
    line-height:1.2 !important;
    text-align:center;
    text-decoration:none !important;
    white-space:nowrap !important;
    overflow-wrap:normal;
    word-break:normal;
    vertical-align:middle;
    cursor:pointer;
}

/* Primary actions */
.btn-primary,
.btn-outline-primary,
.btn.primary,
.btn.add,
.btn.create,
.btn.edit,
.btn.save,
.btn.view,
.stores-btn:not(.secondary):not(.danger){

    color:#fff !important;
    background:var(--ame-primary) !important;
    border-color:var(--ame-primary) !important;
}

/* Successful and active actions */
.btn-success,
.btn-outline-success{

    color:#fff !important;
    background:var(--ame-success) !important;
    border-color:var(--ame-success) !important;
}

/* Destructive actions */
.btn-danger,
.btn-outline-danger,
.btn.delete,
.btn.remove,
.btn-delete,
.stores-btn.danger{

    color:#fff !important;
    background:var(--ame-danger) !important;
    border-color:var(--ame-danger) !important;
}

/* Back and secondary actions */
.btn-secondary,
.btn-outline-secondary,
.btn.secondary,
.btn.back,
.stores-btn.secondary{

    color:#fff !important;
    background:var(--ame-secondary) !important;
    border-color:var(--ame-secondary) !important;
}

/* Downloads, exports and password resets. Kept last so meaning wins over a
   legacy secondary class while templates are progressively normalized. */
.btn-info,
.btn-outline-info,
.btn-info-action,
.btn.export,
a.btn[href*="/download"],
a.btn[href*="/export"],
a.btn[href*="/reset/"],
a.stores-btn[href*="/download"],
a.stores-btn[href*="/export"],
button.btn[onclick*="export"],
button.stores-btn[onclick*="export"]{

    color:#fff !important;
    background:var(--ame-info) !important;
    border-color:var(--ame-info) !important;
}

.btn-primary:hover,
.btn-outline-primary:hover,
.btn.primary:hover,
.btn.add:hover,
.btn.create:hover,
.btn.edit:hover,
.btn.save:hover,
.btn.view:hover,
.stores-btn:not(.secondary):not(.danger):hover{

    color:#fff !important;
    background:var(--ame-primary-hover) !important;
}

.btn-info:hover,
.btn-outline-info:hover,
.btn-info-action:hover,
.btn.export:hover,
a.btn[href*="/download"]:hover,
a.btn[href*="/export"]:hover,
a.btn[href*="/reset/"]:hover,
a.stores-btn[href*="/download"]:hover,
a.stores-btn[href*="/export"]:hover,
button.btn[onclick*="export"]:hover,
button.stores-btn[onclick*="export"]:hover{

    color:#fff !important;
    background:var(--ame-info-hover) !important;
}

.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn.secondary:hover,
.btn.back:hover,
.stores-btn.secondary:hover{

    color:#fff !important;
    background:var(--ame-secondary-hover) !important;
}

.btn:disabled,
.btn.disabled,
.stores-btn:disabled{

    opacity:.65;
    cursor:not-allowed;
    pointer-events:none;
}

/* Shared action containers prevent controls and inline forms from colliding. */
.actions,
.action-group,
.mobile-actions,
.progress-actions,
.gallery-actions,
.media-buttons,
.stores-actions,
.sticky-post,
.card-footer{

    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center;
    gap:var(--ame-button-gap) !important;
    max-width:100%;
    min-width:0;
}

.action-group{

    flex-wrap:nowrap !important;
    min-width:max-content;
}

.actions > form,
.action-group > form,
.mobile-actions > form,
.progress-actions > form,
.gallery-actions > form,
.media-buttons > form,
.stores-actions > form,
.sticky-post > form,
.card-footer > form{

    min-width:0;
    margin:0 !important;
}

/* Legacy page-card forms place sibling controls directly in the form. Give
   those controls the same wrap spacing without requiring template rewrites. */
.page-card form > .btn:not(.btn-close):not(.gallery-trigger):not(.photo-indicator){

    margin:0 var(--ame-button-gap) var(--ame-button-gap) 0 !important;
}

/* Status labels size to their content, but may wrap safely when the available
   width is narrower than the label. */
.badge,
.status,
.progress-badge,
.desktop-progress-table .tag{

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:fit-content !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    min-height:28px;
    padding:5px 10px !important;
    border-radius:7px !important;
    box-sizing:border-box;
    line-height:1.25 !important;
    white-space:nowrap !important;
    overflow-wrap:normal;
    word-break:normal;
    text-align:center;
    vertical-align:middle;
}

.desktop-progress-table td.photos-cell,
.desktop-progress-table td.progress-status-cell{

    vertical-align:middle !important;
}

/* ==========================================
   TABLES
========================================== */

.table-responsive{

    width:100%;

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;

}

table{

    width:100%;

    border-collapse:collapse;

    background:#ffffff;

}

table th{

    background:var(--ame-primary);

    color:#ffffff;

    padding:12px;

    white-space:nowrap;

    font-size:14px;

}

table td{

    padding:12px;

    border-bottom:1px solid #e5e5e5;

    vertical-align:middle;

}

table tr:hover{

    background:#f8f9fa;

}

.action-column{

    white-space:nowrap;

    width:1%;

}

/* ==========================================
   FORMS
========================================== */

input,
select,
textarea{

    max-width:100%;
    min-height:44px;
    border:1px solid #b8c2d1;
    border-radius:8px;
    padding:9px 10px;
    background:var(--ame-surface);
    color:var(--ame-text);
    font:inherit;
}

textarea{

    min-height:88px;
    resize:vertical;
}

label{

    color:var(--ame-text);
    font-weight:600;
}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{

    outline:3px solid color-mix(in srgb,var(--ame-focus) 45%,transparent);
    outline-offset:2px;
}

input:disabled,
select:disabled,
textarea:disabled{

    background:#eef1f5;
    color:var(--ame-muted);
    cursor:not-allowed;
}

/* ==========================================
   CARDS
========================================== */

.page-title,
.stores-head h1{

    margin:0;
    color:var(--ame-primary);
    font-size:clamp(1.35rem,2.2vw,1.75rem);
    line-height:1.2;
}

h2,
.section-title{

    color:var(--ame-text);
    font-size:clamp(1.05rem,1.7vw,1.25rem);
    line-height:1.3;
}

h3{

    font-size:1rem;
    line-height:1.35;
}

.section-title-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}

.help,
.supporting-text,
.page-subtitle{

    color:var(--ame-muted);
    font-size:.9rem;
}

.page-card,
.card,
.stores-panel{

    border:1px solid var(--ame-border);
    border-radius:var(--ame-card-radius);
    background:var(--ame-surface);
    box-shadow:var(--ame-shadow);
}

.kpi-card > span{

    display:block;
    color:var(--ame-muted);
    font-size:.85rem;
}

.kpi-card > strong{

    display:block;
    margin-top:var(--ame-space-2);
    color:var(--ame-primary);
    font-size:1.5rem;
}

.empty-state{

    padding:var(--ame-space-5);
    border:1px dashed #b8c2d1;
    border-radius:10px;
    background:#f8fafc;
    color:var(--ame-muted);
    text-align:center;
}

.export-group{

    display:inline-flex;
    align-items:center;
    gap:6px;
    min-width:0;
}

.export-group > span:first-child{

    color:var(--ame-muted);
    font-size:.82rem;
    font-weight:700;
    white-space:nowrap;
}

.export-group .btn,
.export-group .stores-btn{

    min-height:40px !important;
    padding:8px 12px !important;
}

.numeric,
td[data-type="number"]{

    text-align:right;
    font-variant-numeric:tabular-nums;
}

/* ==========================================
   RESPONSIVE
========================================== */

/* The Daily Progress desktop table consolidates operational states so Work Done
   can use the remaining width. Mobile cards retain their existing structure. */
@media (min-width:1201px){

    .desktop-progress-table{

        table-layout:fixed;
    }

    .desktop-progress-table th:nth-child(1),
    .desktop-progress-table td:nth-child(1){

        width:100px;
    }

    .desktop-progress-table th:nth-child(2),
    .desktop-progress-table td:nth-child(2){

        width:180px;
    }

    .desktop-progress-table th:nth-child(3),
    .desktop-progress-table td:nth-child(3){

        width:auto;
    }

    .desktop-progress-table th:nth-child(4),
    .desktop-progress-table td:nth-child(4),
    .desktop-progress-table th:nth-child(5),
    .desktop-progress-table td:nth-child(5){

        width:120px;
    }

    .desktop-progress-table th:nth-child(4),
    .desktop-progress-table th:nth-child(5){

        white-space:normal;
        line-height:1.25;
    }

    .desktop-progress-table th:nth-child(6),
    .desktop-progress-table td:nth-child(6){

        width:145px;
    }

    .desktop-progress-table th:nth-child(7),
    .desktop-progress-table td:nth-child(7){

        width:190px;
    }

    .desktop-progress-table td.photos-cell,
    .desktop-progress-table td.progress-status-cell{

        white-space:nowrap;
    }

    .desktop-progress-table td.photos-cell{

        padding-left:8px !important;
        padding-right:8px !important;
    }

    .desktop-progress-table .progress-status-primary{

        margin-bottom:8px;
        font-weight:700;
        color:var(--ame-primary);
        white-space:normal;
        overflow-wrap:anywhere;
    }

    .desktop-progress-table .progress-status-meta{

        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
    }

    .desktop-progress-table .tag{

        min-width:112px !important;
        max-width:none !important;
        padding:6px 14px !important;
        white-space:nowrap !important;
        overflow-wrap:normal;
    }

    .desktop-progress-table td.progress-action-cell{

        padding-left:18px !important;
        white-space:nowrap;
    }

    .desktop-progress-table td.progress-action-cell form{

        margin-left:10px;
    }
}

@media (max-width:900px){

    :root{

        --ame-button-gap:10px;
    }

    .action-group{

        flex-wrap:wrap !important;
        min-width:0;
    }

    .mobile-progress-card .card-body,
    .progress-mobile-body{

        padding:18px !important;
    }

    .mobile-progress-card .card-body{

        row-gap:18px !important;
    }

    .jobcard-mobile .mobile-row{

        padding-top:14px !important;
        padding-bottom:14px !important;
    }

    .progress-mobile-card .progress-field{

        margin-bottom:18px;
    }

    .actions > .btn,
    .actions > .stores-btn,
    .actions > form,
    .action-group > .btn,
    .action-group > .stores-btn,
    .action-group > form,
    .mobile-actions > .btn,
    .mobile-actions > .stores-btn,
    .mobile-actions > form,
    .progress-actions > .btn,
    .progress-actions > .stores-btn,
    .progress-actions > form,
    .gallery-actions > .btn,
    .gallery-actions > .stores-btn,
    .gallery-actions > form,
    .stores-actions > .btn,
    .stores-actions > .stores-btn,
    .stores-actions > form,
    .sticky-post > .btn,
    .sticky-post > .stores-btn,
    .sticky-post > form,
    .card-footer > .btn,
    .card-footer > .stores-btn,
    .card-footer > form{

        flex:1 1 160px !important;
    }

    .actions > form > .btn,
    .actions > form > .stores-btn,
    .action-group > form > .btn,
    .action-group > form > .stores-btn,
    .mobile-actions > form > .btn,
    .mobile-actions > form > .stores-btn,
    .progress-actions > form > .btn,
    .progress-actions > form > .stores-btn,
    .gallery-actions > form > .btn,
    .gallery-actions > form > .stores-btn,
    .stores-actions > form > .btn,
    .stores-actions > form > .stores-btn,
    .sticky-post > form > .btn,
    .sticky-post > form > .stores-btn,
    .card-footer > form > .btn,
    .card-footer > form > .stores-btn{

        width:100% !important;
    }

    .wrapper{

        display:block;

    }

    .sidebar{

        position:relative;

        width:100%;

        height:auto;

        padding:12px;

        overflow-x:auto;

        white-space:nowrap;

    }

    .sidebar-title{

        display:none;

    }

    .sidebar a{

        display:inline-block;

        padding:8px 12px;

        margin-right:6px;

        font-size:13px;

    }

    .content{

        margin-left:0;

        width:100%;

        padding:12px;

    }

    .table-responsive{

        width:100%;

        overflow-x:auto;

        -webkit-overflow-scrolling:touch;

    }

    .table-responsive table{

        min-width:900px;

    }

    table th,
    table td{

        padding:10px;

        font-size:13px;

    }

}

/* Mobile form density and actions. Desktop declarations remain unchanged. */
@media (max-width:768px){

    :root{

        --ame-button-height:46px;
        --ame-button-padding:10px 14px;
    }

    .export-group{

        display:grid;
        grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);
        width:100%;
    }

    .export-group .btn,
    .export-group .stores-btn{

        width:100%;
    }

    form .form-group,
    form .stores-field{

        margin-bottom:12px !important;
    }

    form .section{

        margin-top:22px !important;
        margin-bottom:22px !important;
        padding-top:16px !important;
    }

    form .section-title{

        margin-bottom:14px !important;
        padding-bottom:7px !important;
    }

    form .stores-panel,
    form .entry-card,
    .card:has(> form),
    .page-card:has(> form){

        padding:14px !important;
    }

    form:has(> .actions),
    form:has(> .sticky-post){

        scroll-padding-bottom:88px;
        padding-bottom:calc(72px + env(safe-area-inset-bottom));
    }

    form > .actions,
    form > .sticky-post{

        position:sticky;
        bottom:0;
        z-index:100;
        display:flex !important;
        flex-flow:row wrap !important;
        gap:8px !important;
        margin:16px 0 0 !important;
        padding:10px !important;
        padding-bottom:calc(10px + env(safe-area-inset-bottom)) !important;
        background:rgba(255,255,255,.97);
        border-top:1px solid #dbe3ec;
        box-shadow:0 -4px 12px rgba(0,0,0,.08);
    }

    form > .actions > .btn,
    form > .actions > .stores-btn,
    form > .sticky-post > .btn,
    form > .sticky-post > .stores-btn{

        flex:1 1 calc(50% - 4px) !important;
        height:46px !important;
        min-height:46px !important;
        max-height:48px !important;
        padding:8px 14px !important;
    }
}

/* Shared page heading and action controls */
.page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.page-heading h1,.page-heading h2{margin:0}
.action-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.action-toolbar form{margin:0}
.action-toolbar .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;white-space:normal;text-align:center}
.action-toolbar.compact .btn{min-height:38px}
.permission-matrix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.permission-option{display:flex;align-items:flex-start;gap:9px;min-width:0;padding:12px;border:1px solid #d9e0ea;border-radius:9px}
.permission-option span,.permission-option strong,.permission-option small{display:block;min-width:0;overflow-wrap:anywhere}
.permission-option small{color:#667085}
.library-access-groups{display:grid;gap:16px}
.library-access-group{min-width:0;margin:0;padding:14px;border:1px solid #c9d4e3;border-radius:10px;background:#f8fafc}
.library-mother-folder{margin-bottom:12px;border-color:#7893b8;background:#eaf1fb}
.library-mother-folder strong{color:#0b2e75;font-size:1rem}
.library-child-folder{margin-left:min(calc(var(--folder-depth,0) * 14px),42px);background:#fff}
.segment-permission-option{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.segment-access-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.segment-access-actions label{display:flex;align-items:center;gap:6px;white-space:nowrap}
.audit-details{min-width:220px;overflow-wrap:anywhere}

@media(max-width:900px){.permission-matrix{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.page-heading,.action-toolbar,.action-toolbar .btn,.action-toolbar form,.action-toolbar form .btn{width:100%}.permission-matrix{grid-template-columns:1fr}.segment-permission-option{grid-template-columns:1fr}.segment-access-actions{justify-content:flex-start;padding-top:8px}}

.user-card-grid>[data-user]{display:flex}
.user-card{display:flex;flex:1 1 auto;min-width:0;flex-direction:column;padding:16px;border:1px solid #d9e0ea;border-radius:9px;background:#fff}
.user-card-main{display:grid;gap:4px;min-width:0}
.user-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0}
.user-card-heading strong,.user-card-email,.user-card-role{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.user-card-heading .badge{flex:0 0 auto}
.user-card-actions{align-items:stretch;margin-top:auto;padding-top:16px}
.user-card-actions form{display:flex}
.user-card-actions .btn{height:100%;min-height:44px;white-space:normal;line-height:1.2}
.user-page-actions{gap:10px}
@media(max-width:600px){
    .user-card-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
    .user-card-actions>*{width:100%}
    .user-card-actions .btn{width:100%}
}
@media(max-width:380px){.user-card-actions{grid-template-columns:1fr}}

/* Module navigation */
.sidebar{
    width:248px;
    padding:14px 12px;
    white-space:normal;
    overscroll-behavior:contain;
}

.content{
    min-width:0;
    margin-left:248px;
    width:calc(100% - 248px);
}

.sidebar-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:44px;
    padding:4px 8px 12px;
    border-bottom:1px solid rgba(255,255,255,.18);
}

.sidebar-product{
    font-size:1rem;
    font-weight:800;
    letter-spacing:.04em;
}

.sidebar-close,.sidebar-toggle,.sidebar-scrim{
    display:none;
}

.sidebar-dashboard,.nav-group summary,.nav-group-items a{
    display:flex !important;
    align-items:center;
    gap:9px;
    box-sizing:border-box;
    width:100%;
    min-height:40px;
    border:0;
    border-radius:7px;
    color:#fff;
    font-size:.84rem;
    line-height:1.25;
    text-decoration:none;
}

.sidebar-dashboard,.nav-group-items a{
    margin-right:0 !important;
    white-space:normal;
}

.sidebar-dashboard .nav-label,.nav-group-items a>span:last-child{
    min-width:0;
    overflow-wrap:break-word;
}

.sidebar-dashboard{
    margin:12px 0 7px;
    padding:8px 10px;
}

.sidebar-groups{
    display:grid;
    gap:4px;
}

.nav-group{
    margin:0;
}

.nav-group summary{
    padding:8px 10px;
    cursor:pointer;
    list-style:none;
    font-weight:700;
    user-select:none;
}

.nav-group summary::-webkit-details-marker{display:none}
.nav-group summary::marker{content:""}
.nav-group summary:hover,.nav-group summary:focus-visible,
.sidebar-dashboard:hover,.sidebar-dashboard:focus-visible,
.nav-group-items a:hover,.nav-group-items a:focus-visible{
    color:#fff;
    background:#143d92;
    outline:2px solid transparent;
}

.nav-group.active>summary,.sidebar-dashboard.active{
    background:rgba(255,255,255,.13);
}

.nav-icon{
    display:inline-flex;
    flex:0 0 26px;
    align-items:center;
    justify-content:center;
    min-height:22px;
    border-radius:5px;
    background:rgba(255,255,255,.12);
    font-size:.64rem;
    font-weight:800;
    letter-spacing:.02em;
}

.nav-group-label{flex:1;min-width:0}
.nav-chevron{font-size:1rem;transition:transform .18s ease}
.nav-group[open]>summary .nav-chevron{transform:rotate(180deg)}
.nav-group-items{display:grid;gap:2px;padding:2px 0 6px 13px}
.nav-group-items a{padding:7px 9px}
.nav-group-items a.active{
    background:#fff;
    color:#0b2e75;
    font-weight:700;
}
.nav-group-items a.active .nav-icon{background:#dce6f7}
.session-group{margin-top:5px;border-top:1px solid rgba(255,255,255,.16);padding-top:5px}

@media(max-width:768px){
    body{overflow-x:hidden}
    .content{
        margin-left:0 !important;
        width:100% !important;
        min-width:0;
        padding:12px !important;
    }
    .sidebar{
        position:fixed !important;
        inset:0 auto 0 0 !important;
        z-index:1300 !important;
        display:block !important;
        width:min(88vw,300px) !important;
        height:100dvh !important;
        padding:12px !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        white-space:normal !important;
        transform:translateX(-104%);
        transition:transform .2s ease;
        box-shadow:8px 0 24px rgba(0,0,0,.24);
    }
    .sidebar-open .sidebar{transform:translateX(0)}
    .sidebar-close{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:42px;
        height:42px;
        border:0;
        border-radius:7px;
        background:rgba(255,255,255,.13);
        color:#fff;
        font-size:1.6rem;
    }
    .sidebar-toggle{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:7px;
        min-height:44px;
        padding:8px 12px;
        border:1px solid #b8c2d1;
        border-radius:8px;
        background:#fff;
        color:#0b2e75;
        font-weight:700;
    }
    .sidebar-scrim{
        position:fixed;
        inset:0;
        z-index:1250;
        border:0;
        background:rgba(18,32,54,.52);
    }
    .sidebar-open .sidebar-scrim{display:block}
    .topbar{display:grid;grid-template-columns:auto 1fr;align-items:center}
    .topbar .user{grid-column:1/-1}
    .nav-group summary,.sidebar-dashboard,.nav-group-items a{min-height:46px}
}

@media print{
    .sidebar,.sidebar-scrim,.sidebar-toggle,.topbar,.footer,.transfer-detail-actions{display:none!important}
    .content{margin:0!important;width:100%!important;padding:0!important}
    body{background:#fff}
}
.environment-banner{
background:#fff3cd;
border:2px solid #8a5a00;
border-radius:10px;
color:#4a3300;
font-weight:800;
letter-spacing:.02em;
margin:0 0 14px;
padding:10px 14px;
text-align:center;
overflow-wrap:break-word;
}
.login-environment-banner{
left:16px;
margin:0;
position:fixed;
right:16px;
top:16px;
z-index:10;
}
@media(max-width:480px){
.environment-banner{font-size:.85rem;padding:9px 10px}
.login-environment-banner{left:10px;right:10px;top:10px}
}
.notification-attention {
  align-items: center;
  background: #fff7d6;
  border: 1px solid #d7a72f;
  border-left: .35rem solid #b97800;
  border-radius: .65rem;
  display: flex;
  gap: .75rem 1rem;
  justify-content: space-between;
  margin: 0 0 1rem;
  padding: .75rem 1rem;
}
.notification-attention div { display: grid; gap: .15rem; min-width: 0; }
.notification-attention span { overflow-wrap: anywhere; }
.notification-attention a { flex: 0 0 auto; font-weight: 700; }
.notification-attention-actions {
  align-items: center;
  display: flex !important;
  flex: 0 0 auto;
  gap: .75rem !important;
}
.notification-read-all {
  background: #173d77;
  border: 0;
  border-radius: .45rem;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  min-height: 40px;
  padding: .55rem .8rem;
}
.notification-read-all:disabled { cursor: wait; opacity: .65; }
@media (max-width: 640px) {
  .notification-attention { align-items: flex-start; flex-direction: column; }
  .notification-attention-actions { flex-direction: column; width: 100%; }
  .notification-attention-actions > * { justify-content: center; text-align: center; width: 100%; }
}