/*
================================================================================
  ML Software, LLC
  Copyright 2026. All rights reserved.

  Renewal IQ - app.renewal-iq.com

  assets/css/app.css 
  Version: 2.49.0
  Created: 2026-04-08
  Updated: 2026-04-15

  Description: Full application stylesheet for Renewal IQ. Shell CSS ported
  directly from proven DZiq app.css (reset, variables, layout, sidebar, topbar,
  nav, login, forms, buttons, badges). Renamed dziq- to riq-, swapped blue
  accent to amber (#d97706). Added RenewalIQ-specific components: stat cards,
  permit cards, urgency system, group labels, location dropdown.

  Version History:
    2.49.0 - 2026-04-15 - Added display:block to riq-empty-title and
                         riq-empty-sub to fix inline rendering in flex
                         containers.
    2.48.0 - 2026-04-15 - Added SVG chevron arrow to .form-select.
                         appearance:none was stripping the native arrow
                         with no replacement. Fixes all selects app-wide.
    2.47.0 - 2026-04-15 - Added .settings-legal-btn style.
    2.46.0 - 2026-04-15 - Added Support tab styles: settings-support-row,
                         settings-support-icon/label/value/sub/result.
                         Added sidebar-copyright style for copyright line
                         below logout button in sidebar footer.
    2.45.0 - 2026-04-15 - riq-btn-add (Add Permit): increased padding to
                         10px 22px, font-size to 15px, weight to 700.
                         Added touch-action and white-space:nowrap.
                         Mobile coarse override keeps it proportional.
    2.44.0 - 2026-04-15 - Settings tab bar: overflow-x scroll on mobile,
                         hidden scrollbar, tabs no-shrink. Fixes Billing
                         tab cut off on small screens.
    2.43.0 - 2026-04-14 - Added upgrade prompt styles for team tab
                         user limit state.
    2.42.0 - 2026-04-14 - Expired stat card brightened: rgba(224,32,32)
                         at higher opacity to feel more urgent than at-risk.
    2.41.0 - 2026-04-13 - Added Team tab styles: team member rows, role
                          badges, status badges, invite form, role select,
                          team limit counter, role hint text.
    2.40.0 - 2026-04-12 - Removed min-height from settings-slug-msg.
    2.39.0 - 2026-04-12 - Slug editor and URL rows: inputs fill all
                          available space, buttons fixed width.
    2.38.0 - 2026-04-12 - Slug URL row: full width, Copy Link pinned right.
                          Editor row prefix hidden on URL row.
    2.37.0 - 2026-04-12 - Added .settings-recipient-note.
    2.36.0 - 2026-04-12 - Added .settings-slug-editor-row and
                          .settings-slug-prefix for DZiq-style inline
                          slug editor on location cards.
    2.35.0 - 2026-04-12 - Added .settings-slug-url-row and
                          .settings-slug-url-input for compliance page
                          copy link pattern.
    2.34.0 - 2026-04-12 - Added .badge-plan for prominent billing status
                          badge. Added .settings-plan-options for change
                          plan selector. Added .settings-cancel-warning
                          and .settings-info-banner.
    2.33.0 - 2026-04-12 - Added .settings-recipient-channel-badge, phone display,
                          email-wrap and badges flex layout for recipient rows.
    2.32.0 - 2026-04-12 - Added .settings-loc-btns and .settings-loc-confirm.
    2.31.0 - 2026-04-12 - Added Settings view CSS: tab bar, section cards, location
                          edit forms, notification recipient rows, confirm bars,
                          toast messages. Full mobile pass (pointer:coarse).

    2.30.0 - 2026-04-12 - Stat grid 5->3 cols for new 3-card layout.
                          Barber pole full width, stripe alpha 0.28->0.12.
    2.29.0 - 2026-04-12 - Option C stat cards: tinted backgrounds per urgency.
                          Numbers white (f0f0f4) except compliant (4cff91).
                          Stat number size 48->64px.
    2.28.0 - 2026-04-12 - Stat number colors match bar background colors exactly:
                          crimson=#7a0000, red=#e02020, yellow=#ffc832,
                          green=#1f6e3a. Stat grid 4->5 cols for Compliant card.
                          min-width:0 on grid to prevent overflow wrap.
                          Added .riq-empty-state for dashboard empty state.
    2.26.0 - 2026-04-10 - iOS date input width fix: -webkit-appearance:none
                          + max-width:100% + box-sizing:border-box on all
                          date/time inputs globally.
    2.25.0 - 2026-04-10 - Sidebar location: replaced raw list with proper
                          dropdown trigger. Trigger row shows location name
                          + caret. Inline dropdown slides open on tap.
                          Active location amber dot. 48px touch targets.
    2.24.0 - 2026-04-10 - Sidebar location block: CSS for .sidebar-loc-block,
                          .sidebar-loc-label, .sidebar-loc-name,
                          .sidebar-loc-opts, .sidebar-loc-opt. Hidden on
                          desktop, shown via pointer:coarse media query.
                          Active location highlighted with amber dot.
    2.23.0 - 2026-04-10 - iOS tap fix: added -webkit-overflow-scrolling: touch
                          to .riq-content. Added touch-action: manipulation to
                          button/[role=button]/a globally. Eliminates 300ms tap
                          delay that caused Add Permit to silently fail on iOS.
    2.22.0 - 2026-04-10 - Expired bar stripes: narrowed from 42% to 25% width
                          (right edge only, clears text on mobile). Added barber
                          pole animation via background-position keyframes.
    2.21.0 - 2026-04-10 - Added icon-help SVG mask. Deepened stat-blue
                         from #4d8fff to #2563eb.
    2.20.0 - 2026-04-10 - Tooltip system + permit notes field CSS.
    2.19.0 - 2026-04-10 - Expired group: --gray replaced with --crimson treatment.
                          Dark crimson (#7a0000) bg, diagonal black stripes right
                          side (::after repeating-linear-gradient), pulsing dot
                          (.riq-alert-dot), crimson text (#ffaaaa). Added
                          --crimson/--crimson-text CSS vars, urgbar-crimson,
                          badge-crimson. @keyframes riq-dot-pulse added.

    2.18.0 - 2026-04-10 - Full mobile/tablet pass. Copied from DZiq proven
                         pattern: pointer:coarse sidebar overlay, hamburger,
                         44px tap targets, 16px iOS input fix, touch-action,
                         active feedback, responsive stat grid.
    2.17.0 - 2026-04-10 - Added stat-blue class for total permits count.
    2.16.0 - 2026-04-10 - Red deepened: #ff6450 -> #e02020 (more blue, more crimson).
    2.15.0 - 2026-04-10 - Expired bar changed to dark purple #2d1f4e / light text.
    2.14.0 - 2026-04-10 - Group labels as colored bars: --red/--yellow/--green/--gray
                          modifier classes. Red/white, yellow/dark, dark green/light,
                          gray surface/dim.
    2.13.0 - 2026-04-10 - Group label 13->16px, color text-dim->text-secondary.
    2.12.0 - 2026-04-10 - Dashboard readability pass: all text sizes bumped.
                         stat-label 10->13px, stat-val 30->48px, stat-sub 11->13px,
                         section-title 11->14px, group-label 10->13px,
                         card-name 14->17px, card-meta 12->14px, card-days 14->18px,
                         card-loc 11->13px, badge 10->12px, card padding increased.
    2.11.0 - 2026-04-10 - Restored position:relative on topbar-left so dropdown
                          opens correctly. Set dropdown left:16px to align with
                          label text (matches topbar-left padding-left).
    2.10.0 - 2026-04-10 - Removed position:relative from standalone .topbar-left
                          block. #riq-dz-trigger is now sole positioning parent
                          for dropdown. Left edge aligns with label.
    2.9.0 - 2026-04-10 - Dropdown left edge aligns with location label.
                         Position:relative moved from topbar-left to topbar-dz.
    2.8.0 - 2026-04-10 - Set topbar gap:0 -- the 16px gap was pushing topbar-left
                         divider to x=236 instead of x=220.
    2.7.0 - 2026-04-10 - Removed padding-left from topbar-left so divider sits
                         flush at x=220. Caret bumped to 20px.
    2.6.0 - 2026-04-10 - Logo flush left: topbar padding-left 0, brand handles
                         its own 12px padding. Divider aligns with sidebar edge.
    2.5.0 - 2026-04-10 - Logo height 56->40px. Divider: border-left on topbar-left
                         at x=220px aligns with sidebar right edge. Location label
                         16px/600. Removed stray divider from topbar-brand.
    2.4.0 - 2026-04-10 - Removed ::before divider from topbar-dz. Removed
                         border-right from topbar-brand (sidebar has it already).
                         Location label 22px. Caret 16px.
    2.3.0 - 2026-04-10 - topbar-brand constrained to var(--sidebar-w) with right
                         border divider aligning to sidebar edge. Location label
                         font bumped to 20px/700.
    2.2.0 - 2026-04-10 - Fixed dropdown position: anchors below trigger via
                         topbar-left position:relative, top:100%, left:0.
    2.1.0 - 2026-04-10 - Added location dropdown CSS: .topbar-dz, .dz-dropdown-caret,
                         .dz-location-dropdown, .dz-loc-option, .dz-loc-option.is-active.
                         Topbar height bumped from 66px to 76px for larger logo.
    2.0.0 - 2026-04-08 - Full rewrite. Shell CSS ported from DZiq app.css.
                         DZiq-specific sections stripped. RenewalIQ components added.
    1.0.0 - 2026-04-08 - Initial build (custom, not DZiq-based).
================================================================================
*/
/* -- Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; color-scheme: dark; }
button, [role="button"], a { touch-action: manipulation; }

/* -- Variables -------------------------------------------------------------- */
:root {
  --bg-base:      #0d0d0f;
  --bg-surface:   #16161a;
  --bg-raised:    #1c1c22;
  --bg-overlay:   #222228;
  --border:       #2a2a32;
  --border-light: #333340;

  --amber:      #d97706;
  --amber-dim:  #b45e04;
  --amber-glow: rgba(217, 119, 6, 0.18);

  --green:        #4cff91;
  --yellow:       #ffc832;
  --red:          #e02020;
  --crimson:      #7a0000;
  --crimson-text: #ffaaaa;
  --orange:       #ff9c3a;
  --purple:       #b464ff;

  --text-primary:   #f0f0f4;
  --text-secondary: #b0b0c4;
  --text-dim:       #7a7a94;

  --sidebar-w:  220px;
  --topbar-h:   76px;
  --radius:     6px;
  --radius-lg:  10px;

  --font-ui:      'Inter', sans-serif;
  --font-display: 'Barlow Condensed', sans-serif;

  /* Accent color - default blue. Overridden at runtime by app.js setAccent().
     Must be defined here so login page renders correctly before JS runs. */
  --accent:       #d97706;
  --accent-light: #f59e0b;
  --accent-dim:   rgba(217, 119, 6, 0.2);
}

