/*
 * SpryFi Customer Portal — design system overlay
 * ------------------------------------------------
 * Loaded AFTER the vendor theme (theme.css / theme-root.css).
 * All customization lives in this file + Blade templates; the vendor
 * theme is left untouched so upstream updates stay mergeable.
 *
 * NOTE ON BRAND COLORS: the values marked PLACEHOLDER below are a
 * clearly-labeled interim palette. Swap them for the official SpryFi
 * brand values in ONE place (this :root block) when assets arrive.
 * See DESIGN-SYSTEM.md.
 */

:root {
  /* ---- Brand (PLACEHOLDER palette — replace with official SpryFi values) ---- */
  --sf-brand-700: #0a5f50;
  --sf-brand-600: #0e7c66;  /* primary actions, active nav, links */
  --sf-brand-100: #d8ede8;
  --sf-brand-50:  #ecf6f3;

  /* ---- Neutrals ---- */
  --sf-text:        #1f2933;
  --sf-text-soft:   #4b5763;
  --sf-text-faint:  #6e7a86;
  --sf-bg:          #f4f6f7;
  --sf-surface:     #ffffff;
  --sf-border:      #e2e7ea;
  --sf-border-soft: #edf0f2;

  /* ---- Semantic status (AA on their tint backgrounds) ---- */
  --sf-ok:          #157347;
  --sf-ok-bg:       #e8f4ee;
  --sf-maint:       #1d5bd8;
  --sf-maint-bg:    #e9effc;
  --sf-degraded:    #96590a;
  --sf-degraded-bg: #fdf3e3;
  --sf-partial:     #b3400f;
  --sf-partial-bg:  #fcefe7;
  --sf-major:       #b02a37;
  --sf-major-bg:    #fbeaec;
  --sf-unknown:     #5c6670;
  --sf-unknown-bg:  #eff1f3;

  /* ---- Type scale ---- */
  --sf-fs-xs: 0.8125rem;   /* 13 — metadata */
  --sf-fs-sm: 0.875rem;    /* 14 — supporting text */
  --sf-fs-md: 1rem;        /* 16 — body */
  --sf-fs-lg: 1.125rem;    /* 18 — card titles */
  --sf-fs-xl: 1.375rem;    /* 22 — section / primary values */
  --sf-fs-2xl: 1.75rem;    /* 28 — page title */

  /* ---- Spacing tokens ---- */
  --sf-sp-1: 0.25rem;
  --sf-sp-2: 0.5rem;
  --sf-sp-3: 0.75rem;
  --sf-sp-4: 1rem;
  --sf-sp-5: 1.5rem;
  --sf-sp-6: 2rem;

  /* ---- Surfaces ---- */
  --sf-radius: 10px;
  --sf-radius-sm: 8px;
  --sf-shadow: 0 1px 2px rgba(31, 41, 51, 0.06), 0 1px 3px rgba(31, 41, 51, 0.08);
  --sf-focus-ring: 0 0 0 3px rgba(14, 124, 102, 0.35);
}

/* =========================================================
   Global
   ========================================================= */
body {
  background-color: var(--sf-bg);
  color: var(--sf-text);
}

a { color: var(--sf-brand-600); }
a:hover { color: var(--sf-brand-700); }

/* Accessible focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role='button']:focus-visible {
  outline: none !important;
  box-shadow: var(--sf-focus-ring) !important;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   Cards
   ========================================================= */
.card {
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius);
  box-shadow: var(--sf-shadow);
  margin-bottom: var(--sf-sp-4);
}

.card-header {
  border-bottom: 1px solid var(--sf-border-soft);
  padding: var(--sf-sp-3) var(--sf-sp-4);
  min-height: 0;
}

/* Kill tiny light-gray uppercase labels from vendor theme */
.card-title,
.card-header-title,
.header-pretitle {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: var(--sf-fs-sm) !important;
  font-weight: 500;
  color: var(--sf-text-soft) !important;
}

