/* MB Agency Books — front-end screen.
   Scoped to .mbab-app so it cannot leak into the surrounding theme. */
.mbab-app {
  --mbab-ground:#EFEDE8; --mbab-surface:#FBFAF7; --mbab-surface-2:#F4F2EC; --mbab-surface-3:#EAE7DF;
  --mbab-ink:#1B1A17; --mbab-ink-2:#4C483F; --mbab-ink-3:#7D7A70;
  --mbab-rule:#DEDACF; --mbab-rule-2:#C9C3B4;
  --mbab-brand:#7E1F1A; --mbab-brand-deep:#6A1915; --mbab-gold:#C9A14A;
  --mbab-pos:#0F7A53; --mbab-neg:#C13B2C; --mbab-info:#2F5D75; --mbab-warn:#C9A14A;
  --mbab-shadow:0 1px 1px rgba(27,26,23,.04), 0 10px 26px -16px rgba(27,26,23,.30);

  color:var(--mbab-ink);
  font-size:15px; line-height:1.55;
  max-width:1200px; margin:0 auto; padding:0 16px;
  box-sizing:border-box;
}
.mbab-app *, .mbab-app *::before, .mbab-app *::after { box-sizing:border-box; }

.mbab-app .mbab-wordmark { font-family:Georgia,"Times New Roman",serif; font-weight:700;
  font-size:24px; color:var(--mbab-brand); letter-spacing:-.01em; line-height:1.1; }
.mbab-app .mbab-wordmark-sm { font-size:17px; }
.mbab-app h2 { margin:6px 0 0; font-family:Georgia,"Times New Roman",serif; font-size:22px; font-weight:600; }
.mbab-app h3 { margin:0 0 14px; font-family:Georgia,"Times New Roman",serif; font-size:17px; font-weight:600; }
.mbab-app .mbab-sub { color:var(--mbab-ink-3); font-size:13px; }
.mbab-app .mbab-center { text-align:center; }
.mbab-app .mbab-mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; }
.mbab-app .mbab-r { text-align:right; }

/* --- sign in --- */
.mbab-app .mbab-login { display:grid; place-items:center; padding:40px 0; }
.mbab-app .mbab-login-card { width:min(420px,100%); background:var(--mbab-surface);
  border:1px solid var(--mbab-rule); border-radius:14px; box-shadow:var(--mbab-shadow); padding:28px 26px; }
.mbab-app .mbab-login-card .login-username,
.mbab-app .mbab-login-card .login-password { margin-bottom:14px; }
.mbab-app .mbab-login-card label { display:block; font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--mbab-ink-3); font-weight:600; margin-bottom:4px; }
.mbab-app .mbab-login-card input[type=text],
.mbab-app .mbab-login-card input[type=password] { width:100%; padding:9px 10px;
  border:1px solid var(--mbab-rule-2); border-radius:7px; background:var(--mbab-surface-2); font-size:15px; }
.mbab-app .mbab-login-card .login-remember label { text-transform:none; letter-spacing:0;
  font-weight:400; font-size:13px; color:var(--mbab-ink-2); display:flex; gap:7px; align-items:center; }
.mbab-app .mbab-login-card .login-submit input[type=submit] { width:100%; }

/* --- header --- */
.mbab-app .mbab-head { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap;
  padding-bottom:16px; border-bottom:1px solid var(--mbab-rule); margin-bottom:20px; }
