@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap');

:root{
    --primary:#2a4699;
    --primary-700:#203a86;
    --primary-50:#eef3ff;
    --danger:#c9363e;
    --success:#178454;
    --warning:#b66a00;
    --bg:#f5f7fb;
    --surface:#ffffff;
    --border:#e3e8f0;
    --text:#182237;
    --muted:#6b7485;
    --sidebar:#080d18;
    --sidebar-soft:#12366f;
    --sidebar-blue:#2457c5;
    --shadow:0 12px 35px rgba(15,32,61,.08);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:'Prompt',sans-serif;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit}
a{text-decoration:none;color:inherit}
.icon{display:inline-block;flex:0 0 auto}
.backend-body{min-height:100vh}

.app-shell{min-height:100vh;display:flex}
.sidebar{
    position:fixed;left:0;top:0;bottom:0;width:270px;z-index:40;
    display:flex;flex-direction:column;
    background:#ffffff;color:#182237;
    border-right:1px solid #dfe6f2;
    box-shadow:10px 0 30px rgba(15,35,70,.08);
}
.sidebar-brand{height:88px;display:flex;align-items:center;justify-content:center;padding:0 18px;border-bottom:1px solid #edf1f7;position:relative}
.brand-mark{
    width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
    background:#fff;color:var(--primary);font-weight:700;font-size:14px;letter-spacing:.5px
}
.sidebar-brand-logo{
    width:150px;max-width:100%;height:auto;display:block;flex:0 0 auto;
}
.sidebar-close{display:none;position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#526176}

.sidebar-nav{padding:15px 12px;overflow:auto;flex:1}
.nav-caption{font-size:11px;color:#74839a;padding:14px 12px 7px;text-transform:uppercase;letter-spacing:.05em}
.nav-item{
    min-height:45px;display:flex;align-items:center;gap:11px;padding:0 12px;
    border-radius:10px;margin-bottom:4px;color:#415167;font-size:13px;transition:.15s ease
}
.nav-item:hover{background:#eef4ff;color:var(--primary)}
.nav-item.active{
    background:linear-gradient(135deg,#2450b5,#3c76e5);color:#fff;font-weight:500;
    box-shadow:0 10px 22px rgba(36,80,181,.20)
}
.nav-item small{margin-left:auto;font-size:9px;color:#93a1b5}
.nav-item.active small{color:rgba(255,255,255,.82)}
.nav-disabled{opacity:.72;cursor:default}
.nav-disabled:hover{background:transparent;color:#415167}

.sidebar-footer{padding:14px;border-top:1px solid #edf1f7;background:#fff}
.sidebar-user{display:flex;align-items:center;gap:10px}
.avatar{
    width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
    background:#edf2ff;color:var(--primary);font-weight:600;flex:0 0 auto
}
.sidebar-user>div:last-child{min-width:0;display:flex;flex-direction:column}
.sidebar-user strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#172338}
.sidebar-user span{font-size:10px;color:#7a889d;margin-top:2px}

.app-main{margin-left:270px;width:calc(100% - 270px);min-height:100vh}
.top-header{
    height:76px;position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);
    backdrop-filter:blur(12px);border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;padding:0 26px
}
.header-left{display:flex;align-items:center;gap:12px}
.header-left h1{font-size:19px;margin:0;font-weight:600}
.header-left p{font-size:11px;color:var(--muted);margin:3px 0 0}
.header-actions{display:flex;align-items:center;gap:16px}
.header-user{display:flex;align-items:center;gap:10px;padding-right:15px;border-right:1px solid var(--border)}
.avatar-small{width:34px;height:34px;font-size:12px}
.header-user-copy{display:flex;flex-direction:column}
.header-user-copy strong{font-size:12px;font-weight:500}
.header-user-copy span{font-size:10px;color:var(--muted)}
.mobile-menu-btn{display:none}

.icon-btn{
    width:38px;height:38px;border:0;border-radius:9px;background:transparent;
    display:inline-grid;place-items:center;cursor:pointer;color:inherit
}
.icon-btn:hover{background:#eef2f7}

.page-content{padding:26px}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}
.page-head h2{font-size:21px;margin:0;font-weight:600}
.page-head p{margin:5px 0 0;color:var(--muted);font-size:12px}

.card{background:var(--surface);border:1px solid var(--border);border-radius:15px;box-shadow:0 2px 10px rgba(17,37,70,.03)}
.card-header{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:15px}
.card-header h3{margin:0;font-size:15px;font-weight:600}
.card-body{padding:20px}

.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}
.stat-card{padding:18px 19px}
.stat-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.stat-label{font-size:11px;color:var(--muted)}
.stat-value{font-size:29px;font-weight:600;line-height:1;margin-top:13px}
.stat-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--primary-50);color:var(--primary)}
.dashboard-section-head{display:flex;align-items:end;justify-content:space-between;margin:0 0 12px}
.dashboard-section-head h2{font-size:18px;margin:0;font-weight:600}
.dashboard-section-head p{font-size:11px;color:var(--muted);margin:5px 0 0}
.stat-card-link{display:block;color:inherit;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.stat-card-link:hover{transform:translateY(-2px);border-color:#cbd8f2;box-shadow:0 8px 20px rgba(26,54,101,.09)}
.stat-card-link:focus-visible{outline:3px solid rgba(31,91,216,.2);outline-offset:3px}
.stat-note{font-size:10px;color:var(--muted);margin-top:9px}
.dashboard-system-card{margin-bottom:20px}
.dashboard-system-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.dashboard-system-item{display:flex;align-items:center;gap:13px;padding:17px 20px}
.dashboard-system-item + .dashboard-system-item{border-left:1px solid var(--border)}
.dashboard-system-item span{display:block;font-size:11px;color:var(--muted)}
.dashboard-system-item strong{display:block;font-size:22px;margin-top:3px;font-weight:600}
.dashboard-recent-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.dashboard-recent-card{min-width:0;overflow:hidden}
.dashboard-recent-list{display:flex;flex-direction:column}
.dashboard-recent-list>a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;color:inherit;border-top:1px solid var(--border);transition:background .15s ease}
.dashboard-recent-list>a:first-child{border-top:0}
.dashboard-recent-list>a:hover{background:#f7f9fd}
.dashboard-recent-list>a>div:first-child{min-width:0;display:flex;flex-direction:column;gap:3px}
.dashboard-recent-list strong{font-size:12px}
.dashboard-recent-list span:not(.status){font-size:10px;color:#526079;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashboard-recent-list small{font-size:9px;color:var(--muted)}
.dashboard-recent-side{display:flex;align-items:center;gap:8px;flex:0 0 auto;color:var(--muted)}
.dashboard-recent-empty{padding:28px 20px;text-align:center;font-size:11px;color:var(--muted)}

.content-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,430px);gap:18px;align-items:start}
.content-grid.reverse{grid-template-columns:minmax(340px,440px) minmax(0,1fr)}

.btn{
    border:1px solid transparent;min-height:40px;padding:0 15px;border-radius:9px;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    cursor:pointer;font-size:12px;font-weight:500;transition:.15s ease
}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-700)}
.btn-secondary{background:#fff;border-color:var(--border);color:var(--text)}
.btn-secondary:hover,.btn-ghost:hover{background:#f4f6fa}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-danger{background:#fff1f2;border-color:#ffd4d8;color:#aa2931}
.btn-success{background:#edf9f3;border-color:#c6eed9;color:#147648}
.btn-sm{min-height:35px;padding:0 11px;font-size:11px}
.btn-block{width:100%}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:flex;flex-direction:column;gap:7px}
.form-group.full{grid-column:1/-1}
.form-label{font-size:11px;font-weight:500;color:#344054}
.required{color:var(--danger);margin-left:2px}
.form-control{
    width:100%;height:43px;border:1px solid #d7deea;border-radius:9px;
    background:#fff;color:var(--text);padding:0 12px;outline:none;font-size:12px;transition:.15s ease
}
.form-control:focus{border-color:#8fa7ea;box-shadow:0 0 0 3px rgba(42,70,153,.08)}
select.form-control{appearance:auto}
.form-help{font-size:10px;color:var(--muted)}
.form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}

.alert{padding:12px 14px;border-radius:10px;margin-bottom:16px;font-size:11px;display:flex;align-items:flex-start;gap:9px}
.alert-success{background:#edf9f3;color:#126b43;border:1px solid #c8eed9}
.alert-error{background:#fff1f2;color:#9d2730;border:1px solid #ffd3d8}

.table-wrap{overflow:auto}
.table{width:100%;border-collapse:collapse;min-width:720px}
.table th,.table td{padding:13px 14px;border-bottom:1px solid #edf0f5;text-align:left;vertical-align:middle}
.table th{font-size:10px;font-weight:500;color:#758096;background:#fafbfc;white-space:nowrap}
.table td{font-size:11px}
.table tbody tr:hover{background:#fbfcfe}
.table tbody tr:last-child td{border-bottom:0}

.status{
    display:inline-flex;align-items:center;gap:6px;min-height:25px;padding:0 9px;
    border-radius:999px;font-size:10px;font-weight:500
}
.status-active{background:#eaf8f1;color:#137346}
.status-inactive{background:#f2f4f7;color:#667085}
.status-line{background:#eef3ff;color:var(--primary)}

.user-cell{display:flex;align-items:center;gap:9px}
.user-cell .avatar{width:31px;height:31px;font-size:10px}
.user-cell strong{display:block;font-size:11px;font-weight:500}
.user-cell span{display:block;font-size:9px;color:var(--muted);margin-top:2px}

.empty-state{text-align:center;padding:35px 20px;color:var(--muted);font-size:11px}
.empty-icon{width:48px;height:48px;border-radius:14px;background:#f3f5f8;display:grid;place-items:center;margin:0 auto 10px;color:#8792a7}

.filter-row{display:flex;gap:10px;align-items:center}
.search-box{position:relative;min-width:230px}
.search-box .icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#8993a5}
.search-box input{padding-left:36px}

.login-body{
    min-height:100vh;background:
        radial-gradient(circle at 15% 20%,rgba(42,70,153,.08),transparent 35%),
        linear-gradient(180deg,#f7f9fc,#eef2f8);
    display:grid;place-items:center;padding:20px
}
.login-card{
    width:100%;max-width:430px;background:#fff;border:1px solid var(--border);
    border-radius:18px;padding:30px;box-shadow:var(--shadow)
}
.login-brand{display:flex;align-items:center;justify-content:center;margin-bottom:25px}
.login-brand-logo{width:205px;max-width:100%;height:auto;display:block;flex:0 0 auto}
.login-card h1{font-size:21px;margin:0 0 5px}
.login-card>p{font-size:11px;color:var(--muted);margin:0 0 20px}
.login-card .form-group{margin-bottom:14px}
.login-card .form-control{height:46px}
.login-note{text-align:center;font-size:9px;color:#929baa;margin-top:14px}

.sidebar-overlay{display:none}

@media(max-width:1050px){
    .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .content-grid,.content-grid.reverse{grid-template-columns:1fr}
}
@media(max-width:820px){
    .sidebar{transform:translateX(-100%);transition:transform .2s ease}
    .sidebar.open{transform:translateX(0)}
    .sidebar-close{display:inline-grid}
    .sidebar-overlay{position:fixed;inset:0;background:rgba(10,18,34,.42);z-index:35}
    .sidebar-overlay.show{display:block}
    .app-main{margin-left:0;width:100%}
    .mobile-menu-btn{display:inline-grid}
    .header-user-copy{display:none}
    .page-content{padding:18px}
}
@media(max-width:600px){
    .top-header{padding:0 14px;height:68px}
    .header-left{gap:8px}
    .header-left p{display:none}
    .header-actions{gap:6px}
    .header-user{padding-right:8px}
    .header-actions .btn span{display:none}
    .stats-grid{grid-template-columns:1fr 1fr;gap:10px}
    .stat-card{padding:14px}
    .stat-value{font-size:24px}
    .page-head{flex-direction:column}
    .form-grid{grid-template-columns:1fr}
    .form-group.full{grid-column:auto}
    .filter-row{width:100%;flex-direction:column;align-items:stretch}
    .search-box{min-width:0;width:100%}
    .login-card{padding:24px 20px}
}
@media(max-width:460px){
    .login-brand{align-items:flex-start;flex-direction:column}
    .login-brand-logo{width:178px}
    .header-left h1{font-size:16px}
}


/* Branch History */
.backend-history-grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:18px;align-items:start}
.branch-history-list{max-height:680px;overflow:auto}
.branch-history-item{min-height:72px;padding:12px 14px;border-bottom:1px solid #edf0f5;display:flex;align-items:center;gap:11px;transition:.14s ease}
.branch-history-item:hover{background:#f8faff}
.branch-history-item.active{background:#eef4ff}
.branch-history-item.has-new{background:#fff8f8}
.branch-history-item.has-new:hover{background:#fff2f2}
.branch-new-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#e53935;box-shadow:0 0 0 3px rgba(229,57,53,.12);margin-right:7px;vertical-align:1px}
.branch-history-avatar{width:38px;height:38px;border-radius:11px;background:#eef3ff;color:var(--primary);display:grid;place-items:center;font-size:11px;font-weight:600;flex:0 0 auto}
.branch-history-copy{min-width:0;flex:1}
.branch-history-copy strong{display:block;font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.branch-history-copy span{display:block;font-size:9px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.branch-history-arrow{color:#8d98aa;display:grid;place-items:center}
.backend-history-empty{padding:90px 20px}
.backend-work-table{min-width:980px}
.table-subtext{font-size:9px;color:#8791a3;margin-top:3px}
.btn-icon-only{width:34px;padding:0}
.backend-back-link{display:inline-flex;align-items:center;gap:5px;color:var(--primary);font-size:10px;font-weight:500}
.backend-back-link .icon{transform:rotate(180deg)}
.backend-detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.backend-detail-card{overflow:hidden}
.backend-detail-grid{display:grid;grid-template-columns:1fr 1fr}
.backend-detail-grid>div{padding:14px 16px;border-bottom:1px solid #edf0f5;border-right:1px solid #edf0f5;min-width:0}
.backend-detail-grid>div:nth-child(2n){border-right:0}
.backend-detail-grid>div.full{grid-column:1/-1;border-right:0}
.backend-detail-grid span{display:block;font-size:9px;color:#7e899b;margin-bottom:5px}
.backend-detail-grid strong{display:block;font-size:11px;font-weight:500;word-break:break-word}
.backend-job-list{padding:4px 16px}
.backend-job-item{display:flex;gap:11px;padding:13px 0;border-bottom:1px solid #edf0f5}
.backend-job-item:last-child{border-bottom:0}
.backend-job-no{width:28px;height:28px;border-radius:8px;background:#eef3ff;color:var(--primary);display:grid;place-items:center;font-size:9px;font-weight:600;flex:0 0 auto}
.backend-job-item strong{display:block;font-size:11px;font-weight:500}
.backend-job-item p{font-size:9px;color:#66758b;line-height:1.65;margin:4px 0 0}
.backend-job-item p.muted{color:#9aa3b1}
@media(max-width:1100px){.backend-history-grid{grid-template-columns:1fr}.branch-history-list{max-height:none}}
@media(max-width:760px){.backend-detail-layout{grid-template-columns:1fr}}


/* =====================================================
   Phase 16 - Back Office Work Order Paper View
   ===================================================== */
.work-paper-page-head{
    align-items:center;
}
.work-paper-actions{
    display:flex;
    align-items:center;
    gap:9px;
}
.work-paper-wrap{
    display:flex;
    justify-content:center;
    padding:4px 0 30px;
}
.work-order-paper{
    width:min(100%, 860px);
    min-height:1080px;
    background:#fff;
    border:1px solid #dfe4eb;
    border-radius:4px;
    box-shadow:0 18px 45px rgba(15,35,70,.10);
    padding:48px 50px 38px;
    color:#171717;
}
.paper-title-block{
    text-align:center;
    margin-bottom:28px;
}
.paper-title-block h1{
    margin:0;
    font-size:28px;
    font-weight:600;
    letter-spacing:.01em;
}
.paper-document-meta{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:30px;
    margin-bottom:28px;
}
.paper-meta-right{
    min-width:310px;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.paper-meta-item{
    display:flex;
    align-items:flex-end;
    gap:10px;
    font-size:15px;
}
.paper-meta-item span{
    font-weight:500;
    white-space:nowrap;
}
.paper-meta-item strong{
    flex:1;
    min-width:90px;
    padding:0 5px 3px;
    border-bottom:1px dotted #444;
    font-size:15px;
    font-weight:500;
}
.paper-info-columns{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
    gap:38px;
    margin-bottom:24px;
}
.paper-info-group{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.paper-line{
    display:flex;
    align-items:flex-end;
    gap:7px;
    min-width:0;
}
.paper-line span{
    white-space:nowrap;
    font-size:14px;
    font-weight:500;
}
.paper-line strong{
    min-width:0;
    flex:1;
    padding:0 4px 3px;
    border-bottom:1px dotted #555;
    font-size:14px;
    font-weight:500;
    overflow-wrap:anywhere;
}
.paper-split-line{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(115px,.75fr);
    gap:14px;
}
.paper-split-line .short-field{
    grid-template-columns:auto 1fr;
}
.paper-jobs-section{
    margin-top:8px;
}
.paper-jobs-section h2{
    margin:0 0 8px 10px;
    font-size:18px;
    font-weight:600;
}
.paper-jobs-box{
    min-height:330px;
    border:1px solid #444;
    padding:12px 14px;
}
.paper-job-row{
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    gap:10px;
    padding:9px 0;
    border-bottom:1px dotted #b8b8b8;
}
.paper-job-row:last-child{
    border-bottom:0;
}
.paper-job-number{
    width:24px;
    height:24px;
    border:1px solid #666;
    border-radius:3px;
    display:grid;
    place-items:center;
    font-size:11px;
    font-weight:500;
}
.paper-job-content{
    min-width:0;
}
.paper-job-content strong{
    display:inline;
    font-size:13px;
    font-weight:500;
}
.paper-job-code{
    display:inline-block;
    margin-left:7px;
    color:#6d6d6d;
    font-size:10px;
}
.paper-job-content p{
    margin:4px 0 0;
    color:#555;
    font-size:11px;
    line-height:1.65;
}
.paper-empty-job{
    display:grid;
    place-items:center;
    min-height:300px;
    color:#8a8a8a;
    font-size:13px;
}
.paper-receiver{
    display:flex;
    align-items:flex-end;
    gap:10px;
    margin-top:16px;
    font-size:15px;
    font-weight:500;
}
.paper-receiver strong{
    min-width:220px;
    padding:0 5px 3px;
    border-bottom:1px dotted #444;
    font-size:14px;
    font-weight:500;
}
.paper-footer-info{
    display:flex;
    justify-content:flex-end;
    gap:28px;
    margin-top:28px;
    padding-top:12px;
    border-top:1px solid #ececec;
    color:#777;
}
.paper-footer-info>div{
    display:flex;
    gap:7px;
    font-size:10px;
}
.paper-footer-info strong{
    color:#555;
    font-weight:500;
}
@media(max-width:900px){
    .work-order-paper{padding:32px 28px;min-height:auto}
    .paper-info-columns{grid-template-columns:1fr;gap:18px}
    .paper-meta-right{min-width:260px}
}
@media(max-width:620px){
    .work-paper-page-head{align-items:flex-start}
    .work-paper-actions{width:100%}
    .work-paper-actions .btn{width:100%}
    .work-order-paper{padding:26px 18px;border-radius:12px}
    .paper-document-meta{flex-direction:column;gap:12px}
    .paper-meta-right{width:100%;min-width:0}
    .paper-split-line{grid-template-columns:1fr}
    .paper-jobs-box{min-height:260px}
    .paper-footer-info{flex-direction:column;gap:5px}
}
@media print{
    @page{size:A4 portrait;margin:9mm}
    body.backend-body{background:#fff!important}
    .sidebar,.sidebar-overlay,.top-header,.work-paper-page-head{display:none!important}
    .app-main{margin-left:0!important;width:100%!important}
    .page-content{padding:0!important}
    .work-paper-wrap{padding:0!important;display:block!important}
    .work-order-paper{
        width:100%!important;
        min-height:0!important;
        border:0!important;
        border-radius:0!important;
        box-shadow:none!important;
        padding:4mm 5mm!important;
    }
    .paper-jobs-box{min-height:88mm}
    .paper-footer-info{display:none}
}


/* =====================================================
   Phase 18 - Work order item columns
   ===================================================== */
.paper-jobs-head{
    display:grid;
    grid-template-columns:62px 170px minmax(0,1fr);
    gap:10px;
    min-height:34px;
    align-items:center;
    padding:0 0 8px;
    border-bottom:1px solid #666;
    font-size:12px;
    font-weight:600;
}
.paper-job-row-table{
    grid-template-columns:62px 170px minmax(0,1fr);
    gap:10px;
    align-items:start;
}
.paper-job-col{
    min-width:0;
    font-size:12px;
    line-height:1.55;
}
.paper-job-col-no{
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:500;
}
.paper-job-col-code{
    color:#444;
    word-break:break-word;
}
.paper-job-col-name strong{
    display:block;
    font-size:13px;
    font-weight:500;
}
.paper-job-col-name p{
    margin:4px 0 0;
    color:#555;
    font-size:11px;
    line-height:1.65;
}
.paper-job-number,
.paper-job-code,
.paper-job-content{
    display:none;
}
@media print{
    .paper-jobs-head{
        grid-template-columns:55px 150px minmax(0,1fr);
        font-size:11px;
    }
    .paper-job-row-table{
        grid-template-columns:55px 150px minmax(0,1fr);
    }
    .paper-job-col{
        font-size:11px;
    }
    .paper-job-col-name strong{
        font-size:12px;
    }
}


/* =====================================================
   Phase 19 - Back Office Operations
   ===================================================== */
.page-head-actions{
    align-items:center;
}
.jobs-stats-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
}
.jobs-toolbar-head{
    gap:18px;
}
.backend-search-form,
.branch-search-form{
    display:flex;
    align-items:center;
    gap:8px;
}
.backend-search-box{
    width:320px;
    height:40px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 9px 0 11px;
    color:#8792a4;
}
.backend-search-box:focus-within{
    border-color:#9db2e5;
    box-shadow:0 0 0 3px rgba(42,70,153,.07);
}
.backend-search-box input{
    min-width:0;
    flex:1;
    height:100%;
    border:0;
    outline:0;
    background:transparent;
    color:#172033;
    font-size:11px;
}
.search-clear{
    width:27px;
    height:27px;
    display:grid;
    place-items:center;
    border-radius:7px;
    color:#7d899b;
    background:#f4f6f9;
}
.table-actions{
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
}
.compact-actions{
    flex-wrap:nowrap;
}
/* Sits directly beneath the 76px sticky header, so both stay pinned without
   overlapping. Horizontal padding matches .top-header and .page-content so the
   left edges of every section line up. */
.backend-company-bar{
    position:sticky;
    top:76px;
    z-index:20;
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    padding:11px 26px;
    background:#fff;
    border-bottom:1px solid var(--border);
    box-shadow:0 2px 10px rgba(17,37,70,.04);
}
.backend-company-bar-label{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    font-weight:600;
    color:#8791a3;
    flex:0 0 auto;
}
.backend-company-bar-tabs{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.backend-company-tab{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:1px;
    min-height:40px;
    padding:5px 16px;
    border:1px solid var(--border);
    border-radius:11px;
    background:#fff;
    color:#66758b;
    cursor:pointer;
    font-family:inherit;
    text-align:left;
    transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.backend-company-tab strong{font-size:12px;font-weight:700;line-height:1.3}
.backend-company-tab span{font-size:9px;opacity:.75;line-height:1.3}
.backend-company-tab:hover{border-color:#b9cdea;background:#f7faff}
.backend-company-tab.active{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
}
.backend-company-tab.active span{opacity:.85}
@media (max-width:820px){
    /* Match .page-content's 18px gutter at this breakpoint. */
    .backend-company-bar{padding:11px 18px}
}
@media (max-width:600px){
    /* The header shrinks to 68px here, so the bar follows it up. */
    .backend-company-bar{top:68px;padding:10px 14px;gap:10px}
    .backend-company-tab{padding:5px 12px}
    .backend-company-tab span{display:none}
}
.company-tab-switch{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:18px;
}
.backend-pagination-wrap{
    min-height:62px;
    border-top:1px solid #edf0f4;
    padding:12px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}
.pagination-info{
    font-size:9px;
    color:#7d889a;
}
.backend-pagination{
    display:flex;
    align-items:center;
    gap:5px;
}
.backend-pagination a{
    min-width:32px;
    height:32px;
    padding:0 9px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:9px;
    color:#58667c;
}
.backend-pagination a:hover{
    border-color:#b9c7e8;
    color:var(--primary);
}
.backend-pagination a.active{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
}
.backend-pagination a.disabled{
    pointer-events:none;
    opacity:.42;
}

/* Modal */
body.modal-open{
    overflow:hidden;
}
.backend-modal{
    position:fixed;
    inset:0;
    z-index:200;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.backend-modal.is-open{
    display:flex;
}
.backend-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(16,24,40,.46);
    backdrop-filter:blur(2px);
}
.backend-modal-dialog{
    position:relative;
    z-index:1;
    width:min(520px,100%);
    max-height:calc(100vh - 40px);
    overflow:auto;
    border-radius:16px;
    border:1px solid #e1e6ee;
    background:#fff;
    box-shadow:0 24px 70px rgba(16,24,40,.22);
}
.backend-modal-head{
    min-height:70px;
    padding:15px 18px;
    border-bottom:1px solid #edf0f4;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.backend-modal-head h3{
    margin:0;
    font-size:14px;
    font-weight:600;
}
.backend-modal-head p{
    margin:3px 0 0;
    font-size:9px;
    color:#7c8799;
}
.backend-modal-body{
    padding:18px;
}
.backend-modal-actions{
    min-height:64px;
    padding:12px 18px;
    border-top:1px solid #edf0f4;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
}

/* Operations KPI */
.branch-ops-stats{
    grid-template-columns:repeat(5,minmax(0,1fr));
}
.branch-ops-grid{
    grid-template-columns:350px minmax(0,1fr);
}
.branch-panel{
    overflow:hidden;
}
.branch-panel-header,
.branch-work-header{
    align-items:center;
}
.branch-search-form{
    padding:12px 13px;
    border-bottom:1px solid #edf0f4;
}
.branch-search-form .backend-search-box{
    width:auto;
    flex:1;
}
.branch-ops-list{
    max-height:none;
}
.branch-mini-pagination{
    min-height:52px;
    padding:10px 12px;
    border-top:1px solid #edf0f4;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}
.branch-mini-pagination a{
    min-height:30px;
    padding:0 10px;
    border:1px solid var(--border);
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:9px;
    color:#58667c;
}
.branch-mini-pagination a.disabled{
    pointer-events:none;
    opacity:.4;
}
.branch-mini-pagination span{
    font-size:9px;
    color:#7d889a;
}
.work-filter-bar{
    padding:12px 14px;
    border-bottom:1px solid #edf0f4;
    background:#fafbfd;
    display:flex;
    align-items:flex-end;
    gap:10px;
    flex-wrap:wrap;
}
.filter-group{
    min-width:160px;
}
.filter-group label{
    display:block;
    margin-bottom:5px;
    font-size:9px;
    color:#68758a;
}
.compact-control{
    height:38px;
    font-size:10px;
}
.keyed-status{
    background:#eaf8f1;
    color:#137a4b;
    gap:4px;
}
.unkeyed-status{
    background:#fff4e8;
    color:#9a5a07;
}
.keyed-button-static{
    pointer-events:none;
}
.keyed-detail-state{
    pointer-events:none;
}
.work-paper-actions{
    flex-wrap:wrap;
}
.work-paper-actions form{
    margin:0;
}
.work-paper-notice{
    max-width:930px;
    margin:0 auto 14px;
}

/* Paper footer now has 4 fields */
.paper-footer-info{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

/* Sidebar captions clearer */
.sidebar-nav .nav-caption{
    margin-top:17px;
}
.sidebar-nav .nav-caption:first-child{
    margin-top:4px;
}

@media(max-width:1280px){
    .branch-ops-stats{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}
@media(max-width:1100px){
    .branch-ops-grid{
        grid-template-columns:1fr;
    }
}
@media(max-width:900px){
    .jobs-toolbar-head{
        align-items:flex-start;
        flex-direction:column;
    }
    .backend-search-form{
        width:100%;
    }
    .backend-search-box{
        flex:1;
        width:auto;
    }
    .backend-pagination-wrap{
        align-items:flex-start;
        flex-direction:column;
    }
}
@media(max-width:760px){
    .branch-ops-stats,
    .jobs-stats-grid{
        grid-template-columns:1fr 1fr;
    }
    .work-filter-bar{
        align-items:stretch;
        flex-direction:column;
    }
    .filter-group{
        min-width:0;
    }
}


/* =====================================================
   Phase 20 - Master Tables + Products
   ===================================================== */
.master-stats-grid,
.product-stats-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
}
.master-toolbar-head{
    align-items:center;
    gap:16px;
}
.master-filter-form{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.master-filter-form .backend-search-box{
    width:290px;
}
.master-page-size{
    min-width:105px;
}
.master-table .col-seq{
    width:82px;
    text-align:center;
}
.master-table .col-manage{
    width:118px;
    text-align:center;
}
.master-table td.col-seq{
    color:#7d899a;
    font-weight:500;
}
.master-name-cell{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.master-name-cell>strong{
    font-weight:500;
}
.master-row-inactive{
    background:#fafbfc;
}
.master-row-inactive td{
    color:#8b95a5;
}
.icon-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
}
.icon-actions form{
    margin:0;
}
.icon-action{
    width:34px;
    height:34px;
    padding:0;
    border:1px solid #dce3ed;
    border-radius:9px;
    background:#fff;
    color:#54637b;
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:.14s ease;
}
.icon-action:hover{
    border-color:#b5c5e4;
    color:var(--primary);
    background:#f7faff;
}
.icon-action.danger{
    color:#b13b44;
}
.icon-action.danger:hover{
    border-color:#efc1c5;
    background:#fff5f6;
}
.icon-action.success{
    color:#16704a;
}
.icon-action.success:hover{
    border-color:#b9dfcd;
    background:#f0faf5;
}

/* Products */
.product-category-chips{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:-2px 0 16px;
}
.product-category-chips>span{
    min-height:34px;
    padding:0 11px;
    border:1px solid #dde5ef;
    border-radius:10px;
    background:#fff;
    color:#657389;
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:9px;
}
.product-category-chips strong{
    min-width:22px;
    height:22px;
    padding:0 6px;
    border-radius:999px;
    background:#eef4ff;
    color:var(--primary);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:9px;
}
.product-filter-form select{
    min-width:130px;
}
.category-badge{
    min-height:23px;
    padding:0 8px;
    border-radius:999px;
    background:#eef5ff;
    color:#3867ad;
    display:inline-flex;
    align-items:center;
    font-size:8px;
    font-weight:500;
}
.master-meta-line{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    margin-top:4px;
}

/* Restore modal open state after server-side validation */
.backend-modal.is-open{
    display:flex;
}

@media(max-width:1100px){
    .master-toolbar-head{
        align-items:flex-start;
        flex-direction:column;
    }
    .master-filter-form{
        width:100%;
        justify-content:flex-start;
    }
}
@media(max-width:760px){
    .master-stats-grid,
    .product-stats-grid{
        grid-template-columns:1fr 1fr;
    }
    .master-filter-form{
        align-items:stretch;
        flex-direction:column;
    }
    .master-filter-form .backend-search-box{
        width:100%;
    }
    .master-filter-form select,
    .master-page-size{
        width:100%;
        min-width:0;
    }
}


/* =====================================================
   Phase 21 - Product filter compact layout
   ===================================================== */
.product-toolbar-head{
    align-items:stretch;
    flex-direction:column;
}
.product-filter-form{
    width:100%;
    display:grid;
    grid-template-columns:minmax(260px, 1.5fr) repeat(3, minmax(130px, .8fr)) auto auto;
    gap:10px;
    align-items:center;
    justify-content:flex-start;
}
.product-filter-form .backend-search-box{
    width:100%;
}
.product-filter-form .compact-control,
.product-filter-form .master-page-size{
    width:100%;
    min-width:0;
}
.product-filter-form .btn{
    white-space:nowrap;
}
@media(max-width:1280px){
    .product-filter-form{
        grid-template-columns:minmax(240px, 1.4fr) repeat(2, minmax(130px, .8fr)) auto auto;
    }
    .product-filter-form .master-page-size{
        grid-column:1 / span 1;
    }
}
@media(max-width:980px){
    .product-filter-form{
        grid-template-columns:repeat(2, minmax(180px, 1fr));
    }
}
@media(max-width:760px){
    .product-filter-form{
        grid-template-columns:1fr;
    }
}


/* =====================================================
   Phase 22 - Compact toolbar for Branches + Jobs
   ===================================================== */

/* Keep title at top, filters directly underneath instead of stretching right */
.master-toolbar-head:not(.product-toolbar-head){
    align-items:stretch;
    flex-direction:column;
}

/* Branches + Jobs: Search | per page | action */
.master-toolbar-head:not(.product-toolbar-head) .master-filter-form{
    width:100%;
    display:grid;
    grid-template-columns:minmax(280px, 1fr) 120px auto;
    gap:10px;
    align-items:center;
    justify-content:flex-start;
}

.master-toolbar-head:not(.product-toolbar-head) .master-filter-form .backend-search-box{
    width:100%;
}

.master-toolbar-head:not(.product-toolbar-head) .master-page-size{
    width:100%;
    min-width:0;
}

.master-toolbar-head:not(.product-toolbar-head) .master-filter-form .btn{
    white-space:nowrap;
}

/* Avoid a large empty toolbar block */
.master-toolbar-head:not(.product-toolbar-head){
    padding-top:14px;
    padding-bottom:14px;
}

@media(max-width:900px){
    .master-toolbar-head:not(.product-toolbar-head) .master-filter-form{
        grid-template-columns:minmax(220px, 1fr) 110px auto;
    }
}

@media(max-width:700px){
    .master-toolbar-head:not(.product-toolbar-head) .master-filter-form{
        grid-template-columns:1fr;
    }

    .master-toolbar-head:not(.product-toolbar-head) .master-filter-form .backend-search-box,
    .master-toolbar-head:not(.product-toolbar-head) .master-page-size,
    .master-toolbar-head:not(.product-toolbar-head) .master-filter-form .btn{
        width:100%;
    }
}

/* Unified user management */
.user-admin-card{overflow:hidden}
.user-admin-toolbar{align-items:center}
.user-admin-toolbar .backend-search-form{margin-left:auto}
.user-admin-table{min-width:1050px}
.sequence-column{width:70px;text-align:center!important;color:#758096}
.manage-column{width:110px;text-align:center!important}
.user-icon-actions{display:flex;align-items:center;justify-content:center;gap:7px}
.user-icon-actions form{margin:0;display:flex}
.user-action-icon,.user-action-current{
    width:34px;height:34px;border:1px solid var(--border);border-radius:9px;background:#fff;
    display:inline-grid;place-items:center;color:#647187
}
button.user-action-icon{cursor:pointer;transition:.15s ease}
.user-action-icon.edit:hover{background:#eef3ff;border-color:#cbd8fb;color:var(--primary)}
.user-action-icon.disable:hover{background:#fff1f2;border-color:#ffd4d8;color:#aa2931}
.user-action-icon.enable:hover{background:#edf9f3;border-color:#c6eed9;color:#147648}
.user-action-current{background:#f4f6f9;color:#9aa3b2}
.branch-chip-list{display:flex;flex-wrap:wrap;gap:5px;max-width:360px}
.branch-chip{display:inline-flex;padding:4px 8px;border-radius:999px;background:#f1f4fa;color:#53617a;font-size:9px;line-height:1.35}
.branch-choice-list{max-height:250px;overflow:auto;border:1px solid #dfe5ef;border-radius:10px;padding:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.branch-choice-list label{display:flex;align-items:flex-start;gap:8px;padding:7px 8px;border-radius:8px;cursor:pointer;font-size:10px;color:#465369}
.branch-choice-list label:hover{background:#f5f7fb}
.branch-choice-list input{margin-top:2px;accent-color:var(--primary);flex:0 0 auto}
.branch-choice-list span{min-width:0;line-height:1.45}
.backend-modal-dialog.modal-wide{width:min(720px,100%)}
@media(max-width:820px){
    .user-admin-toolbar{align-items:stretch;flex-direction:column}
    .user-admin-toolbar .backend-search-form{margin-left:0;width:100%}
    .user-admin-toolbar .backend-search-box{width:100%}
}
@media(max-width:560px){
    .page-head-actions,.page-head-actions .btn{width:100%}
    .branch-choice-list{grid-template-columns:1fr}
    .backend-modal{padding:10px}
    .backend-modal-dialog{max-height:calc(100vh - 20px)}
}

@media(max-width:900px){
    .dashboard-recent-grid{grid-template-columns:1fr}
}

@media(max-width:620px){
    .dashboard-system-grid{grid-template-columns:1fr}
    .dashboard-system-item + .dashboard-system-item{border-left:0;border-top:1px solid var(--border)}
    .dashboard-section-head p{line-height:1.55}
}

/* Production CSP: presentation stays in the stylesheet, never inline HTML. */
.header-logout-form{margin:0}
.dashboard-ready-title{font-size:15px;margin:0 0 8px}
.dashboard-ready-copy{font-size:11px;color:#6b7485;margin:0;line-height:1.8}
.dashboard-ready-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.work-paper-title{margin-top:10px}
.backend-history-title{display:block;font-size:12px;color:#44516a}
.backend-history-copy{display:block;margin-top:5px}

/* Excel stock import */
.alert-warning{background:#fff8ec;color:#8a5a10;border:1px solid #ffe4b8}
.alert-info{background:#eef3ff;color:#27407e;border:1px solid #d4dffb}
.status-warn{background:#fff5e6;color:#8a5a10}
.file-control{padding:10px 12px;height:auto;line-height:1.4}
.stock-import-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.stock-import-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--border)}
.stock-import-summary-item{padding:13px 16px;border-right:1px solid var(--border)}
.stock-import-summary-item:last-child{border-right:0}
.stock-import-summary-item span{display:block;font-size:10px;color:var(--muted)}
.stock-import-summary-item strong{display:block;font-size:16px;margin-top:4px;font-weight:600}
.stock-import-stats .stat-value{font-size:24px}
.stock-import-code-list{display:block;margin-top:7px;line-height:2}
.stock-import-code-list code{background:#fff;border:1px solid #ffe0b0;border-radius:6px;padding:2px 6px;margin-right:5px;font-size:10px}
.stock-import-confirm{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:16px}
.row-skipped{background:#fdfaf5}
.row-skipped:hover{background:#fbf6ee}
.card-spaced{margin-top:16px}
.detail-label{width:180px}
@media(max-width:900px){
    .stock-import-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
    .stock-import-summary-item:nth-child(2n){border-right:0}
}
@media(max-width:560px){
    .stock-import-actions,.stock-import-actions .btn{width:100%}
    .stock-import-confirm{flex-direction:column-reverse}
    .stock-import-confirm .btn{width:100%}
}

/* Date-range filter (dashboard + branch history) */
.date-filter-card{margin-bottom:20px;overflow:hidden}
.date-filter-form{
    display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
    padding:14px 16px;background:#fafbfd;border-bottom:1px solid #edf0f4
}
.date-filter-form .filter-group{min-width:150px}
.date-quick-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}
.date-chip{
    display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;
    border:1px solid var(--border);background:#fff;color:#53617a;font-size:10px;
    font-weight:500;transition:.15s ease;white-space:nowrap
}
.date-chip:hover{background:#eef3ff;border-color:#cbd8fb;color:var(--primary)}
.date-chip.active{background:var(--primary);border-color:var(--primary);color:#fff}
.date-filter-note{
    display:flex;align-items:center;gap:7px;padding:10px 16px;
    font-size:10px;color:var(--muted)
}
.date-filter-note .icon{flex:0 0 auto;color:#8792a7}
@media(max-width:820px){
    .date-filter-form{align-items:stretch;flex-direction:column}
    .date-filter-form .filter-group{min-width:0}
    .date-quick-links{margin-left:0}
    .date-chip{flex:1;justify-content:center}
}

/* Master-data import preview */
.page-head-buttons{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.import-question-card{margin-bottom:16px;border-color:#cbd8fb;background:#f7f9ff}
.import-question-title{margin:0 0 12px;font-size:14px;font-weight:600}
.import-question-choice{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.import-question-choice input{margin-top:3px;accent-color:var(--primary);flex:0 0 auto;width:16px;height:16px}
.import-question-choice strong{display:block;font-size:12px;font-weight:500}
.import-question-choice small{display:block;margin-top:3px;font-size:10px;color:var(--muted)}
.import-bulk-category{
    display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
    margin-top:14px;padding-top:14px;border-top:1px solid #dfe6f7
}
.import-bulk-category .filter-group{min-width:220px}
.import-bulk-category .form-help{width:100%}
.import-category-select{min-width:170px}
@media(max-width:560px){
    .page-head-buttons,.page-head-buttons .btn{width:100%}
    .import-bulk-category,.import-bulk-category .btn{width:100%}
    .import-bulk-category .filter-group{min-width:0;width:100%}
}

/* Security monitoring */
.security-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.security-stat{padding:18px}
.security-stat span{display:block;font-size:10px;color:var(--muted)}
.security-stat strong{display:block;margin-top:7px;font-size:25px;font-weight:600;color:var(--text)}
.security-card{overflow:hidden;margin-bottom:18px}
.security-block-form{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(150px,.6fr) minmax(260px,1.5fr) auto;gap:12px;align-items:end;padding:16px;border-bottom:1px solid var(--border)}
.security-table{min-width:940px}
.security-table code{font-family:Consolas,"Courier New",monospace;font-size:10px;background:#f4f6f9;border-radius:5px;padding:2px 5px;color:#344054}
.security-table form{margin:0}
.status-success{background:#eaf8f1;color:#137346}
.status-danger{background:#fff1f2;color:#a52b35}
.status-neutral{background:#f2f4f7;color:#667085}
@media(max-width:1050px){
    .security-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .security-block-form{grid-template-columns:repeat(2,minmax(0,1fr))}
    .security-block-form .btn{width:100%}
}
@media(max-width:600px){
    .security-stat-grid,.security-block-form{grid-template-columns:1fr}
}