/*
  style.css — design tokens from SSD §5.4.
  Populated incrementally as each module's templates are built; only the shared
  tokens and a minimal error-page style exist at this skeleton stage.
*/

:root {
  --brand-deep: #174d6c;
  --brand-gold: #f5bf48;
  --brand-teal: #73c6d0;
  --brand-mint: #91beb6;
  --neu-bg: #e8edf2;
  --neu-shadow-dark: #c5ccd4;
  --neu-shadow-light: #ffffff;
  --text-primary: #1a2530;
  --text-secondary: #5a6a75;
  --success: #28a745;
  --danger: #dc3545;
  --warning: #f5bf48;
}

body {
  font-family: "Inter", sans-serif;
  background: var(--neu-bg);
  color: var(--text-primary);
  margin: 0;
}

/* GLOBAL FIX: every form control uses border-box sizing so padding/border are
   included in the element's declared width instead of added on top of it. Without
   this, an input given width:100% inside a narrow container can render WIDER than
   its container (padding pushes it over), which was the root cause of the
   Add-Provider plan-row fields overflowing past the panel edge. Applying this
   globally (not just to the one component that broke) prevents the same class of
   bug from recurring in every future form. */
input, select, textarea, button {
  box-sizing: border-box;
}

.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.error-box {
  text-align: center;
}

.error-box h1 {
  font-size: 64px;
  color: var(--brand-deep);
  margin: 0;
}

.error-box a {
  color: var(--brand-teal);
}

/* --- Auth pages (login.html / register.html) — standalone, no sidebar ------- */

.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.auth-card {
  /* Neumorphic card per SSD §5.4 design system — raised surface using a dual
     light/dark shadow pair rather than a flat border. */
  background: var(--neu-bg);
  border-radius: 20px;
  box-shadow: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light);
  padding: 40px;
  width: 100%;
  max-width: 400px;
}

/* Stacked (logo image above wordmark) rather than the old side-by-side row —
   explicit request to put the logo prominently at the TOP of the login card
   rather than as a small inline icon next to the text. Centered since this is
   the one screen (login) that's pure platform branding, no shop context yet. */
.auth-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: 16px;
  text-align: center;
}
.auth-logo-img {
  height: 64px;
  width: 64px;
  object-fit: contain;
}

.auth-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0 0 20px;
}

.auth-card form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-card label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 10px;
}

.auth-card input {
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  background: #fff;
  box-shadow: inset 2px 2px 5px var(--neu-shadow-dark);
  font-size: 14px;
  font-family: inherit;
}

.auth-card hr {
  border: none;
  border-top: 1px solid var(--neu-shadow-dark);
  margin: 16px 0 4px;
}