.mbab-app .mbab-head-right { margin-left:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* --- buttons --- */
.mbab-app .mbab-btn, .mbab-app input[type=submit] {
  display:inline-block; border:1px solid var(--mbab-rule-2); background:var(--mbab-surface);
  color:var(--mbab-ink); border-radius:8px; padding:8px 14px; font-size:14px; font-weight:500;
  cursor:pointer; text-decoration:none; line-height:1.3; }
.mbab-app .mbab-btn:hover, .mbab-app input[type=submit]:hover { background:var(--mbab-surface-2); }
.mbab-app .mbab-btn-primary, .mbab-app input[type=submit] {
  background:var(--mbab-brand); border-color:var(--mbab-brand); color:#F6E9D8; }
.mbab-app .mbab-btn-primary:hover, .mbab-app input[type=submit]:hover {
  background:var(--mbab-brand-deep); color:#F6E9D8; }
.mbab-app .mbab-btn-quiet { font-size:13px; padding:6px 11px; }

/* --- KPIs --- */
.mbab-app .mbab-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px; margin-bottom:18px; }
.mbab-app .mbab-kpi { background:var(--mbab-surface); border:1px solid var(--mbab-rule);
  border-radius:10px; padding:13px 15px; display:flex; flex-direction:column; gap:5px;
  box-shadow:var(--mbab-shadow); }
.mbab-app .mbab-kpi-l { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mbab-ink-3); }
.mbab-app .mbab-kpi-v { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:23px;
  font-weight:500; letter-spacing:-.035em; }

/* --- toolbar --- */
.mbab-app .mbab-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.mbab-app .mbab-search { display:flex; gap:8px; align-items:center; flex:1; min-width:220px; margin:0; }
.mbab-app .mbab-search input[type=search] { flex:1; min-width:0; padding:8px 10px;
  border:1px solid var(--mbab-rule-2); border-radius:8px; background:var(--mbab-surface); font-size:14px; }

/* --- table --- */
.mbab-app .mbab-table-wrap { overflow-x:auto; background:var(--mbab-surface);
  border:1px solid var(--mbab-rule); border-radius:10px; box-shadow:var(--mbab-shadow); }
.mbab-app .mbab-table { border-collapse:collapse; width:100%; font-size:14px; margin:0; }
.mbab-app .mbab-table th { text-align:left; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--mbab-ink-3); font-weight:600; padding:10px 12px;
  border-bottom:1px solid var(--mbab-rule-2); white-space:nowrap; }
.mbab-app .mbab-table td { padding:10px 12px; border-bottom:1px solid var(--mbab-rule); vertical-align:middle; }
.mbab-app .mbab-table tbody tr:last-child td { border-bottom:0; }
.mbab-app .mbab-table tbody tr:hover { background:var(--mbab-surface-2); }
.mbab-app .mbab-empty { text-align:center; color:var(--mbab-ink-3); padding:30px 12px; }

.mbab-app .mbab-pill { display:inline-block; font-size:11px; font-weight:600; padding:2px 9px; border-radius:999px; }
.mbab-app .mbab-pill-on  { background:#DFF0E7; color:var(--mbab-pos); }
.mbab-app .mbab-pill-off { background:var(--mbab-surface-3); color:var(--mbab-ink-3); }

/* --- add form --- */
.mbab-app .mbab-card { background:var(--mbab-surface); border:1px solid var(--mbab-rule);
  border-radius:10px; box-shadow:var(--mbab-shadow); padding:20px; margin-top:20px; }
.mbab-app .mbab-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:0; }
.mbab-app .mbab-field { display:flex; flex-direction:column; gap:4px; margin:0; }
.mbab-app .mbab-full { grid-column:1/-1; }
.mbab-app .mbab-field label { font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--mbab-ink-3); font-weight:600; }
.mbab-app .mbab-field input, .mbab-app .mbab-field select, .mbab-app .mbab-field textarea {
  width:100%; padding:8px 10px; border:1px solid var(--mbab-rule-2); border-radius:7px;
  background:var(--mbab-surface-2); font-size:14px; font-family:inherit; }
.mbab-app .mbab-actions { margin:0; }

/* --- messages --- */
.mbab-app .mbab-error { background:#F8E3E0; border:1px solid var(--mbab-neg); color:var(--mbab-neg);
  border-radius:8px; padding:11px 13px; font-size:13.5px; margin-bottom:14px; }
.mbab-app .mbab-error ul { margin:6px 0 0 20px; }
.mbab-app .mbab-success { background:#DFF0E7; border:1px solid var(--mbab-pos); color:var(--mbab-pos);
  border-radius:8px; padding:11px 13px; font-size:13.5px; margin-bottom:16px; }

@media (max-width:640px) {
  .mbab-app { padding:0 12px; }
  .mbab-app .mbab-head-right { margin-left:0; width:100%; }
  .mbab-app .mbab-bar { flex-direction:column; align-items:stretch; }
  .mbab-app .mbab-btn-primary { text-align:center; }
}

/* ---- v2: tabs, chips, service pick list ---- */
.mbab-app .mbab-tabs{display:flex;gap:2px;background:var(--mbab-surface-3);border-radius:10px;
  padding:3px;margin-bottom:18px;overflow-x:auto}
.mbab-app .mbab-tab{padding:8px 16px;border-radius:7px;font-size:14px;color:var(--mbab-ink-2);
  text-decoration:none;white-space:nowrap}
