/* ════════════════════════════════════════════════════════════════════════
 * natson-chrome.css — shared NatsonOps dashboard chrome
 * ────────────────────────────────────────────────────────────────────────
 * One source of truth for the design tokens, the top header, and the
 * sign-in / loading overlays (the "initial load screen") — so every dashboard
 * looks identical. Load FIRST in <head>, before any page-specific <style>:
 *   <link rel="stylesheet" href="/assets/natson-chrome.css">
 *
 * Canonical markup (mirror this per page):
 *   <div id="loginOverlay" class="overlay dark">
 *     <div class="login-card">
 *       <div class="brand-mark">Natson Hotels</div>
 *       <h2>{Dashboard Name}</h2>
 *       <p>Sign in with your Natson Hotels account.</p>
 *       <button class="login-btn" onclick="loginUser()">Sign in</button>
 *     </div>
 *   </div>
 *   <div id="authLoadingOverlay" class="overlay dark">
 *     <div style="text-align:center"><div class="spinner"></div>
 *       <div id="authLoadingMsg" style="font-size:13px;color:var(--text-secondary)">Loading…</div></div>
 *   </div>
 *   <a href="/" class="back-link"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg> Back to Dashboard</a>
 *   <div class="header">
 *     <div><div class="brand-mark">Natson Hotels</div><h1>{Dashboard Name}</h1><p>{optional subtitle}</p></div>
 *     <div class="header-right">
 *       <span class="role-pill" id="roleIndicator"></span>
 *       <button class="user-badge" id="userBadge" onclick="signOutUser()"></button>
 *     </div>
 *   </div>
 * ════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#F7F7F5;--bg-card:#FFFFFF;--bg-elev:#FAFAF8;--bg-hover:#F1F0EC;
  --text:#1F1F1C;--text-secondary:#6B6B68;--text-tertiary:#9C9C99;
  --border:#E5E4DE;--border-strong:#D4D2CB;--accent:#1F1F1C;--accent-fg:#FFFFFF;
  --brand:#1B3A6B;--brand-soft:#E8EEF6;--danger:#A32D2D;--warn:#BA7517;--ok:#3B6D11;--info:#1F4E8C;
  --radius-sm:4px;--radius-md:6px;--radius-lg:10px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);--shadow-md:0 4px 12px rgba(0,0,0,.08);--shadow-lg:0 12px 32px rgba(0,0,0,.12);
  --font:'DM Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

/* Base */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);font-size:14px;color:var(--text);background:var(--bg);line-height:1.45;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}

/* Top header */
.header{display:flex;align-items:flex-start;justify-content:space-between;padding:22px 0 18px;border-bottom:1px solid var(--border);margin-bottom:20px;gap:16px;flex-wrap:wrap}
/* Brand mark = the home link (replaces the old "Back to Dashboard" breadcrumb).
   The leading chevron is a subtle "back to dashboards" affordance. */
.brand-mark{position:relative;display:inline-block;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brand);margin-bottom:6px;text-decoration:none;line-height:1.1}
/* Chevron hangs in the left margin so the "N" stays flush with the page title. */
.brand-mark svg{position:absolute;left:-15px;top:50%;transform:translateY(-50%);width:11px;height:11px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
a.brand-mark:hover{color:#16305A}
a.brand-mark:hover svg{transform:translate(-3px,-50%)}
.header h1{font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.header p{font-size:13px;color:var(--text-secondary);margin-top:4px}
.header-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
/* Identity block — two lines: name (bold), then "Role · Sign out". Not a button. */
.user-info{display:flex;flex-direction:column;align-items:flex-end;text-align:right;line-height:1.35;margin-left:12px}
.user-info .user-name{font-size:13px;font-weight:600;color:var(--text)}
.user-info .user-meta{font-size:12px;color:var(--text-secondary)}
.user-info .signout-link{font:inherit;font-size:12px;color:var(--text-tertiary);background:none;border:none;padding:0;cursor:pointer}
.user-info .signout-link:hover{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.meta-badge{font-size:11px;color:var(--text-tertiary);font-family:var(--mono);padding:5px 9px;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-md);white-space:nowrap}

/* Initial load screen — sign-in + loading overlays */
.overlay{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center}
.overlay.dark{background:var(--bg)}
.overlay.mid{background:rgba(31,31,28,.45)}
.login-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:30px;max-width:440px;width:92%;text-align:center}
.login-card h2{font-size:19px;font-weight:600;margin:0 0 6px;letter-spacing:-.01em}
.login-card p{font-size:13px;color:var(--text-secondary);margin:0 0 22px}
.login-btn{background:var(--accent);color:var(--accent-fg);border:none;border-radius:var(--radius-md);padding:11px 24px;font:inherit;font-size:14px;font-weight:500;cursor:pointer;width:100%}
.login-btn:hover{opacity:.9}
.spinner{width:28px;height:28px;border:2.5px solid rgba(31,31,28,.15);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 14px}
@keyframes spin{to{transform:rotate(360deg)}}
