:root{
    --bg:#f7f5f2;
    --surface:#fff;
    --surface2:#f1eee9;
    --ink:#211b18;
    --muted:#81766e;
    --line:#e4ddd5;
    --accent:#6f4a38;
    --accent2:#b78b67;
    --ok:#2f8b67;
    --danger:#b34d46;
    --shadow:0 12px 40px rgba(55,38,28,.08)
}

*{
    box-sizing:border-box
}

body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font:14px Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif
}

button,
input,
select,
textarea{
    font:inherit
}

button{
    cursor:pointer
}


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

.sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:240px;
    background:#2a211d;
    color:#eee5df;
    padding:22px 14px;
    display:flex;
    flex-direction:column;
    z-index:5
}

.side-brand{
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 8px 28px
}

.side-brand b{
    display:block;
    font-size:13px;
    letter-spacing:.12em
}

.side-brand span{
    font-size:8px;
    color:#a99589;
    letter-spacing:.12em
}

.mark{
    width:40px;
    height:40px;
    border-radius:11px;
    background:#8a5e45;
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:900;
    letter-spacing:-.08em
}

.mark.small{
    width:34px;
    height:34px;
    font-size:12px
}

.workspace-label{
    font-size:8px;
    color:#a99589;
    letter-spacing:.18em;
    padding:0 10px 8px
}

nav button,
.side-bottom>button{
    width:100%;
    border:0;
    background:transparent;
    color:#cdbeb5;
    text-align:left;
    padding:11px 12px;
    border-radius:8px;
    display:flex;
    gap:10px;
    align-items:center;
    margin:2px 0
}

nav button:hover,
nav button.active,
.side-bottom>button:hover{
    background:#3a2e28;
    color:#fff
}

nav i,
.side-bottom i{
    width:16px;
    font-style:normal;
    text-align:center
}

.side-bottom{
    margin-top:auto
}

.user-chip{
    border-top:1px solid #493b34;
    padding:16px 8px 4px;
    margin-top:12px
}

.user-chip span{
    font-size:8px;
    color:#bda99c;
    letter-spacing:.12em
}

.user-chip b{
    display:block;
    margin-top:4px;
    font-size:11px
}

.main{
    margin-left:240px;
    min-height:100vh
}

.topbar{
    height:64px;
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(10px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 28px;
    position:sticky;
    top:0;
    z-index:4
}

.crumb{
    display:flex;
    gap:14px;
    align-items:center
}

.crumb span{
    font-size:9px;
    color:var(--muted);
    letter-spacing:.15em
}

.crumb b{
    font-size:13px
}

.top-actions{
    display:flex;
    gap:8px
}

.icon-btn,
.ghost{
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--ink);
    border-radius:7px;
    padding:8px 11px
}

.page{
    padding:30px;
    max-width:1500px;
    margin:auto
}


/* ============================================================
   HERO
   ============================================================ */

.hero{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:flex-end;
    margin-bottom:26px
}

.hero.compact{
    align-items:center
}

.eyebrow{
    font-size:9px;
    letter-spacing:.2em;
    color:var(--accent);
    font-weight:800;
    margin-bottom:8px
}

.hero h1{
    font-size:30px;
    line-height:1.05;
    margin:0 0 8px;
    letter-spacing:-.04em
}

.hero p{
    margin:0;
    color:var(--muted)
}

.primary{
    border:0;
    background:var(--accent);
    color:#fff;
    border-radius:7px;
    padding:11px 15px;
    font-weight:800;
    box-shadow:0 5px 15px rgba(111,74,56,.18)
}

.btn-primary{
    border:0;
    background:var(--accent);
    color:#fff;
    border-radius:7px;
    padding:11px 15px;
    font-weight:800;
    box-shadow:0 5px 15px rgba(111,74,56,.18)
}

.btn-primary:hover,
.primary:hover{
    opacity:.92
}


/* ============================================================
   KPI / METRICS
   ============================================================ */

.kpis{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-bottom:14px
}

.metrics{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
    margin-bottom:14px
}

.kpis>div,
.metrics>div,
.panel{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    box-shadow:var(--shadow)
}

.kpis>div,
.metrics>div{
    padding:17px
}

.kpis span,
.kpis small,
.metrics small{
    display:block;
    color:var(--muted);
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.1em
}

.kpis b,
.metrics b{
    display:block;
    font-size:23px;
    margin:8px 0 5px
}

.grid2{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:14px;
    margin-bottom:14px
}


/* ============================================================
   PANELS
   ============================================================ */

.panel{
    padding:18px
}

.panel-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:14px
}

.panel-head b,
.panel-head strong,
.section-title{
    font-size:10px;
    letter-spacing:.13em
}

.panel-head small{
    display:block;
    color:var(--muted);
    margin-top:4px;
    font-size:10px
}

.panel-head input{
    border:1px solid var(--line);
    border-radius:7px;
    padding:8px 10px;
    min-width:220px;
    background:var(--surface);
    color:var(--ink)
}


/* ============================================================
   PIPELINE
   ============================================================ */

.pipeline{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:7px
}

.pipe{
    padding:10px;
    background:var(--surface2);
    border-radius:7px;
    min-height:90px
}

.pipe span{
    font-size:8px;
    color:var(--muted);
    display:block
}

.pipe b{
    display:block;
    font-size:19px;
    margin-top:9px
}


/* ============================================================
   QUICK ACTIONS
   ============================================================ */

.quick-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px
}

.quick-grid button{
    border:1px solid var(--line);
    background:var(--surface2);
    padding:14px;
    border-radius:8px;
    text-align:left
}

.quick-grid button:first-letter{
    font-size:20px
}

.quick-grid span{
    display:block;
    font-weight:800;
    margin-top:8px
}

.quick-grid small{
    color:var(--muted)
}


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

.table-wrap{
    overflow:auto
}

.table{
    width:100%;
    border-collapse:collapse;
    min-width:900px
}

.table th{
    font-size:8px;
    color:var(--muted);
    text-align:left;
    letter-spacing:.12em;
    padding:10px;
    border-bottom:1px solid var(--line)
}

.table td{
    padding:11px 10px;
    border-bottom:1px solid #eee8e2;
    font-size:11px
}

.table tr:hover td{
    background:#fbfaf8
}

.pill{
    padding:5px 7px;
    background:#eee6df;
    border-radius:5px;
    font-size:8px;
    font-weight:900
}

.money{
    font-variant-numeric:tabular-nums
}

.green{
    color:var(--ok);
    font-weight:800
}

.red{
    color:var(--danger);
    font-weight:800
}


/* ============================================================
   PROJECT / CLIENT CARDS
   ============================================================ */

.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:13px
}

.project-card,
.client-card,
.workflow-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    padding:17px
}

.card-top{
    display:flex;
    justify-content:space-between;
    gap:10px
}

.project-card h3,
.client-card h3{
    margin:0;
    font-size:15px
}

.muted{
    color:var(--muted);
    font-size:10px
}

.detail{
    display:flex;
    justify-content:space-between;
    padding:8px 0;
    border-bottom:1px solid #eee8e2;
    font-size:10px
}

.card-actions{
    display:flex;
    gap:7px;
    margin-top:13px
}

.card-actions button{
    flex:1
}


/* ============================================================
   WORKFLOW
   ============================================================ */

.workflow{
    display:block
}

.workflow-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px
}

.workflow-card .num{
    font-size:9px;
    color:var(--accent);
    font-weight:900
}

.workflow-card h3{
    margin:7px 0
}

.workflow-card p{
    font-size:10px;
    color:var(--muted);
    line-height:1.5
}


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

.lead-layout{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:14px
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:16px
}

.form-grid label,
.modal-form label{
    font-size:9px;
    color:var(--muted);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.07em
}

.form-grid input,
.form-grid select,
.form-grid textarea,
.modal-form input,
.modal-form select,
.modal-form textarea{
    display:block;
    width:100%;
    margin-top:6px;
    border:1px solid var(--line);
    background:#fff;
    border-radius:7px;
    padding:10px;
    color:var(--ink);
    text-transform:none;
    letter-spacing:0
}

.form-grid textarea{
    min-height:86px;
    resize:vertical
}

.full{
    grid-column:1/-1
}

.form-actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:18px
}


/* ============================================================
   PROCESS
   ============================================================ */

.process-panel .step{
    display:flex;
    gap:12px;
    padding:14px 0;
    border-bottom:1px solid var(--line)
}

.step>b{
    color:var(--accent);
    font-size:10px
}

.step strong,
.step small{
    display:block
}

.step small{
    color:var(--muted);
    font-size:10px;
    margin-top:3px
}


/* ============================================================
   MODAL
   ============================================================ */

