:root {
    --bg: #f5f7fb;
    --card: #ffffff;
    --text: #1e293b;
    --muted: #64748b;
    --line: #dbe3ee;
    --primary: #173d6b;
    --accent: #d7c2a3;
    --success: #198754;
    --danger: #c0392b;
    --warning: #f1c40f;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background: var(--bg);
}
.layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar {
    background: #0f172a;
    color: #fff;
    padding: 24px 18px;
}
.sidebar .brand { font-size: 22px; font-weight: 700; margin-bottom: 24px; }
.sidebar nav a {
    display: block;
    color: #cbd5e1;
    text-decoration: none;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 8px;
}
.sidebar nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.content { padding: 24px; min-width: 0; }
.mobile-topbar { display: none; }
.page-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.userbox { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 10px 25px rgba(15,23,42,.04);
    margin-bottom: 18px;
}
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi .label { color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.kpi .value { font-size: 26px; font-weight: 700; line-height: 1.2; }
.compact-kpi .value { font-size: 22px; }
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
}
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { padding: 11px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-size: 13px; color: var(--muted); background: #f8fafc; }
.btn {
    display: inline-block;
    border: 0;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
}
.btn-secondary { background: #475569; }
.btn-danger { background: var(--danger); }
form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 14px; }
label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
input, select, textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
}
textarea { min-height: 100px; resize: vertical; }
.small { font-size: 12px; color: var(--muted); }
.text-right { text-align: right; }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.badge {
    display: inline-block;
    font-size: 12px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #e2e8f0;
}
.inline-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.section-title { margin: 0 0 12px; font-size: 18px; }
.dynamic-row {
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    background: #f8fafc;
}
.align-end { align-items: end; }
.weekend-row { background: #f8fafc; }
.summary-box { display: grid; gap: 10px; }
.alert { padding: 12px 14px; border-radius: 10px; margin-bottom: 12px; }
.alert-danger { background: #fee2e2; color: #991b1b; }
.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 20px;
}
.login-card { width: 100%; max-width: 420px; }
.menu-toggle { min-width: 88px; }
.mobile-brand { font-size: 18px; font-weight: 700; }
@media (max-width: 1200px) {
    .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .layout { grid-template-columns: 1fr; }
    .sidebar {
        display: none;
        position: fixed;
        inset: 0 auto 0 0;
        width: 280px;
        z-index: 40;
        overflow-y: auto;
        box-shadow: 0 20px 40px rgba(15,23,42,.25);
    }
    .sidebar.is-open { display: block; }
    .mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 16px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 12px 14px;
        box-shadow: 0 10px 25px rgba(15,23,42,.04);
    }
    .content { padding: 14px; }
    .page-header { flex-direction: column; align-items: stretch; }
    .grid-2, .grid-3, .grid-4, .grid-5, form .row { grid-template-columns: 1fr; }
    .inline-actions { flex-direction: column; align-items: stretch; }
    .inline-actions .btn { width: 100%; text-align: center; }
    .userbox { justify-content: space-between; }
    table { min-width: 680px; }
    .card { padding: 14px; border-radius: 14px; }
    .kpi .value { font-size: 22px; }
    .compact-kpi .value { font-size: 20px; }
}
@media (max-width: 640px) {
    body { font-size: 14px; }
    .content { padding: 10px; }
    .page-header h1 { font-size: 24px; margin: 0; }
    .btn { width: 100%; text-align: center; }
    .userbox .btn { width: auto; }
    input, select, textarea { padding: 12px; font-size: 16px; }
    th, td { padding: 10px 8px; }
    .table-wrap { margin: 0 -4px; }
}