.btn-primary {
  margin-top: 20px;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: var(--brand-deep);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

.btn-primary:hover {
  background: var(--brand-teal);
}

.auth-footer {
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 20px;
}

.auth-footer a {
  color: var(--brand-teal);
  font-weight: 600;
  text-decoration: none;
}

.flash-stack {
  margin-bottom: 10px;
}

.flash-msg {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 8px;
}

.flash-success { background: rgba(40,167,69,0.13); color: #155724; }
.flash-danger  { background: rgba(220,53,69,0.13); color: #842029; }
.flash-warning { background: rgba(245,191,72,0.20); color: #7a5500; }
.flash-info    { background: rgba(115,198,208,0.20); color: #174d6c; }

/* --- base.html master layout (SSD §5.2) ------------------------------------- */

.idle-warning-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--brand-gold);
  color: #3d2f00;
  text-align: center;
  padding: 8px;
  font-size: 13px;
  font-weight: 600;
  z-index: 200;
}

.hamburger-btn {
  display: none; /* shown only ≤768px, see media query below */
  position: fixed;
  top: 12px; left: 12px;
  z-index: 150;
  width: 40px; height: 40px;
  border: none;
  border-radius: 10px;
  background: var(--brand-deep);
  color: #fff;
  font-size: 20px;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 90;
}
.sidebar-overlay.open { display: block; }

.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 240px;
  background: var(--brand-deep);
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.sidebar-logo {
  padding: 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-logo a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--brand-gold);
  font-weight: 700;
  font-size: 18px;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 8px;
  overflow-y: auto;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #cfe0ea;
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 2px;
}
.nav-link:hover, .nav-link.active {
  background: rgba(245,191,72,0.15);
  color: var(--brand-gold);
}

.sidebar-footer {
  padding: 12px 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.sidebar-powered-by {
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  padding: 8px 0 2px;
  letter-spacing: 0.02em;
}

.main-content {
  margin-left: 240px;
  padding: 24px;
  min-height: 100vh;
  box-sizing: border-box;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.topbar-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-deep);
}
.topbar-clock {
  /* Pill/chip background rather than plain text — applies everywhere since
     base.html (and therefore this element) is shared by every authenticated page. */
  font-size: 13px;
  color: var(--brand-deep);
  font-weight: 600;
  background: var(--neu-bg);
  box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
  padding: 6px 14px;
  border-radius: 20px;
}

/* --- Dashboard-specific --- */

/* Notification banner — used for the dashboard/Finance "closed month" style
   heads-up banners. REDUCED this session (dead-code cleanup): the DASH-05
   contract-alert queue this was originally built for (dismissible banners,
   toggled via the `hidden` attribute, a danger/warning color pair) was removed
   in an earlier session — every banner left in the app today is a single,
   always-visible, non-dismissible one (dashboard.html/finance/index.html both
   hardcode notification-warning only). Removed along with it: .notification-
   danger (the color variant nothing ever applied), the `[hidden]` override rule
   (nothing sets `hidden` on a .notification-banner anymore — see AUTH-08's
   .idle-warning-banner for the app's one remaining hidden-toggled banner, which
   never needed this override since it has no conflicting `display` rule), and
   .notification-close-btn (no close button element exists anywhere). */
.notification-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 14px;
}
.notification-banner span { flex: 1; }
.notification-warning { background: rgba(245,191,72,0.20); color: #7a5500; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--neu-bg);
  border-radius: 16px;
  box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);
  padding: 18px;
  text-decoration: none;
  color: inherit;
  display: block;
}
.stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--brand-deep);
}
.stat-value.stat-danger { color: var(--danger); }
.stat-value.stat-success { color: var(--success); }

.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.panel {
  background: var(--neu-bg);
  border-radius: 16px;
  box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);
  padding: 18px;
}
.panel h3 {
  margin-top: 0;
  font-size: 15px;
  color: var(--brand-deep);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th {
  text-align: left;
  background: var(--brand-deep);
  color: #fff;
  padding: 8px 10px;
}
.data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--neu-shadow-dark);
}

.empty-state {
  color: var(--text-secondary);
  font-size: 13px;
}

/* Status badges — colours per SSD §5.7 exactly */
.badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  /* Stored status values are lowercase ("active", "overdue", ...) since that's what
     the model/status-logic in utils.py compares against — capitalising here is
     purely a display concern, applied once in CSS rather than changing every
     template that renders a badge across every module (dashboard, providers,
     subscribers, ...) to title-case its Python string. */
  text-transform: capitalize;
}
.badge-active   { background: rgba(40,167,69,0.13);  color: #155724; }
.badge-warning  { background: rgba(245,191,72,0.20); color: #7a5500; }
/* OVERRIDES SSD §5.7's original colours, per explicit user request: "overdue"
   (displayed as "Due Date" — see STATUS_LABELS in app.py) and "expired" are both
   red now instead of orange/grey, using two visually distinct reds so the two
   states remain tellable apart at a glance. */
.badge-overdue  { background: rgba(220,53,69,0.15);  color: #842029; }
.badge-expired  { background: rgba(139,0,0,0.18);    color: #5c0009; }
.badge-inactive { background: rgba(90,106,117,0.11); color: #5a6a75; }

/* --- Shared buttons, forms, and small layout helpers (used from Providers module onward) --- */

/* ACTUAL ROOT CAUSE of the "buttons not aligned" reports (sizing was already
   fixed — this was a separate bug): `.btn-primary` (defined above, ~line 128)
   was originally written ONLY for the auth/login page's big centered submit
   button, and includes `margin-top: 20px`. Every contextual action button that
   happens to combine `.btn-primary` with `.btn-inline` (e.g. "Log Payment" on
   the subscriber profile, "Confirm & Save" on the Payment Review screen) was
   silently inheriting that 20px top margin, while its sibling buttons using
   `.btn-secondary` instead (no margin-top set anywhere) did NOT — so the
   `.btn-primary` button in each row sat visibly lower/higher than its
   same-row neighbors even though `align-items: center` on the row and equal
   button dimensions were both already correct. `margin: 0` here resets that
   for every button carrying `.btn-inline` (defined AFTER `.btn-primary` in
   this file, so it wins the cascade for any element combining both classes),
   which is every compact contextual button in the app outside the auth form —
   the auth page's own submit button doesn't use `.btn-inline` at all, so this
   doesn't affect it. */
.btn-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  margin: 0;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}

.btn-secondary {
  background: #fff;
  color: var(--brand-deep);
  box-shadow: 2px 2px 5px var(--neu-shadow-dark);
}
.btn-secondary:hover { background: var(--neu-bg); }

.btn-danger {
  background: var(--danger);
  color: #fff;
}
.btn-danger:hover { background: #b02a37; }

.btn-small { padding: 5px 10px; font-size: 12px; }

.inline-form { display: inline; }

.action-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  align-items: center;
  flex-wrap: wrap;
}

/* BUGFIX this session (reported a THIRD time, with a screenshot circling the
   still-mismatched review buttons) — "Confirm & Save" and "Back & Edit" had a
   shared min-width, but 160px was still smaller than "Confirm & Save"'s actual
   rendered width (icon + text + padding ≈ 185-190px), so min-width's FLOOR
   never actually bound that button — it kept growing past 160px on its own
   while "Back & Edit" (shorter label) sat right at the 160px floor, so the two
   were still visibly different sizes. Raised to 200px — comfortably past both
   labels' natural width — so both buttons now actually hit the same floor
   instead of one silently exceeding it. Same fixed-min-width-plus-centered
   pattern as .btn-profile-action/.btn-cost-action elsewhere in the app, scoped
   to this specific review-screen action row. */
.btn-review-action {
  min-width: 200px;
  justify-content: center;
}

.panel-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Gap between the header row (title + Add Plan button) and whatever renders right
     below it (the plans table) — without this, the table's dark header bar sits
     flush against the button with no breathing room and reads as overlapping. */
  margin-bottom: 16px;
}
.panel-header-row h3 { margin: 0; }

.form-panel {
  max-width: 560px;
}
.form-panel form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form-panel label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 12px;
}
.form-panel input,
.form-panel select,
.form-panel textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  background: #fff;
  box-shadow: inset 2px 2px 5px var(--neu-shadow-dark);
  font-size: 14px;
  font-family: inherit;
}
.form-panel hr {
  border: none;
  border-top: 1px solid var(--neu-shadow-dark);
  margin: 20px 0 8px;
}
.form-panel .hint {
  font-weight: 400;
  color: var(--text-secondary);
  font-size: 12px;
}

/* Country-code + local-number pair (utils.py phone_input macro). Side by side is
   fine here (only two elements, and the select has a natural fixed-ish width) but
   both still respect the container via flex + min-width:0 so a long country name
   in the dropdown can't push the row wider than its panel. */
.phone-field-group {
  display: flex;
  gap: 8px;
}
.phone-field-group .phone-country-select {
  flex: 0 0 42%;
  min-width: 0;
}
.phone-field-group input {
  flex: 1 1 auto;
  min-width: 0;
}

/* Each plan in the Add-Provider multi-plan form is its own bordered card with
   fields stacked vertically (label above input) rather than laid out side by side —
   this is both the requested "listed below each other" layout AND what fixed the
   original overflow bug, since stacked block-level fields have no shared row width
   budget to exceed. */
.plan-row-card {
  position: relative;
  border: 1px solid var(--neu-shadow-dark);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 12px;
}
.plan-row-card label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 8px;
}
.plan-row-card label:first-of-type { margin-top: 0; }
.plan-row-card input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  background: #fff;
  box-shadow: inset 2px 2px 5px var(--neu-shadow-dark);
  font-size: 13px;
}
.remove-plan-row-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: transparent;
  color: var(--danger);
  cursor: pointer;
  font-size: 14px;
}

/* Stacked label/value detail list (providers/view.html and future module detail
   pages) — replaces the earlier "label: value · label: value" run-on inline layout. */
.detail-list {
  margin: 0;
}
.detail-row {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  border-bottom: 1px solid var(--neu-shadow-dark);
}
.detail-row:last-child { border-bottom: none; }
.detail-row dt {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.detail-row dd {
  margin: 4px 0 0;
  font-size: 14px;
}

.plan-actions {
  display: flex;
  gap: 6px;
}

/* Clickable table rows (providers list and future list pages). */
.clickable-table tbody tr[data-href] {
  cursor: pointer;
}
.clickable-table tbody tr[data-href]:hover {
  background: rgba(23,77,108,0.06);
}

/* Sidebar sub-links (e.g. "Add Plan" nested under "Providers") — indented and
   slightly smaller so the hierarchy reads visually, not just in menu order. */
.nav-sublink {
  margin-left: 18px;
  font-size: 13px;
  opacity: 0.9;
}

/* --- Responsive breakpoints (SSD §5.6) --- */

@media (max-width: 768px) {
  .hamburger-btn { display: block; }
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    height: 100dvh;
    overflow-y: auto;
  }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; padding: 70px 16px 16px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .panel-grid { grid-template-columns: 1fr; }
  .data-table { display: block; overflow-x: auto; }
}

@media (max-width: 400px) {
  .stat-grid { grid-template-columns: 1fr; }
  .stat-value { font-size: 22px; }
}

/* --- Subscribers module --- */

/* SUB-10: balance colour-coding — green credit, red debt, grey zero. */
.balance-credit { color: var(--success); font-weight: 600; }
.balance-debt   { color: var(--danger);  font-weight: 600; }
.balance-zero   { color: var(--text-secondary); }

.view-tabs {
  display: flex;
  gap: 6px;
}
.view-tab {
  padding: 8px 16px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  background: #fff;
}
.view-tab.active {
  background: var(--brand-deep);
  color: #fff;
}

.filter-bar {
  margin-top: 16px;
}
.filter-bar form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-bar input,
.filter-bar select {
  padding: 9px 12px;
  border-radius: 10px;
  border: none;
  background: #fff;
  box-shadow: inset 2px 2px 5px var(--neu-shadow-dark);
  font-size: 13px;
  font-family: inherit;
}
.filter-bar input[type="text"] {
  flex: 1 1 220px;
}

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--neu-shadow-dark);
  border-radius: 10px;
  padding: 10px 14px;
}
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-primary);
  margin-top: 0 !important; /* override .form-panel label's margin-top since this is a checkbox row, not a field label */
}
.checkbox-item input[type="checkbox"] {
  width: auto;
  box-shadow: none;
}

@media (max-width: 768px) {
  .filter-bar form { flex-direction: column; }
  .view-tabs { flex-wrap: wrap; }
}

/* Per-row actions dropdown (subscribers list, "you are missing the dropdown menu
   for each user"). */
.actions-cell {
  position: relative;
  text-align: right;
  width: 1%;
  white-space: nowrap;
}
.dropdown-toggle-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.dropdown-toggle-btn:hover { background: var(--neu-bg); }

.dropdown-menu {
  display: none;
  position: absolute;
  right: 8px;
  top: 100%;
  z-index: 20;
  background: #fff;
  border-radius: 10px;
  box-shadow: 4px 4px 12px rgba(0,0,0,0.15);
  min-width: 160px;
  padding: 6px;
  flex-direction: column;
}
.dropdown-menu.open { display: flex; }
.dropdown-menu a,
.dropdown-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}
.dropdown-menu a:hover,
.dropdown-menu button:hover {
  background: var(--neu-bg);
}
.dropdown-menu form { margin: 0; }
.dropdown-menu .dropdown-danger { color: var(--danger); }

/* Provider/plan pickers with plan-selection auto-filling speed/fee (Subscribers
   add/edit forms — see the {% block scripts %} JS in those templates). */
.plan-checkbox-row[hidden] { display: none; }
.field-hint-inline {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 400;
}

/* --- Payments module --- */

/* WhatsApp's own brand green — deliberately NOT one of the SSD §5.4 design tokens,
   since this button needs to be instantly recognisable as "opens WhatsApp" the way
   a generic branded button wouldn't be. */
.btn-whatsapp {
  background: #25d366;
  color: #fff;
}
.btn-whatsapp:hover { background: #1ebd5a; }

.receipt-panel {
  max-width: 480px;
}

/* Print support (PAY-08's "Print" option): GENERALISED this session (BUGFIX —
   Finance's "Print" on a closed month rendered a totally blank page). The
   previous version of this rule hardcoded `#receipt-panel` as the ONLY thing
   that could ever end up on paper, so ANY other page calling window.print()
   (e.g. finance/index.html) hid its entire body with nothing left to show.
   `.print-target` is now the generic opt-in class — any page can mark ONE
   element with it to make that element (and only that element) the printed
   output, while everything else on the page is hidden. Both the payment
   receipt (`#receipt-panel`) and the Finance monthly report
   (`#finance-report-panel`) use this same class; a future printable page just
   needs to add the class too, nothing here needs to change again. */
@media print {
  body * {
    visibility: hidden;
  }
  .print-target, .print-target * {
    visibility: visible;
  }
  .print-target {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: none;
  }
  .no-print {
    display: none !important;
  }
  /* Default page for anything printed WITHOUT a named page below (e.g. the
     Finance report) — REDESIGN this session: explicit A4 (rather than "auto",
     which just meant "whatever the OS default paper size is") per the "A4
     print-friendly" requirement, so the report reliably fits one physical sheet
     size regardless of what the printing device's default happens to be. */
  @page {
    size: A4;
    margin: 16mm 14mm;
  }
}

/* Note on browser-injected print artifacts (URL, page title, date/time, page
   numbers): those come from the BROWSER's own print dialog ("More settings" →
   "Headers and footers" in Chrome/Edge, similar in Firefox), not from anything
   this app renders — there is no CSS property that can switch that setting off
   from the page side, in any browser, as of this writing. `.print-hint` is a
   small on-screen reminder (never printed itself — it's covered by `.no-print`
   above) pointing that setting out next to each Print button, so the person
   printing knows to turn it off once rather than the report silently showing up
   with unwanted browser chrome. */
.print-hint {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 6px;
}
.print-hint i {
  color: var(--brand-teal);
}

/* Thermal-printer paper width (Receipt Redesign) — 80mm is the most common
   handheld/portable receipt printer size; `auto` height lets the printer cut at
   whatever length the content actually needs rather than forcing a fixed page
   height. Scoped to #receipt-panel ONLY via a CSS named page (the `page:`
   property + a matching `@page <name>` rule) so this narrow format never
   affects any other printable page (like the Finance report, which needs a
   normal-sized page) — before this session's fix, this size was applied
   globally to every print job in the whole app. */
#receipt-panel {
  page: receipt-page;
}
@media print {
  @page receipt-page {
    size: 80mm auto;
    margin: 0;
  }
}

/* --- Receipt redesign v2 (POS/invoice style, Arabic titles, this session) -------
   REDESIGNED per explicit user request: "professional POS/invoice receipt with
   better spacing, alignment, typography, and section dividers"; titles/thanks
   message now Arabic (routes/payments.py's variables — amounts, dates, names,
   phone numbers — are all untouched, only this presentation layer changed).
   Still a physical-printout visual language (compact, high-contrast, works on
   thermal paper) rather than the app's on-screen neumorphic panels, but now with
   the brand's own colors/typography instead of a generic monospace look, and a
   clear header band + gold total so the paid amount is unmistakable at a glance. */
.thermal-receipt {
  max-width: 320px;
  margin: 0 auto;
  background: #fff;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #1a1a1a;
  box-shadow: 4px 4px 12px rgba(0,0,0,0.1);
  border-radius: 10px;
  overflow: hidden;
}
/* Header band — brand-deep background so the shop name reads as a masthead, not
   just another line of text; matches the sidebar's brand-deep/gold pairing used
   everywhere else in the app (static/css/style.css .sidebar-logo). */
.receipt-header {
  background: var(--brand-deep);
  color: #fff;
  text-align: center;
  padding: 16px 16px 12px;
}
.receipt-shop-name {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 2px;
}
/* Arabic subtitle ("Payment Receipt") — dir=rtl scoped to just this element since
   the shop name above it may be a Latin-script name (SSD §5.3 tenant branding is
   whatever the shop registered, not guaranteed Arabic). */
.receipt-title-ar {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-gold);
  direction: rtl;
}
.receipt-body {
  padding: 14px 16px 16px;
}
/* Section divider — a thin brand-teal rule (was a plain dashed grey line) so
   sections read as deliberate document structure, not just visual filler; a
   dashed pattern under it keeps the "receipt paper" texture cue the original
   design had. */
.receipt-divider {
  border: none;
  border-top: 2px dotted var(--brand-teal);
  margin: 10px 0;
  opacity: 0.6;
}
.receipt-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
}
/* Arabic label + LTR value on the same line: the line itself stays a normal
   flex row (label first, value last) regardless of the label's script, but the
   value is wrapped in <bdi> in the template so a phone number or date can never
   have its digit/punctuation order scrambled by the surrounding RTL text — this
   is exactly what <bdi> (bidirectional isolation) exists for. */
.receipt-line .receipt-label {
  color: #666;
  direction: rtl;
  text-align: right;
  flex-shrink: 0;
}
.receipt-line .receipt-value {
  text-align: right;
  font-weight: 600;
  word-break: break-word;
}
/* The paid-amount line — deliberately the single most visually distinct element
   on the receipt (gold fill, largest type) so it can never be confused with any
   itemized figure below it, per this session's "important numbers must be
   clearly differentiated" requirement. */
.receipt-line-large {
  background: #fff8e8;
  border: 1px solid var(--brand-gold);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 4px 0;
}
.receipt-line-large .receipt-label {
  color: var(--brand-deep);
  font-weight: 700;
  font-size: 13px;
}
.receipt-line-large .receipt-value {
  color: var(--brand-deep);
  font-size: 17px;
  font-weight: 800;
}
.receipt-small .receipt-label,
.receipt-small .receipt-value {
  font-size: 10px;
  color: #888;
  font-weight: 500;
}
.receipt-footer {
  text-align: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 2px dotted var(--brand-teal);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-deep);
  direction: rtl;
  opacity: 0.9;
}
.receipt-powered-by {
  text-align: center;
  margin-top: 4px;
  font-size: 9px;
  color: #999;
  direction: ltr;
}

/* --- Subscriber profile redesign (this session) --------------------------------- */

.profile-actions-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
/* "Equal size, consistent styling, proper spacing" — a fixed min-width means Edit/
   Deactivate/Send Reminder/Back (and, below, Log Payment/Write Off Debt/Zero
   Advance Credit) all render the same width regardless of label length, instead
   of each button hugging its own text.
   BUGFIX this session (reported a THIRD time, with a screenshot circling the
   still-misaligned Payment History buttons): 130px was never actually enough —
   "Zero Advance Credit" (the longest label in this group, icon + text + padding)
   naturally renders around 195-200px wide, so it simply overflowed past the old
   130px min-width while the shorter-labeled buttons stayed pinned at 130px —
   min-width only sets a FLOOR, so once one button's content exceeds it, that one
   button alone grows past the rest and the row goes uneven again. Raised to
   200px, comfortably past every label used with this class ("Zero Advance
   Credit", "Send Reminder", "Write Off Debt", "Deactivate", "Reactivate", "Log
   Payment", "Edit", "Back"), so the floor is now the thing every button actually
   hits, not just the short ones. */
.btn-profile-action {
  min-width: 200px;
  justify-content: center;
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .profile-grid { grid-template-columns: 1fr; }
}

/* BUGFIX this session (reported: "under the payment history the buttons are not
   aligned and they look weird") — Log Payment is a plain <a>, while Write Off
   Debt / Zero Advance Credit are <button>s wrapped in their own <form
   class="inline-form">; without an explicit align-items, the row's default
   `stretch` behavior let the (invisible) <form> boxes stretch to the row's full
   height while the <a> didn't, so the buttons inside no longer lined up on the
   same baseline. center + wrap keeps every button (Log Payment, Write Off Debt,
   Zero Advance Credit — all already sharing .btn-profile-action's fixed
   min-width/centering) vertically centered and lets them wrap cleanly on a
   narrow screen instead of overflowing. */
.payment-history-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.payment-row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}

/* --- Finance module (this session) ----------------------------------------------- */

/* Finance monthly PRINT report — REDESIGNED this session ("modern, sleek,
   professional, A4 print-friendly... matches the app's existing theme, colors,
   typography, and logo/branding" per explicit user request). Still a SEPARATE,
   purpose-built printable document (not the on-screen neumorphic stat cards,
   which use box-shadows/colors that print poorly) — stays out of the way on
   screen (display:none) and only renders when printing (finance/index.html
   marks it id="finance-report-panel" class="print-target"). */
.finance-report {
  display: none;
}
@media print {
  .finance-report {
    display: block;
    font-family: "Inter", Arial, Helvetica, sans-serif;
    color: var(--text-primary);
  }
}
/* Header band mirrors the receipt's — brand-deep background, logo + shop name,
   so the two printable documents this session touched read as one consistent
   family rather than two unrelated designs. */
.finance-report .report-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding: 16px 18px;
  background: var(--brand-deep);
  color: #fff;
  border-radius: 6px;
}
.finance-report .report-header img.report-logo {
  height: 44px;
  width: 44px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  padding: 4px;
}
.finance-report .report-header-text {
  flex: 1;
}
.finance-report .report-header h1 {
  margin: 0 0 4px;
  font-size: 19px;
}
.finance-report .report-header h2 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-gold);
}
.finance-report .report-header p {
  margin: 0;
  font-size: 11px;
  color: #d8e3ea;
}
.finance-report h3 {
  font-size: 14px;
  margin: 22px 0 8px;
  color: var(--brand-deep);
  border-bottom: 2px solid var(--brand-teal);
  padding-bottom: 4px;
}
/* Key-figures strip — the numbers a shop owner actually cares about at a glance
   (collected, carryover, profit) pulled OUT of the plain table and into their
   own highlighted cards, so they're visually distinct from the itemized cost
   rows below per this session's explicit "important numbers must be clear and
   differ from logged costs" requirement. The remaining, less time-critical
   figures (expected fees, excess balance, total costs) stay in the plain
   summary table underneath. */
.finance-report .report-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.finance-report .report-highlight-card {
  border: 1px solid var(--brand-teal);
  border-radius: 8px;
  padding: 10px 12px;
  background: #f4fbfc;
}
.finance-report .report-highlight-card .highlight-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.finance-report .report-highlight-card .highlight-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--brand-deep);
}
.finance-report .report-highlight-card.highlight-negative .highlight-value {
  color: var(--danger);
}
.finance-report .report-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}
.finance-report .report-table th,
.finance-report .report-table td {
  border: 1px solid #d5dce1;
  padding: 7px 10px;
  text-align: left;
  font-size: 12.5px;
}
.finance-report .report-summary-table th {
  width: 65%;
  background: #f0f3f6;
  font-weight: 600;
}
.finance-report .report-table thead th {
  background: var(--brand-deep);
  color: #fff;
  font-weight: 600;
}
.finance-report .report-footer {
  margin-top: 26px;
  font-size: 10.5px;
  color: #888;
  text-align: center;
  border-top: 1px solid #d5dce1;
  padding-top: 8px;
}

.cost-add-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.cost-add-row select,
.cost-add-row input[type="text"],
.cost-add-row input[type="number"] {
  padding: 9px 12px;
  border-radius: 10px;
  border: none;
  background: #fff;
  box-shadow: inset 2px 2px 5px var(--neu-shadow-dark);
  font-size: 13px;
  font-family: inherit;
}
/* UI FIX (explicit screenshot feedback this session): Description grows to fit a
   long sentence, Amount stays a fixed, narrow width — a dollar figure never needs
   more than a few characters, so giving it equal flex with Description wasted
   space and made the whole row look unbalanced/"code-like" rather than a clean
   form. Applies to both the Add Cost row and every per-row edit input below. */
.cost-add-row .cost-desc-input { flex: 3 1 240px; }
.cost-add-row .cost-amount-input { flex: 0 0 110px; width: 110px; }
.cost-add-row input[type="number"] { width: 120px; }

/* Per-row edit inputs inside the Monthly Costs table (finance/index.html) are
   smaller/lighter than a full form-panel input, since they live inside a compact
   table cell, not a standalone form. */
.data-table select,
.data-table input[type="text"],
.data-table input[type="number"] {
  padding: 5px 8px;
  border-radius: 6px;
  border: none;
  background: #fff;
  box-shadow: inset 1px 1px 3px var(--neu-shadow-dark);
  font-size: 12px;
  font-family: inherit;
  width: 100%;
}

/* Monthly Costs table column widths (finance/index.html's .cost-table) — pinned
   via <colgroup> so Description stays wide and Amount stays narrow regardless of
   whether a row is showing inputs (editable) or plain text (closed month). */
.cost-table .cost-col-category   { width: 16%; }
.cost-table .cost-col-description { width: 48%; }
.cost-table .cost-col-amount     { width: 16%; }
.cost-table .cost-col-actions    { width: 20%; }
.cost-table .cost-amount-input { width: 100%; }

/* Save / Delete / Add Cost buttons in the Monthly Costs section — explicit user
   requirement: "the buttons shall always be aligned and have same size." A fixed
   min-width plus centered content means every one of these buttons renders
   identically regardless of icon-only vs icon+label content. */
.btn-cost-action {
  min-width: 90px;
  justify-content: center;
}
.plan-actions.no-print {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Icons inside the per-row "⋮" dropdown menu (Three-Dot Menu improvement) — a
   small fixed gap between icon and label reads more deliberately designed than
   letting Bootstrap Icons' default inline spacing (or lack of it) happen by
   accident. */
.dropdown-menu a,
.dropdown-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Superadmin (platform-owner) area ---------------------------------------------
   New this session (routes/superadmin.py). Deliberately visually distinct from
   every tenant-facing page — a dark red topbar instead of the tenant app's
   brand-deep/gold sidebar — so there is never a moment of confusion about which
   "mode" is on screen. This is the one area of the app that can see and edit
   across every shop, so it earns a look that doesn't resemble the regular app. */
.superadmin-topbar {
  background: #3a0d12;
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.superadmin-topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
}
.superadmin-topbar .brand img {
  height: 26px;
  width: 26px;
  object-fit: contain;
  border-radius: 4px;
  background: #fff;
  padding: 2px;
}
.badge-superadmin {
  background: #c0392b;
  color: #fff;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 4px;
}
.superadmin-logout-link {
  color: #fff;
  opacity: 0.85;
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.superadmin-logout-link:hover { opacity: 1; text-decoration: underline; }

.superadmin-content {
  max-width: 1100px;
  margin: 24px auto;
  padding: 0 24px;
}

/* One-time credential display (superadmin/shop_created.html) — styled like a
   physical "keep this safe" card (monospace, gold border) so it visually stands
   apart from ordinary body text and reads as something to copy down, not just
   read once and forget. */
.credential-box {
  background: #fff8e8;
  border: 1px solid var(--brand-gold);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 16px 0;
  font-family: "Courier New", monospace;
  font-size: 15px;
}
.credential-box div { padding: 5px 0; }
.credential-box .credential-label {
  color: #666;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}