.modal{
    position:fixed;
    inset:0;
    background:rgba(32,24,20,.45);
    display:grid;
    place-items:center;
    z-index:20;
    padding:20px
}

.modal-card{
    width:min(760px,96vw);
    max-height:92vh;
    overflow:auto;
    background:#fff;
    border-radius:12px;
    padding:24px;
    position:relative;
    box-shadow:0 30px 80px rgba(0,0,0,.25)
}

.modal-close,
.close{
    position:absolute;
    right:14px;
    top:12px;
    border:0;
    background:transparent;
    font-size:24px
}

.modal-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}

.modal-form h2,
.modal-form .full{
    grid-column:1/-1
}

.modal-form h2{
    margin:0 0 3px;
    font-size:22px
}

.modal-form textarea{
    min-height:80px
}


/* ============================================================
   EMPTY / ERROR
   ============================================================ */

.empty{
    padding:30px;
    text-align:center;
    color:var(--muted)
}

.error{
    color:var(--danger)
}


/* ============================================================
   LOGIN
   ============================================================ */

.login-screen{
    min-height:100vh;
    display:grid;
    place-items:center;
    background:#2a211d
}

.login-card{
    width:350px;
    background:#fff;
    border-radius:12px;
    padding:32px;
    box-shadow:0 30px 80px rgba(0,0,0,.3)
}

.login-card .brand{
    font-size:9px;
    letter-spacing:.2em;
    margin-top:8px;
    color:var(--muted)
}

.login-card h1{
    margin:25px 0 4px
}

.login-card p{
    color:var(--muted);
    font-size:12px
}

.login-card label{
    display:block;
    font-size:10px;
    font-weight:800;
    margin:16px 0
}

.login-card input{
    display:block;
    width:100%;
    margin-top:6px;
    padding:11px;
    border:1px solid var(--line);
    border-radius:7px
}

.login-card .primary,
.login-card .btn-primary{
    width:100%;
    margin-top:8px
}

.login-description{
    line-height:1.5
}

.login-subtitle{
    color:var(--muted);
    font-size:9px;
    letter-spacing:.16em;
    font-weight:800
}

.login-footer{
    margin-top:20px;
    color:var(--muted);
    font-size:8px;
    letter-spacing:.12em;
    text-align:center
}

#loginMessage{
    min-height:18px;
    margin-top:12px;
    font-size:11px
}

#loginMessage.error{
    color:var(--danger)
}

.ei-logo{
    width:42px;
    height:42px;
    border-radius:10px;
    background:#8a5e45;
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:900;
    letter-spacing:-.08em
}

.ei-logo.small{
    width:34px;
    height:34px;
    font-size:11px
}


/* ============================================================
   TOAST
   ============================================================ */

.toast-wrap{}

#toast{
    /* Sits above the AI Copilot floating button (bottom:24px) so status
       messages are never hidden behind it. */
    position:fixed;
    right:20px;
    bottom:84px;
    z-index:1200;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    pointer-events:none
}

.toast{
    pointer-events:auto;
    background:#2a211d;
    color:#fff;
    padding:11px 15px;
    border-radius:7px;
    z-index:30;
    font-size:11px;
    margin-top:7px;
    box-shadow:0 10px 30px rgba(0,0,0,.18)
}

.toast-error{
    background:#a74640
}


/* ============================================================
   HIDDEN STATE
   IMPORTANT:
   Use native hidden attribute only.
   No body.authenticated CSS dependency.
   ============================================================ */

[hidden]{
    display:none !important
}

#app[hidden],
#login[hidden],
#modal[hidden]{
    display:none !important
}


/* ============================================================
   PHASE 2 — COMPACT CLIENT REGISTER + 360
   ============================================================ */

.client-register{
    min-width:1050px
}

.client-register td,
.client-register th{
    white-space:nowrap
}

.client360-toolbar{
    margin-bottom:14px
}

.client360-toolbar label{
    display:block;
    font-size:9px;
    color:var(--muted);
    font-weight:800;
    letter-spacing:.1em
}

.client360-toolbar select{
    display:block;
    margin-top:7px;
    width:min(520px,100%);
    padding:11px;
    border:1px solid var(--line);
    border-radius:7px;
    background:var(--surface);
    color:var(--ink)
}

.client360-grid{
    display:grid;
    grid-template-columns:300px 1fr;
    gap:14px
}

.client-profile h2{
    font-size:24px;
    margin:0 0 14px
}

.notes{
    margin-top:14px;
    padding:12px;
    background:var(--surface2);
    border-radius:7px;
    color:var(--muted);
    font-size:11px;
    line-height:1.5;
    min-height:70px
}

.client360-main{
    min-width:0
}

.kpis.mini{
    grid-template-columns:repeat(4,1fr);
    margin-bottom:14px
}

.kpis.mini>div{
    padding:13px
}

.kpis.mini b{
    font-size:18px
}

.client360-view .panel{
    box-shadow:none
}


/* ============================================================
   NEW CLIENT 360 TABLE
   ============================================================ */

.ei-c360{
    width:100%;
    overflow:auto
}

.ei-c360-table{
    width:100%;
    min-width:1000px;
    border-collapse:collapse
}

.ei-c360-table th{
    text-align:left;
    font-size:8px;
    color:var(--muted);
    letter-spacing:.12em;
    padding:10px;
    border-bottom:1px solid var(--line);
    white-space:nowrap
}

.ei-c360-table td{
    padding:11px 10px;
    border-bottom:1px solid #eee8e2;
    font-size:11px;
    vertical-align:middle
}

.ei-c360-table tr:hover>td{
    background:#fbfaf8
}

.ei-c360-table td strong{
    display:block
}

.ei-c360-table td small{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:9px
}

.ei-c360-btn{
    border:1px solid var(--line);
    background:var(--surface2);
    color:var(--ink);
    border-radius:6px;
    padding:7px 10px;
    font-size:8px;
    font-weight:900;
    letter-spacing:.08em
}

.ei-c360-btn:hover{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent)
}

.ei-c360-detail>td{
    background:var(--surface2);
    padding:18px
}

.ei-c360-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0 18px;
    margin-bottom:14px
}

.ei-c360-box{
    padding:10px 0;
    border-bottom:1px solid var(--line)
}

.ei-c360-box span{
    display:block;
    color:var(--muted);
    font-size:8px;
    letter-spacing:.12em;
    text-transform:uppercase
}

.ei-c360-box b{
    display:block;
    margin-top:5px;
    font-size:11px
}

.ei-c360-notes{
    padding:12px;
    margin-bottom:14px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:7px;
    color:var(--muted);
    font-size:10px;
    line-height:1.5
}

.ei-c360-project{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:12px;
    align-items:center;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:7px;
    padding:10px;
    margin-top:7px;
    font-size:10px
}

.ei-c360-project span{
    color:var(--muted)
}

.ei-no-data{
    padding:12px 0;
    color:var(--muted);
    font-size:10px
}


/* ============================================================
   NEW ONE-LINE PROJECT REGISTER
   ============================================================ */

.ei-project-wrap{
    width:100%;
    overflow:auto
}

.ei-project-table{
    width:100%;
    min-width:1250px;
    border-collapse:collapse
}

.ei-project-table th{
    text-align:left;
    font-size:8px;
    color:var(--muted);
    letter-spacing:.12em;
    padding:10px;
    border-bottom:1px solid var(--line);
    white-space:nowrap
}

.ei-project-table td{
    padding:12px 10px;
    border-bottom:1px solid #eee8e2;
    font-size:10px;
    white-space:nowrap;
    vertical-align:middle
}

.ei-project-table tbody tr:hover td{
    background:#fbfaf8
}

.ei-project-table td strong{
    display:block;
    font-size:10px
}

.ei-project-table td small{
    display:block;
    color:var(--muted);
    font-size:8px;
    margin-top:3px
}

.ei-status{
    display:inline-block;
    padding:5px 7px;
    border-radius:5px;
    background:#eee6df;
    font-size:8px;
    font-weight:900;
    letter-spacing:.04em
}

.ei-money{
    font-variant-numeric:tabular-nums;
    font-weight:700
}

.ei-received{
    color:var(--ok)
}

.ei-balance{
    color:var(--danger)
}

.ei-progress{
    display:flex;
    align-items:center;
    gap:7px;
    min-width:90px
}

.ei-progress-bar{
    width:60px;
    height:6px;
    background:var(--surface2);
    border-radius:99px;
    overflow:hidden
}

.ei-progress-bar span{
    display:block;
    height:100%;
    background:var(--accent);
    border-radius:99px
}

.ei-progress small{
    color:var(--muted);
    font-size:8px
}