.alert-success { background: #dcfce7; color: #166534; }
.badge-success { background: #dcfce7; color: #166534; }
.badge-muted { background: #e2e8f0; color: #475569; }
.row-inactive { opacity: .62; }
.inline-form { margin: 0; }
.inline-actions-table { gap: 6px; }
.btn-small { padding: 8px 10px; font-size: 12px; }
@media (max-width: 900px) {
    .inline-actions-table .btn { width: auto; }
}


.brand-snl { display:flex; flex-direction:column; gap:2px; line-height:1; }
.brand-snl .brand-mark { font-size:28px; font-weight:800; letter-spacing:.12em; color: var(--accent); }
.brand-snl .brand-text { font-size:22px; font-weight:700; color:#fff; }
.brand-snl small { color:#94a3b8; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.mobile-brand-snl { display:flex; flex-direction:column; line-height:1.05; }
.mobile-brand-snl span { font-weight:800; color: var(--primary); }
.mobile-brand-snl small { font-size:11px; color: var(--muted); text-transform:uppercase; letter-spacing:.08em; }

.brand-logo {
    width: 100%;
    max-width: 180px;
    display: block;
    border-radius: 12px;
    background: #fff;
    padding: 8px;
}
.mobile-brand-logo {
    width: 120px;
    max-width: 100%;
    display: block;
    border-radius: 10px;
    background: #fff;
    padding: 4px 6px;
}
.brand-snl { align-items: flex-start; }
.mobile-brand-snl { align-items: flex-start; }

/* SNL LIVING · company theme */
:root{--bg:#f4f2ee;--card:#fff;--text:#16354a;--muted:#63717b;--line:#dddcd6;--primary:#133b57;--accent:#a5937d}
body{font-family:Arial,Helvetica,sans-serif;background:var(--bg)!important;color:var(--text);line-height:1.5}
h1,h2,h3{letter-spacing:-.025em;color:var(--primary)}h1{font-size:clamp(24px,2.4vw,34px)}
.sidebar{background:var(--primary);border-right:0}.sidebar .brand{padding:22px 14px;border-bottom:1px solid #ffffff26}.sidebar nav a{border-radius:4px;margin:3px 10px;padding:10px 12px;color:#f6f3ee}.sidebar nav a:hover,.sidebar nav a.active{background:#ffffff18;border-left:3px solid var(--accent)}
.snl-brand-logo,.brand-logo{display:block;width:180px;max-width:100%;height:auto;background:#fff;padding:10px;border-radius:4px}.brand-snl small{color:#e4dbd0;letter-spacing:.08em}.content{padding:28px}.page-header{border-bottom:2px solid var(--accent);padding-bottom:18px;margin-bottom:24px}.page-header h1{margin:0}.page-header:after{content:none}
.card{border:1px solid var(--line);border-radius:6px;box-shadow:0 3px 12px #18384b06;padding:20px;margin-bottom:16px}.btn,button.btn{background:var(--primary);color:#fff!important;border:1px solid transparent;border-radius:4px;font-weight:600;box-shadow:none;padding:10px 16px;text-decoration:none}.btn:hover{filter:brightness(1.12)}.btn-secondary{background:#eae5dd!important;color:var(--primary)!important;border-color:#d6cbbd!important}
a{color:var(--primary)}label{font-size:14px;font-weight:600}input,select,textarea{border:1px solid #c8cdd0;border-radius:4px;background:#fff;color:#18364a;font:inherit;padding:10px 12px}input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}th{background:var(--primary)!important;color:#fff}.task-counts{gap:12px}.task-card{border-radius:5px!important}.task-meta,.small{color:var(--muted)}
body.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(115deg,var(--primary) 0%,var(--primary) 43%,#e9e3da 43%,#f6f3ee 100%)!important}.login-card{width:100%;max-width:470px;padding:38px;border-top:5px solid var(--accent);box-shadow:0 20px 65px #102f4530;border-radius:6px}.login-card .snl-brand-logo{width:245px;padding:0;margin:0 0 24px}.login-card h1{font-size:27px;margin:0 0 4px}.login-card .btn{width:100%;margin-top:14px}.login-card label{display:block;margin-top:14px}.login-card input{width:100%}.brand-eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--accent);font-weight:bold}.portal-brand{display:flex;align-items:center;gap:20px;border-bottom:2px solid var(--accent);padding-bottom:18px;margin-bottom:24px}.portal-brand .snl-brand-logo{width:150px}.mobile-brand-logo{max-height:48px;width:auto}
@media(max-width:650px){.content{padding:16px}.login-card{padding:26px}body.login-page{padding:16px;background:var(--primary)!important}.portal-brand{align-items:flex-start;flex-direction:column;gap:8px}.page-header{gap:12px}.card{padding:16px}}

/* Readability fixes for dark work-order header and secondary buttons */
.top h1{color:#fff}.btn.btn-secondary,button.btn.btn-secondary{color:var(--primary)!important}