/* ============================================================================
   OnTheGo — desktop admin design system
   Rebuilt verbatim from the OnTheGo design comp (OnTheGo.dc.html).
   Warm-neutral canvas, white cards, one tenant-brand accent, Plus Jakarta Sans.
   Tokens are the source of truth. Neutrals carry the UI; --brand is the accent
   and may be any hue (injected per tenant). Green/red only for trends & states.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --brand: #0e7a34;
    --brand-600: #16c653;
    --brand-050: #f2fdf5;
    --brand-100: #c9f2d6;
    --brand-ink: #083d1a;
    --wa: #128c7e;
    --wa-bright: #25d366;

    --card: #ffffff;
    --canvas: #f7f7f5;
    --line: #e7e5e4;
    --line-strong: #d6d3d1;
    --soft: #f5f5f4;
    --soft-hover: #efeeec;

    --text: #1c1917;
    --text-2: #57534e;
    --text-3: #a8a29e;

    --success: #15803d;
    --success-bg: #f0fdf4;
    --danger: #b91c1c;
    --danger-bg: #fef2f2;
    --amber-bg: #fffbeb;
    --amber-line: #fde68a;
    --amber-text: #92400e;
    --blue: #1e40af;
    --blue-bg: #eff6ff;

    --radius-card: 13px;
    --radius-control: 10px;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    --sidebar-w: 250px;
}

/* ── Reset / base ─────────────────────────────────────────────────────────── */
.otg *, .otg *::before, .otg *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.otg {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    color: var(--text);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}
.otg a { color: var(--brand); text-decoration: none; }
.otg a:hover { color: var(--brand-ink); }
/* Anchor-based components must keep their own colors (base `.otg a` outranks a
   single class selector, so qualify these with the anchor). */
.otg a.otg-btn, .otg a.otg-btn:hover { color: #fff; }
.otg a.otg-btn-ghost { color: var(--text-2); }
.otg a.otg-btn-ghost:hover, .otg a.otg-btn-ghost.ink { color: var(--text); }
.otg a.otg-tab { color: var(--text-2); }
.otg a.otg-tab.active { color: var(--brand-ink); }
.otg a.otg-sb-brand, .otg a.otg-sb-brand:hover { color: var(--text); }
.otg a.otg-switcher, .otg a.otg-switcher:hover { color: var(--text); }
.otg a.otg-vert { color: var(--text-2); }
.otg a.otg-vert.active { color: var(--brand-ink); }
.otg a.otg-sb-foot, .otg a.otg-sb-foot:hover { color: var(--text); }
.otg a.otg-quick { color: var(--text); }
.otg .tnum { font-variant-numeric: tabular-nums; }
.otg .syne { font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.02em; }
.otg svg { display: block; flex-shrink: 0; }
.otg ::-webkit-scrollbar { width: 10px; height: 10px; }
.otg ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 3px solid var(--canvas); }
.otg ::-webkit-scrollbar-track { background: transparent; }

/* ── App frame ────────────────────────────────────────────────────────────── */
.otg-app { display: flex; height: 100vh; width: 100%; background: var(--canvas); overflow: hidden; }

/* Sidebar ------------------------------------------------------------------- */
.otg-sidebar {
    width: var(--sidebar-w); flex-shrink: 0; background: var(--card);
    border-right: 1px solid var(--line); display: flex; flex-direction: column; height: 100vh;
}
.otg-sb-brand {
    height: 58px; flex-shrink: 0; display: flex; align-items: center; gap: 10px;
    padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--text);
}
.otg-sb-brand:hover { color: var(--text); }
.otg-sb-logo {
    width: 30px; height: 30px; border-radius: 9px; background: var(--brand); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
    letter-spacing: -0.02em; flex-shrink: 0;
}
.otg-sb-brand .n { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.1; }
.otg-sb-brand .s { font-size: 10px; color: var(--text-3); letter-spacing: 0.02em; line-height: 1.1; }