.card-header-title {
  font-size: var(--sf-fs-lg) !important;
  font-weight: 600;
  color: var(--sf-text) !important;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  border-radius: var(--sf-radius-sm);
  font-weight: 500;
}

.btn-spryfi,
.btn-primary {
  background-color: var(--sf-brand-600) !important;
  border-color: var(--sf-brand-600) !important;
  color: #fff !important;
}
.btn-spryfi:hover, .btn-spryfi:focus,
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--sf-brand-700) !important;
  border-color: var(--sf-brand-700) !important;
  color: #fff !important;
}

.btn-spryfi-secondary,
.btn-white,
.btn-secondary {
  background-color: var(--sf-surface) !important;
  border: 1px solid var(--sf-border) !important;
  color: var(--sf-text) !important;
}
.btn-spryfi-secondary:hover,
.btn-white:hover,
.btn-secondary:hover {
  background-color: var(--sf-brand-50) !important;
  border-color: var(--sf-brand-100) !important;
  color: var(--sf-brand-700) !important;
}

/* Touch-friendly */
.btn { min-height: 38px; }
.btn-sm { min-height: 34px; }

/* =========================================================
   Sidebar
   ========================================================= */
.navbar-vertical.navbar-expand-md {
  border-right: 1px solid var(--sf-border);
}

.navbar-vertical .navbar-brand {
  padding: var(--sf-sp-4) 0 var(--sf-sp-3);
}

.navbar-vertical .navbar-brand-img {
  max-height: 2.25rem;
}

.sf-wordmark {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--sf-brand-600);
  letter-spacing: -0.01em;
}

.navbar-vertical .navbar-heading {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--sf-fs-xs);
  font-weight: 600;
  color: var(--sf-text-faint);
  padding-bottom: var(--sf-sp-1);
}

.navbar-vertical .navbar-nav .nav-link {
  color: var(--sf-text-soft);
  font-weight: 500;
  padding: 0.55rem 0.75rem;
  border-radius: var(--sf-radius-sm);
  border-left: 3px solid transparent;
}

.navbar-vertical .navbar-nav .nav-link:hover {
  color: var(--sf-brand-700);
  background: var(--sf-brand-50);
}

.navbar-vertical .navbar-nav .nav-link.selected {
  color: var(--sf-brand-700);
  background: var(--sf-brand-50);
  border-left-color: var(--sf-brand-600);
  font-weight: 600;
}

.navbar-vertical .navbar-nav .nav-link .fe {
  padding-right: var(--sf-sp-2);
  color: inherit;
}

/* Sidebar account footer */
.sf-nav-footer {
  border-top: 1px solid var(--sf-border-soft);
  padding-top: var(--sf-sp-3);
  margin-top: var(--sf-sp-3);
  font-size: var(--sf-fs-xs);
  color: var(--sf-text-faint);
}

/* =========================================================
   Compact page header (replaces oversized blue hero)
   ========================================================= */
.sf-pagehead {
  background: var(--sf-surface);
  border-bottom: 1px solid var(--sf-border);
  padding: var(--sf-sp-5) 0 var(--sf-sp-4);
  margin-bottom: var(--sf-sp-5);
}

.sf-pagehead h1 {
  font-size: var(--sf-fs-2xl);
  font-weight: 700;
  margin: 0 0 var(--sf-sp-1);
  color: var(--sf-text);
}

.sf-pagehead .sf-account-meta {
  font-size: var(--sf-fs-sm);
  color: var(--sf-text-soft);
}

.sf-pagehead .sf-due-label {
  font-size: var(--sf-fs-xs);
  color: var(--sf-text-soft);
  margin-bottom: 2px;
}

.sf-pagehead .sf-due-amount {
  font-size: var(--sf-fs-xl);
  font-weight: 700;
  color: var(--sf-text);
  line-height: 1.2;
}