/* ============================================================
   PHASE 3 — PROJECT 360
   ============================================================ */

.project360-head{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:flex-end;
    margin-bottom:18px
}

.project360-head h1{
    font-size:32px;
    line-height:1.05;
    margin:0 0 8px;
    letter-spacing:-.04em
}

.project360-head p{
    margin:0;
    color:var(--muted)
}

.back-link{
    border:0;
    background:transparent;
    color:var(--accent);
    padding:0;
    margin-bottom:15px;
    font-weight:800
}

.project360-actions{
    display:flex;
    gap:8px
}

.project360-kpis{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-bottom:14px
}

.project360-kpis>div{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    padding:15px
}

.project360-kpis span,
.info-grid span,
.commercial-grid span{
    display:block;
    color:var(--muted);
    font-size:8px;
    letter-spacing:.12em;
    text-transform:uppercase
}

.project360-kpis b{
    display:block;
    font-size:20px;
    margin-top:7px
}

.project360-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 310px;
    gap:14px
}

.project360-main{
    display:grid;
    gap:14px
}

.project360-side{
    display:grid;
    align-content:start;
    gap:14px
}

.project360-side h2{
    margin:0 0 10px;
    font-size:20px
}

.project360-side h3{
    margin:0 0 7px;
    font-size:13px
}

.info-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0 18px
}

.info-grid>div,
.commercial-grid>div{
    padding:12px 0;
    border-bottom:1px solid var(--line)
}

.info-grid b,
.commercial-grid b{
    display:block;
    margin-top:5px;
    font-size:11px
}

.info-grid .full{
    grid-column:1/-1
}

.commercial-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:0 14px
}

.project-workflow{
    display:flex;
    gap:4px;
    overflow:auto;
    padding-bottom:3px
}

.project-step{
    min-width:145px;
    flex:1;
    padding:13px;
    background:var(--surface2);
    border:1px solid var(--line);
    border-radius:8px
}

.project-step>span{
    font-size:8px;
    color:var(--muted);
    font-weight:900
}

.project-step b{
    display:block;
    margin-top:7px;
    font-size:10px
}

.project-step small{
    display:block;
    color:var(--muted);
    margin-top:3px;
    font-size:9px
}

.project-step.current{
    border-color:var(--accent);
    box-shadow:inset 0 0 0 1px var(--accent)
}

.project-step.done{
    background:#edf5ef
}

.dark .project-step.done{
    background:#253027
}

.full-btn{
    width:100%;
    margin-top:13px
}

.progress-track{
    height:7px;
    background:var(--surface2);
    border-radius:99px;
    overflow:hidden;
    margin-top:10px
}

.progress-track span{
    display:block;
    height:100%;
    background:var(--accent);
    border-radius:99px
}


/* ============================================================
   DARK MODE
   ============================================================ */

body.dark{
    --bg:#171312;
    --surface:#211b18;
    --surface2:#2a211d;
    --ink:#f1e8e2;
    --muted:#a99a90;
    --line:#40352f
}

.dark .topbar{
    background:rgba(33,27,24,.9)
}

.dark input,
.dark select,
.dark textarea{
    background:#211b18;
    color:#fff;
    border-color:#40352f
}

.dark .table tr:hover td,
.dark .ei-project-table tbody tr:hover td,
.dark .ei-c360-table tr:hover>td{
    background:#2a211d
}

.dark .ei-c360-detail>td{
    background:#2a211d
}

.dark .ei-c360-notes{
    background:#211b18
}

.dark .ei-c360-project{
    background:#211b18
}


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

@media(max-width:1000px){

    .sidebar{
        width:70px
    }

    .side-brand div:last-child,
    .workspace-label,
    nav button:not(.active)::after,
    .side-bottom>button span,
    .user-chip{
        display:none
    }

    .main{
        margin-left:70px
    }

    .sidebar nav button{
        justify-content:center
    }

    .grid2,
    .lead-layout{
        grid-template-columns:1fr
    }

    .cards{
        grid-template-columns:1fr 1fr
    }

    .workflow-grid{
        grid-template-columns:1fr 1fr
    }

    .metrics{
        grid-template-columns:repeat(3,1fr)
    }

    .project360-layout{
        grid-template-columns:1fr
    }

    .project360-side{
        grid-template-columns:repeat(3,1fr)
    }

    .commercial-grid{
        grid-template-columns:repeat(3,1fr)
    }

    .ei-c360-grid{
        grid-template-columns:repeat(2,1fr)
    }
}


@media(max-width:900px){

    .client360-grid{
        grid-template-columns:1fr
    }

    .kpis.mini{
        grid-template-columns:1fr 1fr
    }

    .ei-c360-grid{
        grid-template-columns:1fr 1fr
    }

    .ei-c360-project{
        grid-template-columns:1fr 1fr
    }
}


@media(max-width:700px){

    .page{
        padding:18px
    }

    .hero{
        align-items:flex-start;
        flex-direction:column
    }

    .kpis{
        grid-template-columns:1fr 1fr
    }

    .metrics{
        grid-template-columns:1fr 1fr
    }

    .cards,
    .workflow-grid,
    .form-grid,
    .modal-form{
        grid-template-columns:1fr
    }

    .full{
        grid-column:auto
    }

    .topbar{
        padding:0 16px
    }

    .hero h1{
        font-size:24px
    }

    .pipeline{
        grid-template-columns:repeat(2,1fr)
    }

    .project360-head{
        align-items:flex-start;
        flex-direction:column
    }

    .project360-kpis{
        grid-template-columns:1fr 1fr
    }

    .info-grid,
    .commercial-grid,
    .project360-side{
        grid-template-columns:1fr
    }

    .info-grid .full{
        grid-column:auto
    }

    .ei-c360-grid{
        grid-template-columns:1fr
    }

    .ei-c360-project{
        grid-template-columns:1fr
    }

    .login-card{
        width:min(350px,calc(100vw - 32px))
    }
}



/* ============================================================
   ENGINE INT PATCH v2 — layout for index.php's ACTUAL markup
   (header > nav > main > section[data-page]). Uses !important
   on properties that legacy sidebar-shell rules ("nav button",
   ".side-bottom>button") were already setting on THIS page's
   nav buttons, so this block wins regardless of source order
   or any stale cached copy of the pre-patch rules.
   If you can see THIS comment in view-source of the live
   style.css, the correct file is deployed.
   ============================================================ */

#app > header{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    flex-wrap:nowrap !important;
    height:64px;
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(10px);
    gap:16px;
    padding:0 24px;
    position:sticky;
    top:0;
    z-index:4
}

#app > header .top-brand{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:10px;
    min-width:200px;
    flex:0 0 auto
}

#app > header .top-brand .top-logo{
    width:38px;
    height:38px;
    border-radius:9px;
    background:var(--accent);
    color:#fff;
    display:flex !important;
    align-items:center;
    justify-content:center;
    font-weight:900;
    letter-spacing:-.06em;
    flex-shrink:0
}

#app > header .top-brand > div{
    display:block
}

#app > header .top-brand strong{
    display:block;
    font-size:13px;
    letter-spacing:.05em
}

#app > header .top-brand small{
    display:block;
    font-size:8px;
    color:var(--muted);
    letter-spacing:.14em
}

#app > header nav{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:4px;
    flex:1 1 auto;
    overflow-x:auto;
    min-width:0
}

#app > header nav button{
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    text-align:center !important;
    border:1px solid transparent !important;
    background:transparent !important;
    color:var(--muted) !important;
    border-radius:7px !important;
    padding:9px 12px !important;
    font-size:10px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    display:inline-flex !important;
    flex:0 0 auto !important;
    gap:0 !important
}

#app > header nav button:hover{
    background:var(--surface2) !important;
    color:var(--ink) !important
}

#app > header nav button.active{
    background:var(--accent) !important;
    color:#fff !important
}

.header-right{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:8px;
    flex:0 0 auto
}

.header-right #role{
    font-size:9px;
    font-weight:900;
    letter-spacing:.1em;
    color:var(--accent);
    border:1px solid var(--line);
    border-radius:6px;
    padding:6px 8px
}

.header-right button{
    border:1px solid var(--line);
    background:var(--surface);
    border-radius:7px;
    width:32px;
    height:32px
}

#login{
    min-height:100vh;
    display:flex !important;
    align-items:center;
    justify-content:center;
    background:#2a211d;
    padding:20px
}

#app > main{
    padding:26px;
    max-width:1500px;
    margin:0 auto
}

.page-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:16px;
    margin-bottom:20px
}

.page-head h2{
    font-size:26px;
    margin:6px 0
}