/* Business + vertical switcher */
.otg-switcher-wrap { padding: 12px 12px 6px; }
.otg-switcher {
    border: 1px solid var(--line); border-radius: 11px; padding: 10px 11px; background: var(--soft);
    width: 100%; text-align: left; cursor: pointer; font-family: inherit;
}
.otg-switcher .top { display: flex; align-items: center; gap: 9px; }
.otg-switcher .logo {
    width: 30px; height: 30px; border-radius: 8px; background: var(--card); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
    color: var(--brand-ink); flex-shrink: 0;
}
.otg-switcher .name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.otg-switcher .plan { font-size: 11px; color: var(--text-3); }
.otg-switcher .chev { display: flex; width: 15px; height: 15px; color: var(--text-3); }
.otg-verticals { display: flex; gap: 4px; margin-top: 9px; }
.otg-vert {
    flex: 1; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: var(--card);
    font-size: 10.5px; font-weight: 700; color: var(--text-2); cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center;
}
.otg-vert.active { border-color: var(--brand); background: var(--brand-050); color: var(--brand-ink); }

/* Nav */
.otg-sb-nav { flex: 1; overflow-y: auto; padding: 6px 10px 16px; }
.otg-sb-group { margin-top: 12px; }
.otg-sb-cap {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-3); padding: 0 10px 5px;
}
.otg-sb-nav a {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px;
    font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 1px;
}
.otg-sb-nav a svg { width: 16px; height: 16px; }
.otg-sb-nav a .lbl { flex: 1; }
.otg-sb-nav a:hover { background: var(--soft); color: var(--text); }
.otg-sb-nav a.active { background: var(--brand-050); color: var(--brand-ink); font-weight: 700; }
.otg-sb-nav a.active svg { color: var(--brand); }
.otg-sb-badge {
    font-size: 11px; font-weight: 700; background: var(--brand); color: #fff; border-radius: 20px; padding: 1px 7px;
}

/* Sidebar user footer */
.otg-sb-foot { border-top: 1px solid var(--line); padding: 10px 12px; display: flex; align-items: center; gap: 9px; }
.otg-sb-foot .ava {
    width: 32px; height: 32px; border-radius: 50%; background: var(--soft); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--text-2);
}
.otg-sb-foot .n { font-size: 12.5px; font-weight: 700; }
.otg-sb-foot .s { font-size: 11px; color: var(--text-3); }
.otg-sb-foot .gear { display: flex; width: 16px; height: 16px; color: var(--text-3); }

/* Main column -------------------------------------------------------------- */
.otg-main { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.otg-topbar {
    height: 58px; flex-shrink: 0; background: var(--card); border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 14px; padding: 0 22px;
}
.otg-search { flex: 1; max-width: 420px; position: relative; display: flex; align-items: center; }
.otg-search svg { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--text-3); }
.otg-search input {
    width: 100%; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--soft);
    padding: 0 12px 0 32px; font-size: 13px; font-family: inherit; color: var(--text); outline: none;
}
.otg-wa-status {
    display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 20px;
    background: var(--brand-050); border: 1px solid var(--brand-100);
}
.otg-wa-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wa-bright); }
.otg-wa-status .lbl { font-size: 12px; font-weight: 600; color: var(--wa); }
.otg-wa-status.off { background: var(--soft); border-color: var(--line); }
.otg-wa-status.off .dot { background: var(--text-3); }
.otg-wa-status.off .lbl { color: var(--text-3); }
.otg-lang { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; height: 30px; }
.otg-lang a { border: 0; background: transparent; color: var(--text-2); font-size: 12px; font-weight: 700; padding: 0 11px; height: 100%; display: flex; align-items: center; }
.otg-lang a.active { background: var(--brand); color: #fff; }
.otg-iconbtn {
    width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--card);
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-2); position: relative;
}
.otg-iconbtn svg { width: 17px; height: 17px; }
.otg-iconbtn .badge { position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); border: 1.5px solid var(--card); }

.otg-content { flex: 1; overflow-y: auto; padding: 24px 26px 48px; }

/* ── Page header ──────────────────────────────────────────────────────────── */
.otg-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.otg-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); }
.otg-h1 { margin: 3px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -0.5px; font-family: 'Plus Jakarta Sans', sans-serif; }
.otg-h1.big { font-size: 24px; letter-spacing: -0.4px; }
.otg-h2 { margin: 0; font-size: 14px; font-weight: 700; }
.otg-sub { margin: 5px 0 0; font-size: 13.5px; color: var(--text-2); }
.otg-minilabel { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }

/* ── Card ─────────────────────────────────────────────────────────────────── */
.otg-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow); }
.otg-card-pad { padding: 15px 16px; }
.otg-card-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.otg-card-head .l { display: flex; align-items: center; gap: 9px; }
.otg-tfoot { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--line); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.otg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 18px;
    background: var(--brand); color: #fff; border: 0; border-radius: 10px; font-size: 14px; font-weight: 700;
    font-family: inherit; cursor: pointer; box-shadow: 0 1px 2px rgba(14, 122, 52, .25); white-space: nowrap;
}
.otg-btn:hover { color: #fff; filter: brightness(0.96); }
.otg-btn svg { width: 17px; height: 17px; }
.otg-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 14px;
    background: var(--card); border: 1px solid var(--line); border-radius: 9px; font-size: 13px; font-weight: 600;
    color: var(--text-2); font-family: inherit; cursor: pointer; white-space: nowrap;
}
.otg-btn-ghost:hover { background: var(--soft); color: var(--text); }
.otg-btn-ghost svg { width: 15px; height: 15px; }
.otg-btn-ghost.ink { color: var(--text); }
.otg-btn.wide, .otg-btn-ghost.wide { width: 100%; }
.otg-btn.sm { height: 32px; font-size: 13px; padding: 0 14px; }
.otg-btn-ghost.sm { height: 30px; }

/* ── Chips ────────────────────────────────────────────────────────────────── */
.otg-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 20px; white-space: nowrap; color: var(--text-2); background: var(--soft); }
.otg-chip svg { width: 12px; height: 12px; }
.otg-chip.green { color: var(--success); background: var(--success-bg); }
.otg-chip.red { color: var(--danger); background: var(--danger-bg); }
.otg-chip.amber { color: var(--amber-text); background: var(--amber-bg); }
.otg-chip.neutral { color: var(--text-2); background: var(--soft); }
.otg-chip.brand { color: #fff; background: var(--brand); }
.otg-chip.brandsoft { color: var(--brand-ink); background: var(--brand-050); }
.otg-chip.blue { color: var(--blue); background: var(--blue-bg); }
.otg-chip.wa { color: var(--wa); background: var(--brand-050); }

/* ── Tabs / segmented ─────────────────────────────────────────────────────── */
.otg-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.otg-tab {
    border: 1px solid var(--line); background: var(--card); color: var(--text-2); border-radius: 9px;
    padding: 0 14px; height: 32px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center;
}
.otg-tab:hover { background: var(--soft); color: var(--text); }
.otg-tab.active { border-color: var(--brand); background: var(--brand-050); color: var(--brand-ink); }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.otg-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.otg-label .req { color: var(--danger); }
.otg-input, .otg select.otg-input, .otg textarea.otg-input {
    width: 100%; height: 38px; border: 1px solid var(--line); border-radius: 9px; background: var(--card);
    padding: 0 12px; font-size: 13.5px; font-family: inherit; color: var(--text); outline: none;
}
.otg textarea.otg-input { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.otg-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-050); }
.otg-input::placeholder { color: var(--text-3); }
.otg-field-search { position: relative; display: flex; align-items: center; }
.otg-field-search svg { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--text-3); }
.otg-field-search .otg-input { padding-left: 32px; }
.otg-help { font-size: 12px; color: var(--text-3); margin-top: 5px; }
.otg-err { font-size: 12px; color: var(--danger); margin-top: 5px; }
.otg-savebar {
    position: fixed; left: var(--sidebar-w); right: 0; bottom: 0; background: var(--card);
    border-top: 1px solid var(--line); padding: 12px 26px; display: flex; align-items: center;
    justify-content: space-between; gap: 12px; z-index: 30;
}