/* Compact the vendor blue hero on pages we haven't rebuilt yet */
.header.index-bg,
.header {
  padding-bottom: 0 !important;
}
.header .header-body-nb,
.header .header-body {
  padding-top: var(--sf-sp-4) !important;
  padding-bottom: var(--sf-sp-4) !important;
}

/* Vendor theme pulls content up under hero with negative margin; neutralize
   where we use the new header */
.sf-main .container-fluid.mt--6 { margin-top: 0 !important; }

/* =========================================================
   Network status
   ========================================================= */
.sf-status-card {
  border-radius: var(--sf-radius);
  border: 1px solid var(--sf-border);
  border-left-width: 4px;
  background: var(--sf-surface);
  box-shadow: var(--sf-shadow);
  padding: var(--sf-sp-4);
  margin-bottom: var(--sf-sp-4);
}

.sf-status-card .sf-status-icon {
  font-size: 1.5rem;
  line-height: 1;
  margin-right: var(--sf-sp-3);
}

.sf-status-headline {
  font-size: var(--sf-fs-lg);
  font-weight: 600;
  margin: 0;
  color: var(--sf-text);
}

.sf-status-message {
  margin: var(--sf-sp-1) 0 0;
  color: var(--sf-text-soft);
  font-size: var(--sf-fs-sm);
  max-width: 70ch;
  overflow-wrap: anywhere;
}

.sf-status-meta {
  margin-top: var(--sf-sp-2);
  font-size: var(--sf-fs-xs);
  color: var(--sf-text-faint);
}
.sf-status-meta span + span::before {
  content: '·';
  margin: 0 var(--sf-sp-2);
}

.sf-status-pill {
  display: inline-block;
  font-size: var(--sf-fs-xs);
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 10px;
  vertical-align: middle;
}

/* state accents */
.sf-status--operational { border-left-color: var(--sf-ok); }
.sf-status--operational .sf-status-icon { color: var(--sf-ok); }
.sf-status--operational .sf-status-pill { background: var(--sf-ok-bg); color: var(--sf-ok); }

.sf-status--maintenance { border-left-color: var(--sf-maint); }
.sf-status--maintenance .sf-status-icon { color: var(--sf-maint); }
.sf-status--maintenance .sf-status-pill { background: var(--sf-maint-bg); color: var(--sf-maint); }

.sf-status--degraded { border-left-color: var(--sf-degraded); }
.sf-status--degraded .sf-status-icon { color: var(--sf-degraded); }
.sf-status--degraded .sf-status-pill { background: var(--sf-degraded-bg); color: var(--sf-degraded); }

.sf-status--partial_outage { border-left-color: var(--sf-partial); }
.sf-status--partial_outage .sf-status-icon { color: var(--sf-partial); }
.sf-status--partial_outage .sf-status-pill { background: var(--sf-partial-bg); color: var(--sf-partial); }

.sf-status--major_outage { border-left-color: var(--sf-major); }
.sf-status--major_outage .sf-status-icon { color: var(--sf-major); }
.sf-status--major_outage .sf-status-pill { background: var(--sf-major-bg); color: var(--sf-major); }

.sf-status--unknown,
.sf-status--unavailable { border-left-color: var(--sf-unknown); }
.sf-status--unknown .sf-status-icon,
.sf-status--unavailable .sf-status-icon { color: var(--sf-unknown); }
.sf-status--unknown .sf-status-pill,
.sf-status--unavailable .sf-status-pill { background: var(--sf-unknown-bg); color: var(--sf-unknown); }

/* =========================================================
   Billing summary
   ========================================================= */
.sf-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sf-sp-3);
  padding: var(--sf-sp-2) 0;
  border-bottom: 1px solid var(--sf-border-soft);
  flex-wrap: wrap;
}
.sf-summary-row:last-child { border-bottom: 0; }

.sf-summary-label {
  color: var(--sf-text-soft);
  font-size: var(--sf-fs-sm);
}

