/* ============================================================
   * Microsoft Fluent 2 design tokens
   * Sprint 1 (2026-05-07): färg, typografi, spacing, radius, skuggor
   * alignade med Fluent UI design language. Ändra här en gång,
   * appliceras överallt via var(--token-name).
   * ============================================================ */
  :root {
    /* Brand (Conrec djup navy — från Grafisk profil 2026) */
    --color-brand: #1D3557;
    --color-brand-hover: #244168;
    --color-brand-pressed: #122440;
    --color-brand-bg-subtle: #f1f4f8;
    --color-brand-bg-strong: #d8dee6;
    --color-brand-fg: #ffffff;
    --color-brand-stroke: #bdc6d3;

    /* Conrec sekundär & accent (komplement till primärblå) */
    --color-brand-secondary: #457B9D;  /* Steel blue — för gradienter, hover, sekundära accenter */
    --color-accent-coral: #E76F51;     /* Korall — highlights, attention, edit-mode */
    --color-accent-coral-hover: #d65a3f;

    /* Neutral foreground */
    --color-fg-1: #242424;
    --color-fg-2: #424242;
    --color-fg-3: #616161;
    --color-fg-4: #707070;
    --color-fg-disabled: #bdbdbd;
    --color-fg-on-accent: #ffffff;

    /* Neutral background */
    --color-canvas: #ebf0f5;  /* Conrec-tonad neutral (var #f5f5f5 — generisk grå) */
    --color-bg-1: #ffffff;
    --color-bg-2: #fafafa;
    --color-bg-3: #f5f5f5;
    --color-bg-subtle-hover: #f3f2f1;

    /* Strokes / borders */
    --color-stroke-1: #d1d1d1;
    --color-stroke-2: #e0e0e0;
    --color-stroke-subtle: #ebebeb;

    /* Semantic — success */
    --color-success: #107c10;
    --color-success-bg: #dff6dd;
    --color-success-fg: #0b5d0b;
    --color-success-stroke: #bbf7d0;

    /* Semantic — warning */
    --color-warning: #f7630c;
    --color-warning-bg: #fff4ce;
    --color-warning-fg: #8a6d3b;
    --color-warning-stroke: #fde68a;
    --color-warning-strong: #d83b01;

    /* Semantic — danger */
    --color-danger: #c50f1f;
    --color-danger-bg: #fde7e9;
    --color-danger-fg: #a4262c;
    --color-danger-stroke: #d13438;

    /* Special accents — admin/integration markers använder Conrec coral */
    --color-purple: #E76F51;        /* Conrec accent coral (var #5c2d91 lila) */
    --color-purple-bg: #FDF1EC;     /* Pale coral tint (var #f3eef9 ljuslila) */
    --color-purple-fg: #8B3C26;     /* Dark coral för text på ljus coral bakgrund */
    --color-purple-stroke: #F4C4B6; /* Medium coral för borders */
    --color-orange: #ffaa44;
    --color-orange-bg: #fff8f3;
    --color-orange-fg: #a85e16;
    --color-orange-stroke: #f4d6c4;

    /* Typography */
    --font-family-base: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'Cascadia Code', 'Cascadia Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
    --font-size-100: 10px;
    --font-size-200: 12px;
    --font-size-300: 14px;
    --font-size-400: 16px;
    --font-size-500: 20px;
    --font-size-600: 24px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.25;
    --line-height-base: 1.4;
    --line-height-loose: 1.5;

    /* Spacing (4px base) */
    --spacing-xxs: 2px;
    --spacing-xs: 4px;
    --spacing-s: 8px;
    --spacing-m: 12px;
    --spacing-l: 16px;
    --spacing-xl: 20px;
    --spacing-xxl: 24px;
    --spacing-xxxl: 32px;

    /* Border radius */
    --radius-s: 2px;
    --radius-m: 4px;
    --radius-l: 6px;
    --radius-xl: 8px;
    --radius-xxl: 12px;
    --radius-circle: 50%;
    --radius-pill: 999px;

    /* Fluent elevation shadows */
    --shadow-2: 0 1px 2px rgba(0,0,0,0.07), 0 0 2px rgba(0,0,0,0.06);
    --shadow-4: 0 2px 4px rgba(0,0,0,0.10), 0 0 2px rgba(0,0,0,0.06);
    --shadow-8: 0 4px 8px rgba(0,0,0,0.12), 0 0 2px rgba(0,0,0,0.07);
    --shadow-16: 0 8px 16px rgba(0,0,0,0.14), 0 0 2px rgba(0,0,0,0.10);
    --shadow-28: 0 14px 28px rgba(0,0,0,0.18), 0 0 8px rgba(0,0,0,0.10);
    --shadow-64: 0 32px 64px rgba(0,0,0,0.24), 0 0 8px rgba(0,0,0,0.18);
    --shadow-brand-rest: 0 1px 2px rgba(0,120,212,0.25);
    --shadow-brand-hover: 0 4px 12px rgba(0,120,212,0.35);

    /* Motion */
    --duration-faster: 100ms;
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
    --easing-default: cubic-bezier(0.33, 0, 0.67, 1);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: var(--font-family-base); font-size: var(--font-size-300); line-height: var(--line-height-base); background: var(--color-canvas); color: var(--color-fg-1); padding: var(--spacing-m) var(--spacing-l); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-brand-secondary) 50%, var(--color-brand) 100%); z-index: 999; pointer-events: none; }
  .header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-l); flex-wrap: wrap; gap: var(--spacing-m); padding-top: var(--spacing-xs); }
  .brand { display: flex; align-items: center; gap: var(--spacing-m); min-width: 0; }
  .brand-logo { height: 36px; width: auto; flex-shrink: 0; user-select: none; -webkit-user-drag: none; }
  .brand h1::before { content: ''; display: inline-block; width: 1px; height: 24px; background: var(--color-stroke-1); margin-right: var(--spacing-m); vertical-align: middle; }
  h1 { font-size: var(--font-size-500); letter-spacing: -0.01em; color: var(--color-fg-1); font-weight: var(--font-weight-semibold); display: inline-flex; align-items: center; }
  h1 .title-suffix { color: var(--color-brand); font-weight: var(--font-weight-semibold); }
  .header-actions { display: flex; gap: var(--spacing-s); align-items: center; flex-wrap: wrap; }
  .graph-status { font-size: var(--font-size-200); padding: 5px var(--spacing-m); border-radius: var(--radius-pill); font-weight: var(--font-weight-semibold); display: inline-flex; align-items: center; gap: 6px; transition: background var(--duration-faster), color var(--duration-faster); }
  .graph-status::before { content: ''; width: 7px; height: 7px; border-radius: var(--radius-circle); background: currentColor; flex-shrink: 0; }
  /* OK = subtle: ingen färgad bakgrund, bara grå text med grön status-prick.
     Logged-in är en passiv 'allt funkar'-signal, behöver inte vara framträdande. */
  .graph-status.ok { background: transparent; color: var(--color-fg-3); font-weight: var(--font-weight-medium); padding: 5px var(--spacing-s); }
  .graph-status.ok::before { background: var(--color-success); width: 8px; height: 8px; }
  .graph-status.ok:hover { background: var(--color-bg-subtle-hover); color: var(--color-fg-1); }
  /* WARN/ERR = synliga: kräver uppmärksamhet (ansluter, login misslyckas) */
  .graph-status.warn { background: var(--color-warning-bg); color: var(--color-warning-fg); }
  .graph-status.err { background: var(--color-danger-bg); color: var(--color-danger-fg); cursor: pointer; }
  .legend { display: flex; gap: var(--spacing-s); margin-bottom: var(--spacing-s); font-size: var(--font-size-200); flex-wrap: wrap; align-items: center; }
  .legend-item { display: inline-flex; align-items: center; gap: 6px; padding: 5px var(--spacing-m); background: var(--color-bg-1); border: 1px solid var(--color-stroke-2); border-radius: var(--radius-pill); font-weight: var(--font-weight-medium); color: var(--color-fg-2); box-shadow: var(--shadow-2); }
  .legend-dot { width: 14px; height: 14px; border-radius: var(--radius-circle); border: 2px solid var(--color-bg-1); box-shadow: 0 0 0 1px #888; }
  .legend-dot.booked-ring { box-shadow: 0 0 0 3px var(--color-danger-stroke); }
  .legend-dot.partly-ring { box-shadow: 0 0 0 3px var(--color-orange); }
  .legend-dot.fully-ring { background: var(--color-danger-stroke) !important; box-shadow: 0 0 0 3px var(--color-danger-fg); }
  .floorplan-section { display: flex; flex-direction: column; flex: 1; min-width: 0; max-width: 1400px; margin: 0 auto; gap: var(--spacing-s); }
  .floorplan-wrapper { position: relative; background: var(--color-bg-1); border-radius: var(--radius-l); box-shadow: var(--shadow-4); border: 1px solid var(--color-stroke-subtle); overflow: hidden; }
  .floorplan-caption { font-size: var(--font-size-200); color: var(--color-fg-3); padding: 0 var(--spacing-xs); text-align: center; }
  .floorplan-caption strong { color: var(--color-brand); font-weight: var(--font-weight-bold); }
  .floorplan-img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
  .marker { position: absolute; transform: translate(-50%, -50%); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: var(--font-weight-semibold); color: var(--color-fg-on-accent); border: 2px solid var(--color-bg-1); box-shadow: var(--shadow-4); transition: transform var(--duration-fast) var(--easing-default), box-shadow var(--duration-fast) var(--easing-default), background-color var(--duration-normal) var(--easing-default); user-select: none; overflow: hidden; }
  .marker:hover { transform: translate(-50%, -50%) scale(1.18); z-index: 10; box-shadow: var(--shadow-16); }
  /* SVG decoration layer — subtle Fluent-style depth without affecting layout.
     pointer-events:none on all decorative children so click/drag still hit
     the parent marker div, not the SVG. */
  .marker-svg-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
  .marker-label { position: relative; z-index: 1; pointer-events: none; }
  .marker.workspace { width: 36px; height: 50px; border-radius: var(--radius-m); }
  .marker.meetingroom { padding: 4px 8px; width: auto; height: auto; min-width: 76px; max-width: 100px; border-radius: var(--radius-l); overflow: hidden; gap: 5px; }
  .marker.meetingroom::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(to bottom, rgba(255,255,255,0.22), rgba(255,255,255,0) 55%); pointer-events: none; z-index: 0; }
  .marker.meetingroom .marker-label { position: relative; top: auto; left: auto; transform: none; background: none; text-shadow: none; box-shadow: none; padding: 0; border-radius: 0; font-size: 10px; font-weight: 600; letter-spacing: 0.01em; color: var(--color-fg-on-accent); white-space: normal; line-height: 1.15; text-align: center; pointer-events: none; cursor: inherit; z-index: 1; }
  .marker .room-icon { width: 11px; height: 11px; flex-shrink: 0; opacity: 0.9; position: relative; z-index: 1; }
  .marker.free { background: var(--color-success); }
  .marker.ownerassigned { background: var(--color-purple); color: var(--color-fg-1); }
  .marker.adminblocked { background: #8a8886; }
  .marker.booked-today { box-shadow: 0 0 0 3px var(--color-danger-stroke), var(--shadow-4); }
  .marker.partly-booked { box-shadow: 0 0 0 3px var(--color-orange), var(--shadow-4); }
  .marker.fully-booked { background: var(--color-danger-stroke) !important; color: var(--color-fg-on-accent) !important; box-shadow: 0 0 0 3px var(--color-danger-fg), var(--shadow-4); }
  .marker.editing { cursor: move; }
  .marker.dragging { opacity: 0.7; transform: translate(-50%, -50%) scale(1.2); z-index: 100; }
  .status { padding: var(--spacing-m) var(--spacing-l); background: var(--color-warning-bg); border: 1px solid var(--color-warning-stroke); border-left: 4px solid var(--color-warning); border-radius: var(--radius-xl); margin-bottom: var(--spacing-l); font-size: var(--font-size-300); }
  .status.error { background: var(--color-danger-bg); border-color: var(--color-danger-stroke); border-left-color: var(--color-danger); }
  .status.ok { background: var(--color-success-bg); border-color: var(--color-success-stroke); border-left-color: var(--color-success); color: var(--color-success-fg); }
  .editbar { background: var(--color-warning-bg); border: 1px solid var(--color-warning-stroke); border-radius: var(--radius-l); padding: var(--spacing-m); margin-bottom: var(--spacing-l); display: flex; gap: var(--spacing-m); align-items: center; flex-wrap: wrap; }
  .editbar button { padding: var(--spacing-s) var(--spacing-l); border: none; border-radius: var(--radius-m); cursor: pointer; font-weight: var(--font-weight-semibold); font-size: var(--font-size-300); }
  .editbar button.primary { background: var(--color-brand); color: var(--color-brand-fg); }
  .editbar button.primary:hover { background: var(--color-brand-hover); }
  .editbar button.primary:disabled { background: var(--color-fg-disabled); cursor: not-allowed; }
  .editbar .info { font-size: var(--font-size-300); color: var(--color-warning-fg); }
  .coord-display { position: absolute; background: rgba(0,0,0,.8); color: var(--color-fg-on-accent); padding: var(--spacing-xs) var(--spacing-s); border-radius: var(--radius-m); font-size: 11px; font-family: var(--font-family-mono); pointer-events: none; z-index: 200; display: none; }

  /* Modal */
  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; align-items: center; justify-content: center; z-index: 1000; padding: var(--spacing-xl); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  .modal-overlay.open { display: flex; animation: modal-overlay-in var(--duration-normal) var(--easing-default); }
  .modal { background: var(--color-bg-1); border-radius: var(--radius-xl); box-shadow: var(--shadow-64); max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; }
  .modal-overlay.open .modal { animation: modal-slide-in var(--duration-normal) cubic-bezier(0.1, 0.9, 0.2, 1); }
  @keyframes modal-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes modal-slide-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  /* Top accent strip — gives modal Fluent dialog feel */
  .modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-brand-secondary) 100%); border-radius: var(--radius-xl) var(--radius-xl) 0 0; pointer-events: none; }
  .modal-header { padding: var(--spacing-xxl) var(--spacing-xxl) var(--spacing-l); border-bottom: 1px solid var(--color-stroke-subtle); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--spacing-m); background: var(--color-brand-bg-subtle); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .modal-header h2 { font-size: var(--font-size-500); margin-bottom: var(--spacing-xs); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
  .modal-header .meta { font-size: var(--font-size-300); color: var(--color-fg-3); }
  .modal-header .source-tag { display: inline-flex; align-items: center; gap: var(--spacing-xs); font-size: 11px; padding: 3px var(--spacing-s); border-radius: var(--radius-pill); background: var(--color-brand-bg-subtle); color: var(--color-brand); margin-top: var(--spacing-s); font-weight: var(--font-weight-semibold); letter-spacing: 0.02em; }
  .modal-header .source-tag.graph { background: var(--color-purple-bg); color: var(--color-purple); }
  .modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--color-fg-3); line-height: 1; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-m); transition: all var(--duration-faster); flex-shrink: 0; }
  .modal-close:hover { color: var(--color-fg-1); background: var(--color-bg-subtle-hover); }
  .modal-close:active { background: var(--color-stroke-2); }
  .modal-close:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
  .modal-body { padding: var(--spacing-xl) var(--spacing-xxl); }
  .form-row { margin-bottom: var(--spacing-l); }
  .form-row label { display: block; font-size: var(--font-size-300); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-xs); color: var(--color-fg-1); }
  .form-row input, .form-row textarea, .form-row select { width: 100%; padding: 11px 14px; border: 1.5px solid var(--color-stroke-1); border-radius: var(--radius-l); font-size: var(--font-size-300); font-family: inherit; color: var(--color-fg-1); background: var(--color-bg-1); transition: border-color var(--duration-faster), box-shadow var(--duration-faster), background var(--duration-faster); }
  .form-row input:hover:not(:focus):not(:disabled), .form-row textarea:hover:not(:focus):not(:disabled), .form-row select:hover:not(:focus):not(:disabled) { border-color: var(--color-brand-secondary); background-color: var(--color-brand-bg-subtle); }
  .form-row input::placeholder, .form-row textarea::placeholder { color: var(--color-fg-4); }
  .form-row input:focus, .form-row textarea:focus, .form-row select:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(29,53,87,0.12); background-color: var(--color-bg-1); }
  .form-row input:disabled, .form-row textarea:disabled, .form-row select:disabled { background: var(--color-bg-2); color: var(--color-fg-disabled); cursor: not-allowed; }
  /* Date input — matchar time-pickerns Conrec-look. Native calendar-popup
     behålls (cross-browser support), men vi byter ut browserns kalender-ikon
     mot vår egen SVG som matchar time-pickerns chevron. */
  .form-row input[type="date"] { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23605e5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 38px; cursor: pointer; }
  .form-row input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; }
  .form-row input[type="date"]:hover:not(:focus):not(:disabled) { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D3557' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>"); }
  /* Custom time picker: HH + MM dropdowns ser ut som ETT input-fält
     (Outlook/Microsoft Bookings-stil) — full Conrec-styling, ingen native picker */
  .time-picker { display: flex; align-items: center; width: 100%; background: var(--color-bg-1); border: 1.5px solid var(--color-stroke-1); border-radius: var(--radius-l); overflow: hidden; transition: border-color var(--duration-faster), box-shadow var(--duration-faster), background var(--duration-faster); }
  .time-picker:hover:not(:focus-within) { border-color: var(--color-brand-secondary); background: var(--color-brand-bg-subtle); }
  .time-picker:focus-within { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(29,53,87,0.12); }
  .form-row .time-picker .time-picker-select { border: none !important; background: transparent !important; padding: 11px 26px 11px 14px !important; appearance: none; -webkit-appearance: none; flex: 1; cursor: pointer; font-size: var(--font-size-300); font-weight: var(--font-weight-semibold); color: var(--color-fg-1); border-radius: 0 !important; box-shadow: none !important; outline: none !important; min-width: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23605e5c' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>") !important; background-repeat: no-repeat !important; background-position: right 8px center !important; background-size: 12px !important; }
  .form-row .time-picker .time-picker-select:hover { border: none !important; background: transparent !important; }
  .form-row .time-picker .time-picker-hh { padding-right: 22px !important; text-align: right; }
  .form-row .time-picker .time-picker-mm { padding-left: 4px !important; }
  .time-picker-sep { color: var(--color-fg-2); font-weight: var(--font-weight-bold); user-select: none; pointer-events: none; padding: 0 2px; }
  .form-row textarea { resize: vertical; min-height: 60px; }
  .checkbox-row { display: flex !important; align-items: center; gap: var(--spacing-s); cursor: pointer; font-weight: normal !important; }
  .checkbox-row input[type="checkbox"] { width: auto !important; margin: 0; }
  .attendee-wrap { position: relative; }
  .attendee-suggestions { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg-1); border: 1px solid var(--color-stroke-1); border-top: none; border-radius: 0 0 var(--radius-m) var(--radius-m); max-height: 180px; overflow-y: auto; z-index: 100; display: none; box-shadow: var(--shadow-8); }
  .attendee-suggestions.open { display: block; }
  .attendee-suggestion { padding: var(--spacing-s) var(--spacing-m); cursor: pointer; font-size: var(--font-size-300); border-bottom: 1px solid var(--color-stroke-subtle); }
  .attendee-suggestion:hover { background: var(--color-bg-subtle-hover); }
  .attendee-suggestion .name { font-weight: var(--font-weight-semibold); }
  .attendee-suggestion .email { color: var(--color-fg-3); font-size: var(--font-size-200); }
  .attendee-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--spacing-s); }
  .attendee-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--color-brand-bg-subtle); border: 1px solid var(--color-brand-stroke); color: var(--color-brand); padding: var(--spacing-xs) var(--spacing-s); border-radius: var(--radius-pill); font-size: var(--font-size-200); font-weight: var(--font-weight-semibold); }
  .attendee-chip .chip-x { cursor: pointer; font-weight: bold; padding: 0 2px; line-height: 1; }
  .attendee-chip .chip-x:hover { color: var(--color-danger-stroke); }
  .owner-panel { background: var(--color-bg-1); border: 1px solid var(--color-stroke-subtle); border-left: 4px solid var(--color-brand); border-radius: var(--radius-l); padding: var(--spacing-l); margin-bottom: var(--spacing-l); box-shadow: var(--shadow-2); }
  .owner-panel-header { font-weight: var(--font-weight-bold); font-size: 15px; margin-bottom: var(--spacing-xs); color: var(--color-brand); display: flex; align-items: center; gap: 6px; }
  .owner-panel-subtext { font-size: var(--font-size-300); color: var(--color-fg-3); margin-bottom: 14px; }
  .owner-release-row { display: flex; gap: var(--spacing-s); margin-bottom: var(--spacing-l); flex-wrap: wrap; }
  .release-range-panel { background: var(--color-bg-2); border: 1px solid var(--color-stroke-subtle); border-left: 4px solid var(--color-purple); border-radius: var(--radius-l); padding: 14px; margin-bottom: var(--spacing-l); }
  .release-range-row { display: flex; gap: var(--spacing-m); margin-bottom: 10px; }
  .release-range-preview { font-size: var(--font-size-300); color: var(--color-fg-1); padding: 10px var(--spacing-m); background: var(--color-bg-1); border: 1px solid var(--color-stroke-subtle); border-radius: var(--radius-m); margin-bottom: var(--spacing-m); min-height: 36px; display: flex; align-items: center; }
  .release-range-preview.has-error { color: var(--color-danger-fg); background: var(--color-danger-bg); border-color: #f0c4c4; }
  .release-range-actions { display: flex; gap: var(--spacing-s); justify-content: flex-end; }
  .btn-release { background: var(--color-brand); color: var(--color-brand-fg); border: none; padding: var(--spacing-s) var(--spacing-l); border-radius: var(--radius-m); font-size: var(--font-size-300); font-weight: var(--font-weight-semibold); cursor: pointer; transition: background var(--duration-faster); }
  .btn-release:hover { background: var(--color-brand-hover); }
  .btn-release:disabled { background: var(--color-fg-disabled); cursor: not-allowed; }
  .btn-release.btn-release-secondary { background: var(--color-bg-1); color: var(--color-purple); border: 1px solid var(--color-purple); }
  .btn-release.btn-release-secondary:hover { background: var(--color-purple-bg); }
  .owner-releases-label { font-size: var(--font-size-200); font-weight: var(--font-weight-bold); color: var(--color-fg-1); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
  .owner-release-item { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-s) var(--spacing-m); background: var(--color-bg-2); border: 1px solid var(--color-stroke-subtle); border-radius: var(--radius-m); margin-bottom: var(--spacing-xs); font-size: var(--font-size-300); color: var(--color-fg-1); }
  .btn-take-back { background: transparent; color: var(--color-danger-stroke); border: 1px solid var(--color-danger-stroke); padding: var(--spacing-xs) 10px; border-radius: var(--radius-m); font-size: var(--font-size-200); font-weight: var(--font-weight-semibold); cursor: pointer; transition: all var(--duration-faster); }
  .btn-take-back:hover { background: var(--color-danger-stroke); color: var(--color-fg-on-accent); }
  .owner-locked { background: var(--color-danger-bg); border: 1px solid var(--color-danger-stroke); color: var(--color-danger-fg); padding: var(--spacing-m); border-radius: var(--radius-l); margin-bottom: var(--spacing-l); font-size: var(--font-size-300); }
  .owner-released { background: var(--color-success-bg); border: 1px solid var(--color-success); color: var(--color-success-fg); padding: var(--spacing-m); border-radius: var(--radius-l); margin-bottom: var(--spacing-l); font-size: var(--font-size-300); }

  /* Main layout: floor plan + sidebar (desktop) */
  .main-layout { display: flex; gap: var(--spacing-l); max-width: 1700px; margin: 0 auto; align-items: flex-start; }
  .main-layout .floorplan-section { flex: 1; min-width: 0; max-width: none; margin: 0; }

  /* Bookings sidebar */
  .bookings-sidebar { flex: 0 0 340px; background: var(--color-bg-1); border-radius: var(--radius-l); box-shadow: var(--shadow-4); border: 1px solid var(--color-stroke-subtle); display: flex; flex-direction: column; max-height: calc(100vh - 200px); position: relative; }
  .bookings-sidebar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-brand-secondary) 100%); border-radius: var(--radius-l) var(--radius-l) 0 0; pointer-events: none; z-index: 1; }
  .sidebar-header { padding: 14px var(--spacing-l); border-bottom: 1px solid var(--color-stroke-subtle); background: var(--color-brand-bg-subtle); border-radius: var(--radius-l) var(--radius-l) 0 0; }
  .sidebar-title { font-size: var(--font-size-400); font-weight: var(--font-weight-semibold); color: var(--color-fg-1); margin-bottom: 10px; }
  .sidebar-title #sidebarDate { color: var(--color-fg-3); font-weight: var(--font-weight-regular); font-size: var(--font-size-300); }
  .sidebar-filters { display: flex; gap: var(--spacing-xs); }
  .sidebar-filter { flex: 1; padding: 6px var(--spacing-s); font-size: var(--font-size-200); font-weight: var(--font-weight-semibold); background: var(--color-bg-subtle-hover); border: 1px solid var(--color-stroke-subtle); border-radius: var(--radius-m); cursor: pointer; color: var(--color-fg-1); transition: background var(--duration-faster); }
  .sidebar-filter:hover { background: var(--color-stroke-2); }
  .sidebar-filter.active { background: var(--color-brand); color: var(--color-brand-fg); border-color: var(--color-brand); }
  .sidebar-list { flex: 1; overflow-y: auto; padding: var(--spacing-s); }
  .sidebar-item { padding: 10px var(--spacing-m); border-radius: var(--radius-l); margin-bottom: 6px; cursor: pointer; border-left: 3px solid var(--color-stroke-1); background: var(--color-bg-2); transition: background var(--duration-faster); }
  .sidebar-item:hover { background: var(--color-bg-subtle-hover); }
  .sidebar-item.is-room { border-left-color: var(--color-brand); }
  .sidebar-item.is-workspace { border-left-color: var(--color-success); }
  .sidebar-item.is-mine { background: var(--color-brand-bg-subtle); }
  .sidebar-item-time { font-weight: var(--font-weight-semibold); font-size: var(--font-size-300); color: var(--color-fg-1); }
  .sidebar-item-title { font-size: var(--font-size-300); color: var(--color-fg-1); margin-top: 2px; font-weight: var(--font-weight-semibold); }
  .sidebar-item-subject { font-size: var(--font-size-200); color: var(--color-fg-3); margin-top: 2px; font-style: italic; }
  .sidebar-item-by { font-size: 11px; color: var(--color-fg-3); margin-top: var(--spacing-xs); }
  .sidebar-item-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
  .sidebar-item-cancel { background: transparent; color: var(--color-danger-stroke); border: 1px solid var(--color-danger-stroke); padding: 3px 10px; border-radius: var(--radius-m); font-size: 11px; font-weight: var(--font-weight-semibold); cursor: pointer; transition: all var(--duration-faster); }
  .sidebar-item-cancel:hover { background: var(--color-danger-stroke); color: var(--color-fg-on-accent); }
  .sidebar-item-cancel:disabled { opacity: 0.5; cursor: not-allowed; }
  .sidebar-empty { color: var(--color-fg-4); font-size: var(--font-size-300); text-align: center; padding: var(--spacing-xxl) var(--spacing-l); font-style: italic; }
  /* Unified empty-state component — icon i mjuk Conrec coral-cirkel + text + hint */
  .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--spacing-xxxl) var(--spacing-l); text-align: center; gap: var(--spacing-s); color: var(--color-fg-3); }
  .empty-state-icon { width: 72px; height: 72px; padding: 18px; background: var(--color-purple-bg); border-radius: var(--radius-circle); color: var(--color-purple); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--color-purple-stroke); }
  .empty-state-icon svg { width: 100%; height: 100%; display: block; stroke-width: 1.6; }
  .empty-state-title { font-size: var(--font-size-400); font-weight: var(--font-weight-semibold); color: var(--color-fg-1); margin-top: var(--spacing-m); }
  .empty-state-hint { font-size: var(--font-size-300); color: var(--color-fg-3); max-width: 280px; line-height: var(--line-height-base); margin-top: 2px; }
  /* Smaller variant — for inline-list empties (in modal etc.) */
  .empty-state-compact { padding: var(--spacing-xl) var(--spacing-m); gap: var(--spacing-xs); }
  .empty-state-compact .empty-state-icon { width: 52px; height: 52px; padding: 13px; }
  .empty-state-compact .empty-state-title { font-size: var(--font-size-300); margin-top: var(--spacing-s); }
  .empty-state-compact .empty-state-hint { font-size: var(--font-size-200); max-width: 220px; }

  /* Date navigator — compact, inline */
  .date-nav { display: inline-flex; align-items: center; gap: 6px; padding: var(--spacing-xs) 6px; background: var(--color-bg-1); border: 1px solid var(--color-stroke-2); border-radius: var(--radius-xl); box-shadow: var(--shadow-2); }
  .date-nav-btn { background: transparent; border: none; border-radius: var(--radius-m); padding: var(--spacing-xs) var(--spacing-s); cursor: pointer; font-size: var(--font-size-300); font-weight: var(--font-weight-semibold); color: var(--color-fg-3); min-width: 28px; line-height: 1; transition: background var(--duration-faster); }
  .date-nav-btn:hover { background: var(--color-bg-subtle-hover); color: var(--color-fg-1); }
  .date-nav-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .date-nav-today { background: var(--color-brand); color: var(--color-brand-fg); padding: var(--spacing-xs) 10px; }
  .date-nav-today:hover { background: var(--color-brand-hover); color: var(--color-brand-fg); }
  .date-nav-input { padding: var(--spacing-xs) 6px; font-size: var(--font-size-300); border: 1px solid var(--color-stroke-subtle); border-radius: var(--radius-m); font-family: inherit; transition: border-color var(--duration-faster), box-shadow var(--duration-faster); cursor: pointer; }
  .date-nav-input:hover:not(:focus) { border-color: var(--color-brand-secondary); }
  .date-nav-input:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 2px rgba(29,53,87,0.12); }
  .date-nav.is-today { border-color: var(--color-success); }
  @media (max-width: 640px) {
    .date-nav { padding: 3px 4px; gap: 4px; }
    .date-nav-input { font-size: 12px; }
  }

  /* Mobile list view - hidden by default, shown on phones via @media below */
  .mobile-list { display: none; max-width: 1400px; margin: 0 auto; }
  .list-group { background: var(--color-bg-1); border-radius: var(--radius-xxl); box-shadow: var(--shadow-8); border: 1px solid var(--color-stroke-subtle); margin-bottom: var(--spacing-m); overflow: hidden; }
  .list-group-header { padding: var(--spacing-m) var(--spacing-l); background: var(--color-bg-subtle-hover); font-weight: var(--font-weight-semibold); font-size: var(--font-size-300); color: var(--color-fg-1); border-bottom: 1px solid var(--color-stroke-subtle); }
  .list-item { display: flex; align-items: center; gap: var(--spacing-m); padding: 14px var(--spacing-l); border-bottom: 1px solid var(--color-stroke-subtle); cursor: pointer; min-height: 56px; transition: background var(--duration-faster); }
  .list-item:last-child { border-bottom: none; }
  .list-item:active { background: var(--color-bg-subtle-hover); }
  .list-dot { flex-shrink: 0; width: 16px; height: 16px; border-radius: var(--radius-circle); border: 2px solid var(--color-bg-1); box-shadow: 0 0 0 1px #888; }
  .list-dot.free { background: var(--color-success); }
  .list-dot.ownerassigned { background: var(--color-orange); }
  .list-dot.adminblocked { background: #888; }
  .list-dot.partly-booked { background: var(--color-orange); box-shadow: 0 0 0 2px var(--color-warning-strong); }
  .list-dot.fully-booked { background: var(--color-danger-stroke); box-shadow: 0 0 0 2px var(--color-danger-fg); }
  .list-dot.booked-today { background: var(--color-success); box-shadow: 0 0 0 2px var(--color-danger-stroke); }
  .list-info { flex: 1; min-width: 0; }
  .list-title { font-weight: var(--font-weight-semibold); font-size: 15px; color: var(--color-fg-1); }
  .list-subtitle { font-size: var(--font-size-200); color: var(--color-fg-3); margin-top: 2px; }
  .list-status { font-size: var(--font-size-200); color: var(--color-fg-3); flex-shrink: 0; text-align: right; max-width: 110px; }
  .list-chevron { color: var(--color-fg-4); font-size: 18px; flex-shrink: 0; }

  /* Mobile responsive - phones and small tablets */
  @media (max-width: 640px) {
    body { padding: var(--spacing-s); }
    /* Compact header — logo + title sida vid sida, mindre allt */
    h1 { font-size: 16px; line-height: var(--line-height-tight); }
    h1 .title-suffix { display: none; }
    .brand { gap: var(--spacing-s); }
    .brand-logo { height: 24px; }
    .brand h1::before { height: 18px; margin-right: var(--spacing-s); }
    .header-row { gap: var(--spacing-s); }
    .header-actions { gap: 6px; flex-wrap: wrap; }
    /* Anslutet/varning: dölj texten, visa bara färgad prick — sparar plats. */
    .graph-status.ok, .graph-status.warn { font-size: 0; padding: 0; width: 10px; height: 10px; min-width: 10px; border-radius: var(--radius-circle); gap: 0; }
    .graph-status.ok::before, .graph-status.warn::before { display: none; }
    /* MEN i err-state (måste logga in): visa fullständig pill med text och 44x44 tap-target.
       Detta är kritiskt — utan inloggning kan användaren inte göra något i appen. */
    .graph-status.err {
      font-size: var(--font-size-300);
      width: auto;
      min-height: 44px;
      padding: 10px var(--spacing-l);
      border-radius: var(--radius-pill);
      gap: 8px;
      box-shadow: var(--shadow-4);
      font-weight: var(--font-weight-semibold);
      animation: graph-status-pulse 2s ease-in-out infinite;
    }
    @keyframes graph-status-pulse {
      0%, 100% { box-shadow: var(--shadow-4); }
      50% { box-shadow: var(--shadow-8), 0 0 0 3px rgba(197, 15, 31, 0.15); }
    }
    /* Compact primary button */
    .header-actions .btn.primary { padding: 7px var(--spacing-m); font-size: var(--font-size-300); }
    .legend { gap: var(--spacing-s); font-size: 11px; }
    .modal-overlay { padding: 0; align-items: stretch; backdrop-filter: none; }
    .modal { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; display: flex; flex-direction: column; }
    .modal-body { flex: 1; overflow-y: auto; padding: var(--spacing-l); -webkit-overflow-scrolling: touch; }
    .modal-header { padding: 14px var(--spacing-l); }
    .modal-footer { padding: var(--spacing-m) var(--spacing-l); position: sticky; bottom: 0; background: var(--color-bg-1); border-top: 1px solid var(--color-stroke-subtle); }
    /* Make time/date inputs comfortable on touch */
    input[type="time"], input[type="date"] { font-size: var(--font-size-400); padding: 10px var(--spacing-m); min-height: 44px; }
    .form-row input[type="date"] { padding-right: 42px; background-size: 18px; }
    .time-row { flex-direction: column; gap: var(--spacing-m); }
    .time-row .form-row { margin-bottom: 0; }
    .marker.workspace { width: 28px; height: 40px; font-size: 9px; }
    .marker.meetingroom { width: auto; height: auto; padding: 3px 6px; min-width: 58px; max-width: 80px; }
    .marker.meetingroom .marker-label { font-size: 9px; }
    .marker .room-icon { width: 9px; height: 9px; }
    .floorplan-section { display: none; }
    .main-layout { display: block; }
    .bookings-sidebar { display: none; }
    .mobile-list { display: block; }
    .legend { display: none; }
    .my-booking-card { padding: 10px; }
    .booking-item-row { flex-direction: column; align-items: flex-start; }
    .btn-cancel { align-self: flex-end; margin-top: var(--spacing-xs); }
    .owner-release-row { flex-direction: column; align-items: stretch; }
    .btn-release { width: 100%; padding: 10px; }
    /* Status banner takes a lot of vertical space on small screens */
    .status { padding: var(--spacing-s) 10px; font-size: var(--font-size-300); }
  }

  /* Touch-friendly tap targets on touch devices */
  @media (hover: none) {
    .marker { transition: none; }
    .marker:active { transform: translate(-50%, -50%) scale(1.2); }
    button { min-height: 36px; }
  }
  .time-row { display: flex; gap: var(--spacing-m); }
  .time-row .form-row { flex: 1; margin-bottom: 0; }

  /* Quick presets for time selection */
  .time-presets { display: flex; align-items: center; gap: var(--spacing-s); margin-top: var(--spacing-xs); margin-bottom: 18px; flex-wrap: wrap; }
  .time-presets-label { font-size: var(--font-size-200); color: var(--color-fg-3); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.5px; margin-right: var(--spacing-xs); }
  .time-preset-btn { background: var(--color-bg-1); border: 1px solid var(--color-stroke-1); border-radius: var(--radius-pill); padding: 7px 14px; cursor: pointer; font-size: var(--font-size-300); font-weight: var(--font-weight-medium); color: var(--color-fg-1); transition: all var(--duration-faster); }
  .time-preset-btn:hover { background: var(--color-bg-subtle-hover); border-color: var(--color-brand); color: var(--color-brand); }
  .time-preset-btn.active { background: var(--color-brand); color: var(--color-brand-fg); border-color: var(--color-brand); font-weight: var(--font-weight-semibold); }
  .time-preset-btn.active:hover { background: var(--color-brand-hover); color: var(--color-brand-fg); }

  /* Admin-blocked desk panel (replaces booking form when Status=AdminBlocked) */
  .admin-block-panel { background: var(--color-bg-2); border: 1px solid var(--color-stroke-subtle); border-radius: var(--radius-xl); padding: 28px var(--spacing-xxl); text-align: center; margin-bottom: var(--spacing-l); }
  .admin-block-icon { font-size: 36px; margin-bottom: var(--spacing-s); line-height: 1; }
  .admin-block-title { font-size: 18px; font-weight: var(--font-weight-semibold); color: var(--color-fg-1); margin-bottom: var(--spacing-s); }
  .admin-block-reason { font-size: var(--font-size-300); color: var(--color-fg-3); margin-bottom: var(--spacing-l); line-height: var(--line-height-base); min-height: 18px; white-space: pre-wrap; }
  /* "Blockera"-knappen i footer — varnande röd ton, kompakt */
  .btn.admin-block-btn { background: var(--color-bg-1); color: var(--color-danger-fg); border: 1px solid var(--color-danger-stroke); margin-right: auto; }
  .btn.admin-block-btn:hover { background: var(--color-danger-bg); }

  /* Recurring bookings section (Phase 3A) */
  .recurrence-section { background: var(--color-bg-2); border: 1px solid var(--color-stroke-subtle); border-radius: var(--radius-l); padding: var(--spacing-m); margin-bottom: var(--spacing-l); }
  .recurrence-toggle { display: flex; align-items: center; gap: var(--spacing-s); cursor: pointer; font-size: var(--font-size-300); font-weight: var(--font-weight-semibold); color: var(--color-fg-1); }
  .recurrence-toggle input { width: 16px; height: 16px; cursor: pointer; }
  .recurrence-options { margin-top: var(--spacing-m); display: none; }
  .recurrence-options.is-visible { display: block; }
  .recurrence-row { display: flex; gap: var(--spacing-m); align-items: flex-end; margin-bottom: 10px; }
  .recurrence-row .form-row { flex: 1; margin-bottom: 0; }
  .weekday-picker { display: flex; gap: 6px; flex-wrap: wrap; }
  .weekday-btn { flex: 1; min-width: 44px; padding: var(--spacing-s) var(--spacing-xs); border: 1px solid var(--color-stroke-1); background: var(--color-bg-1); color: var(--color-fg-1); border-radius: var(--radius-m); cursor: pointer; font-size: var(--font-size-300); font-weight: var(--font-weight-semibold); transition: all var(--duration-faster); }
  .weekday-btn:hover { background: var(--color-bg-subtle-hover); }
  .weekday-btn.active { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-brand-fg); }
  .recurrence-preview { background: var(--color-bg-1); border: 1px solid var(--color-stroke-subtle); border-radius: var(--radius-m); padding: var(--spacing-s) var(--spacing-m); font-size: var(--font-size-200); color: var(--color-fg-3); max-height: 120px; overflow-y: auto; }
  .recurrence-preview-empty { color: var(--color-fg-4); font-style: italic; }
  .recurrence-blocked-notice { background: var(--color-danger-bg); border: 1px solid var(--color-danger-stroke); color: var(--color-danger-fg); padding: 10px var(--spacing-m); border-radius: var(--radius-l); font-size: var(--font-size-300); margin-bottom: var(--spacing-l); display: none; }
  .bookings-list { background: var(--color-bg-2); border: 1px solid var(--color-stroke-subtle); border-radius: var(--radius-m); padding: var(--spacing-s); font-size: var(--font-size-300); max-height: 140px; overflow-y: auto; }
  .bookings-list .empty { color: var(--color-fg-3); padding: var(--spacing-s); text-align: center; }
  .booking-item { padding: 6px var(--spacing-s); border-bottom: 1px solid var(--color-stroke-subtle); }
  .booking-item:last-child { border-bottom: none; }
  .booking-item .time { font-weight: var(--font-weight-semibold); }
  .booking-item .by { color: var(--color-fg-3); }
  .booking-item.mine { background: var(--color-brand-bg-subtle); border-left: 3px solid var(--color-brand); padding-left: var(--spacing-s); }
  /* Konflikterande bokning: subtil markering i listan. Behöver inte skrika
     röd bakgrund eftersom bannern ovanför redan kommunicerar problemet —
     här räcker en lugn left-border + dämpad text. */
  .booking-item.conflict { background: transparent; border-left: 3px solid var(--color-danger-stroke); padding-left: var(--spacing-s); }
  .booking-item.conflict .time { color: var(--color-danger-fg); font-weight: var(--font-weight-semibold); }
  .booking-item.conflict .by { color: var(--color-fg-2); }
  /* Hard conflict-banner ovanför bokningslistan — andras bokning krockar.
     OBS: .banner-text-wraps texten så att <strong> inuti inte blir ett eget
     flex-item (vilket annars splittrar raden i flera kolumner). */
  .hard-conflict-banner { background: var(--color-danger-bg); border-left: 4px solid var(--color-danger); color: var(--color-danger-fg); padding: var(--spacing-m); border-radius: var(--radius-m); margin-bottom: var(--spacing-s); display: flex; align-items: flex-start; gap: var(--spacing-s); font-size: var(--font-size-300); line-height: var(--line-height-base); }
  .hard-conflict-banner::before { content: '⚠'; font-size: 16px; line-height: 1.4; flex-shrink: 0; }
  .hard-conflict-banner .banner-text { flex: 1; min-width: 0; }
  .hard-conflict-banner strong { font-weight: var(--font-weight-semibold); }
  /* Self-conflict-variant — din egen bokning krockar (informativt, inte fientligt) */
  .hard-conflict-banner.self-conflict { background: var(--color-brand-bg-subtle); border-left: 4px solid var(--color-brand); color: var(--color-brand); }
  .hard-conflict-banner.self-conflict::before { content: 'ℹ'; color: var(--color-brand); font-weight: var(--font-weight-bold); }
  /* Fast plats-påminnelse: informativ, mjuk gul ton */
  .fast-plats-hint { background: var(--color-purple-bg); border: 1px solid var(--color-purple-stroke); border-left: 4px solid var(--color-purple); color: var(--color-purple-fg); padding: var(--spacing-m); border-radius: var(--radius-m); margin-bottom: var(--spacing-l); display: flex; align-items: flex-start; gap: var(--spacing-s); font-size: var(--font-size-300); line-height: var(--line-height-base); }
  .fast-plats-hint::before { content: '💺'; font-size: 16px; line-height: 1.2; flex-shrink: 0; }
  .fast-plats-hint strong { font-weight: var(--font-weight-bold); }
  .booking-item-row { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-s); }
  .btn-cancel { background: var(--color-danger-stroke); color: var(--color-fg-on-accent); border: none; padding: var(--spacing-xs) 10px; border-radius: var(--radius-m); font-size: var(--font-size-200); cursor: pointer; font-weight: var(--font-weight-semibold); transition: background var(--duration-faster); }
  .btn-cancel:hover { background: var(--color-danger-fg); }
  .btn-cancel:disabled { background: var(--color-fg-disabled); cursor: not-allowed; }
  .my-bookings-list { display: flex; flex-direction: column; gap: var(--spacing-s); }
  .my-booking-card { padding: var(--spacing-m); border: 1px solid var(--color-stroke-subtle); border-radius: var(--radius-l); background: var(--color-bg-2); transition: box-shadow var(--duration-faster); }
  .my-booking-card:hover { box-shadow: var(--shadow-2); }
  .my-booking-card .resource { font-weight: var(--font-weight-semibold); font-size: 15px; margin-bottom: var(--spacing-xs); }
  .my-booking-card .when { font-size: var(--font-size-300); color: var(--color-fg-1); margin-bottom: var(--spacing-xs); }
  .my-booking-card .src-tag { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--color-brand-bg-subtle); color: var(--color-brand); margin-left: 6px; font-weight: var(--font-weight-semibold); vertical-align: middle; }
  .my-booking-card .src-tag.graph { background: var(--color-purple-bg); color: var(--color-purple); }
  .my-booking-card .note { font-size: var(--font-size-200); color: var(--color-fg-3); font-style: italic; margin-bottom: var(--spacing-s); }
  .my-booking-card .actions { display: flex; justify-content: flex-end; }
  .my-fastplats-section { margin-bottom: var(--spacing-l); }
  .my-fastplats-section .section-title { font-size: var(--font-size-200); font-weight: var(--font-weight-semibold); color: var(--color-fg-3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--spacing-s); }
  .my-fastplats-card { padding: var(--spacing-m); border: 1px solid var(--color-purple-stroke); border-radius: var(--radius-l); background: var(--color-purple-bg); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-m); transition: box-shadow var(--duration-faster); }
  .my-fastplats-card:hover { box-shadow: var(--shadow-2); }
  .my-fastplats-card .info { flex: 1; min-width: 0; }
  .my-fastplats-card .resource { font-weight: var(--font-weight-semibold); font-size: 15px; margin-bottom: 2px; color: var(--color-fg-1); }
  .my-fastplats-card .src-tag { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--color-purple-stroke); color: var(--color-purple-fg); margin-left: 6px; font-weight: var(--font-weight-semibold); vertical-align: middle; }
  .my-fastplats-card .desc { font-size: var(--font-size-200); color: var(--color-fg-3); }
  .my-fastplats-card .btn-manage { background: var(--color-bg-1); border: 1px solid var(--color-stroke-1); color: var(--color-fg-1); padding: 6px var(--spacing-m); border-radius: var(--radius-m); font-weight: var(--font-weight-semibold); font-size: var(--font-size-300); cursor: pointer; white-space: nowrap; transition: background var(--duration-faster); }
  .my-fastplats-card .btn-manage:hover { background: var(--color-bg-subtle-hover); }
  .my-bookings-section-title { font-size: var(--font-size-200); font-weight: var(--font-weight-semibold); color: var(--color-fg-3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--spacing-s); }
  .modal-footer { padding: var(--spacing-l) var(--spacing-xxl); border-top: 1px solid var(--color-stroke-subtle); display: flex; gap: var(--spacing-m); justify-content: flex-end; }
  .btn { padding: 9px var(--spacing-xl); border: none; border-radius: var(--radius-m); cursor: pointer; font-size: var(--font-size-300); font-weight: var(--font-weight-semibold); transition: all var(--duration-fast) var(--easing-default); display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-s); line-height: var(--line-height-tight); }
  .btn:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
  .btn.primary { background: var(--color-brand); color: var(--color-brand-fg); box-shadow: var(--shadow-brand-rest); }
  .btn.primary:hover { background: var(--color-brand-hover); box-shadow: var(--shadow-brand-hover); }
  .btn.primary:active { background: var(--color-brand-pressed); box-shadow: var(--shadow-brand-rest); transform: scale(0.98); }
  .btn.primary:disabled { background: var(--color-fg-disabled); cursor: not-allowed; box-shadow: none; transform: none; }
  .btn.secondary { background: var(--color-bg-1); color: var(--color-fg-1); border: 1px solid var(--color-stroke-1); }
  .btn.secondary:hover { background: var(--color-bg-subtle-hover); border-color: var(--color-fg-3); }
  .btn.secondary:active { background: var(--color-stroke-2); }
  /* Fluent MessageBar style — error/success banners */
  .form-error { color: var(--color-danger-fg); font-size: var(--font-size-300); padding: var(--spacing-m) var(--spacing-m); background: var(--color-danger-bg); border-radius: var(--radius-m); margin-bottom: var(--spacing-m); border-left: 3px solid var(--color-danger-stroke); display: flex; align-items: flex-start; gap: var(--spacing-s); line-height: var(--line-height-base); }
  .form-error::before { content: '⚠'; font-size: 16px; line-height: 1.2; flex-shrink: 0; }
  .form-success { color: var(--color-success-fg); font-size: var(--font-size-300); padding: var(--spacing-m) var(--spacing-m); background: var(--color-success-bg); border-radius: var(--radius-m); margin-bottom: var(--spacing-m); border-left: 3px solid var(--color-success); display: flex; align-items: flex-start; gap: var(--spacing-s); line-height: var(--line-height-base); }
  .form-success::before { content: '✓'; font-size: 16px; font-weight: var(--font-weight-bold); line-height: 1.2; flex-shrink: 0; }

  /* Soft conflict warning — inline in modal, not browser popup */
  .soft-conflict-warning { background: var(--color-bg-1); border: 1px solid var(--color-stroke-subtle); border-left: 4px solid var(--color-orange); padding: var(--spacing-m) 14px; border-radius: var(--radius-l); margin-bottom: var(--spacing-l); display: flex; align-items: flex-start; gap: 10px; box-shadow: var(--shadow-2); }
  .soft-conflict-warning-icon { font-size: var(--font-size-500); flex-shrink: 0; line-height: 1; }
  .soft-conflict-warning-text { font-size: var(--font-size-300); color: var(--color-fg-1); line-height: 1.45; }
  .soft-conflict-warning-text strong { font-weight: var(--font-weight-bold); color: var(--color-warning-strong); display: block; margin-bottom: 2px; }

  /* Toast — transient feedback för operationer som händer utanför modal-
     kontext. Slidar in nerifrån, försvinner automatiskt efter ~4 sek.
     Ersätter blockerande native alert() för success/error utan att kräva
     användaren klicka bort den. */
  .toast-container {
    position: fixed;
    bottom: var(--spacing-xl, 20px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s, 8px);
    pointer-events: none;
  }
  .toast {
    background: var(--color-brand, #1D3557);  /* Conrec navy för default-info-toast */
    color: #fff;
    padding: var(--spacing-m, 12px) var(--spacing-l, 16px);
    border-radius: var(--radius-m, 6px);
    box-shadow: var(--shadow-8, 0 8px 24px rgba(0,0,0,.18));
    font-size: var(--font-size-300, 14px);
    line-height: var(--line-height-base, 1.45);
    min-width: 280px;
    max-width: 480px;
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-s, 8px);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  }
  .toast.is-visible { opacity: 1; transform: translateY(0); }
  .toast.success { background: var(--color-success-fg, #0e6027); }
  .toast.error { background: var(--color-danger-fg, #a4262c); }
  .toast::before {
    content: 'ℹ';
    font-weight: var(--font-weight-bold, 600);
    flex-shrink: 0;
  }
  .toast.success::before { content: '✓'; }
  .toast.error::before { content: '⚠'; }