/* File: assets/css/theme.css
   "Modernist" theme — flat, architectural, zero corner radius, Archivo type,
   a single red accent, and a muted flat status palette for POS-specific
   states (paid/unpaid, stock levels, flash messages) where a strict
   monochrome scheme would hurt usability. Every shared page pulls its
   look from this one file via includes/header.php / service_provider_header.php. */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-divider: color-mix(in srgb, #201e1d 18%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;

  /* Status roles — flat and muted, not the design system's saturated
     defaults, so Paid/Unpaid/Partial/low-stock stay tellable apart at a
     glance in a real POS. Each carries a light tint (badges) and a dark
     ink step (button fills / text on tint), same shape as the accent ramp. */
  --color-success: #2f6f4f;
  --color-success-100: #eaf3ee;
  --color-success-700: #1f4d37;

  --color-warning: #a8710a;
  --color-warning-100: #fbf1de;
  --color-warning-700: #714b06;

  --color-info: #3b6ea5;
  --color-info-100: #eaf1f8;
  --color-info-700: #234769;

  --color-danger: var(--color-accent);
  --color-danger-100: var(--color-accent-100);
  --color-danger-700: var(--color-accent-800);

  --font-heading: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  background: var(--color-bg);
  color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}

a { color: var(--color-accent); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* ── layout shell ─────────────────────────────────────────────────── */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px;
  flex: none;
  background: var(--color-neutral-900);
  color: var(--color-neutral-100);
  display: flex;
  flex-direction: column;
  padding: var(--space-6) 0;
  overflow: hidden;
  transition: width 0.18s ease;
}
.sidebar-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-6);
}
.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  background: transparent;
  border: 1px solid var(--color-neutral-700);
  color: var(--color-neutral-100);
  cursor: pointer;
  padding: 0;
}
.sidebar-toggle:hover { background: color-mix(in srgb, #fff 8%, transparent); }
.sidebar-toggle svg { width: 16px; height: 16px; }
.sidebar-brand {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 17px;
  min-width: 0;
}
.sidebar-brand .brand-text { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar nav, .sidebar-nav { display: flex; flex-direction: column; }
.sidebar nav ul { list-style: none; margin: 0; padding: 0; }
.sidebar nav ul li { margin: 0; }
.sidebar nav ul li a, .sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-3) var(--space-4);
  color: var(--color-neutral-300);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  border-left: 2px solid transparent;
  transition: background 0.15s, color 0.15s;
}
.sidebar nav ul li a:hover, .sidebar-nav a:hover {
  color: var(--color-neutral-100);
  background: color-mix(in srgb, #fff 6%, transparent);
}
.sidebar nav ul li a.active, .sidebar-nav a.active {
  color: #fff;
  border-left-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
}
.sidebar nav ul li a svg, .sidebar-nav a svg { flex: none; }

/* collapsed state — toggled on <html> by includes/footer.php so the
   preference (persisted in localStorage) applies before first paint */
html.sidebar-collapsed .sidebar { width: 64px; }
html.sidebar-collapsed .sidebar-top { justify-content: center; padding-inline: 0; }
html.sidebar-collapsed .sidebar-brand { width: 0; opacity: 0; }
html.sidebar-collapsed .sidebar nav ul li a { justify-content: center; padding-inline: 0; }
html.sidebar-collapsed .sidebar nav ul li a .label { display: none; }
.sidebar nav svg, .sidebar-nav svg { width: 16px; height: 16px; flex: none; }

.main, .main-content-wrap { display: flex; flex-direction: column; min-width: 0; }

.top-bar, .topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-divider);
}
.top-bar-left { display: flex; align-items: center; gap: var(--space-4); margin-right: auto; }
.top-bar h1 { font-size: 18px; margin: 0; }
.topbar-meta, .user-info {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

.main-content { flex: 1; padding: var(--space-8); }

.container { display: flex; min-height: calc(100vh - 60px); }

/* ── shop switcher ────────────────────────────────────────────────── */
.shop-switcher { position: relative; }
.current-shop {
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  border: 1px solid var(--color-divider);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.current-shop:hover { background: color-mix(in srgb, var(--color-text) 10%, transparent); }
.shop-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md);
  min-width: 250px;
  z-index: 1000;
}
.shop-dropdown.active { display: block; }
.shop-dropdown a {
  display: block;
  padding: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-divider);
  font-size: 14px;
}
.shop-dropdown a:last-child { border-bottom: none; }
.shop-dropdown a:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.shop-dropdown a.active-shop { color: var(--color-accent-700); font-weight: 700; }

/* ── buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-divider);
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-success { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.btn-success:hover { background: var(--color-success-700); border-color: var(--color-success-700); }

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

.btn-warning { background: var(--color-warning); border-color: var(--color-warning); color: #fff; }
.btn-warning:hover { background: var(--color-warning-700); border-color: var(--color-warning-700); }

.btn-info { background: var(--color-info); border-color: var(--color-info); color: #fff; }
.btn-info:hover { background: var(--color-info-700); border-color: var(--color-info-700); }

.btn-secondary { background: transparent; border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }

.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-block { width: 100%; }

.btn-logout {
  background: transparent;
  color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-divider);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
}
.btn-logout:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }

/* ── cards / panels ───────────────────────────────────────────────── */
.card {
  background: #fff;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-6);
}
.card-header {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 16px;
  margin: calc(var(--space-4) * -1) calc(var(--space-6) * -1) var(--space-4);
  padding: var(--space-3) var(--space-6);
  border-bottom: 2px solid var(--color-divider);
}

.panel { border: 1px solid var(--color-divider); padding: var(--space-4) var(--space-6); margin-bottom: var(--space-6); background: #fff; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); gap: var(--space-3); }
.panel-head h3, .panel-head h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.panel-head svg { width: 18px; height: 18px; color: var(--color-accent); }
.panel-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-divider); font-size: 12px; }

.usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-6); }
.usage-item label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-bottom: 4px; }
.usage-item .val { font-size: 15px; font-family: var(--font-heading); font-weight: 800; margin-bottom: 6px; }
.bar { height: 6px; background: var(--color-neutral-200); position: relative; }
.bar > span { position: absolute; inset: 0 auto 0 0; background: var(--color-accent); }
.bar > span.warn { background: var(--color-warning); }
.bar > span.danger { background: var(--color-accent); }
.usage-item .pct { font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); margin-top: 4px; }