.sf-summary-value {
  font-weight: 600;
  font-size: var(--sf-fs-md);
  color: var(--sf-text);
}

.sf-summary-value--big {
  font-size: var(--sf-fs-xl);
  font-weight: 700;
}

.sf-badge-ok {
  background: var(--sf-ok-bg);
  color: var(--sf-ok);
  border-radius: 999px;
  font-size: var(--sf-fs-xs);
  font-weight: 600;
  padding: 2px 10px;
}

.sf-badge-due {
  background: var(--sf-degraded-bg);
  color: var(--sf-degraded);
  border-radius: 999px;
  font-size: var(--sf-fs-xs);
  font-weight: 600;
  padding: 2px 10px;
}

/* =========================================================
   Tables
   ========================================================= */
.table thead th {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--sf-fs-xs);
  font-weight: 600;
  color: var(--sf-text-soft);
  background: var(--sf-bg);
  border-bottom: 1px solid var(--sf-border);
}

.table td, .table th {
  padding: 0.65rem 1rem;
  vertical-align: middle;
}

.table-sm td, .table-sm th { padding: 0.55rem 1rem; }

/* =========================================================
   Empty states
   ========================================================= */
.sf-empty {
  text-align: center;
  padding: var(--sf-sp-6) var(--sf-sp-4);
  color: var(--sf-text-soft);
}
.sf-empty > .fe {
  font-size: 1.75rem;
  color: var(--sf-text-faint);
  display: block;
  margin-bottom: var(--sf-sp-2);
}
.sf-empty-title {
  font-size: var(--sf-fs-md);
  font-weight: 600;
  color: var(--sf-text);
  margin-bottom: var(--sf-sp-1);
}
.sf-empty-hint {
  font-size: var(--sf-fs-sm);
  margin-bottom: var(--sf-sp-3);
}

/* =========================================================
   Support / help area
   ========================================================= */
.sf-support {
  display: flex;
  gap: var(--sf-sp-3);
  align-items: flex-start;
}
.sf-support .fe {
  font-size: 1.35rem;
  color: var(--sf-brand-600);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 767.98px) {
  .sf-pagehead { padding: var(--sf-sp-4) 0 var(--sf-sp-3); margin-bottom: var(--sf-sp-4); }
  .sf-pagehead h1 { font-size: var(--sf-fs-xl); }
  .sf-pagehead .sf-due-amount { font-size: var(--sf-fs-lg); }
  .sf-status-card { padding: var(--sf-sp-3); }
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .navbar-vertical .navbar-nav .nav-link { padding: 0.7rem 0.75rem; } /* larger touch targets */
}

/* =========================================================
   Auth pages (login / register / reset / create)
   These pages use theme-root.css; scope overrides to .page-login.
   ========================================================= */
.page-login {
  background: var(--sf-bg) !important;
}

.page-login section.content {
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius);
  box-shadow: var(--sf-shadow);
}

.page-login h1 {
  color: var(--sf-text);
  font-size: var(--sf-fs-xl);
}

.page-login label {
  color: var(--sf-text-soft);
  font-size: var(--sf-fs-sm);
  font-weight: 500;
}

.page-login input[type='text'],
.page-login input[type='password'],
.page-login input[type='email'] {
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-sm);
  background: var(--sf-surface);
  color: var(--sf-text);
}

.page-login input:focus {
  border-color: var(--sf-brand-600);
  box-shadow: var(--sf-focus-ring);
}

.page-login button[type='submit'] {
  background: var(--sf-brand-600);
  color: #fff;
  border-radius: var(--sf-radius-sm);
  font-weight: 600;
}
.page-login button[type='submit']:hover {
  background: var(--sf-brand-700);
}

.page-login a { color: var(--sf-brand-600); }

/* Trim the large empty area at the bottom of the auth card */
.page-login section.content { padding-bottom: 24px; }
.page-login .form-group:last-child { margin-bottom: 0; }