/* -- Base ------------------------------------------------------------------- */
body {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* -- Layout ----------------------------------------------------------------- */
#riq-root {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  height: 100vh;
  height: 100dvh; /* dynamic viewport height - handles mobile browser chrome */
  overflow: hidden;
}

/* When showing login, root switches from grid to flex centering */
#riq-root:has(.riq-login-wrap) {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* iOS safe area - pushes content below status bar when launched from home screen */
@supports (padding-top: env(safe-area-inset-top)) {
  #riq-root {
    padding-top: env(safe-area-inset-top);
  }
  .riq-sidebar {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .riq-content {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* -- Sidebar ---------------------------------------------------------------- */
.riq-sidebar {
  grid-column: 1;
  grid-row: 2;
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.22s ease;
  z-index: 200;
}

.brand-mark {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: var(--accent);
  border-radius: 6px;
  position: relative;
  flex-shrink: 0;
}

.brand-mark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background: #fff;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='white' d='M 7.6,14.4 A 10.4,10.4 0 0,1 18,4 L 18,14.4 Z'/%3E%3Cpath fill='white' d='M 18,4 A 10.4,10.4 0 0,1 28.4,14.4 L 18,14.4 Z'/%3E%3Cpolygon fill='white' points='17.4,14.4 18.6,14.4 18.6,4 17.4,4'/%3E%3Cpolygon fill='white' points='7.6,14.4 18.5,25.3 18,24.4 7.1,13.7'/%3E%3Cpolygon fill='white' points='28.4,14.4 17.5,25.3 18,24.4 28.9,13.7'/%3E%3Cpolygon fill='white' points='12.43,14.4 18.4,25.3 18,24.4 12.03,13.7'/%3E%3Cpolygon fill='white' points='23.57,14.4 17.6,25.3 18,24.4 23.97,13.7'/%3E%3Ccircle fill='white' cx='18' cy='27' r='2.2'/%3E%3Cpolygon fill='white' points='13.5,30 22.5,30 18,35.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='white' d='M 7.6,14.4 A 10.4,10.4 0 0,1 18,4 L 18,14.4 Z'/%3E%3Cpath fill='white' d='M 18,4 A 10.4,10.4 0 0,1 28.4,14.4 L 18,14.4 Z'/%3E%3Cpolygon fill='white' points='17.4,14.4 18.6,14.4 18.6,4 17.4,4'/%3E%3Cpolygon fill='white' points='7.6,14.4 18.5,25.3 18,24.4 7.1,13.7'/%3E%3Cpolygon fill='white' points='28.4,14.4 17.5,25.3 18,24.4 28.9,13.7'/%3E%3Cpolygon fill='white' points='12.43,14.4 18.4,25.3 18,24.4 12.03,13.7'/%3E%3Cpolygon fill='white' points='23.57,14.4 17.6,25.3 18,24.4 23.97,13.7'/%3E%3Ccircle fill='white' cx='18' cy='27' r='2.2'/%3E%3Cpolygon fill='white' points='13.5,30 22.5,30 18,35.5'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  display: flex;
  align-items: baseline;
  gap: 0;
}

.brand-iq {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-left: 3px;
}

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

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 20px;
  text-decoration: none;
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  border-left: 3px solid transparent;
  margin: 0;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.nav-item:hover {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.04);
}

.nav-item.active {
  color: #fff;
  background: rgba(255,255,255,0.05);
  border-left-color: var(--accent);
}

.nav-label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}

.nav-icon {
  font-size: 15px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.nav-section {
  padding: 8px 16px 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.48);
}

.nav-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb, 26,111,255), 0.18);
  color: var(--accent-light, #4d8fff);
}

/* Nav icons - inline SVG masks */
[class^="icon-"] {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: currentColor;
  flex-shrink: 0;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.icon-dashboard {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='6' height='6' rx='1'/%3E%3Crect x='9' y='1' width='6' height='6' rx='1'/%3E%3Crect x='1' y='9' width='6' height='6' rx='1'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='6' height='6' rx='1'/%3E%3Crect x='9' y='1' width='6' height='6' rx='1'/%3E%3Crect x='1' y='9' width='6' height='6' rx='1'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1'/%3E%3C/svg%3E");
}

.icon-calendar {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='2' width='14' height='13' rx='2' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cline x1='5' y1='1' x2='5' y2='4' stroke='black' stroke-width='1.5'/%3E%3Cline x1='11' y1='1' x2='11' y2='4' stroke='black' stroke-width='1.5'/%3E%3Cline x1='1' y1='6.5' x2='15' y2='6.5' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='2' width='14' height='13' rx='2' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cline x1='5' y1='1' x2='5' y2='4' stroke='black' stroke-width='1.5'/%3E%3Cline x1='11' y1='1' x2='11' y2='4' stroke='black' stroke-width='1.5'/%3E%3Cline x1='1' y1='6.5' x2='15' y2='6.5' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
}

.icon-checkin {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6' cy='5' r='3' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M1 14c0-3 2-5 5-5' stroke='black' stroke-width='1.5' fill='none'/%3E%3Cpath d='M10 11l2 2 3-3' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6' cy='5' r='3' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M1 14c0-3 2-5 5-5' stroke='black' stroke-width='1.5' fill='none'/%3E%3Cpath d='M10 11l2 2 3-3' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.icon-plane {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14 6.5L9 4V2a1 1 0 00-2 0v2L2 6.5v2l5-1v2.5l-1.5 1V13L8 12l2.5 1v-2l-1.5-1V7.5l5 1v-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14 6.5L9 4V2a1 1 0 00-2 0v2L2 6.5v2l5-1v2.5l-1.5 1V13L8 12l2.5 1v-2l-1.5-1V7.5l5 1v-2z'/%3E%3C/svg%3E");
}

.icon-reports {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='8' width='3' height='6' rx='1'/%3E%3Crect x='6.5' y='5' width='3' height='9' rx='1'/%3E%3Crect x='11' y='2' width='3' height='12' rx='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='8' width='3' height='6' rx='1'/%3E%3Crect x='6.5' y='5' width='3' height='9' rx='1'/%3E%3Crect x='11' y='2' width='3' height='12' rx='1'/%3E%3C/svg%3E");
}

.icon-settings {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='2.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M8 1v2M8 13v2M1 8h2M13 8h2M3.05 3.05l1.42 1.42M11.53 11.53l1.42 1.42M3.05 12.95l1.42-1.42M11.53 4.47l1.42-1.42' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='2.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M8 1v2M8 13v2M1 8h2M13 8h2M3.05 3.05l1.42 1.42M11.53 11.53l1.42 1.42M3.05 12.95l1.42-1.42M11.53 4.47l1.42-1.42' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.icon-help {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M6 6c0-1.1.9-2 2-2s2 .9 2 2c0 1-1 1.5-1.5 2S8 9.5 8 10' stroke='black' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='8' cy='12.5' r='0.75' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M6 6c0-1.1.9-2 2-2s2 .9 2 2c0 1-1 1.5-1.5 2S8 9.5 8 10' stroke='black' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='8' cy='12.5' r='0.75' fill='black'/%3E%3C/svg%3E");
}

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.user-initials {
  width: 28px;
  height: 28px;
  background: var(--accent-dim);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-light);
  flex-shrink: 0;
}

.user-name {
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-logout {
  width: 100%;
  padding: 6px;
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}

.btn-logout:hover { color: var(--red); border-color: var(--red); }

/* -- Main area -------------------------------------------------------------- */
.riq-main {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* -- Topbar ----------------------------------------------------------------- */
.riq-topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  background: var(--bg-surface);
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 8px 0;

  padding-left: 0;
  padding-right: max(20px, env(safe-area-inset-right));
  gap: 0;
  z-index: 100;
  position: relative;
}

.riq-topbar::after {
  content: "";
  position: absolute;

  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dim) 60%, transparent 100%);
  pointer-events: none;
}

.topbar-brand {
  display: flex;
  align-items: center;
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  max-width: var(--sidebar-w);
  padding: 0 12px 0 12px;
  flex-shrink: 0;
  overflow: hidden;
}

.topbar-left  { display: flex; align-items: center; gap: 16px; border-left: 1px solid var(--border); padding-left: 16px; }

.btn-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  flex-shrink: 0;
}
.topbar-right { display: flex; align-items: center; gap: 16px; margin-left: auto; }

/* -- Wind banner badge -- */
.topbar-wind {
  display: flex;
  align-items: center;
  gap: 14px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 5px 20px 5px 14px;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  max-height: 46px;
  box-sizing: border-box;
}

.wind-compass {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  overflow: visible;
}

.compass-arrow-group {
  transform-origin: 14px 14px;
  transform: rotate(0deg);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#riq-compass-head {
  fill: var(--accent);
}

.wind-speed-block {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 0 14px 0 4px;
  border-right: 1px solid rgba(255,255,255,0.1);
}

.wind-info-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-width: 48px;
}

.topbar-wind-speed {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: #4cff91;
  line-height: 1;
  letter-spacing: -0.5px;
  transition: color 0.4s;
}

.topbar-wind-unit {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Direction text: full size when no gust, smaller when gust label is showing */
.topbar-wind-dir {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: rgba(255,255,255,0.9);
  letter-spacing: -0.5px;
  line-height: 1;
  transition: color 0.4s, font-size 0.2s;
}

.topbar-wind.has-gust .topbar-wind-dir {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}

.topbar-wind-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #ffc832;
  line-height: 1;
}

.topbar-dz {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}


.topbar-dz strong { font-size: 16px; color: #ffffff; font-weight: 600; letter-spacing: 0.01em; }

/* DZ name click-to-reveal location dropdown */
#riq-dz-trigger { cursor: pointer; user-select: none; }

.dz-dropdown-caret {
  font-size: 16px;
  color: rgba(255,255,255,0.5);
  margin-left: 5px;
  vertical-align: middle;
  display: inline-block;
  transition: transform 0.15s;
}

.topbar-left {
  position: relative;
}

.dz-location-dropdown {

  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 16px;
  background: #1c1c22;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  min-width: 200px;
  z-index: 500;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.dz-location-dropdown.open { display: block; }

.dz-loc-option {
  padding: 11px 16px;
  font-size: 13px;
  color: rgba(232,232,240,0.75);
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.1s;
}

.dz-loc-option:last-child { border-bottom: none; }
.dz-loc-option:hover { background: rgba(255,255,255,0.06); color: #fff; }

.dz-loc-option.is-active {
  color: var(--accent);
  font-weight: 600;
  background: rgba(var(--accent-rgb, 26,111,255), 0.08);
}

.topbar-accent-picker {
  display: flex;
  align-items: center;
  position: relative;
}

/* -- Accent color picker -- */
.acp-trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 5px 10px 5px 10px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, background 0.15s;
  min-width: 110px;
}

.acp-trigger:hover,
.acp-trigger.open {

  border-color: var(--accent);
  background: rgba(255,255,255,0.09);
}

.acp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}

.acp-label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  flex: 1;
}

.acp-arrow {
  font-size: 8px;
  color: rgba(255,255,255,0.35);
  margin-left: 2px;
}

.acp-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #1c1c22;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 4px;
  min-width: 130px;
  z-index: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.acp-dropdown.open { display: block; }

.acp-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.1s;
}

.acp-option:hover    { background: rgba(255,255,255,0.07); }
.acp-option.selected { background: rgba(255,255,255,0.1);  }

.acp-option .acp-label {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
}

.topbar-date {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}

.weather-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;

  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(26,111,255,0.2);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
}

.weather-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.weather-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4cff91;
  flex-shrink: 0;
}

/* -- Connection status badge -- */
.conn-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4cff91;
  flex-shrink: 0;
  transition: background 0.3s;
  box-shadow: 0 0 0 2px rgba(76,255,145,0.2);
}

.conn-dot--offline {
  background: #ff6450;
  box-shadow: 0 0 0 2px rgba(255,100,80,0.2);
}


.conn-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #ff6450;
  text-transform: uppercase;
  display: none;
}

.conn-label--visible {
  display: block;
}

.topbar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-light);
  flex-shrink: 0;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  user-select: none;
}
.topbar-avatar:hover {
  background: var(--accent);
  color: #fff;
}
.topbar-avatar:active {
  transform: scale(0.92);
}
.topbar-avatar.refreshing {
  animation: avatar-spin 0.6s linear;
}
@keyframes avatar-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.topbar-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.btn-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.location-switcher {
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-ui);
  padding: 5px 10px;
  cursor: pointer;
  outline: none;
}

.location-switcher:focus { border-color: var(--amber); }

/* -- Content ---------------------------------------------------------------- */
.riq-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px;
  background: var(--bg-base);
}

/* -- Login ------------------------------------------------------------------ */
.riq-login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-base);
  padding: 24px;
  box-sizing: border-box;
}

.riq-login-box {
  width: 100%;
  max-width: 380px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.brand-mark-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #d97706;
  border-radius: 8px;
  flex-shrink: 0;
}

.brand-text-wrap { display: flex; flex-direction: column; gap: 2px; }
.brand-tag-lg {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.brand-name-lg {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* -- Forms ------------------------------------------------------------------ */
.form-group  { margin-bottom: 16px; }
.form-row    { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-display);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-ui);
  padding: 8px 12px;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.12s;
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(240,240,244,0.45)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

.form-input:focus,
.form-input:focus-visible,
.form-select:focus,
.form-select:focus-visible,
.form-textarea:focus,
.form-textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--amber);
}

.btn:focus,
.btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.form-input::placeholder { color: var(--text-dim); }

/* Kill browser autofill yellow */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-raised) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary);
}

/* Hide Firefox password reveal/lock icon */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }
input[type="password"]::-moz-password-reveal { display: none; }
input[type="password"] { -moz-appearance: none; }

.form-textarea { resize: vertical; min-height: 80px; }

.form-error {
  background: rgba(255, 100, 80, 0.12);
  border: 1px solid rgba(255, 100, 80, 0.3);
  border-radius: var(--radius);
  color: var(--red);
  font-size: 13px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

/* -- Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s, opacity 0.12s;
  text-decoration: none;
  white-space: nowrap;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--amber); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--amber-dim); }

.btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border-light); }
.btn-ghost:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border); background: var(--bg-raised); }

.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #e0503e; }

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

/* -- Badges ----------------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.badge--green  { background: rgba(76,  255, 145, 0.12); color: var(--green);  }
.badge--yellow { background: rgba(255, 200,  50, 0.12); color: var(--yellow); }
.badge--red    { background: rgba(255, 100,  80, 0.12); color: var(--red);    }
.badge--orange { background: rgba(255, 156,  58, 0.12); color: var(--orange); }
.badge--blue   { background: rgba(26,  111, 255, 0.15); color: var(--amber);   }
.badge--purple { background: rgba(180, 100, 255, 0.12); color: var(--purple); }
.badge--gray   { background: rgba(144, 144, 168, 0.12); color: var(--text-secondary); }

/* -- Tables ----------------------------------------------------------------- */
.riq-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.riq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.riq-table thead tr {
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
}

.riq-table th {
  padding: 10px 14px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.riq-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}

.riq-table tbody tr:last-child td { border-bottom: none; }
.riq-table tbody tr:hover          { background: var(--bg-raised); }
.riq-table tbody tr.clickable      { cursor: pointer; }

/* -- Cards ------------------------------------------------------------------ */
.riq-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.riq-card-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

/* -- Stat grid -------------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
}

.stat-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.stat-value.blue   { color: var(--amber);   }
.stat-value.green  { color: var(--green);  }
.stat-value.yellow { color: var(--yellow); }
.stat-value.red    { color: var(--red);    }

/* -- Section header --------------------------------------------------------- */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.section-title {


  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.section-actions { display: flex; gap: 8px; align-items: center; }

/* -- Utilities -------------------------------------------------------------- */
.riq-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
}

.spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid var(--border-light);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.riq-empty,
.riq-error-block {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  color: var(--text-dim);
  font-size: 14px;
}

.riq-error-block { color: var(--red); }

.riq-init-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  color: var(--red);
}

/* -- Toast ------------------------------------------------------------------ */
.riq-toast {
  position: fixed;
  top: 16px;
  right: 16px;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  z-index: 9999;
  max-width: 320px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}


/* Non-error toasts slide down from top-right */
.riq-toast:not(.riq-toast--error) {
  transform: translateY(-8px);
}
.riq-toast:not(.riq-toast--error).riq-toast--visible {
  transform: translateY(0);
}
.riq-toast--visible  { opacity: 1; }
.riq-toast--success  { background: var(--green); color: #0a1a10; }
.riq-toast--info     { background: var(--bg-overlay); color: var(--text-primary); border: 1px solid var(--border-light); }

/* Error toasts: true center-screen blocking alert, click-to-dismiss */


/* =============================================================================
   RENEWAL IQ -- PERMIT DASHBOARD COMPONENTS
   ============================================================================= */

/* -- Stat cards --------------------------------------------------------------- */
.riq-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-width: 0;
  gap: 12px;
  margin-bottom: 28px;
}

.riq-stat {
  background: var(--bg-raised);
  border-radius: var(--radius);
  padding: 22px;
  border: 1px solid var(--border);
}

/* Option C -- tinted card backgrounds per urgency state */
.riq-stat--expired   { background: rgba(224,32,32,0.22); border-color: rgba(224,32,32,0.6); }
.riq-stat--critical  { background: rgba(224,32,32,0.12); border-color: rgba(224,32,32,0.3); }
.riq-stat--expiring  { background: rgba(255,200,50,0.16); border-color: rgba(255,200,50,0.45); }
.riq-stat--compliant { background: rgba(76,255,145,0.08); border-color: rgba(76,255,145,0.2); }
.riq-stat--total     { background: rgba(37,99,235,0.1);  border-color: rgba(37,99,235,0.25); }

.riq-stat-label {
  font-size: 13px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 8px;
  line-height: 1.3;
  font-family: var(--font-display);
  font-weight: 600;
}

.riq-stat-val {
  font-family: var(--font-display);

  font-size: 64px;
  font-weight: 800;
  line-height: 1;
}

.riq-stat-sub {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 6px;
}

.stat-green   { color: #4cff91; }
.stat-blue    { color: #f0f0f4; }
.stat-yellow  { color: #f0f0f4; }
.stat-red     { color: #f0f0f4; }
.stat-crimson { color: #f0f0f4; }
.stat-dim     { color: var(--text-dim); }

/* -- Section header ---------------------------------------------------------- */
.riq-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.riq-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-family: var(--font-display);
}

.riq-btn-add {
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-radius: var(--radius);
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.12s;
  white-space: nowrap;
}

.riq-btn-add:hover { background: rgba(217, 119, 6, 0.25); }

@media (pointer: coarse) {
  .riq-btn-add { padding: 10px 18px; font-size: 14px; }
}

/* -- Group labels ------------------------------------------------------------ */
.riq-group-label {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  font-family: var(--font-display);
  font-weight: 700;
  padding: 8px 14px;
  border-radius: var(--radius);
  margin: 16px 0 10px;
}

.riq-group-label--red {
  background: var(--red);
  color: #fff;
}

.riq-group-label--yellow {
  background: var(--yellow);
  color: #1a1a1a;
}

.riq-group-label--green {
  background: #1f6e3a;
  color: #e0ffe0;
}

.riq-group-label--gray {
  background: #2d1f4e;
  color: #e0d8f8;
  border: none;
}

/* -- Expired group label -- dark crimson + diagonal stripes right side + pulse dot -- */
.riq-group-label--crimson {
  background: var(--crimson);
  color: var(--crimson-text);
  border: none;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Diagonal stripes full width -- barber pole animation */
.riq-group-label--crimson::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 6px,
    rgba(0,0,0,0.12) 6px,
    rgba(0,0,0,0.12) 11px
  );
  background-size: 15.56px 15.56px;
  animation: riq-stripe-scroll 1.2s linear infinite;
  pointer-events: none;
}

@keyframes riq-stripe-scroll {
  from { background-position: 0 0; }
  to   { background-position: 15.56px 15.56px; }
}

/* Pulsing alert dot -- sits left of label text */
.riq-alert-dot {
  width: 10px;
  height: 10px;
  min-width: 10px;
  border-radius: 50%;
  background: var(--crimson-text);
  display: inline-block;
  animation: riq-dot-pulse 1.2s ease-in-out infinite;
}

@keyframes riq-dot-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.3; transform: scale(0.55); }
}

.urgbar-crimson { background: var(--crimson); }
.badge-crimson  { background: rgba(122,0,0,0.35); color: var(--crimson-text); }

/* -- Permit cards ------------------------------------------------------------ */
.riq-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px;
}

.riq-card {
  background: var(--bg-raised);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.riq-card:hover {
  border-color: var(--border-light);
  background: var(--bg-overlay);
}

.riq-urgbar {
  width: 4px;
  min-width: 4px;
  height: 52px;
  border-radius: 2px;
  flex-shrink: 0;
}

.urgbar-red    { background: var(--red); }
.urgbar-yellow { background: var(--yellow); }
.urgbar-green  { background: var(--green); }
.urgbar-gray   { background: rgba(255,255,255,0.1); }

.riq-pulse {
  animation: riq-pulse 1.5s ease-in-out infinite;
}

@keyframes riq-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

.riq-card-body {
  flex: 1;
  min-width: 0;
}

.riq-card-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.riq-card-meta {
  font-size: 14px;
  color: var(--text-dim);
  margin-top: 4px;
}

.riq-card-right {
  text-align: right;
  flex-shrink: 0;
  min-width: 100px;
}

.riq-card-days {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-display);
}

.days-red    { color: var(--red); }
.days-yellow { color: var(--yellow); }
.days-dim    { color: var(--text-dim); }

.riq-card-loc {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 3px;
}

/* -- Urgency badges ---------------------------------------------------------- */
.riq-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  margin-top: 6px;
  letter-spacing: 0.2px;
  font-family: var(--font-display);
  text-transform: uppercase;
}

.badge-red    { background: rgba(255,100,80,0.12);  color: var(--red); }
.badge-yellow { background: rgba(255,200,50,0.12);  color: var(--yellow); }
.badge-green  { background: rgba(76,255,145,0.10);  color: var(--green); }
.badge-gray   { background: rgba(255,255,255,0.06); color: var(--text-dim); }

/* Plan status badge -- larger, used in billing tab */
.badge-plan {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.badge-plan.badge-green  { background: rgba(76,255,145,0.12); color: var(--green);   border-color: rgba(76,255,145,0.25); }
.badge-plan.badge-yellow { background: rgba(255,200,50,0.12); color: var(--yellow);  border-color: rgba(255,200,50,0.25); }
.badge-plan.badge-red    { background: rgba(255,100,80,0.12); color: var(--red);     border-color: rgba(255,100,80,0.25); }
.badge-plan.badge-gray   { background: rgba(255,255,255,0.06); color: var(--text-dim); border-color: var(--border); }

/* Billing tab -- plan options grid */
.settings-plan-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.settings-plan-option {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  background: var(--bg-raised);
}

.settings-plan-option:hover {
  border-color: var(--border-light);
}

.settings-plan-option.current {
  border-color: var(--accent);
  background: rgba(217,119,6,0.08);
  cursor: default;
}

.settings-plan-option-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.settings-plan-option.current .settings-plan-option-name {
  color: var(--accent);
}

.settings-plan-option-price {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 4px;
}

.settings-plan-option-limits {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

.settings-plan-option-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  margin-top: 4px;
}

/* Billing info banner (trial notice) */
.settings-info-banner {
  background: rgba(217,119,6,0.08);
  border: 1px solid rgba(217,119,6,0.2);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

/* Cancellation warning */
.settings-cancel-warning {
  background: rgba(255,100,80,0.07);
  border: 1px solid rgba(255,100,80,0.2);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

@media (pointer: coarse) {
  .settings-plan-options { grid-template-columns: 1fr; }
}

/* -- Tooltip system ---------------------------------------------------------- */
.riq-tip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--text-dim);
  cursor: pointer;
  vertical-align: middle;
  margin-left: 5px;
  border-radius: 50%;
  transition: color 0.12s;
  flex-shrink: 0;
}

.riq-tip-icon:hover,
.riq-tip-icon:focus {
  color: var(--accent);
  outline: none;
}

.riq-tooltip-bubble {
  display: none;
  position: absolute;
  z-index: 9000;
  max-width: 300px;
  background: #1e1e26;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  pointer-events: auto;
  transition: opacity 0.1s;
}

/* -- Permit notes field ------------------------------------------------------ */
.riq-notes-wrap {
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.riq-notes-label {
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.riq-notes-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  min-height: 40px;
  cursor: pointer;
  white-space: pre-wrap;
  word-break: break-word;
  transition: color 0.12s;
}

.riq-notes-text.empty {
  color: var(--text-dim);
  font-style: italic;
}

.riq-notes-text:hover { color: var(--text-primary); }

.riq-notes-textarea {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-ui);
  line-height: 1.6;

  padding: 10px 12px;
  min-height: 100px;
  resize: vertical;
  outline: none;
}

.riq-notes-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.riq-notes-save {
  height: 36px;
  padding: 0 18px;
  background: var(--accent);
  color: #0d0d0f;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s;
}

.riq-notes-save:hover    { background: var(--amber-dim); }
.riq-notes-save:disabled { opacity: 0.5; cursor: not-allowed; }

.riq-notes-cancel {
  height: 36px;
  padding: 0 16px;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.riq-notes-cancel:hover { color: var(--text-primary); }

.riq-notes-char {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
  text-align: right;
}

.riq-notes-char.warn { color: var(--yellow); }

/* -- Empty state ------------------------------------------------------------- */
.riq-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-dim);
}

.riq-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  display: block;
}

.riq-empty-sub {
  font-size: 13px;
  color: var(--text-dim);
  display: block;
}

/* -- Dashboard empty state -------------------------------------------------- */
.riq-empty-state {
  text-align: center;
  padding: 64px 24px 48px;
  max-width: 420px;
  margin: 0 auto;
}

.riq-empty-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(217,119,6,0.08);
  border: 1px solid rgba(217,119,6,0.2);
  margin: 0 auto 24px;
}

.riq-empty-state-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}

.riq-empty-state-body {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 28px;
}

.riq-empty-state-btn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 24px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  touch-action: manipulation;
}

.riq-empty-state-btn:hover { opacity: 0.88; }

/* -- Location dropdown (DZiq pattern) --------------------------------------- */
.topbar-dz {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius);
  transition: background 0.12s;
  user-select: none;
  position: relative;
}

.topbar-dz:hover { background: rgba(255,255,255,0.06); }

.topbar-dz strong {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}


.dz-dropdown-caret {
  font-size: 16px;
  color: rgba(255,255,255,0.5);
  line-height: 1;
}

.dz-location-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 16px;
  background: var(--bg-overlay);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  min-width: 200px;
  z-index: 300;
  overflow: hidden;
}

.dz-location-dropdown.open { display: block; }

.dz-loc-option {
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}

.dz-loc-option:hover   { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.dz-loc-option.is-active { color: var(--accent); font-weight: 600; }

/* -- Hamburger menu toggle -- hidden on desktop, shown on touch via pointer:coarse */
.btn-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  flex-shrink: 0;

}


/* =============================================================================
   TABLET & MOBILE -- Copied directly from DZiq app.css proven pattern.
   Uses pointer:coarse to detect touch screens regardless of resolution.
   Covers all iPhones, iPads (including 12.9" Pro at 1366px landscape),
   Android phones and tablets. Desktop mice report pointer:fine -- never fires.
   ============================================================================= */

/* -- Tablet/touch: sidebar hidden, slides in from left ---------------------- */
/* -- Sidebar location block (mobile only) ----------------------------------- */
.sidebar-loc-block {
  display: none;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* Trigger row -- shows active location name + caret */
.sidebar-loc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.12s;
  min-height: 56px;
}

.sidebar-loc-trigger:hover,
.sidebar-loc-trigger:active {
  background: rgba(255,255,255,0.04);
}

.sidebar-loc-trigger-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sidebar-loc-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.sidebar-loc-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-loc-caret {
  font-size: 12px;
  color: var(--text-dim);
  flex-shrink: 0;
  margin-left: 8px;
  transition: transform 0.18s;
}

/* Inline dropdown -- hidden until .open */
.sidebar-loc-dropdown {
  display: none;
  flex-direction: column;
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
}

.sidebar-loc-dropdown.open {
  display: flex;
}

.sidebar-loc-opt {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.1s;
  min-height: 48px;
  display: flex;
  align-items: center;
  touch-action: manipulation;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.sidebar-loc-opt:last-child { border-bottom: none; }

.sidebar-loc-opt:hover,
.sidebar-loc-opt:active {
  background: rgba(217,119,6,0.1);
  color: var(--text-primary);
}

.sidebar-loc-opt.active {
  color: var(--accent);
  font-weight: 700;
}

.sidebar-loc-opt.active::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 10px;
  flex-shrink: 0;
}


@media (pointer: coarse) {
  /* Collapse sidebar column to zero -- sidebar floats over content */
  #riq-root {
    grid-template-columns: 0 1fr !important;
  }

  /* Sidebar slides in from left as a fixed overlay */
  .riq-sidebar {
    position: fixed !important;
    top: env(safe-area-inset-top, 0);
    left: 0;
    height: calc(100% - env(safe-area-inset-top, 0px));
    width: var(--sidebar-w);
    transform: translateX(-100%) !important;
    z-index: 200;
  }

  .riq-sidebar.open { transform: translateX(0) !important; }

  /* Show hamburger on touch devices */
  .btn-menu-toggle { display: flex !important; }

  /* Show location block in sidebar on mobile */
  .sidebar-loc-block { display: block; }

  .riq-content { padding: 16px; }
}

/* -- Sidebar overlay (tap outside to close) --------------------------------- */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 199;
  -webkit-tap-highlight-color: transparent;
}

.sidebar-overlay.active { display: block; }

/* -- Portrait phone/tablet (<=768px) ---------------------------------------- */
@media (max-width: 768px) and (pointer: coarse) {
  .riq-stats { grid-template-columns: repeat(3, 1fr); }  /* already 3 on desktop */
  .topbar-dz strong { font-size: 14px; }
  .dz-location-dropdown { min-width: 160px; }
}

/* -- Small phone (<=480px) -------------------------------------------------- */
@media (max-width: 480px) {
  .riq-stats { grid-template-columns: 1fr; }

  /* Hide location label on small phones -- just logo + hamburger */
  .topbar-left   { display: none !important; }
  .topbar-right  { margin-left: auto; }
  .riq-topbar    { padding: 0 12px 8px; gap: 10px; }
  .btn-menu-toggle { font-size: 22px; padding: 6px; }
}

/* -- Tap delay elimination -------------------------------------------------- */
a,
button,
.btn,
.nav-item,
.btn-logout,
.btn-menu-toggle,
.pm-btn,
.pm-table-row,
.riq-card,
.dz-loc-option,
[role="button"] {
  touch-action: manipulation;
}

/* -- Minimum tap targets: 44px ---------------------------------------------- */
.btn        { min-height: 44px; padding: 10px 18px; }
.btn-sm     { min-height: 38px; padding: 8px 12px; }
.nav-item   { min-height: 44px; padding: 12px 20px; }
.btn-logout { min-height: 44px; padding: 10px; }
.pm-btn     { min-height: 48px; }
.pm-table-row { min-height: 60px; }
.riq-card   { min-height: 64px; }

.btn-menu-toggle {
  min-height: 44px;
  min-width: 44px;
  padding: 10px;
  align-items: center;
  justify-content: center;
}

/* -- iOS auto-zoom fix: all inputs >= 16px ---------------------------------- */
/* iOS zooms viewport if focused input font-size < 16px                        */
.form-input,
.form-select,
.form-textarea,
.pm-modal-input,
.pm-modal-textarea,
.pm-search,
input[type="date"],
input[type="time"],
input[type="number"],
input[type="text"],
select {
  font-size: 16px;
}

/* iOS Safari: date inputs ignore box-sizing without explicit appearance reset */
input[type="date"],
input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Restore 14px-15px on desktop only */
@media (min-width: 1025px) {
  .form-input,
  .form-select,
  .form-textarea,
  .pm-modal-input,
  .pm-modal-textarea,
  .pm-search {
    font-size: 15px;
  }
}

/* -- Active state feedback (touch has no hover) ----------------------------- */
@media (hover: none) {
  .riq-card:active       { background: var(--bg-overlay); }
  .pm-table-row:active   { background: rgba(255,255,255,0.04); }
  .nav-item:active       { background: rgba(255,255,255,0.06); }
  .dz-loc-option:active  { background: rgba(255,255,255,0.06); }
}

/* =============================================================================
   SETTINGS VIEW
   Added: v2.31.0 - 2026-04-12
============================================================================= */

/* --- Layout --- */

.settings-wrap {
  padding: 28px 32px;
  max-width: 780px;
}

.settings-header {
  margin-bottom: 20px;
}

.settings-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.settings-tab-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.settings-tab-bar::-webkit-scrollbar {
  display: none;
}

.settings-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 10px 16px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.settings-tab:hover {
  color: var(--text-primary);
}

.settings-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.settings-tab-content {
  /* Content rendered by JS */
}

/* --- Section + Card --- */

.settings-section {
  margin-bottom: 28px;
}

.settings-section-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.settings-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

/* --- Fields --- */

.settings-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.settings-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.settings-field-sub {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 3px;
}

.settings-note {
  font-size: 13px;
  color: var(--text-dim);
  margin: 8px 0 0;
}

/* --- Actions row --- */

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

/* --- Confirm bar (inline, not native dialog) --- */

.settings-confirm-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 8px 12px;
}

.settings-confirm-msg {
  font-size: 13px;
  color: var(--text-secondary);
  flex: 1;
}

/* Inline confirm inside a row (notification remove) */

.settings-inline-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* --- Info banner (trial, etc.) --- */

.settings-info-banner {
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid rgba(217, 119, 6, 0.3);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 20px;
}

/* --- Plan display --- */

.settings-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-plan-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.settings-plan-limits {
  font-size: 13px;
  color: var(--text-dim);
}

/* --- Locations --- */

.settings-loc-card {
  margin-bottom: 12px;
}

.settings-loc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.settings-loc-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.settings-loc-meta {
  font-size: 13px;
  color: var(--text-dim);
}

.settings-loc-slug-row {
  font-size: 13px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-slug-link {
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}

.settings-slug-link:hover {
  text-decoration: underline;
}

.settings-dim {
  color: var(--text-dim);
}

/* Edit form spacing */

.settings-loc-edit .form-row {
  margin-bottom: 0;
}

.settings-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

/* Slug section inside edit form */

.settings-slug-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.settings-slug-hint {
  font-size: 12px;
  color: var(--text-dim);
  margin: 4px 0 10px;
}

.settings-slug-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-slug-input {
  flex: 1;
}

.settings-slug-error {
  font-size: 12px;
  color: var(--red);
  margin-top: 6px;
}

/* Add location block */

.settings-add-block {
  margin-top: 12px;
}

.settings-add-form {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 10px;
}

.settings-limit-note {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--bg-raised);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* --- Notifications --- */

.settings-notif-intro {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 24px;
  padding: 12px 16px;
  background: var(--bg-raised);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.settings-recipients-card {
  padding: 0;
  overflow: hidden;
}

.settings-recipient-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

.settings-recipient-row:last-child {
  border-bottom: none;
}

.settings-recipient-row.settings-recipient-inactive {
  opacity: 0.45;
}

/* .settings-recipient-email now inside .settings-recipient-email-wrap above */

.settings-recipient-type-badge {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 2px 7px;
  border-radius: 3px;
  flex-shrink: 0;
}

.settings-recipient-type-to {
  background: rgba(217, 119, 6, 0.15);
  color: var(--accent);
  border: 1px solid rgba(217, 119, 6, 0.3);
}

.settings-recipient-type-cc {
  background: rgba(77, 143, 255, 0.12);
  color: #4d8fff;
  border: 1px solid rgba(77, 143, 255, 0.25);
}

.settings-recipient-type-bcc {
  background: rgba(240, 240, 244, 0.07);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

/* Recipient row layout updates for phone + channel */

.settings-recipient-email-wrap {
  flex: 1;
  min-width: 0;
}

.settings-recipient-email {
  font-size: 14px;
  color: var(--text-primary);
  word-break: break-all;
}

.settings-recipient-phone {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}

.settings-recipient-note {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 2px;
}

.settings-recipient-badges {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

/* Channel badge */

.settings-recipient-channel-badge {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 2px 7px;
  border-radius: 3px;
  flex-shrink: 0;
}

.settings-recipient-channel-email {
  background: rgba(240, 240, 244, 0.07);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

.settings-recipient-channel-sms {
  background: rgba(76, 255, 145, 0.1);
  color: var(--green);
  border: 1px solid rgba(76, 255, 145, 0.25);
}

.settings-recipient-channel-both {
  background: rgba(77, 143, 255, 0.12);
  color: #4d8fff;
  border: 1px solid rgba(77, 143, 255, 0.25);
}

/* Location delete button row */

.settings-loc-btns {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.settings-loc-confirm {
  margin-top: 10px;
}

/* Compliance slug URL display row */

.settings-slug-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.settings-slug-url-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 10px;
  font-family: var(--font-mono, monospace);
}

.settings-slug-url-input:focus {
  outline: none;
  border-color: var(--accent);
}

.settings-slug-url-row .btn {
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
}

/* Slug inline editor row (DZiq pattern) */

.settings-slug-editor-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  width: 100%;
}

.settings-slug-prefix {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.settings-slug-inline-input {
  flex: 1;
  min-width: 0;
  width: 100%;
}

.settings-slug-editor-row .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.settings-slug-msg {
  font-size: 12px;
  margin-top: 2px;
  line-height: 1.4;
}

@media (pointer: coarse) {
  .settings-slug-url-row { flex-direction: column; align-items: stretch; }
  .settings-slug-url-row .btn { min-height: 44px; }
  .settings-slug-editor-row { flex-wrap: wrap; }
  .settings-slug-inline-input { max-width: 100%; }
}

.settings-recipient-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.settings-empty-recipients {
  padding: 16px 20px;
  font-size: 13px;
  color: var(--text-dim);
}

.settings-add-recipient-form .settings-actions {
  margin-top: 12px;
}

/* --- Toast --- */

.settings-toast {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
  animation: settings-toast-in 0.2s ease;
}

.settings-toast-success {
  background: rgba(76, 255, 145, 0.1);
  border: 1px solid rgba(76, 255, 145, 0.25);
  color: var(--green);
}

.settings-toast-error {
  background: rgba(224, 32, 32, 0.1);
  border: 1px solid rgba(224, 32, 32, 0.25);
  color: var(--red);
}

@keyframes settings-toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Loading / error states --- */

.settings-loading,
.settings-error {
  padding: 60px 32px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
}

.settings-error {
  color: var(--red);
}

/* --- Mobile --- */

@media (pointer: coarse) {
  .settings-wrap {
    padding: 20px 16px;
  }

  .settings-tab {
    padding: 10px 12px;
    font-size: 13px;
    min-height: 44px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .settings-field-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-field-row .btn {
    width: 100%;
    min-height: 44px;
  }

  .settings-loc-header {
    flex-direction: column;
  }

  .settings-loc-btns {
    width: 100%;
  }

  .settings-loc-btns .btn {
    flex: 1;
    min-height: 44px;
  }

  .settings-plan-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-form-actions {
    flex-direction: column;
  }

  .settings-form-actions .btn {
    width: 100%;
    min-height: 44px;
  }

  .settings-slug-row {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-slug-row .btn {
    min-height: 44px;
  }

  .settings-recipient-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .settings-recipient-actions {
    width: 100%;
  }

  .settings-recipient-actions .btn {
    flex: 1;
    min-height: 44px;
  }

  .settings-confirm-bar,
  .settings-inline-confirm {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-confirm-bar .btn,
  .settings-inline-confirm .btn {
    width: 100%;
    min-height: 44px;
  }
}


/* -- Team tab ---------------------------------------------------------------- */

.settings-team-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.settings-team-row:last-child {
  border-bottom: none;
}

.settings-team-row-inactive {
  opacity: 0.5;
}

.settings-team-info {
  flex: 1;
  min-width: 0;
}

.settings-team-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-team-email {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-team-badges {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.settings-team-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}

.settings-team-badge-owner {
  background: rgba(217,119,6,0.15);
  color: var(--accent);
}

.settings-team-badge-manager {
  background: rgba(76,255,145,0.1);
  color: var(--green);
}

.settings-team-badge-viewer {
  background: rgba(144,144,168,0.12);
  color: var(--text-secondary);
}

.settings-team-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.settings-team-role-select {
  width: auto;
  min-width: 110px;
  height: 32px;
  font-size: 13px;
  padding: 0 10px;
}

.settings-team-confirm {
  width: 100%;
  margin-top: 8px;
}

.settings-team-limit {
  display: inline-block;
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 400;
  margin-left: 8px;
}

.settings-team-role-hint {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 12px;
}

.settings-team-role-hint strong {
  color: var(--text-secondary);
}

.settings-upgrade-prompt {
  text-align: center;
  padding: 32px 24px;
}

.settings-upgrade-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.settings-upgrade-msg {
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.settings-upgrade-sub {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 20px;
}

@media (pointer: coarse) {
  .settings-team-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .settings-team-actions {
    flex-wrap: wrap;
  }

  .settings-team-actions .btn {
    flex: 1;
    min-height: 44px;
  }

  .settings-team-role-select {
    min-height: 44px;
    font-size: 16px;
    flex: 1;
  }
}

/* -- Support tab ------------------------------------------------------------- */

.settings-support-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.settings-support-icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent);
}

.settings-support-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.settings-support-value {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.settings-support-sub {
  font-size: 12px;
  color: var(--text-dim);
}

.settings-support-result {
  font-size: 13px;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: rgba(76,255,145,0.08);
  border-radius: var(--radius);
}

/* -- Legal modal button ------------------------------------------------------ */

.settings-legal-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 14px;
  font-family: var(--font-ui);
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  touch-action: manipulation;
}

.settings-legal-btn:hover { text-decoration: underline; }

/* -- Sidebar copyright ------------------------------------------------------- */

.sidebar-copyright {
  padding: 8px 16px 4px;
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.5;
  letter-spacing: 0.03em;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}