/* ── badges / tags ────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
}
.badge-success { background: var(--color-success-100); color: var(--color-success-700); }
.badge-danger { background: var(--color-danger-100); color: var(--color-danger-700); }
.badge-warning { background: var(--color-warning-100); color: var(--color-warning-700); }
.badge-info { background: var(--color-info-100); color: var(--color-info-700); }

.provider-badge {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent-700);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ── tables ───────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 0; }
.table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid var(--color-divider);
  background: transparent;
}
.table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-divider); }
.table tr:hover { background: color-mix(in srgb, var(--color-text) 3%, transparent); }

/* ── forms ────────────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--space-4); }
.form-group label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 13px; color: color-mix(in srgb, var(--color-text) 75%, transparent); }
.form-group label .required { color: var(--color-accent); }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 9px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.form-group input:hover, .form-group select:hover, .form-group textarea:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--color-accent); }
.form-group input:disabled, .form-group select:disabled { background: var(--color-neutral-200); color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.form-group small { display: block; margin-top: 5px; color: color-mix(in srgb, var(--color-text) 55%, transparent); font-size: 12px; }
.form-row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 180px; }

/* ── page structure ───────────────────────────────────────────────── */
.page-header, .page-head { margin-bottom: var(--space-6); }
.page-header h2, .page-head h1 { margin-bottom: 2px; }
.page-header p, .page-head p { margin: 0; font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.page-head .link, .page-header .link { color: var(--color-accent); cursor: pointer; }

.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.flash-message { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font-size: 14px; border: 1px solid; }
.flash-success { background: var(--color-success-100); color: var(--color-success-700); border-color: var(--color-success); }
.flash-error { background: var(--color-danger-100); color: var(--color-danger-700); border-color: var(--color-accent); }
.flash-warning { background: var(--color-warning-100); color: var(--color-warning-700); border-color: var(--color-warning); }
.flash-info { background: var(--color-info-100); color: var(--color-info-700); border-color: var(--color-info); }

/* legacy dashboard stat cards, kept for any page still using them */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.stat-card { background: #fff; border: 1px solid var(--color-divider); padding: var(--space-4); }
.stat-card h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-bottom: var(--space-2); }
.stat-card .value { font-family: var(--font-heading); font-weight: 800; font-size: 28px; }
.stat-card small { font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }

/* ── dashboard KPI grid + quick actions (mockup layout) ──────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--color-divider); margin-bottom: var(--space-6); }
.kpi { padding: var(--space-4) var(--space-6); border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); background: #fff; }
.kpi:nth-child(4n) { border-right: none; }
.kpi:nth-last-child(-n+4) { border-bottom: none; }
.kpi label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-bottom: 8px; }
.kpi .num { font-family: var(--font-heading); font-weight: 800; font-size: 24px; }
.kpi .sub { font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); margin-top: 4px; }
.kpi.accent .num { color: var(--color-accent-700); }
.kpi.warn .num { color: var(--color-warning-700); }

.qa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.qa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-divider);
  text-decoration: none;
  color: var(--color-text);
  cursor: pointer;
  background: #fff;
}
.qa svg { width: 20px; height: 20px; color: var(--color-accent); }
.qa .qa-title { font-family: var(--font-heading); font-weight: 800; font-size: 15px; }
.qa .qa-sub { font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.qa:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.qa.primary { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.qa.primary svg { color: #fff; }
.qa.primary .qa-sub { color: color-mix(in srgb, #fff 75%, transparent); }
.qa.primary:hover { background: var(--color-accent-600); }

/* ── auth-family pages (login, register, shop select, pending) ──── */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--color-bg);
}
.auth-card {
  background: #fff;
  border: 1px solid var(--color-divider);
  width: 100%;
  max-width: 420px;
  padding: var(--space-8);
}
.auth-card.wide { max-width: 640px; }
.auth-header { text-align: left; margin-bottom: var(--space-6); border-bottom: 2px solid var(--color-divider); padding-bottom: var(--space-4); }
.auth-header h1 { font-size: 24px; }
.auth-header p { margin: 0; font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

.error {
  background: var(--color-danger-100);
  color: var(--color-danger-700);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: 14px;
  border: 1px solid var(--color-accent);
}
.success { background: var(--color-success-100); color: var(--color-success-700); padding: var(--space-3); margin-bottom: var(--space-4); font-size: 14px; border: 1px solid var(--color-success); }
.pending-notice {
  background: var(--color-warning-100);
  color: var(--color-warning-700);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 14px;
  border: 1px solid var(--color-warning);
  line-height: 1.6;
}
.pending-notice h3 { margin-bottom: var(--space-2); font-size: 15px; }

.footer { text-align: left; margin-top: var(--space-4); color: color-mix(in srgb, var(--color-text) 55%, transparent); font-size: 12px; }
.register-link, .provider-login-link {
  text-align: left;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  font-size: 13px;
}
.register-link a, .provider-login-link a { color: var(--color-accent); text-decoration: none; font-weight: 700; }
.register-link a:hover, .provider-login-link a:hover { text-decoration: underline; }

.section-header {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
  margin: var(--space-6) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-divider);
}

.shops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.shop-card {
  background: #fff;
  border: 1px solid var(--color-divider);
  padding: var(--space-4);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.shop-card:hover { border-color: var(--color-accent); background: var(--color-accent-100); }
.shop-card h3 { font-size: 16px; margin-bottom: var(--space-2); }
.shop-card p { color: color-mix(in srgb, var(--color-text) 60%, transparent); font-size: 13px; margin: 0 0 4px; }
.shop-code {
  display: inline-block;
  margin-top: var(--space-2);
  padding: 2px 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
  background: var(--color-neutral-200);
  color: var(--color-text);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--color-warning-100);
  color: var(--color-warning-700);
  border: 1px solid var(--color-warning);
}

.welcome dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; font-size: 14px; }
.welcome dt { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.welcome dd { margin: 0; }

hr, .hr { height: 2px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }