:root {
    --bg: #0d0d0f;
    --panel: #17171b;
    --panel-2: #1f1f25;
    --ink: #f4f1e8;
    --muted: #9a958a;
    --gold: #c8a24a;
    --gold-bright: #e5c46b;
    --line: #2c2c33;
    --green: #3fae6b;
    --orange: #e08a2b;
    --red: #d9534f;
    --blue: #4a90d9;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-size: 15px;
}
a { color: var(--gold-bright); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout */
.topbar {
    background: #000;
    border-bottom: 2px solid var(--gold);
    padding: 10px 18px;
    display: flex; align-items: center; gap: 18px;
    position: sticky; top: 0; z-index: 20;
    flex-wrap: wrap;
}
.brand { font-weight: 700; color: var(--gold); font-size: 18px; letter-spacing: .5px; white-space: nowrap; }
.brand span { color: var(--ink); font-weight: 400; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.nav a { color: var(--ink); padding: 6px 12px; border-radius: 6px; font-size: 14px; }
.nav a:hover { background: var(--panel-2); text-decoration: none; }
.nav a.active { background: var(--gold); color: #000; font-weight: 600; }
.topbar .who { color: var(--muted); font-size: 13px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 20px 18px 60px; }
h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 17px; margin: 0 0 12px; color: var(--gold); }
h3 { font-size: 15px; margin: 0 0 8px; }

/* Cards / grid */
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px;
}
.card.tight { padding: 12px; }
.stat { text-align: center; }
.stat .n { font-size: 26px; font-weight: 700; color: var(--gold-bright); }
.stat .l { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }

/* Tables */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
tr:hover td { background: var(--panel-2); }
.table-scroll { overflow-x: auto; }

/* Badges */
.badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; text-align: center; }
.badge.paid { background: rgba(63,174,107,.18); color: var(--green); border: 1px solid var(--green); }
.badge.unpaid { background: rgba(224,138,43,.18); color: var(--orange); border: 1px solid var(--orange); }
.badge.partial { background: rgba(74,144,217,.18); color: var(--blue); border: 1px solid var(--blue); }
.badge.status { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); }
.badge.g { background: rgba(200,162,74,.15); color: var(--gold-bright); border: 1px solid var(--gold); }

/* Lead pipeline status badges (color-coded by stage) */
.badge.st-new { background: rgba(74,144,217,.18); color: #7cb3ee; border: 1px solid #4a90d9; }
.badge.st-contacted { background: rgba(47,179,192,.18); color: #5bd0da; border: 1px solid #2fb3c0; }
.badge.st-follow-up { background: rgba(200,162,74,.18); color: #e5c46b; border: 1px solid #c8a24a; }
.badge.st-qualified { background: rgba(155,109,214,.20); color: #bd9aea; border: 1px solid #9b6dd6; }
.badge.st-prices-sent { background: rgba(224,138,43,.18); color: #f0a95a; border: 1px solid #e08a2b; }
.badge.st-awaiting-decision { background: rgba(203,178,62,.18); color: #e6d060; border: 1px solid #cbb23e; }
.badge.st-active { background: rgba(58,174,143,.18); color: #5fd0b0; border: 1px solid #3aae8f; }
.badge.st-won { background: rgba(63,174,107,.18); color: #6fd396; border: 1px solid #3fae6b; }
.badge.st-lost { background: rgba(217,83,79,.18); color: #ec8582; border: 1px solid #d9534f; }
.badge.st-inactive { background: rgba(154,149,138,.15); color: #a6a6ae; border: 1px solid #6a6a72; }
.badge.st-spam { background: rgba(85,85,92,.20); color: #8a8a92; border: 1px solid #55555c; }

/* Forms */
label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
input, select, textarea {
    width: 100%; padding: 9px 10px; background: var(--panel-2); color: var(--ink);
    border: 1px solid var(--line); border-radius: 6px; font-size: 14px; font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); }
textarea { min-height: 90px; resize: vertical; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 140px; }

.btn {
    display: inline-block; padding: 9px 16px; border-radius: 6px; border: 1px solid var(--gold);
    background: var(--gold); color: #000; font-weight: 600; cursor: pointer; font-size: 14px;
}
.btn:hover { background: var(--gold-bright); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--gold-bright); }
.btn.ghost:hover { background: var(--panel-2); }
.btn.danger { background: transparent; border-color: var(--red); color: var(--red); }
.btn.sm { padding: 4px 10px; font-size: 12px; }
.btn.block { display: block; width: 100%; text-align: center; }

.muted { color: var(--muted); }
.gold { color: var(--gold-bright); }
.right { text-align: right; }
.mt { margin-top: 16px; }
.mb { margin-bottom: 16px; }
.flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }

/* Flash */
.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-weight: 500; }
.flash.ok { background: rgba(63,174,107,.15); border: 1px solid var(--green); color: #bfe6cd; }
.flash.err { background: rgba(217,83,79,.15); border: 1px solid var(--red); color: #f0c4c2; }

/* Calendar */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal .dow { color: var(--muted); font-size: 11px; text-align: center; text-transform: uppercase; }
.cal .day.out { opacity: 0.45; }
.cal .day { background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; min-height: 92px; min-width: 0; padding: 4px 4px 5px; font-size: 11px; }
.cal .day.today { border-color: var(--gold); background: rgba(212,175,55,0.10); }
.cal .day .dn { color: var(--muted); font-size: 11px; }
.cal .ev { display: block; border-radius: 4px; padding: 2px 5px; margin-top: 3px; font-size: 11px; line-height: 1.25; overflow-wrap: break-word; word-break: normal; }
.cal .ev.gig-paid { background: var(--green); color: #04220f; }
.cal .ev.gig-unpaid { background: var(--orange); color: #2a1602; }
.cal .ev.lead { background: #4a4a52; color: var(--ink); }
.cal .ev.call { background: #4d9dff; color: #06263f; }
.cal .ev.followup { background: transparent; color: var(--gold-bright); border: 1px dashed var(--gold); }

.step-line { border-left: 2px solid var(--line); padding-left: 14px; margin-left: 6px; }
.step { position: relative; padding: 8px 0; }
.step:before { content: ''; position: absolute; left: -21px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.step.sent:before, .step.done:before { background: var(--green); }
.step.pending:before { background: var(--gold); }
.step.cancelled:before, .step.skipped:before { background: var(--red); }
.pill { font-size: 11px; padding: 1px 7px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.tag-pill { display:inline-block; font-size:11px; line-height:1.7; padding:1px 9px; border-radius:12px; font-weight:600; background:rgba(155,109,214,.22); color:#c9a9ef; border:1px solid #9b6dd6; cursor:default; }
button.tag-pill { cursor:pointer; }
button.tag-pill:hover { background:rgba(217,83,79,.22); color:#ec8582; border-color:#d9534f; }

@media (max-width: 860px) {
    .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
    .cal { gap: 3px; }
    .cal .ev { font-size: 10px; padding: 1px 3px; }
    .cal .day { min-height: 82px; padding: 3px 3px 4px; }
}
@media (max-width: 520px) {
    .cal { gap: 2px; }
    .cal .ev { font-size: 9px; padding: 1px 2px; line-height: 1.2; }
    .cal .day { padding: 2px 2px 3px; }
    .cal .dow { font-size: 10px; }
}

/* Mobile hamburger nav */
.navtoggle { display: none; background: none; border: 1px solid var(--line); color: var(--ink); border-radius: 6px; padding: 2px 11px; font-size: 20px; line-height: 1.3; cursor: pointer; }
.topbar-collapse { display: flex; align-items: center; gap: 18px; flex: 1; }
/* Hide $ toggle sits outside the collapsible menu so it's always reachable
   (rightmost on desktop, beside the hamburger on phones). */
#hideMoneyBtn { order: 3; }
@media (max-width: 860px) {
    .navtoggle { display: inline-flex; order: 4; }
    #hideMoneyBtn { margin-left: auto; }
    .topbar-collapse { display: none; flex-direction: column; align-items: stretch; width: 100%; gap: 8px; flex-basis: 100%; }
    .topbar.nav-open .topbar-collapse { display: flex; }
    .topbar-collapse .nav { flex-direction: column; gap: 2px; flex: none; }
    .topbar-collapse .nav a { padding: 10px 12px; }
    .topbar-collapse .who { padding: 2px 12px; }
    .topbar-collapse form { width: 100%; }
}

/* Compact, consistent list tables (leads/gigs) */
.list-tbl { font-size: 13px; }
.list-tbl th, .list-tbl td { padding: 7px 9px; }

/* --- Phone: turn wide data tables into stacked, labeled cards --- */
/* Applies to every table wrapped in .table-scroll (all list + dashboard tables)
   plus the detail-page contact tables. Rows become cards, the header row is
   hidden, and each cell shows its column name via data-label. Nothing runs off
   the screen and there is no sideways scrolling. */
@media (max-width: 640px) {
    .table-scroll { overflow-x: visible; }
    .table-scroll > table,
    .table-scroll > table > tbody,
    .contacts-tbl, .contacts-tbl > tbody { display: block; width: 100%; }

    .table-scroll table tr:has(th),
    .contacts-tbl tr:has(th) { display: none; }

    .table-scroll table tr,
    .contacts-tbl tr {
        display: block;
        background: var(--panel-2);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 8px 13px 10px;
        margin-bottom: 10px;
    }
    .table-scroll table tr:hover td,
    .contacts-tbl tr:hover td { background: transparent; }

    .table-scroll table td,
    .contacts-tbl td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 14px;
        text-align: right;
        border: none;
        padding: 5px 0;
        font-size: 14px;
    }
    .table-scroll table td::before,
    .contacts-tbl td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .5px;
        text-align: left;
        flex: 0 0 auto;
    }
    /* First cell = the record's name/title: full-width heading, no label. */
    .table-scroll table td:first-child,
    .contacts-tbl td:first-child {
        display: block;
        text-align: left;
        font-size: 16px;
        font-weight: 600;
        padding-bottom: 8px;
        margin-bottom: 3px;
        border-bottom: 1px solid var(--line);
    }
    .table-scroll table td:first-child::before,
    .contacts-tbl td:first-child::before { display: none; }
    /* Drop lines with no value: empty cells and blank money amounts. */
    .table-scroll table td:empty,
    .table-scroll table td:has(> .money:empty) { display: none; }
    /* Columns explicitly marked low-value on phones. */
    .hide-phone { display: none !important; }
}

/* Lighten native date/time picker icons on dark theme */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85);
    cursor: pointer;
    opacity: 0.9;
}

/* Mago-style time picker (wm-timepicker.js) */
.wmtime-wrap{position:relative;}
.wmtime-field{cursor:pointer;}
.wmtime-pop{position:absolute;z-index:60;top:calc(100% + 4px);left:0;background:#1c1e24;border:1px solid #3a3a3a;border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.55);padding:8px 10px;}
.wmtime-cols{display:flex;align-items:center;gap:6px;}
.wmtime-col{display:flex;flex-direction:column;align-items:center;}
.wmtime-btn{background:none;border:none;color:#8a90a0;cursor:pointer;font-size:10px;line-height:1;padding:3px 10px;border-radius:5px;}
.wmtime-btn:hover{color:#fff;background:#232733;}
.wmtime-val{font-size:14px;font-weight:600;color:#eaeaea;padding:5px 4px;min-width:30px;text-align:center;background:#12141a;border:1px solid #333;border-radius:6px;margin:2px 0;}
.wmtime-sep{color:#666;font-size:14px;font-weight:600;align-self:center;}
.wmtime-field.locked{color:var(--muted);background:rgba(255,255,255,0.05);cursor:not-allowed;}

/* Routine preview (automations/preview.php) */
.rp{font-size:13px;}
.rp-note{color:var(--muted);font-size:12px;margin-bottom:8px;}
.rp-list{list-style:none;margin:0;padding:0;}
.rp-item{display:flex;gap:12px;padding:10px 0;border-top:1px solid #2a2a2a;}
.rp-item:first-child{border-top:none;}
.rp-when{flex:0 0 96px;color:#c8a24a;font-weight:600;font-size:12px;padding-top:2px;}
.rp-main{flex:1;min-width:0;}
.rp-title{font-weight:600;}
.rp-sub{color:var(--muted);font-size:12px;margin-top:2px;}
.rp-email{margin-top:6px;}
.rp-email summary{cursor:pointer;color:#5aa2ff;font-size:12px;}
.rp-emailframe{width:100%;height:82vh;min-height:520px;border:1px solid #333;border-radius:8px;background:#fff;margin-top:8px;display:block;}
.amount-green{color:var(--green,#4ccf8e);font-weight:600;}
.copy-btn{background:none;border:none;color:#6a7080;cursor:pointer;padding:2px;vertical-align:middle;border-radius:4px;opacity:0.7;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;font-size:13px;}
.copy-btn svg{display:block;width:14px;height:14px;}
.copy-btn:hover{color:#fff;background:#232733;opacity:1;}
.copy-btn.copied{color:var(--green,#4ccf8e);opacity:1;}
.wm-datewrap{position:relative;}
.wm-datenative{color:transparent;}
.wm-datenative:focus{color:transparent;}
.wm-date-face{position:absolute;left:0;top:0;bottom:0;right:34px;display:flex;align-items:center;padding-left:12px;pointer-events:none;color:var(--gold,#c8a24a);font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;}
.wm-date-face.empty{color:var(--muted);font-weight:400;}
.email-preview-frame{display:block;width:100%;height:82vh;min-height:520px;border:1px solid #333;border-radius:8px;background:#fff;margin-top:10px;}
.js-email-preview{cursor:pointer;}