/* ============================================================
   Sizzle Admin (SizzleLIVE) — drop-in override stylesheet
   ============================================================
   Loaded as one additional <link> after the existing stylesheet chain
   (bootstrap.min.css, components.css, layout.css, custom.css) in
   layouts/auth_master.blade.php and layouts/master.blade.php, so its
   rules win the cascade. No template, controller, or route changes are
   required by this file itself — it restyles existing classes.

   Hand-maintained static file (same as custom.css already is in this
   theme) — not part of the Mix build. `!important` is used the same
   way custom.css already overrides layout.css in this theme's cascade.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root{
  --navy:            #0e172d;
  --navy-deep:       #0a0f20;
  --navy-plane:      #090d1a;
  --card:            #131c33;
  --card-2:          #17213b;
  --terracotta:      #c8482b;
  --terracotta-dark: #a83a21;
  --terracotta-light:#e07350;
  --gold:            #c9a24d;
  --cream:           #f1ece4;
  --text-primary:    #f5f2ec;
  --text-secondary:  #b7b2a8;
  --text-muted:      #7b8093;
  --border-hairline: rgba(241,236,228,0.10);
  --status-critical: #d03b3b;
  --status-good:     #0ca30c;
  --modal-backdrop:  rgba(9,13,26,0.75);
  --icon-invert:     invert(1);
}

/* ---- base plane ---- */
body, body.page{
  background: var(--navy-plane) !important;
  color: var(--text-primary) !important;
  font-family: 'Inter', Arial, sans-serif !important;
}
a{ color: var(--terracotta-light); }
h1, h2, h3{ font-family: 'Playfair Display', Georgia, serif; }

/* ---- top bar ---- */
.page-header, .navbar, .navbar-header, .container-fluid{
  background: linear-gradient(180deg, var(--navy), var(--navy-deep)) !important;
  border-bottom: 1px solid var(--border-hairline) !important;
  box-shadow: none !important;
}
.topbar-actions .account-dropdown{
  color: var(--text-secondary) !important;
}
.topbar-actions .account-dropdown:hover{ color: var(--text-primary) !important; }
.dropdown-menu-v2{
  background: var(--card) !important;
  border: 1px solid var(--border-hairline) !important;
  box-shadow: none !important;
}
.dropdown-menu-v2 li > a{ color: var(--text-secondary) !important; }
.dropdown-menu-v2 li > a:hover{ background: rgba(200,72,43,0.12) !important; color: var(--text-primary) !important; }