.page-head p{
    color:var(--muted);
    margin:0;
    max-width:640px
}

.metrics{
    display:grid !important;
    grid-template-columns:repeat(5,1fr) !important;
    gap:12px;
    margin-bottom:14px
}

.metric{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    box-shadow:var(--shadow);
    padding:16px
}

.metric span{
    display:block;
    color:var(--muted);
    font-size:9px;
    letter-spacing:.1em;
    text-transform:uppercase
}

.metric strong{
    display:block;
    font-size:22px;
    margin-top:8px
}

.mini-table{
    width:100%;
    border-collapse:collapse;
    min-width:760px
}

.mini-table th{
    font-size:8px;
    color:var(--muted);
    text-align:left;
    letter-spacing:.1em;
    padding:10px;
    border-bottom:1px solid var(--line)
}

.mini-table td{
    padding:10px;
    border-bottom:1px solid #eee8e2;
    font-size:11px
}

.mini-table tr:hover td{
    background:#fbfaf8
}

.client-table-wrap{
    overflow:auto
}

.cards{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:13px
}

.card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    padding:16px
}

.toast-warn{
    background:#b78b3d
}

@media(max-width:900px){
    #app > header nav{
        overflow-x:auto
    }
    .metrics{
        grid-template-columns:repeat(2,1fr) !important
    }
    .cards{
        grid-template-columns:1fr !important
    }
}


/* ============================================================
   ENGINE INT PATCH v3 — add/edit form controls (app.js CRUD)
   ============================================================ */

.text-btn{
    border:0;
    background:transparent;
    color:var(--accent);
    font-weight:800;
    font-size:10px;
    padding:4px 6px
}

.text-btn:hover{
    text-decoration:underline
}

.btn-secondary{
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--ink);
    border-radius:7px;
    padding:11px 15px;
    font-weight:800;
    font-size:9px
}

.btn-secondary:hover{
    background:var(--surface2)
}


/* ============================================================
   ENGINE INT PATCH v4 — workflow board stage-status selects
   ============================================================ */

.workflow-table{
    min-width:1100px
}

.stage-select{
    width:auto !important;
    min-width:120px;
    margin-top:0 !important;
    padding:6px 8px !important;
    border-radius:6px;
    font-size:9px !important;
    font-weight:800;
    border:1px solid var(--line);
    background:var(--surface2);
    color:var(--ink)
}

.stage-select.stage-not-started{
    background:#f1eee9;
    color:var(--muted)
}

.stage-select.stage-in-progress{
    background:#e7f0fb;
    color:#245a9e;
    border-color:#b9d3f0
}

.stage-select.stage-hold{
    background:#fbe9e7;
    color:var(--danger);
    border-color:#f0c6c1
}

.stage-select.stage-completed{
    background:#e7f5ee;
    color:var(--ok);
    border-color:#bfe4d1
}

.stage-select.stage-locked{
    background:#ececec;
    color:#9a9a9a
}


/* ============================================================
   ENGINE INT PATCH v5 — dashboard overview + Project 360 modal
   ============================================================ */

.attention-item{
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--surface2);
    margin-bottom:8px
}

.attention-item b{
    display:block;
    font-size:11px
}

.attention-item small{
    display:block;
    color:var(--muted);
    font-size:9px;
    margin-top:3px
}

.stage-bar-row{
    display:grid;
    grid-template-columns:150px 1fr 30px;
    align-items:center;
    gap:10px;
    margin-bottom:9px
}

.stage-bar-label{
    font-size:9px;
    color:var(--muted);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em
}

.stage-bar-track{
    height:9px;
    background:var(--surface2);
    border-radius:5px;
    overflow:hidden
}

.stage-bar-fill{
    height:100%;
    background:linear-gradient(90deg,var(--accent2),var(--accent));
    border-radius:5px
}

.stage-bar-count{
    font-size:11px;
    font-weight:800;
    text-align:right
}

/* Project 360 modal tabs */
.p360-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    border-bottom:1px solid var(--line);
    margin:10px 0 16px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch
}

.p360-tab{
    border:0;
    background:transparent;
    color:var(--muted);
    font-size:9px;
    font-weight:800;
    letter-spacing:.06em;
    padding:9px 12px;
    white-space:nowrap;
    flex:0 0 auto;
    border-bottom:2px solid transparent
}


.p360-tab:hover{
    color:var(--ink)
}

.p360-tab.active{
    color:var(--accent);
    border-bottom-color:var(--accent)
}

.p360-pane{
    max-height:60vh;
    overflow:auto
}

.p360-finance-summary{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-bottom:16px
}

.p360-finance-summary > div{
    background:var(--surface2);
    border:1px solid var(--line);
    border-radius:8px;
    padding:12px
}

.p360-finance-summary span{
    display:block;
    font-size:8px;
    color:var(--muted);
    letter-spacing:.08em;
    text-transform:uppercase
}

.p360-finance-summary strong{
    display:block;
    font-size:18px;
    margin-top:6px
}

.p360-stage-list{
    display:flex;
    flex-direction:column;
    gap:6px
}

.p360-stage-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:6px 2px;
    border-bottom:1px solid #f1eee9
}

.p360-stage-row span{
    font-size:10px;
    font-weight:700
}

@media(max-width:900px){
    .p360-finance-summary{
        grid-template-columns:1fr 1fr
    }
}


/* ============================================================
   ENGINE INT PATCH v6 — sidebar nav, master-detail, badges,
   dashboard bar chart, workflow redesign, refreshed palette
   ============================================================ */

:root{
    --badge-progress:#d49a2c;
    --badge-progress-bg:#fbf1de;
    --badge-completed:#2f8b67;
    --badge-completed-bg:#e6f5ee;
    --badge-hold:#b34d46;
    --badge-hold-bg:#fbeae8;
    --badge-cancelled:#6d7b8a;
    --badge-cancelled-bg:#eef0f2;
}

/* Remove the old top-bar leftovers from earlier patches so the
   sidebar layout (already defined above, was dormant until now)
   takes over cleanly. */
#app > header{ display:none !important; }

.sidebar nav button.active{
    background:linear-gradient(90deg,#8a5e45,#6f4a38);
    color:#fff
}

.topbar .crumb b{
    color:var(--accent)
}

/* -------------------- STATUS BADGES -------------------- */
.badge{
    display:inline-block;
    padding:4px 9px;
    border-radius:20px;
    font-size:8px;
    font-weight:900;
    letter-spacing:.05em;
    white-space:nowrap
}

.badge-progress{ background:var(--badge-progress-bg); color:var(--badge-progress); }
.badge-completed{ background:var(--badge-completed-bg); color:var(--badge-completed); }
.badge-hold{ background:var(--badge-hold-bg); color:var(--badge-hold); }
.badge-cancelled{ background:var(--badge-cancelled-bg); color:var(--badge-cancelled); }

.mini-progress{
    width:100px;
    height:7px;
    background:var(--surface2);
    border-radius:5px;
    overflow:hidden
}

.mini-progress > div{
    height:100%;
    background:linear-gradient(90deg,var(--accent2),var(--accent));
    border-radius:5px
}

/* -------------------- KPI ROW (Vallabh-style tiles) -------------------- */
.kpis{
    grid-template-columns:repeat(6,1fr)
}

.kpis > div{
    position:relative;
    overflow:hidden
}

.kpis > div[role="button"]{
    cursor:pointer;
    transition:transform .15s ease,border-color .15s ease
}

.kpis > div[role="button"]:hover,
.kpis > div[role="button"]:focus-visible{
    transform:translateY(-2px);
    border-color:var(--accent2);
    outline:none
}

.kpis > div::before{
    content:'';
    position:absolute;
    top:0; left:0; bottom:0;
    width:4px;
    background:var(--accent2)
}

/* -------------------- BAR CHART (dashboard) -------------------- */
.bar-chart{
    width:100%;
    height:190px;
    display:block
}

.chart-count{
    font-size:11px;
    font-weight:800;
    fill:var(--ink)
}

.chart-label{
    font-size:8px;
    font-weight:700;
    fill:var(--muted);
    text-transform:uppercase
}

/* -------------------- MASTER-DETAIL SPLIT VIEW -------------------- */
.split-view{
    display:grid;
    grid-template-columns:340px 1fr;
    gap:14px;
    align-items:start
}

.split-list{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    box-shadow:var(--shadow);
    padding:12px;
    max-height:78vh;
    overflow:auto;
    position:sticky;
    top:78px
}

.split-list input{
    margin-bottom:10px
}

.split-detail{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    box-shadow:var(--shadow);
    padding:22px;
    min-height:78vh
}

.list-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:11px 10px;
    border-radius:8px;
    cursor:pointer;
    margin-bottom:4px;
    border:1px solid transparent
}