/* ── Toggle switch ────────────────────────────────────────────────────────── */
.otg-switch { width: 38px; height: 22px; border-radius: 20px; flex-shrink: 0; cursor: pointer; position: relative; background: var(--line-strong); border: 0; }
.otg-switch.on { background: var(--brand); }
.otg-switch .knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: left .12s; }
.otg-switch.on .knob { left: 18px; }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.otg-table { width: 100%; border-collapse: collapse; }
.otg-table th {
    text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--text-3); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.otg-table td { padding: 11px 14px; border-bottom: 1px solid var(--soft); font-size: 13px; vertical-align: middle; color: var(--text); }
.otg-table tbody tr:last-child td { border-bottom: 0; }
.otg-table tr.link { cursor: pointer; }
.otg-table tr.link:hover { background: var(--soft); }
.otg-table .r { text-align: right; }
.otg-cell-person { display: flex; align-items: center; gap: 10px; }

/* ── Avatar ───────────────────────────────────────────────────────────────── */
.otg-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center;
    justify-content: center; font-size: 12.5px; font-weight: 700; background: var(--soft); color: var(--text-2);
}
.otg-avatar.sm { width: 30px; height: 30px; font-size: 11px; }
.otg-avatar.xs { width: 32px; height: 32px; font-size: 11.5px; }
.otg-avatar.brand { background: var(--brand); color: #fff; }

/* ── KPI grid ─────────────────────────────────────────────────────────────── */
.otg-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 16px; }
.otg-kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 15px 16px; }
.otg-kpi .top { display: flex; align-items: center; justify-content: space-between; }
.otg-kpi .k { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.otg-kpi .ico { display: flex; width: 16px; height: 16px; color: var(--text-3); }
.otg-kpi .v { margin-top: 9px; font-size: 22px; font-weight: 800; letter-spacing: -0.6px; }
.otg-kpi .foot { margin-top: 7px; display: flex; align-items: center; gap: 6px; }
.otg-kpi .foot .sub { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Compact KPI (inline stat, e.g. invoices summary) */
.otg-statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.otg-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 13px 15px; }
.otg-stat .k { font-size: 12px; font-weight: 600; color: var(--text-2); }
.otg-stat .v { font-size: 20px; font-weight: 800; margin-top: 5px; letter-spacing: -0.02em; }

/* ── Two-column detail grids ──────────────────────────────────────────────── */
.otg-grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
.otg-grid-detail { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
.otg-col { display: flex; flex-direction: column; gap: 16px; }

/* ── Person / list rows ───────────────────────────────────────────────────── */
.otg-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--soft); }
.otg-row:last-child { border-bottom: 0; }
.otg-row .grow { flex: 1; min-width: 0; }
.otg-row .name { font-size: 13.5px; font-weight: 600; }
.otg-row .meta { font-size: 12px; color: var(--text-2); }
.otg-row .val { font-size: 13.5px; font-weight: 700; text-align: right; }

/* ── AI insight card ──────────────────────────────────────────────────────── */
.otg-ai { border: 1px solid var(--brand-100); background: var(--brand-050); border-radius: var(--radius-card); padding: 15px 16px; }
.otg-ai-head { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; color: var(--brand); }
.otg-ai-head .otg-h2 { color: var(--brand-ink); }
.otg-ai-head svg { width: 17px; height: 17px; }
.otg-ai-item { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--brand-100); }
.otg-ai-item .e { font-size: 15px; line-height: 1.2; }
.otg-ai-item .t { font-size: 12.5px; color: var(--brand-ink); line-height: 1.45; }

/* ── Quick actions ────────────────────────────────────────────────────────── */
.otg-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.otg-quick a, .otg-quick button {
    display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 12px; background: var(--soft);
    border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-family: inherit; text-align: left;
}
.otg-quick a:hover, .otg-quick button:hover { background: var(--soft-hover); }
.otg-quick svg { width: 18px; height: 18px; color: var(--brand); }
.otg-quick .lbl { font-size: 12.5px; font-weight: 700; color: var(--text); }

/* ── Bar chart (cashflow) ─────────────────────────────────────────────────── */
.otg-bars { display: flex; align-items: flex-end; gap: 14px; height: 150px; padding-top: 8px; }
.otg-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.otg-bar-pair { width: 100%; display: flex; gap: 4px; align-items: flex-end; height: 120px; }
.otg-bar-in { flex: 1; background: var(--brand); border-radius: 4px 4px 0 0; }
.otg-bar-out { flex: 1; background: var(--line-strong); border-radius: 4px 4px 0 0; }
.otg-bar-col .m { font-size: 11px; color: var(--text-3); }
.otg-legend { display: flex; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--soft); }
.otg-legend span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.otg-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.otg-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 24px; gap: 10px; }
.otg-empty .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--soft); display: flex; align-items: center; justify-content: center; color: var(--text-3); }
.otg-empty .ico svg { width: 22px; height: 22px; }
.otg-empty .t { font-size: 15px; font-weight: 700; }
.otg-empty .d { font-size: 13px; color: var(--text-2); max-width: 340px; }

/* ── Chat thread ──────────────────────────────────────────────────────────── */
.otg-bubble-row { display: flex; margin-bottom: 10px; }
.otg-bubble { max-width: 78%; padding: 9px 13px; border-radius: 13px; font-size: 13px; line-height: 1.45; border: 1px solid var(--line); background: var(--card); color: var(--text); }
.otg-bubble.me { background: var(--brand); color: #fff; border-color: var(--brand); border-bottom-right-radius: 3px; margin-left: auto; }
.otg-bubble.them { border-bottom-left-radius: 3px; }

/* ── Utilities ────────────────────────────────────────────────────────────── */
.otg-flex { display: flex; }
.otg-ac { align-items: center; }
.otg-jb { justify-content: space-between; }
.otg-gap8 { gap: 8px; }
.otg-gap10 { gap: 10px; }
.otg-gap16 { gap: 16px; }
.otg-grow { flex: 1; min-width: 0; }
.otg-wrap { flex-wrap: wrap; }
.otg-mb16 { margin-bottom: 16px; }
.otg-muted { color: var(--text-2); }
.otg-faint { color: var(--text-3); }

/* ── Responsive: collapse sidebar under 960px ─────────────────────────────── */
@media (max-width: 960px) {
    .otg-sidebar {
        position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%); transition: transform .2s;
        box-shadow: 0 8px 40px rgba(0, 0, 0, .18);
    }
    body.otg-nav-open .otg-sidebar { transform: translateX(0); }
    .otg-scrim { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 55; }
    body.otg-nav-open .otg-scrim { display: block; }
    .otg-savebar { left: 0; }
    .otg-menu-btn { display: inline-flex !important; }
}
.otg-menu-btn { display: none; }
@media (min-width: 961px) { .otg-scrim { display: none; } }

/* ── Grid fallbacks on narrow content ─────────────────────────────────────── */
@media (max-width: 1100px) {
    .otg-kpis, .otg-statrow { grid-template-columns: repeat(2, 1fr); }
    .otg-grid-2, .otg-grid-detail { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .otg-kpis, .otg-statrow, .otg-quick { grid-template-columns: 1fr; }
    .otg-content { padding: 18px 16px 60px; }
}

/* Topbar quick "New task" (projects / tasks modules). */
.otg-tb-newtask { margin-right: 10px; white-space: nowrap; }
@media (max-width: 560px) { .otg-tb-newtask .lbl { display: none; } }

/* Phones: keep the topbar inside the screen (it used to push every page sideways). */
.otg-search { min-width: 0; }
@media (max-width: 560px) {
    .otg-topbar { gap: 8px; padding: 0 12px; }
    .otg-wa-status { padding: 0 9px; }
    .otg-wa-status .lbl { display: none; }
    .otg-tb-newtask { margin-right: 0; }
    .otg-lang a { padding: 0 8px; }
}