/* ---- sidebar ---- */
.page-sidebar-wrapper, .page-sidebar{ background: var(--navy) !important; }
.company-switcher h3{
  color: var(--text-muted) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* every <select> site-wide is replaced at runtime by jQuery UI's
   selectmenu() widget (see app.js) — the real <select> is hidden, so
   style the generated .ui-selectmenu-button / .selectbox menu instead. */
.ui-selectmenu-button{
  background: var(--card) !important;
  border: 1px solid var(--border-hairline) !important;
  border-radius: 6px !important;
  color: var(--text-primary) !important;
}
.ui-selectmenu-button:hover, .ui-selectmenu-button.ui-state-hover{
  background: var(--card-2) !important;
  border-color: var(--border-hairline) !important;
}
/* match .sizzle-text-field input's box model exactly so the "List X" page
   search/sort/per-page row lines up (was a few px off between the plain
   text input and this widget). */
.sort-select .ui-selectmenu-button{
  box-sizing: border-box;
  height: 32px;
  margin-top: 3px;
}
/* template_style.css draws a separate ::before "arrow chip" behind the
   dropdown icon on the company switcher (old brownish-grey-to-black
   gradient, same as .primary-btn) — the new custom triangle icon doesn't
   need a backing chip, so remove the pseudo-element entirely. */
.company-switcher .ui-selectmenu-button::before{
  content: none !important;
}
.ui-selectmenu-button .ui-selectmenu-text{
  color: var(--text-primary) !important;
}
.ui-selectmenu-button .ui-selectmenu-icon{
  background: none !important;
  padding: 0 !important;
  width: 20px !important;
  height: 20px !important;
  text-indent: 0 !important;
  position: absolute !important;
  top: 50% !important;
  right: 8px !important;
  margin-top: -10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ui-selectmenu-button .ui-selectmenu-icon:before{
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-secondary);
}
.ui-selectmenu-menu, .selectbox{
  background: var(--card) !important;
  border: 1px solid var(--border-hairline) !important;
  color: var(--text-primary) !important;
}
.selectbox .ui-menu-item, .selectbox .ui-menu-item-wrapper{
  color: var(--text-primary) !important;
}
.selectbox .ui-menu-item-wrapper.ui-state-active{
  background: rgba(200,72,43,0.16) !important;
  border: none !important;
  color: var(--text-primary) !important;
}
h3.nav-section-title{
  color: var(--cream) !important;
  font-family: 'Playfair Display', serif !important;
}
.page-sidebar-menu > li > a{
  color: var(--text-secondary) !important;
  background: transparent !important;
  border-left: 2px solid transparent !important;
  font-family: 'Inter', sans-serif !important;
}
.page-sidebar-menu > li > a:hover{
  color: var(--text-primary) !important;
  background: rgba(200,72,43,0.08) !important;
}
.page-sidebar-menu > li > a.active,
.page-sidebar-menu > li > a.active:hover{
  color: var(--text-primary) !important;
  background: rgba(200,72,43,0.16) !important;
  border-left: 2px solid var(--terracotta) !important;
  font-weight: 600 !important;
}
.dashboard-main-item{
  background: var(--navy-deep) !important;
  color: var(--text-secondary) !important;
}
.sub-menu li > a{
  color: var(--text-secondary) !important;
}
.sub-menu li:hover > a,
.sub-menu li > a.active{
  color: var(--text-primary) !important;
  background: rgba(200,72,43,0.12) !important;
}

/* ---- main content plane ---- */
.page-content, .page-content-popup{ background: var(--navy-plane) !important; }
/* .content is a generic class also used (with color:#000) by the public-site
   template_style.css — .main-page only wraps admin pages, so scope here to
   avoid bleeding into the public login/register pages that share this file. */
.main-page .content{ color: var(--text-primary) !important; }
/* .big-save-btn now themed directly at its source in template_style.css
   (consolidated 2026-08-21 — was a duplicate override here). */
/* .vtabs now themed directly at its source in template_style.css
   (consolidated 2026-08-21 — was a duplicate override here). */
/* Plain <input type=number> stepper fields (min age, frequency, wheel
   speed, etc.) enhanced by the jquery.nice-number plugin have no wrapper
   class and no background of their own anywhere in the codebase — always
   fell back to the browser's default white. Appears across many edit
   pages, not just one, so fixed generically by the plugin's own marker
   attribute rather than chasing each field name. */
.main-page input[data-nice-number-initialized]{
  background: var(--card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-hairline) !important;
}
/* Plain Bootstrap .panel accordion (category folders on Offers/Games/
   Perks/Expressions/Pressure edit pages, e.g. "Set your main category")
   — stock Bootstrap default styling, never themed at all. Also used on a
   couple of public pages (pricing/FAQ), hence the .main-page scope. */
.main-page .panel{
  background: var(--card) !important;
  border: 1px solid var(--border-hairline) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.main-page .panel-heading{
  background: var(--card-2) !important;
  border-bottom: 1px solid var(--border-hairline) !important;
}
.main-page .panel-title, .main-page .panel-title a{
  color: var(--text-primary) !important;
}
.main-page .panel-body{
  color: var(--text-secondary) !important;
}
.main-page .panel-body label{
  color: var(--text-secondary) !important;
}
.main-page .panel-body li:hover > label{
  color: var(--text-primary) !important;
}

/* ---- cards / widgets (every "portlet" — Dashboard, Companies, Concierge, etc.) ---- */
.portlet{
  background: var(--card) !important;
  border: 1px solid var(--border-hairline) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.portlet-title{ border-bottom: 1px solid var(--border-hairline) !important; padding: 0 15px !important; }
.portlet-title .caption, .portlet-title .caption-subject{
  color: var(--text-secondary) !important;
  font-family: 'Inter', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px !important;
}
.portlet-body{ color: var(--text-primary); }
.portlet-body h4{ color: var(--text-primary); }

/* ---- shared "List X" pages (Concierges, Offers, Products, Perks, Rewards,
   Pets, Win, Games, Collectibles, Company, Locations, etc. — same
   fieldset-container/content-list markup reused across ~58 admin views) ---- */
.fieldset-container{ padding: 15px 0 !important; }
.fieldset-container:after{ content: ""; display: table; clear: both; }
.content-list{ border-top: 1px solid var(--border-hairline) !important; padding-top: 15px !important; }
.content-list-item, .content-list-item:last-child{
  border-bottom: 1px solid var(--border-hairline) !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.content-list-item .content-title{ color: var(--text-primary) !important; }

/* ---- buttons ---- */
.big-black-btn{
  background: var(--terracotta) !important;
  border-color: var(--terracotta) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
}
.big-black-btn:hover{ background: var(--terracotta-dark) !important; }
.secondary-btn{
  background: transparent !important;
  border: 1px solid var(--border-hairline) !important;
  color: var(--text-secondary) !important;
  border-radius: 6px !important;
}
.secondary-btn:hover{ color: var(--text-primary) !important; border-color: var(--gold) !important; }
/* .primary-btn now themed directly at its source in custom.css
   (consolidated 2026-08-21 — was a duplicate override here). */

/* ---- subscription / status banner (three real states: inactive, warning/cancelled, active) ---- */
.subscription-header{
  background: var(--card) !important;
  border-left: 3px solid var(--status-good) !important;
  color: var(--text-primary) !important;
}
.subscription-header.inactive{ border-left-color: var(--status-critical) !important; }
.subscription-header.warning{ border-left-color: var(--gold) !important; }
.subscription-header *{ color: var(--text-primary) !important; }

/* ---- pagination ---- */
/* NOTE: was previously `.pagination a, [class*="pag"] a` — that attribute
   selector accidentally matched any link inside .page-content/.page-sidebar
   (both contain the substring "pag"), silently greying out unrelated
   buttons like .primary-btn site-wide. Scoped to the real class only.
   Also: this is Bootstrap 4 markup (.page-item/.page-link) — the active
   and disabled states render as <span class="page-link">, not <a>, so a
   plain `.pagination a` selector never touched them. */
.pagination .page-link{
  background: var(--card) !important;
  border-color: var(--border-hairline) !important;
  color: var(--text-secondary) !important;
}
.pagination .page-link:hover{
  background: var(--card-2) !important;
  border-color: var(--border-hairline) !important;
  color: var(--text-primary) !important;
}
.pagination .page-item.active .page-link{
  background: var(--terracotta) !important;
  border-color: var(--terracotta) !important;
  color: #fff !important;
}
.pagination .page-item.disabled .page-link{
  background: var(--navy-deep) !important;
  border-color: var(--border-hairline) !important;
  color: var(--text-muted) !important;
}

/* ---- form inputs (admin edit forms AND the sign-in page both use Bootstrap .form-control) ---- */
.form-control{
  background: var(--card) !important;
  border: 1px solid var(--border-hairline) !important;
  color: var(--text-primary) !important;
  border-radius: 6px !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}
.form-control:focus{ border-color: var(--terracotta) !important; box-shadow: none !important; }
/* neutralize the browser's native autofill highlight so the dark input bg actually shows */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus{
  -webkit-box-shadow: 0 0 0px 1000px var(--card) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary);
  transition: background-color 9999s ease-in-out 0s;
}

/* ---- checkbox/radio replacement widgets (styleOptions.js hides the real
   input and injects a .ui-checkbox/.ui-radio div right after it — same
   "custom object" pattern as the select/selectmenu widget). ---- */
.ui-checkbox{
  background: var(--card) !important;
  border-color: var(--border-hairline) !important;
  box-shadow: none !important;
}
.ui-checkbox:hover{ border-color: var(--gold) !important; }
.ui-radio{
  background-color: var(--card) !important;
  border-color: var(--border-hairline) !important;
  box-shadow: none !important;
}
.ui-radio:hover{ border-color: var(--gold) !important; }

/* ---- native <select>/checkbox/radio fallback look — these plugins run on
   document.ready, so for a brief moment (or if JS is slow/blocked) the raw
   browser controls are visible; give them the right accent instead of
   default browser blue/grey so nothing flashes out of place. ---- */
input[type="checkbox"], input[type="radio"]{
  accent-color: var(--terracotta);
}
select{
  background: var(--card);
  color: var(--text-primary);
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
}

/* ============================================================
   DASHBOARD — sensor-network registry rendering. New classes, no
   collision risk with the vendored theme.
   ============================================================ */
.kpi-row{ display: flex; gap: 16px; margin: 20px 0 30px; flex-wrap: wrap; clear: both; }
.kpi-tile{
  background: var(--card); border: 1px solid var(--border-hairline); border-radius: 10px;
  padding: 18px 20px; flex: 1 1 190px; min-width: 190px;
}
.kpi-label{ font-size: 12px; color: var(--text-secondary); }
.kpi-value{ font-family: 'Inter', sans-serif; font-size: 30px; font-weight: 700; color: var(--text-primary); margin-top: 6px; }
.kpi-delta{ font-size: 12px; margin-top: 4px; color: var(--text-muted); }

.sensor-section-head{ display: flex; align-items: center; justify-content: space-between; margin: 34px 0 14px; flex-wrap: wrap; gap: 8px; }
.sensor-section-head h2{ font-size: 19px; color: var(--cream); margin: 0; }
.sensor-section-sub{ font-size: 12px; color: var(--text-muted); }

.platform-block{ margin-bottom: 6px; }
.platform-block-head{ display: flex; align-items: center; gap: 10px; padding: 12px 0 8px; border-bottom: 1px solid var(--border-hairline); }
.platform-name{ font-weight: 700; font-size: 14px; color: var(--text-primary); }
.status-pill{ font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.status-pill.live{ background: rgba(12,163,12,0.14); color: var(--status-good); border: 1px solid rgba(12,163,12,0.35); }
.status-pill.dormant{ background: rgba(123,128,147,0.14); color: var(--text-muted); border: 1px solid var(--border-hairline); }

.metric-row{ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 12px; padding: 14px 0 22px; }
.metric-tile{ border-radius: 6px; padding: 13px 15px; border: 1px solid var(--border-hairline); background: var(--card); }
.metric-tile .m-label{ font-size: 11.5px; color: var(--text-secondary); }
.metric-tile .m-value{ font-size: 20px; font-weight: 700; margin-top: 4px; color: var(--text-primary); }
.metric-tile.live .m-value{ color: var(--terracotta-light); }
.metric-tile.dormant{
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 10px, transparent 10px 20px), var(--navy-deep);
  border: 1px dashed var(--border-hairline);
}
.metric-tile.dormant .m-value{ color: var(--text-muted); font-size: 13px; font-weight: 600; }

.deep-dive{
  clear: both;
  margin-top: 10px; border: 1px solid var(--border-hairline); border-radius: 10px; padding: 22px 24px;
  background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
}
.deep-dive .dd-head{ display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.deep-dive .dd-head h3{ font-size: 16px; color: var(--cream); font-family: 'Inter', sans-serif; margin: 0; }
.deep-dive p.dd-explain{ color: var(--text-secondary); font-size: 12.5px; max-width: 720px; margin: 4px 0 18px; }
.sample-tag{
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--gold);
  border: 1px solid rgba(201,162,77,0.4); padding: 2px 8px; border-radius: 999px;
}

.chart-svg{ width: 100%; height: 150px; display: block; }
.legend{ display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.legend-item{ display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-secondary); }
.legend-swatch{ width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* ============================================================
   SIGN-IN PAGE (layouts/master.blade.php — no active public site
   left to conflict with, so this applies everywhere that layout
   is used).
   ============================================================ */
nav.navbar.fixed-top{
  background: linear-gradient(180deg, var(--navy), var(--navy-deep)) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--border-hairline) !important;
}
nav.navbar.fixed-top a{ color: var(--text-secondary) !important; }
nav.navbar.fixed-top a:hover{ color: var(--text-primary) !important; }

section.banner.alternative{
  background:
    radial-gradient(circle at 25% 30%, rgba(200,72,43,0.35), transparent 45%),
    radial-gradient(circle at 75% 60%, rgba(201,162,77,0.25), transparent 45%),
    linear-gradient(180deg, var(--navy), var(--navy-deep)) !important;
}
h1.banner-text{ font-family: 'Playfair Display', serif !important; color: var(--cream) !important; }

label, .login-register .form-group{ color: var(--text-secondary) !important; }

input.sign-in-btn{
  background-image: none !important;
  background: var(--terracotta) !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}
input.sign-in-btn:hover{ background: var(--terracotta-dark) !important; }

.footer{ background: var(--navy-plane) !important; }