.list-row:hover{
    background:var(--surface2)
}

.list-row.active{
    background:#f3ece5;
    border-color:var(--accent2)
}

.list-row-main{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0
}

.list-row-main b{
    font-size:11px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:200px
}

.list-row-main span{
    font-size:9px;
    color:var(--muted)
}

.list-row-side{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px
}

.list-row-side small{
    font-size:9px;
    color:var(--muted)
}

@media(max-width:1100px){
    .split-view{
        grid-template-columns:1fr
    }
    .split-list{
        position:static;
        max-height:none
    }
}

/* -------------------- WORKFLOW BOARD REDESIGN -------------------- */
.workflow-table{
    min-width:1400px;
    border-collapse:separate;
    border-spacing:0
}

.workflow-table th.workflow-group{
    background:#f1eee9;
    color:var(--accent);
    text-align:center;
    font-size:8px;
    letter-spacing:.08em;
    border-bottom:1px solid var(--line2, var(--line))
}

.workflow-table .sticky-a,
.workflow-table .sticky-b{
    position:sticky;
    background:var(--surface);
    z-index:2
}

.workflow-table .sticky-a{ left:0; width:28px; text-align:center; color:var(--muted); font-size:9px; }
.workflow-table .sticky-b{ left:28px; min-width:190px; max-width:220px; }

.workflow-table th.sticky-a,
.workflow-table th.sticky-b{
    z-index:3;
    background:#f7f5f2
}

.p360-stage-list .stage-dot{
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    margin-right:8px
}

.p360-stage-name{
    flex:1
}


/* ============================================================
   ENGINE INT PATCH v7 — role badges, history list, chart labels,
   typography/color consistency pass
   ============================================================ */

/* -------------------- ROLE BADGES (color-coded) -------------------- */
.role-admin{ background:#f3ece5; color:var(--accent); }
.role-crm{ background:#e7f0fb; color:#245a9e; }
.role-design{ background:#f1e9fb; color:#6b3fb8; }
.role-site{ background:#e6f5ee; color:#237a56; }
.role-accounts{ background:#fbf1de; color:#a1740f; }
.role-purchase{ background:#fde8dd; color:#b1502a; }
.role-production{ background:#fde8dd; color:#b1502a; }
.role-qc{ background:#fdeee7; color:#c1502f; }

.user-chip #role{
    display:inline-block
}

/* -------------------- HISTORY LIST -------------------- */
.history-list{
    display:flex;
    flex-direction:column;
    gap:10px
}

.history-item{
    padding:11px 13px;
    border:1px solid var(--line);
    border-left:3px solid var(--accent2);
    border-radius:8px;
    background:var(--surface2);
    font-size:11px
}

.history-item-head{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:4px
}

.history-item-head small{
    font-size:9px;
    color:var(--muted)
}

/* -------------------- CHART LABEL ROTATION (24-stage chart) -------------------- */
.chart-label-rot{
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* -------------------- TYPOGRAPHY / COLOR CONSISTENCY PASS --------------------
   Clear hierarchy: hero titles are the boldest/darkest; panel-head labels
   are the section markers (uppercase, accent-tinted); table/list body text
   is the neutral "data" tier — same size and color everywhere so nothing
   randomly looks bigger/smaller between pages. */

.hero h1, .split-detail h2{
    color:var(--ink);
    font-weight:800
}

.split-detail h2{
    font-size:20px;
    margin:0 0 4px
}

.panel-head strong, .panel-head b{
    color:var(--accent);
    font-size:10px;
    letter-spacing:.12em;
    font-weight:900
}

.mini-table th{
    background:#f7f3ee;
    color:var(--muted);
    font-size:8px;
    font-weight:900;
    letter-spacing:.1em
}

.mini-table td, .list-row-main b, .p360-stage-name{
    font-size:11px;
    color:var(--ink);
    font-weight:700
}

.mini-table td small, .list-row-main span, .muted, .history-item .muted{
    font-size:9px;
    color:var(--muted);
    font-weight:600
}

.eyebrow{
    font-weight:900
}

.crumb span{
    font-size:9px;
    letter-spacing:.14em;
    color:var(--muted);
    font-weight:800;
    text-transform:uppercase
}

.crumb b{
    font-size:12px;
    font-weight:800
}


/* ============================================================
   ENGINE INT PATCH v8 -- typography scale-up, real mono theme,
   mobile responsiveness, workflow compact/grid view, expanded
   customer info grid
   ============================================================ */

/* -------------------- BASE TYPE SCALE INCREASE -------------------- */
body{
    font-size:15px
}

.eyebrow{
    font-size:10px !important
}

.hero h1{
    font-size:32px !important
}

.split-detail h2{
    font-size:22px !important
}

.panel-head strong, .panel-head b{
    font-size:11px !important
}

.mini-table th{
    font-size:9px !important;
    padding:11px !important
}

.mini-table td{
    font-size:12px !important;
    padding:12px 11px !important
}

.list-row-main b{
    font-size:12px !important
}

.list-row-main span, .mini-table td small{
    font-size:10px !important
}

.kpis span{
    font-size:9px !important
}

.kpis b{
    font-size:25px !important
}

.badge{
    font-size:9px !important;
    padding:5px 10px !important
}

.crumb b{
    font-size:13px !important
}

.sidebar nav button{
    font-size:12px !important;
    padding:12px 14px !important
}

.side-brand b{
    font-size:14px !important
}

.form-grid label, .modal-form label{
    font-size:10px !important
}

.form-grid input, .form-grid select, .form-grid textarea,
.modal-form input, .modal-form select, .modal-form textarea{
    font-size:13px !important;
    padding:11px !important
}

/* -------------------- REAL BLACK AND WHITE / MONOCHROME THEME -------------------- */
body.theme-mono{
    --bg:#f4f4f4; --surface:#fff; --surface2:#ececec; --ink:#111;
    --muted:#666; --line:#d5d5d5; --accent:#111; --accent2:#555;
    --ok:#222; --danger:#222;
    --badge-progress:#333; --badge-progress-bg:#e8e8e8;
    --badge-completed:#000; --badge-completed-bg:#dfdfdf;
    --badge-hold:#000; --badge-hold-bg:#e0e0e0;
    --badge-cancelled:#555; --badge-cancelled-bg:#e8e8e8;
}

body.theme-mono .sidebar{ background:#111; }
body.theme-mono .mark{ background:#333; }
body.theme-mono .sidebar nav button.active{ background:#000; color:#fff; }
body.theme-mono #login{ background:#111 !important; }
body.theme-mono .login-card .primary, body.theme-mono .login-card .btn-primary,
body.theme-mono .btn-primary{ background:#111; box-shadow:none; }
body.theme-mono .badge, body.theme-mono .role-admin, body.theme-mono .role-crm,
body.theme-mono .role-design, body.theme-mono .role-site, body.theme-mono .role-accounts,
body.theme-mono .role-purchase, body.theme-mono .role-production, body.theme-mono .role-qc{
    background:#eaeaea !important; color:#111 !important
}
body.theme-mono .stage-select.stage-completed{ background:#e5e5e5; color:#000; border-color:#bbb; }
body.theme-mono .stage-select.stage-in-progress{ background:#ececec; color:#000; border-color:#bbb; }
body.theme-mono .stage-select.stage-hold{ background:#dcdcdc; color:#000; border-color:#999; }
body.theme-mono .bar-chart rect{ fill:#333 !important; }
body.theme-mono .history-item{ border-left-color:#555; }
body.theme-mono .stage-dot{ background:#555 !important; }

/* -------------------- WORKFLOW: COMPACT ACCORDION VIEW -------------------- */
.workflow-toolbar{
    display:flex;
    gap:6px;
    margin-bottom:14px
}

.workflow-toolbar .text-btn{
    border:1px solid var(--line);
    border-radius:7px;
    padding:8px 12px !important;
    background:var(--surface)
}

.workflow-toolbar .text-btn.active{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent)
}

.wf-row{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    margin-bottom:8px;
    overflow:hidden
}

.wf-row-head{
    display:grid;
    grid-template-columns:1.4fr 1.6fr 140px 24px;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    cursor:pointer
}

.wf-row-head:hover{
    background:var(--surface2)
}

.wf-row-main{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0
}

.wf-row-main b{
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}

.wf-row-main span{
    font-size:10px;
    color:var(--muted)
}

.wf-row-stage{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:11px;
    font-weight:800;
    flex-wrap:wrap
}

.wf-row-progress{
    width:100%
}

.wf-expand-icon{
    font-size:14px;
    color:var(--muted);
    text-align:center
}

.wf-row-detail{
    padding:6px 16px 16px;
    border-top:1px solid var(--line)
}

.stage-badge-not-started{ background:#f1eee9; color:var(--muted); }
.stage-badge-in-progress{ background:#e7f0fb; color:#245a9e; }
.stage-badge-hold{ background:#fbe9e7; color:var(--danger); }
.stage-badge-completed{ background:#e7f5ee; color:var(--ok); }
.badge.stage-badge-not-started, .badge.stage-badge-in-progress,
.badge.stage-badge-hold, .badge.stage-badge-completed{
    font-weight:800
}

/* -------------------- CLIENT 360 INFO GRID -------------------- */
.client-info-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px
}

.client-info-grid .full{
    grid-column:1/-1
}

/* -------------------- MOBILE RESPONSIVENESS -------------------- */
@media(max-width:900px){
    .sidebar{
        width:auto;
        position:static;
        min-height:auto;
        padding:14px
    }

    .sidebar nav{
        display:flex;
        overflow-x:auto;
        gap:4px
    }

    .sidebar nav button{
        white-space:nowrap
    }

    .side-bottom, .user-chip{
        display:none
    }

    .main{
        margin-left:0
    }

    .kpis{
        grid-template-columns:repeat(2,1fr) !important
    }

    .wf-row-head{
        grid-template-columns:1fr;
        gap:8px
    }

    .wf-row-progress{
        order:5
    }

    .client-info-grid{
        grid-template-columns:1fr
    }

    .topbar .top-actions input{
        width:120px !important
    }

    .split-detail{
        padding:16px
    }
}

@media(max-width:560px){
    .hero h1{
        font-size:24px !important
    }

    .kpis{
        grid-template-columns:1fr 1fr !important
    }

    .modal-form, .form-grid{
        grid-template-columns:1fr !important
    }

    .mini-table{
        min-width:640px
    }
}

/* ============================================================
   24-STAGE PIPELINE GRID
   ============================================================ */
.stage-pipeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.stage-pipeline-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--surface2);
    border: 1px solid var(--line);
    border-radius: 6px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
    user-select: none;
}

.stage-pipeline-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-color: #1d7fd0;
}

.active-stage-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(29,127,208,0.25);
}

.stage-pipeline-card.active-stage {
    background: var(--surface);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-color: rgba(29,127,208,0.4);
}

.stage-pipeline-card .stage-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.06);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.stage-pipeline-card.active-stage .stage-num {
    background: #1d7fd0;
    color: #fff;
}

.stage-pipeline-card .stage-info {
    flex: 1;
    min-width: 0;
}

.stage-pipeline-card .stage-name {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ink);
}

.stage-pipeline-card .stage-count {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}

.stage-pipeline-card .stage-count.has-count {
    color: #36a879;
    font-weight: 600;
}


/* ============================================================
   PIPELINE COLOUR CODES (MES-PWA style) — Aug 2026
   Phase tinting for the full pipeline grid + status legend.
   ============================================================ */

:root{
    --phase-crm:#7c5cff;
    --phase-site:#1d7fd0;
    --phase-design:#c9761f;
    --phase-production:#8a6d3b;
    --phase-execution:#2f8b67;
    --phase-handover:#0f8f8f;
    --phase-other:#8a8a8a;
}

.workflow-table th[data-phase="crm"]{ box-shadow:inset 0 -3px 0 var(--phase-crm) }
.workflow-table th[data-phase="site"]{ box-shadow:inset 0 -3px 0 var(--phase-site) }
.workflow-table th[data-phase="design"]{ box-shadow:inset 0 -3px 0 var(--phase-design) }
.workflow-table th[data-phase="production"]{ box-shadow:inset 0 -3px 0 var(--phase-production) }
.workflow-table th[data-phase="execution"]{ box-shadow:inset 0 -3px 0 var(--phase-execution) }
.workflow-table th[data-phase="handover"]{ box-shadow:inset 0 -3px 0 var(--phase-handover) }

.workflow-table th.workflow-group[data-phase="crm"]{ color:var(--phase-crm); background:color-mix(in srgb, var(--phase-crm) 10%, transparent) }
.workflow-table th.workflow-group[data-phase="site"]{ color:var(--phase-site); background:color-mix(in srgb, var(--phase-site) 10%, transparent) }
.workflow-table th.workflow-group[data-phase="design"]{ color:var(--phase-design); background:color-mix(in srgb, var(--phase-design) 10%, transparent) }
.workflow-table th.workflow-group[data-phase="production"]{ color:var(--phase-production); background:color-mix(in srgb, var(--phase-production) 12%, transparent) }
.workflow-table th.workflow-group[data-phase="execution"]{ color:var(--phase-execution); background:color-mix(in srgb, var(--phase-execution) 10%, transparent) }
.workflow-table th.workflow-group[data-phase="handover"]{ color:var(--phase-handover); background:color-mix(in srgb, var(--phase-handover) 10%, transparent) }

.workflow-table td[data-phase="crm"]{ background:color-mix(in srgb, var(--phase-crm) 4%, transparent) }
.workflow-table td[data-phase="site"]{ background:color-mix(in srgb, var(--phase-site) 4%, transparent) }
.workflow-table td[data-phase="design"]{ background:color-mix(in srgb, var(--phase-design) 4%, transparent) }
.workflow-table td[data-phase="production"]{ background:color-mix(in srgb, var(--phase-production) 5%, transparent) }
.workflow-table td[data-phase="execution"]{ background:color-mix(in srgb, var(--phase-execution) 4%, transparent) }
.workflow-table td[data-phase="handover"]{ background:color-mix(in srgb, var(--phase-handover) 4%, transparent) }

/* Status colours become unambiguous: locked reads as disabled, hold as danger. */
.stage-select:disabled{ opacity:.75; cursor:not-allowed }
.stage-select.stage-locked{
    background:repeating-linear-gradient(45deg,#ececec,#ececec 5px,#e4e4e4 5px,#e4e4e4 10px);
    color:#9a9a9a;
    border-color:#dcdcdc
}
.stage-select.stage-hold{ box-shadow:inset 3px 0 0 var(--danger) }
.stage-select.stage-in-progress{ box-shadow:inset 3px 0 0 #245a9e }
.stage-select.stage-completed{ box-shadow:inset 3px 0 0 var(--ok) }

.wf-legend{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin:0 0 10px
}
.wf-legend-title{
    font-size:9px;
    font-weight:800;
    letter-spacing:.1em;
    color:var(--muted)
}
.wf-chip{
    font-size:9px;
    font-weight:800;
    letter-spacing:.04em;
    padding:4px 9px;
    border-radius:20px;
    border:1px solid var(--line)
}
.wf-chip.stage-not-started{ background:#f1eee9; color:var(--muted) }
.wf-chip.stage-in-progress{ background:#e7f0fb; color:#245a9e; border-color:#b9d3f0 }
.wf-chip.stage-hold{ background:#fbe9e7; color:var(--danger); border-color:#f0c6c1 }
.wf-chip.stage-completed{ background:#e7f5ee; color:var(--ok); border-color:#bfe4d1 }
.wf-chip.stage-locked{ background:#ececec; color:#9a9a9a }

.wf-blocked-hint{
    font-size:9px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--muted);
    margin-right:8px
}

/* Explanatory caption under dashboard charts (tells the user what the bars mean) */
.chart-caption{
  margin:0 0 8px;
  font-size:11px;
  line-height:1.5;
  color:#7a6f66;
}
body.theme-mono .chart-caption{ color:#555; }

/* ==========================================================================
   Aug 2026 — SLA ageing, stage evidence, weekly WhatsApp update, audit trail
   ========================================================================== */
.sla-panel { border:1px solid rgba(214,84,58,.45); background:rgba(214,84,58,.08);
    border-radius:6px; padding:10px 12px; margin-bottom:12px; }
.sla-head { font-size:11px; letter-spacing:.08em; font-weight:700; color:#d6543a; margin-bottom:6px; }
.sla-row { display:grid; grid-template-columns:1.4fr 1fr 1.4fr auto; gap:10px; align-items:center;
    padding:6px 0; border-top:1px solid rgba(214,84,58,.18); font-size:12px; cursor:pointer; }
.sla-row:hover { background:rgba(214,84,58,.06); }
.sla-days { font-weight:700; color:#d6543a; white-space:nowrap; }
.sla-ok { font-size:11px; color:var(--muted,#8a8f98); margin-bottom:10px; }

.wf-age { font-size:10px; color:var(--muted,#8a8f98); margin-right:6px; }
.wf-age-flag { font-size:10px; font-weight:700; color:#fff; background:#d6543a;
    border-radius:3px; padding:1px 5px; margin-right:6px; white-space:nowrap; }
.wf-evidence-btn { font-size:10px; letter-spacing:.06em; margin-right:6px; opacity:.85; }
.wf-evidence-btn:hover { opacity:1; }

.evidence-gate { font-size:12px; border-radius:4px; padding:8px 10px; margin-bottom:10px; }
.evidence-gate.warn { background:rgba(214,84,58,.12); color:#d6543a; border:1px solid rgba(214,84,58,.35); }
.evidence-gate.ok { background:rgba(54,168,121,.12); color:#36a879; border:1px solid rgba(54,168,121,.35); }
.evidence-checklist { display:flex; flex-direction:column; gap:6px; }
.evidence-check { display:flex; gap:8px; align-items:center; font-size:13px; cursor:pointer; }
.evidence-check input { width:16px; height:16px; }
.evidence-photos { display:flex; flex-wrap:wrap; gap:10px; margin:8px 0; }
.evidence-photo { width:110px; display:flex; flex-direction:column; gap:2px; font-size:10px; }
.evidence-photo img { width:110px; height:80px; object-fit:cover; border-radius:4px; border:1px solid var(--line,#2a2d33); }
.evidence-upload { display:block; font-size:12px; margin-top:10px; }
.evidence-upload input { display:block; margin-top:6px; font-size:12px; }

.weekly-text { width:100%; font-family:inherit; font-size:13px; line-height:1.5;
    border:1px solid var(--line,#2a2d33); border-radius:4px; padding:10px;
    background:var(--panel,#15171b); color:inherit; }

.history-item.audit-client { border-left:3px solid #1d7fd0; padding-left:8px; }
.history-item.audit-payment { border-left:3px solid #36a879; padding-left:8px; }
.history-item.audit-stage { border-left:3px solid #8a8f98; padding-left:8px; }

/* ==========================================================================
   Aug 2026 — Lead import, admin export, and full mobile responsiveness
   ========================================================================== */
.import-cols{ display:flex; flex-wrap:wrap; gap:6px; }
.import-col{ font-size:11px; letter-spacing:.04em; padding:3px 8px; border-radius:4px;
    background:rgba(125,125,125,.12); border:1px solid rgba(125,125,125,.25); }
.import-col.req{ border-color:rgba(29,127,208,.5); color:#1d7fd0; font-weight:700; }
.import-summary{ margin-top:12px; font-size:12px; padding:8px 10px; border-radius:4px;
    background:rgba(125,125,125,.12); }
.import-summary.ok{ background:rgba(54,168,121,.12); color:#36a879; }
.import-summary.err{ background:rgba(214,84,58,.12); color:#d6543a; }

.export-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:8px; }
.export-grid button{ width:100%; }

/* ---------------- MOBILE — PORTRAIT & LANDSCAPE ---------------- */
html{ -webkit-text-size-adjust:100%; }
img, table, pre{ max-width:100%; }

@media(max-width:900px){
    body{ overflow-x:hidden; }

    .main{ padding-left:12px; padding-right:12px; }

    /* sticky phase nav so it is always reachable */
    .sidebar{ position:sticky; top:0; z-index:20; padding:10px 8px; }
    .sidebar nav{ -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    .sidebar nav::-webkit-scrollbar{ display:none; }

    .hero{ flex-direction:column; align-items:flex-start; gap:10px; }
    .hero-actions{ display:flex; flex-wrap:wrap; gap:8px; width:100%; }
    .hero-actions button{ flex:1 1 auto; }

    .topbar{ flex-wrap:wrap; gap:8px; }

    /* master-detail becomes stacked */
    .split-view{ display:block; }
    .split-list{ width:auto; max-height:none; margin-bottom:14px; }

    /* every wide table scrolls inside its own card instead of the page */
    .panel, .split-detail{ overflow-x:auto; }
    .mini-table{ font-size:12px; }

    /* touch targets */
    button, select, input, textarea{ min-height:38px; font-size:14px; }
    .text-btn{ min-height:auto; }

    .export-grid{ grid-template-columns:1fr 1fr; }
    .import-cols{ gap:5px; }
}

@media(max-width:560px){
    .main{ padding-left:10px; padding-right:10px; }
    .kpis{ grid-template-columns:1fr 1fr !important; }
    .export-grid{ grid-template-columns:1fr; }
    .stage-pipeline-grid{ grid-template-columns:1fr; }
    .modal-card{ width:96vw; max-height:88vh; overflow-y:auto; padding:16px; }
    .sla-row{ grid-template-columns:1fr; gap:2px; }
    .evidence-photo, .evidence-photo img{ width:88px; }
    #aiCopilotBtn{ bottom:14px !important; right:14px !important; padding:10px 14px !important; font-size:12px !important; }
    #toast{ left:10px; right:10px; }
    .toast{ width:auto; }
}

/* ---------------- LANDSCAPE PHONES / SHORT SCREENS ---------------- */
@media(max-height:520px) and (orientation:landscape){
    .sidebar{ position:sticky; top:0; padding:6px 8px; }
    .sidebar nav button{ padding:6px 10px; font-size:11px; }
    .side-brand{ display:none; }
    .hero{ padding:10px 14px; }
    .hero h1{ font-size:19px !important; }
    .hero p{ display:none; }
    .kpis{ grid-template-columns:repeat(4,1fr) !important; }
    .modal-card{ max-height:92vh; overflow-y:auto; }
    #aiCopilotBtn{ bottom:10px !important; right:10px !important; }
}

@media(min-width:561px) and (max-width:900px) and (orientation:landscape){
    .split-view{ display:grid; grid-template-columns:minmax(220px,1fr) 2fr; }
    .split-list{ margin-bottom:0; }
}


/* ---------- P2 commercial: module switches, dense grids, mobile ---------- */
.cm-toggle { cursor: pointer; user-select: none; white-space: nowrap; }
.cm-toggle input { accent-color: #d49a2c; }
.boq-table select, .ms-table input, .aib-table select { font-size: 12px; }
.boq-table td, .aib-table td { vertical-align: middle; }
#todayAttention ul { list-style: disc; }
#todayAttention li { margin-bottom: 3px; }

@media (max-width: 820px) {
    .boq-table, .ms-table, .aib-table { min-width: 640px; }
    .p360-finance-summary { flex-wrap: wrap; gap: 10px; }
    .p360-finance-summary > div { min-width: 42%; }
    #todayAttention > div:last-child { flex-direction: column; gap: 10px; }
}

/* ============================================================
   PATCH v9 — one consistent light surface (Aug 2026)
   The mismatched "dark boxes on a white page" was not a theme:
   the browser/OS dark preference was styling native form controls
   because the page never declared a colour-scheme. Declaring it and
   painting the controls ourselves keeps a single predictable look.
   ============================================================ */
:root { color-scheme: light; }

input, select, textarea, button,
input[type="date"], input[type="number"], input[type="text"],
input[type="email"], input[type="password"], input[type="tel"] {
    color-scheme: light;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
    background: #ffffff;
    color: #12202e;
    border: 1px solid #d7dee7;
    border-radius: 8px;
    padding: 9px 10px;
    font: inherit;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #2f6fed;
    box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.15);
}

input::placeholder, textarea::placeholder { color: #93a2b3; }

input:disabled, select:disabled, textarea:disabled {
    background: #f2f4f7;
    color: #7a8698;
}

/* Mono theme keeps its own greyscale controls */
body.theme-mono input:not([type="checkbox"]):not([type="radio"]),
body.theme-mono select,
body.theme-mono textarea { background:#fff; color:#111; border-color:#ccc; }
body.theme-mono input:focus, body.theme-mono select:focus, body.theme-mono textarea:focus {
    border-color:#111; box-shadow:0 0 0 3px rgba(0,0,0,0.08);
}

/* ============================================================
   P3 / P4 — tasks, workload, timeline, documents, reports
   Uses the existing warm light palette; no new theme introduced.
   ============================================================ */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.grid-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 620px;
}
.grid-table th {
    text-align: left;
    padding: 9px 12px;
    background: var(--surface2);
    color: var(--muted);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.grid-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.grid-table tbody tr:hover { background: #faf7f3; }
.grid-table .empty { border: 0; }
.grid-table input, .grid-table select { width: 100%; padding: 5px 7px; }

.row-overdue { background: rgba(179, 77, 70, .07); }
.row-overdue:hover { background: rgba(179, 77, 70, .12); }

.cell-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

.summary-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: var(--shadow);
}
.summary-strip > div {
    flex: 1;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.summary-strip span {
    font-size: 10px;
    letter-spacing: .08em;
    color: var(--muted);
    text-transform: uppercase;
}
.summary-strip strong { font-size: 16px; }

.mini-bar {
    height: 7px;
    border-radius: 6px;
    background: var(--surface2);
    overflow: hidden;
}
.mini-bar span { display: block; height: 100%; border-radius: 6px; }

.log-line {
    padding: 8px 0;
    border-bottom: 1px dashed var(--line);
    font-size: 13px;
}
.log-line:last-child { border-bottom: 0; }

.btn-ghost {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 4px 9px;
    font-size: 11px;
    color: var(--ink);
}
.btn-ghost:hover { background: var(--surface2); }

.chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--surface2);
    color: var(--muted);
    white-space: nowrap;
}
.chip-completed { background: rgba(47,139,103,.15); color: var(--ok); }
.chip-in-progress { background: rgba(183,139,103,.22); color: #8a5a34; }
.chip-hold { background: rgba(179,77,70,.15); color: var(--danger); }
.chip-not-started { background: var(--surface2); color: var(--muted); }
.chip-locked { background: #ece7e1; color: var(--muted); }

.stack-form { display: flex; flex-direction: column; gap: 10px; }
.stack-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }

@media (max-width: 820px) {
    .grid-table { min-width: 560px; }
    .summary-strip > div { min-width: 45%; }
}


/* ============================================================
   PATCH v12 — the "black boxes" were the leftover body.dark class
   painting every field dark on a light page. The class is gone from
   index.php; these rules make sure any stale markup still renders
   readable fields on the light surface.
   ============================================================ */
.dark input:not([type="checkbox"]):not([type="radio"]),
.dark select,
.dark textarea {
    background: #ffffff;
    color: #12202e;
    border-color: #d7dee7;
}

.form-grid label, .modal-form label {
    color: #5a6675;
}

.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus,
.modal-form input:focus, .modal-form select:focus, .modal-form textarea:focus {
    border-color: #c98a2b;
    box-shadow: 0 0 0 3px rgba(201, 138, 43, 0.15);
}

.build-stamp {
    font-size: 10px;
    letter-spacing: .08em;
    color: #9aa6b3;
    padding: 10px 16px;
}

/* --- v13: task priority chips, dashboard dates, derivation note --- */
.pri{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.03em}
.pri-high{background:#fdecec;color:#b42318;border:1px solid #f3c4c4}
.pri-medium{background:#fff5e5;color:#a35b00;border:1px solid #f2d6a8}
.pri-low{background:#eef4ff;color:#1d4ed8;border:1px solid #cddafc}
.task-ref{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:#5b6472;white-space:nowrap}
.col-date{white-space:nowrap;font-size:12px;color:#4b5563}
.col-date.date-late{color:#b42318;font-weight:700}
.hint-note{padding:10px 14px;font-size:12px;line-height:1.5;color:#4b5563;background:#f7f8fa;border-top:1px solid #e6e8ec}

/* ==========================================================================
   P5 — FACTORY QUEUE, MANUFACTURING UNITS AND CLIENT SELECTIONS
   ========================================================================== */
.factory-table input,
.factory-table select,
.selection-table input,
.selection-table select {
    font-size: 12px;
    padding: 4px 6px;
}
.factory-table td,
.selection-table td { vertical-align: middle; }
tr.row-late td { background: rgba(224, 49, 49, .07); }
td.late-date { color: #e03131; font-weight: 600; }
#factoryPane .summary-strip strong.red,
.ptab-factory .summary-strip strong.red,
.ptab-selections .summary-strip strong.red { color: #e03131; }

/* Phone / tablet: the wide manufacturing grid scrolls instead of squashing. */
@media (max-width: 900px) {
    .factory-table, .selection-table { min-width: 900px; }
    .factory-table input, .selection-table input { min-width: 110px; }
}

/* =========================================================
   P6 — grouped Project 360 navigation, AI menu, status colours,
   clickable workload and a sticky factory grid.
   Additive only; nothing above is overridden destructively.
========================================================= */

.p360-groups{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin-top:10px
}

.p360-group{
    border:1px solid var(--line);
    background:transparent;
    color:var(--muted);
    border-radius:999px;
    font-size:10px;
    font-weight:800;
    letter-spacing:.07em;
    padding:6px 14px;
    cursor:pointer
}

.p360-group:hover{ color:var(--ink) }

.p360-group.active{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff
}

.p360-tabs{ margin-top:6px }

/* AI ASSIST dropdown */
.ai-menu{ position:relative; display:inline-block }
.ai-menu > summary{ list-style:none; cursor:pointer; display:inline-block }
.ai-menu > summary::-webkit-details-marker{ display:none }

.ai-menu-list{
    position:absolute;
    right:0;
    z-index:40;
    min-width:210px;
    background:var(--panel, #fff);
    border:1px solid var(--line);
    border-radius:8px;
    box-shadow:0 10px 26px rgba(0,0,0,.18);
    padding:6px;
    display:flex;
    flex-direction:column;
    gap:2px
}

.ai-menu-list button{
    background:transparent;
    border:0;
    text-align:left;
    color:var(--ink);
    font-size:12px;
    padding:8px 10px;
    border-radius:6px;
    cursor:pointer
}

.ai-menu-list button:hover{ background:rgba(0,0,0,.06) }

/* Completed = green, in progress = amber, overdue = red, locked = grey */
.stage-row.is-completed,
tr.is-completed{ background:rgba(47,158,68,.10) }
.stage-row.is-progress,
tr.is-progress{ background:rgba(212,154,44,.12) }
.stage-row.is-locked,
tr.is-locked{ opacity:.6 }

select.stage-status[data-value="COMPLETED"],
select[data-value="COMPLETED"]{ color:#2f9e44; font-weight:700 }
select[data-value="IN PROGRESS"]{ color:#b7791f; font-weight:700 }
select[data-value="HOLD"]{ color:#e5484d; font-weight:700 }

/* Clickable team-workload rows */
tr.row-click{ cursor:pointer }
tr.row-click:hover{ background:rgba(29,127,208,.10) }

/* Factory grid: keep the unit name visible while scrolling sideways */
#factoryPane .grid-table td:first-child,
#factoryPane .grid-table th:first-child,
.ptab-factory .grid-table td:first-child,
.ptab-factory .grid-table th:first-child{
    position:sticky;
    left:0;
    z-index:2;
    background:var(--panel, #fff);
    box-shadow:1px 0 0 var(--line)
}

.ptab-factory .table-scroll,
#factoryPane .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }

@media (max-width:860px){
    .p360-group{ font-size:9px; padding:5px 10px }
    .ai-menu-list{ right:auto; left:0 }
}

/* Stronger, at-a-glance stage colours (green = done, amber = running,
   red = on hold / overdue, grey = locked). */
.stage-select.stage-completed{
    background:#d7f0e0;
    color:#1e7c3a;
    border-color:#9ed4b4;
    font-weight:700
}
.stage-select.stage-in-progress{
    background:#fbf0d8;
    color:#8a6112;
    border-color:#e6cf94;
    font-weight:700
}
.p360-stage-row:has(.stage-completed){ background:rgba(47,158,68,.08); border-radius:6px }
.p360-stage-row:has(.stage-in-progress){ background:rgba(212,154,44,.10); border-radius:6px }
.p360-stage-row:has(.stage-select[disabled]){ opacity:.62 }

/* ============ P7 — plans, modules, trial banner ============ */
.trial-banner{
    background:#fff3d6;border-bottom:1px solid #e3c98a;color:#6b4b12;
    padding:8px 18px;font-size:12px;font-weight:600;letter-spacing:.3px;
}
.trial-banner.expired{background:#fbe0dd;border-color:#e0a49c;color:#8c2f22}
.module-plan{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.module-plan label{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.4px}
.module-plan select{padding:7px 10px;min-width:220px}
.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.module-row{
    display:flex;align-items:center;gap:10px;padding:10px 12px;
    border:1px solid var(--line,#e2ded6);border-radius:8px;background:#fff;font-size:13px;cursor:pointer;
}
.module-row input{width:16px;height:16px}
@media(max-width:640px){
    .module-plan select{min-width:100%}
    .module-grid{grid-template-columns:1fr}
}

/* ---------- P8 : firm branding (logo + tagline) ---------- */
.side-brand .mark { overflow: hidden; }
.brand-logo { width: 100%; height: 100%; object-fit: contain; display: block; }
.firm-logo-row { display: flex; gap: 16px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.firm-logo-preview {
    width: 150px; height: 70px; border: 1px dashed var(--line, #d8cfc2); border-radius: 6px;
    display: flex; align-items: center; justify-content: center; background: #fff; padding: 6px;
}
.firm-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }