/**
 * Nearly Perfect Extranet — Branded Desktop App Shell (TECH-773)
 *
 * Service-specific shell layer for rms-app-extranet. Loaded LAST (after
 * styles.css + the vendored np-*.css), so it wins the cascade.
 *
 * Two jobs:
 *   1. Remap the legacy dark-theme `:root` tokens that styles.css uses for
 *      the shell onto brand warm/light values. This flips the whole shell
 *      (header / sidebar / footer / canvas) from the old dark theme to the
 *      Nearly Perfect light theme, while keeping content readable
 *      (dark text on a warm canvas).
 *   2. Add brand polish the token remap can't express on its own: indigo
 *      active nav, SVG nav icons, Geist page titles, branded announcement
 *      banners, intl-tel-input overrides.
 *
 * Scope: SHELL ONLY. Page-body component styling (cards, tables, forms,
 * buttons, badges) is handled by the component bridge in TECH-774.
 * styles.css is intentionally left untouched.
 *
 * Layout invariants preserved: 260px sidebar, 64px header, fixed positioning.
 */

/* ============================================================
 * 1. TOKEN REMAP — legacy dark theme -> brand warm/light theme
 * styles.css reads these custom properties; redefining them here
 * (later in the cascade) rebrands every rule that references them.
 * ============================================================ */
:root {
  /* Brand anchors */
  --color-primary:        var(--color-indigo-700);
  --color-secondary:      var(--color-indigo-900);
  --color-accent:         var(--color-indigo-500);
  --color-accent-light:   var(--color-indigo-400);

  /* Surfaces & canvas (never pure white as the page canvas) */
  --color-bg:             var(--color-warm-100);   /* app canvas */
  --color-surface:        #FFFFFF;                 /* header / sidebar / cards */
  --color-surface-hover:  var(--color-neutral-100);

  /* Text */
  --color-text:           var(--color-neutral-900);
  --color-text-muted:     var(--color-neutral-600);

  /* Lines */
  --color-border:         var(--color-neutral-200);

  /* Semantic */
  --color-success:        var(--color-mint-600);
  --color-warning:        var(--color-coral-500);
  --color-error:          var(--color-coral-600);

  /* Typography — UI text is Inter */
  --font-sans:            var(--font-body);

  /* Softer shadows tuned for a light surface */
  --shadow-sm: 0 1px 2px rgba(29, 41, 57, 0.06);
  --shadow-md: 0 4px 12px rgba(29, 41, 57, 0.08);
  --shadow-lg: 0 12px 28px rgba(29, 41, 57, 0.12);
}

/* ============================================================
 * 2. CANVAS
 * ============================================================ */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

/* ============================================================
 * 3. HEADER
 * ============================================================ */
.header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.header-logo-img {
  height: 30px;
}

/* Property selector / help / user toggle pills */
.dropdown-toggle,
.property-display {
  border-radius: var(--np-radius-sm, 12px);
  border-color: var(--color-border);
  color: var(--color-text);
  background: var(--color-surface);
}

.dropdown-toggle:hover,
.property-display:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-neutral-300);
}

.header-help-link {
  border-radius: var(--np-radius-sm, 12px);
}

.dropdown-menu {
  border-radius: var(--np-radius-sm, 12px);
  border-color: var(--color-border);
  box-shadow: var(--shadow-lg);
}

.dropdown-item.active {
  color: var(--color-indigo-500);
  font-weight: 600;
}

/* User avatar — indigo chip with white initials */
.user-avatar {
  background: var(--color-indigo-500);
  color: #FFFFFF;
}

/* ============================================================
 * 4. SIDEBAR
 * ============================================================ */
.sidebar {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
}

.sidebar .nav-link {
  color: var(--color-neutral-700);
  font-weight: 500;
  border-radius: var(--np-radius-sm, 12px);
}

.sidebar .nav-link:hover {
  color: var(--color-neutral-900);
  background: var(--color-neutral-100);
}

/* Active item — indigo accent (tinted bg + indigo text + left rail) */
.sidebar .nav-link.active {
  color: var(--color-indigo-500);
  background: var(--color-indigo-50);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--color-indigo-500);
}

/* SVG icons via mask so they inherit nav-link color (incl. active indigo).
 * The emoji is removed from markup; each span sets --np-icon inline. */
.nav-icon,
.property-icon {
  display: inline-block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--np-icon) center / contain no-repeat;
  mask: var(--np-icon) center / contain no-repeat;
}

.nav-icon {
  width: 20px;
  height: 20px;
}

.property-icon {
  width: 18px;
  height: 18px;
  vertical-align: -0.2em;
}

.nav-section-divider {
  background: var(--color-border);
}

/* ============================================================
 * 5. MAIN CONTENT
 * ============================================================ */
.content-container {
  max-width: 1280px;
}

/* ============================================================
 * 6. FOOTER
 * ============================================================ */
.footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.footer-version {
  color: var(--color-neutral-500);
}

/* ============================================================
 * 7. PAGE HEADER — Geist semibold, indigo title
 * ============================================================ */
.page-title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-indigo-500);
  letter-spacing: var(--letter-spacing-tight, -0.02em);
}

.page-subtitle {
  color: var(--color-text-muted);
}

/* ============================================================
 * 8. ANNOUNCEMENT BANNERS — branded per type (light theme)
 * Legacy rules were light-on-dark; rewrite for the warm canvas.
 * ============================================================ */
.announcement-banner {
  border-bottom: 1px solid var(--color-border);
}

.announcement-banner--info {
  background-color: var(--color-periwinkle-100);
  color: var(--color-periwinkle-800);
  border-left: 3px solid var(--color-periwinkle-500);
}

.announcement-banner--warning {
  background-color: var(--color-coral-50);
  color: var(--color-coral-800);
  border-left: 3px solid var(--color-coral-500);
}

.announcement-banner--urgent {
  background-color: var(--color-coral-100);
  color: var(--color-coral-900);
  border-left: 3px solid var(--color-coral-600);
}

/* ============================================================
 * 9. intl-tel-input OVERRIDE LAYER
 * Align the CDN widget with the brand on the light canvas.
 * ============================================================ */
.iti__country-list {
  border-radius: var(--np-radius-sm, 12px);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
}

.iti__country.iti__highlight {
  background-color: var(--color-indigo-50);
}

.iti__selected-flag:hover,
.iti__selected-flag:focus {
  background-color: var(--color-surface-hover);
}

/* ============================================================
 * 10. AUTH SHELL polish (login / signup / etc.)
 * Token remap already lights these up; add brand radius/shadow.
 * ============================================================ */
.auth-container {
  border-radius: var(--np-radius, 16px);
  box-shadow: var(--shadow-md);
}

/* ------------------------------------------------------------
 * NP availability window rows (TECH-878)
 * Each window (from / to / no-end) is its own section, separated by a divider
 * from sibling windows and from the "Add date window" button. Shared by the
 * room form and the room-list "Designate NP" dialog.
 * ------------------------------------------------------------ */
.np-window-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-neutral-200);
}
.np-window-add {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-neutral-200);
}