.mbab-app .mbab-tab.on{background:var(--mbab-surface);color:var(--mbab-ink);font-weight:600;
  box-shadow:var(--mbab-shadow)}
.mbab-app .mbab-tab:hover{color:var(--mbab-ink)}

.mbab-app .mbab-chips{display:flex;gap:5px;flex-wrap:wrap}
.mbab-app .mbab-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;padding:3px 9px;
  border-radius:6px;background:#E2EAF8;color:#2B5FB8;white-space:nowrap}
.mbab-app .mbab-chip.off{background:var(--mbab-surface-3);color:var(--mbab-ink-3);text-decoration:line-through}
.mbab-app .mbab-chip-fee{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;opacity:.75;font-size:11px}
.mbab-app .mbab-pill-hold{background:#F4EBD4;color:#9A7407}

.mbab-app .mbab-block-label{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mbab-ink-3);font-weight:600;margin-bottom:3px}
.mbab-app .mbab-picklist{display:flex;flex-direction:column;gap:2px;margin-top:9px;
  border:1px solid var(--mbab-rule-2);border-radius:8px;background:var(--mbab-surface-2);padding:4px 10px}
.mbab-app .mbab-pick{display:grid;gap:10px;align-items:center;padding:9px 0;
  grid-template-columns:auto minmax(120px,1fr) 110px 130px;border-bottom:1px solid var(--mbab-rule)}
.mbab-app .mbab-pick:last-child{border-bottom:0}
.mbab-app .mbab-pick input[type=checkbox]{width:17px;height:17px;margin:0}
.mbab-app .mbab-pick-name{font-size:14px}
.mbab-app .mbab-pick-fee,.mbab-app .mbab-pick-cycle{width:100%;padding:6px 8px;font-size:13px;
  border:1px solid var(--mbab-rule-2);border-radius:6px;background:var(--mbab-surface)}
@media (max-width:640px){
  .mbab-app .mbab-pick{grid-template-columns:auto 1fr;gap:8px}
  .mbab-app .mbab-pick-fee,.mbab-app .mbab-pick-cycle{grid-column:2}
}

/* ---- v3: dashboard, income, expenses, payroll, reports, VAT, settings ---- */
.mbab-app .mbab-h2{font-family:Georgia,"Times New Roman",serif;font-size:18px;font-weight:600;margin:26px 0 10px}
.mbab-app .mbab-h3{font-size:15px;font-weight:600;margin:18px 0 8px}
.mbab-app .mbab-mt{margin-top:22px}
.mbab-app .mbab-mt-s{margin-top:8px}
.mbab-app .mbab-pad{padding:20px}
.mbab-app .mbab-strong{font-weight:600}
.mbab-app .mbab-neg-text{color:var(--mbab-neg)}
.mbab-app .mbab-pos-text{color:var(--mbab-pos)}
.mbab-app .mbab-pill-bad{background:#F8DCD6;color:var(--mbab-neg)}

.mbab-app .mbab-card-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.mbab-app .mbab-card-t{font-weight:600;font-size:14px}
.mbab-app .mbab-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-top:16px}
.mbab-app .mbab-link{text-decoration:none;font-size:13px;font-weight:600;color:var(--mbab-brand)}
.mbab-app .mbab-table tfoot td{font-weight:600;border-top:2px solid var(--mbab-rule-2);border-bottom:0}

.mbab-app .mbab-period-row{margin-bottom:16px}
.mbab-app .mbab-period-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mbab-app .mbab-period-form select{padding:7px 9px;border:1px solid var(--mbab-rule-2);
  border-radius:7px;background:var(--mbab-surface);font-size:13.5px}
.mbab-app .mbab-ctl-l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mbab-ink-3);font-weight:600}

.mbab-app .mbab-spacer{flex:1}
.mbab-app .mbab-inline-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.mbab-app .mbab-inline-form select{padding:7px 9px;border:1px solid var(--mbab-rule-2);
  border-radius:7px;background:var(--mbab-surface);font-size:13.5px}

.mbab-app .mbab-btn-danger{border-color:#E3B4AC;color:var(--mbab-neg)}
.mbab-app .mbab-btn-danger:hover{background:#F8DCD6;color:var(--mbab-neg)}

.mbab-app .mbab-seg{display:inline-flex;background:var(--mbab-surface-3);border-radius:8px;padding:3px;gap:2px}
.mbab-app .mbab-seg a{padding:7px 14px;border-radius:6px;font-size:13.5px;color:var(--mbab-ink-2);
  text-decoration:none;white-space:nowrap}
.mbab-app .mbab-seg a.on{background:var(--mbab-surface);color:var(--mbab-ink);font-weight:600;
  box-shadow:var(--mbab-shadow)}

.mbab-app .mbab-controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

.mbab-app .mbab-chart{overflow-x:auto}
.mbab-app .mbab-chart-svg{width:100%;height:auto;min-width:560px;display:block}
.mbab-app .mbab-legend{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:10px;font-size:12.5px;color:var(--mbab-ink-3)}
.mbab-app .mbab-legend span{display:inline-flex;align-items:center;gap:6px}
.mbab-app .mbab-swatch{width:10px;height:10px;border-radius:2px;display:inline-block}
.mbab-app .mbab-swatch.line{border-radius:50%}

.mbab-app .mbab-delta{font-weight:600;font-size:13px}
.mbab-app .mbab-delta.up{color:var(--mbab-pos)}
.mbab-app .mbab-delta.down{color:var(--mbab-neg)}

.mbab-app .mbab-pl th,.mbab-app .mbab-pl td{white-space:nowrap}
.mbab-app .mbab-pl-label{min-width:220px;white-space:normal}
.mbab-app .mbab-pl-head td{padding-top:18px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mbab-ink-3);border-bottom:0}
.mbab-app .mbab-pl-sub td{font-weight:600;border-top:1px solid var(--mbab-rule)}
.mbab-app .mbab-pl-subneg td{font-weight:600;border-top:1px solid var(--mbab-rule)}
.mbab-app .mbab-pl-grand td{font-weight:700;border-top:2px solid var(--mbab-ink);font-size:14.5px}
.mbab-app .mbab-pl-pct td{font-style:italic;color:var(--mbab-ink-3)}
.mbab-app .mbab-pl-total{background:var(--mbab-surface-2)}

.mbab-app .mbab-dl{display:grid;gap:9px;margin:0}
.mbab-app .mbab-dl > div{display:flex;justify-content:space-between;gap:10px;
  border-bottom:1px dashed var(--mbab-rule);padding-bottom:7px;font-size:13.5px}
.mbab-app .mbab-dl dt{color:var(--mbab-ink-3)}
.mbab-app .mbab-dl dd{margin:0}
.mbab-app .mbab-note{font-size:14px;line-height:1.65}

.mbab-app .mbab-notice{border-radius:8px;padding:11px 14px;margin:0 0 14px}
.mbab-app .mbab-notice ul{margin:6px 0 0 20px}
.mbab-app .mbab-notice.notice-warning{background:#F4EBD4;border:1px solid #C9A14A;color:#7A5A00}
.mbab-app .mbab-notice.notice-error{background:#F8E3E0;border:1px solid var(--mbab-neg);color:var(--mbab-neg)}

.mbab-app .mbab-req{color:var(--mbab-neg)}
.mbab-app .mbab-errors{margin:6px 0 0 20px}

/* Bare <label> fields used by the v3 forms (income/expenses/payroll/settings/clients) */
.mbab-app .mbab-form .mbab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:14px 0}
.mbab-app .mbab-form .mbab-grid label,.mbab-app .mbab-form label.mbab-block{
  display:flex;flex-direction:column;gap:5px;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mbab-ink-3);font-weight:600;margin:0 0 14px}
.mbab-app .mbab-form label.mbab-check{display:flex;flex-direction:row;align-items:center;gap:8px;
  text-transform:none;letter-spacing:0;font-weight:400;color:var(--mbab-ink);grid-column:1/-1}
.mbab-app .mbab-form label.mbab-check input{margin:0;width:17px;height:17px}
.mbab-app .mbab-form input, .mbab-app .mbab-form select, .mbab-app .mbab-form textarea {
  width:100%; padding:8px 10px; border:1px solid var(--mbab-rule-2); border-radius:7px;
  background:var(--mbab-surface-2); font-size:14px; font-family:inherit;
  text-transform:none; letter-spacing:0; font-weight:400; color:var(--mbab-ink); }
.mbab-app .mbab-form .regular-text{max-width:420px}
.mbab-app .mbab-form .large-text{width:100%}
.mbab-app .mbab-form p.submit{margin:16px 0 0;display:flex;gap:10px;flex-wrap:wrap}
.mbab-app .description{color:var(--mbab-ink-3);font-size:12.5px;margin:4px 0 0}