/*
 * mybilling.site design system (spec section 48).
 * White/light-gray background, white cards, small radius, subtle borders,
 * minimal shadows. Blue accent by default, overridden per-tenant via
 * --color-primary (see resources/views/layouts/app.php). No gradients,
 * no rainbow cards - status color is reserved for status only.
 */

:root {
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-primary-soft: #eff6ff;

  --color-success: #16a34a;
  --color-success-soft: #f0fdf4;
  --color-warning: #d97706;
  --color-warning-soft: #fffbeb;
  --color-danger: #dc2626;
  --color-danger-soft: #fef2f2;

  --color-bg: #f6f7f9;
  --color-surface: #ffffff;
  --color-border: #e5e7eb;
  --color-text: #111827;
  --color-text-muted: #6b7280;

  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);

  --sidebar-width: 248px;
  --topbar-height: 60px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 4px; font-weight: 600; }
p { margin: 0 0 8px; }

.text-muted { color: var(--color-text-muted); }
.text-sm { font-size: 12.5px; }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: var(--color-surface);
  color: var(--color-text);
  line-height: 1;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn-outline { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
/* Oct 2026 ("UI and PPPoE/Hotspot differentiation" upgrade, Phase 3) -
   a visibly distinct style for a destructive quick action (voucher/
   subscriber Delete), so it can never be mistaken for a routine
   .btn-outline action at a glance. The full badge/button color
   reconciliation pass is Phase 6 (deferred) - this one rule is added
   now because Phase 3 introduces the first Delete button, not as part
   of that later polish pass. */
.btn-danger { background: var(--color-danger-soft); border-color: var(--color-danger); color: var(--color-danger); }
.btn-danger:hover { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------------- */
/* Cards                                                                   */
/* ---------------------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.card-body { padding: 20px; }
.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-header h3 { font-size: 15px; }

/* ---------------------------------------------------------------------- */
/* Badges / status pills                                                  */
/* ---------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.badge-success { background: var(--color-success-soft); color: var(--color-success); }
.badge-success .badge-dot { background: var(--color-success); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-warning .badge-dot { background: var(--color-warning); }
.badge-danger { background: var(--color-danger-soft); color: var(--color-danger); }
.badge-danger .badge-dot { background: var(--color-danger); }
.badge-neutral { background: #f3f4f6; color: var(--color-text-muted); }
.badge-neutral .badge-dot { background: #9ca3af; }

/* ---------------------------------------------------------------------- */
/* Forms                                                                   */
/* ---------------------------------------------------------------------- */
label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.form-group { margin-bottom: 16px; }
.form-control {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--color-surface);
  color: var(--color-text);
}
.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.form-hint { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }
.form-error {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}
.form-success {
  background: var(--color-success-soft);
  color: var(--color-success);
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* ---------------------------------------------------------------------- */
/* Tables                                                                  */
/* ---------------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  text-align: left;
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
}
.table td { padding: 12px 16px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; }

.empty-state { padding: 32px 20px; text-align: center; color: var(--color-text-muted); }
.empty-state .phase-tag { display: inline-block; margin-top: 8px; }

/* ---------------------------------------------------------------------- */
/* Auth pages (layouts/auth.php)                                          */
/* ---------------------------------------------------------------------- */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-card { width: 100%; max-width: 400px; }
.auth-brand { text-align: center; margin-bottom: 24px; }
.auth-brand .logo-mark {
  display: inline-flex;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 10px;
}

/* ---------------------------------------------------------------------- */
/* App shell (layouts/app.php)                                            */
/* ---------------------------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 40;
  transition: transform .18s ease;
}
.sidebar-brand {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid var(--color-border);
  font-weight: 700;
}
.sidebar-brand .logo-mark {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--color-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 10px; }
.sidebar-group { margin-bottom: 4px; }
.sidebar-group-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  padding: 14px 10px 6px;
  font-weight: 600;
}
.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 13.5px;
  font-weight: 500;
}
.sidebar-link:hover { background: #f3f4f6; text-decoration: none; }
.sidebar-link.active { background: var(--color-primary-soft); color: var(--color-primary); }
.sidebar-sub { margin-left: 12px; border-left: 1px solid var(--color-border); padding-left: 10px; }
.sidebar-sub .sidebar-link { font-size: 13px; padding: 6px 10px; }

/* Oct 2026 (Phase 2 nav nesting): hides an x-cloak'd element until
   Alpine has initialized, so a collapsed Hotspot/PPPoE sub-list doesn't
   flash open for a frame before Alpine runs. */
[x-cloak] { display: none !important; }
.sidebar-foot { border-top: 1px solid var(--color-border); padding: 12px; }

.main { flex: 1; margin-left: var(--sidebar-width); display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: var(--topbar-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 30;
}
.topbar-title { font-size: 15px; font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-primary-soft); color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700;
}
.menu-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  align-items: center; justify-content: center;
}
.menu-toggle:hover { background: #f3f4f6; }

.content { padding: 22px; max-width: 1280px; width: 100%; margin: 0 auto; }

.stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 20px; }
.stat-card { padding: 16px 18px; }
.stat-card .stat-label { font-size: 12.5px; color: var(--color-text-muted); margin-bottom: 6px; }
.stat-card .stat-value { font-size: 24px; font-weight: 700; }
.stat-card .stat-value.is-pending { font-size: 15px; color: var(--color-text-muted); font-weight: 500; }

.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
/* Even 1:1 split, as opposed to .grid-2's 2:1 - used by the router
   Overview tab's Service Status / Live Health Checks panels (Oct 2026 UI
   redesign), which are meant to read as two equally-weighted panels
   rather than a primary+sidebar pair. Collapses to one column at the same
   breakpoint as .grid-2 for consistency. */
.grid-2-even { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Oct 2026 Phase 6 (UI consistency pass): a quick-action that is itself a
   small inline form (e.g. "Change Package" + a <select>, "Extend Expiry" +
   a number input) must never force the whole row to overflow on a narrow
   screen - wrap its own controls onto a second line instead. Each such
   form still sets flex-wrap:wrap inline too (belt-and-suspenders, since a
   few were already doing so before this rule existed), but this makes it
   the default for every quick-action form rather than something each page
   has to remember to add. */
.quick-actions form { flex-wrap: wrap; }

/* Oct 2026 router-status UI redesign: explanatory callout used on the
   router Overview tab to say in plain words why a router is Online/
   Degraded/Offline right now (RouterStatusPresenter::present()'s `reason`
   string), instead of leaving people to guess from a badge alone. Reuses
   existing design tokens rather than introducing a new color palette. */
.callout-info {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--color-text);
  margin-bottom: 16px;
}
.callout-info .callout-icon { font-weight: 700; color: var(--color-primary); flex-shrink: 0; }

.phase-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: #f3f4f6;
  border-radius: 999px;
  padding: 2px 9px;
}

.flash-banner {
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
  border: 1px solid #fecaca;
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

/* Color presets used by the appearance settings page */
.swatch {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-border);
  cursor: pointer;
  display: inline-block;
}
.swatch.is-selected { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary); }

/* ---------------------------------------------------------------------- */
/* Responsive                                                              */
/* ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-2-even { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); box-shadow: 2px 0 12px rgba(0,0,0,.08); }
  .sidebar.is-open { transform: translateX(0); }
  .main { margin-left: 0; }
  .menu-toggle { display: inline-flex; }
  .sidebar-backdrop {
    display: none;
    position: fixed; inset: 0; background: rgba(17,24,39,.35); z-index: 39;
  }
  .sidebar-backdrop.is-open { display: block; }
}

@media (max-width: 640px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .content { padding: 14px; }
  .table-wrap { border: 1px solid var(--color-border); border-radius: var(--radius-md); }
}

/* Oct 2026 Phase 6 (UI consistency pass): the narrowest tier - a plain
   phone in portrait (~360-390px, iPhone SE through most Androids). Below
   640px there was previously no further tightening at all, even though a
   quick-action form's own inline max-width (e.g. 160-200px on a single
   input/select) plus its button and the card's own padding can still be
   tight on the smallest phones. Rather than chase every individual
   form's px value down further, stack each quick-action form's controls
   to full width here so they read as a clean one-per-line list instead of
   a cramped row, and shrink the stat tiles to one per line so their
   numbers never get squeezed. */
@media (max-width: 400px) {
  .stat-grid { grid-template-columns: 1fr; }
  .quick-actions form { width: 100%; }
  .quick-actions form .form-control,
  .quick-actions form input,
  .quick-actions form select {
    max-width: none !important;
    width: 100%;
  }
}