/* The six products. Each one is a different application on the screen: its own palette, type, chrome and layout. */

/* ---------------------------------------------------------------------------
   Tyler Technologies: New World Enterprise CAD. A Windows desktop application:
   light grey work surface, blue-grey title bars, dense grids, Tahoma, a
   command line pinned to the bottom. The county sheriffs' screens.
--------------------------------------------------------------------------- */
.theme-tyler {
  --bg: #d9dde3; --panel: #f4f5f7; --panel-2: #e6e9ee; --line: #a9b1bd; --fg: #1a1f26; --fg-dim: #5a6472; --accent: #1e5aa8;
  --font: Tahoma, 'Segoe UI', Arial, sans-serif; --mono: Consolas, 'Lucida Console', monospace; --radius: 0; --size: 12px;
  --title-bg: linear-gradient(#5b7aa6, #3c5a86); --title-fg: #fff; --row-hover: rgba(30,90,168,.08); --sel: #cfe0f7;
}
.theme-tyler .pane { box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #b7bec9; }
.theme-tyler .pane > .title { text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.theme-tyler .menubar { background: #eef0f3; border-bottom: 1px solid #b7bec9; padding: 2px 6px; display: flex; gap: 14px; font-size: 12px; }
.theme-tyler .menubar span { padding: 2px 4px; }
.theme-tyler .menubar span:first-letter { text-decoration: underline; }
.theme-tyler .titlebar { background: linear-gradient(#3d6db3, #234b86); color: #fff; padding: 4px 10px; font-weight: 700; font-size: 12px; display: flex; justify-content: space-between; letter-spacing: .02em; }
.theme-tyler .toolbar { background: #e6e9ee; border-bottom: 1px solid #b7bec9; padding: 3px 6px; display: flex; gap: 4px; }
.theme-tyler .toolbar button { background: #f6f7f9; border: 1px solid #b7bec9; padding: 2px 8px; font-size: 11px; }
.theme-tyler table.grid th { background: #dfe3e9; border-right: 1px solid #c6ccd5; }
.theme-tyler table.grid td { border-bottom: 1px solid #e3e6eb; border-right: 1px solid #edf0f3; }
.theme-tyler .workspace { grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "queue units detail" "queue side detail"; }
.theme-tyler .cmd { background: #1b1f26; color: #d5e2f5; }
.theme-tyler .cmd .prompt { color: #9ec3ff; }
.theme-tyler .cmd input { background: #0f1218; color: #d5e2f5; border-color: #3a4350; }
.theme-tyler .cmd-out { background: #14181f; color: #9db4d6; }
.theme-tyler .statusbar { background: #dfe3e9; }
.theme-tyler .toast { background: #fff; color: #1a1f26; }
.theme-tyler .modal { background: #f4f5f7; }
.theme-tyler .gate-card { background: #fff; color: #1a1f26; }

/* ---------------------------------------------------------------------------
   Motorola Solutions: PremierOne CAD. Dark navy, cyan accents, a ribbon of
   tabs, incident queues on the left and the unit monitor on the right. LSPD.
--------------------------------------------------------------------------- */
.theme-premierone {
  --bg: #0b1320; --panel: #111c2d; --panel-2: #172438; --line: #24344d; --fg: #e3edf9; --fg-dim: #8aa0bd; --accent: #2ec4f1;
  --font: 'Segoe UI', Roboto, Arial, sans-serif; --mono: Consolas, monospace; --radius: 4px; --size: 13px;
  --title-bg: #172438; --title-fg: #9ad8ee; --row-hover: rgba(46,196,241,.08); --sel: rgba(46,196,241,.22);
}
.theme-premierone .ribbon { background: linear-gradient(#142138, #0e1828); border-bottom: 2px solid #2ec4f1; padding: 6px 12px; display: flex; align-items: center; gap: 18px; }
.theme-premierone .ribbon .brand { font-weight: 600; font-size: 13px; }
.theme-premierone .ribbon .brand small { color: var(--fg-dim); font-weight: 400; margin-left: 8px; }
.theme-premierone .ribbon .tabs { border: 0; background: transparent; }
.theme-premierone .ribbon .tabs button { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.theme-premierone .pane > .title { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
.theme-premierone .workspace { grid-template-columns: 1fr 1.1fr 1fr; grid-template-rows: 1.2fr 1fr; grid-template-areas: "queue detail units" "queue detail side"; }
.theme-premierone .pri { border-radius: 10px; }
.theme-premierone .cmd .prompt::after { content: ''; }
.theme-premierone .statusbar { background: #0e1828; border-top: 1px solid #24344d; }

/* ---------------------------------------------------------------------------
   Hexagon: HxGN OnCall Dispatch. A modern light application with a deep blue
   header band and card panels. The state police.
--------------------------------------------------------------------------- */
.theme-hexagon {
  --bg: #eef1f5; --panel: #ffffff; --panel-2: #f3f5f8; --line: #d3d9e2; --fg: #1c2430; --fg-dim: #66738a; --accent: #0b5fb0;
  --font: 'Segoe UI', Arial, sans-serif; --mono: Consolas, monospace; --radius: 6px; --size: 13px;
  --title-bg: #ffffff; --title-fg: #0b5fb0; --row-hover: rgba(11,95,176,.06); --sel: rgba(11,95,176,.14);
}
.theme-hexagon .pane { box-shadow: 0 1px 3px rgba(20,30,50,.12); border-color: #e1e6ee; }
.theme-hexagon .pane > .title { border-bottom: 1px solid #e1e6ee; font-size: 13px; }
.theme-hexagon .band { background: linear-gradient(90deg, #083e78, #0b5fb0 60%, #1e7bd3); color: #fff; padding: 8px 16px; display: flex; align-items: center; gap: 16px; }
.theme-hexagon .band .brand { font-weight: 600; }
.theme-hexagon .band .brand small { font-weight: 400; opacity: .85; margin-left: 8px; }
.theme-hexagon .band .tabs { border: 0; background: transparent; }
.theme-hexagon .band .tabs button { color: rgba(255,255,255,.75); }
.theme-hexagon .band .tabs button.on { color: #fff; border-bottom-color: #fff; }
.theme-hexagon .workspace { grid-template-columns: 1fr 1.2fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "queue detail units" "side detail units"; gap: 8px; padding: 8px; }
.theme-hexagon table.grid tr.clickable td:first-child { border-left: 3px solid transparent; }
.theme-hexagon .cmd { background: #fff; }
.theme-hexagon .cmd input { background: #f3f5f8; }
.theme-hexagon .statusbar { background: #fff; }
.theme-hexagon .toast { background: #fff; color: #1c2430; }
.theme-hexagon .modal { background: #fff; }
.theme-hexagon .gate-card { background: #fff; color: #1c2430; }

/* ---------------------------------------------------------------------------
   Motorola Solutions: Spillman Flex. Classic Windows: silver, bevelled edges,
   the blue-to-cyan title bar, MS Sans Serif sizes. The small-town departments.
--------------------------------------------------------------------------- */
.theme-spillman {
  --bg: #c0c0c0; --panel: #d4d0c8; --panel-2: #ffffff; --line: #808080; --fg: #000; --fg-dim: #444; --accent: #0a246a;
  --font: Tahoma, 'MS Sans Serif', Arial, sans-serif; --mono: 'Courier New', monospace; --radius: 0; --size: 11px;
  --title-bg: linear-gradient(90deg, #0a246a, #a6caf0); --title-fg: #fff; --row-hover: #e8e8e8; --sel: #0a246a;
}
.theme-spillman .pane { border: 2px outset #f0f0f0; background: #d4d0c8; }
.theme-spillman .pane > .body { background: #fff; margin: 2px; border: 2px inset #f0f0f0; }
.theme-spillman .pane > .title { font-weight: 700; padding: 2px 6px; }
.theme-spillman table.grid tr.selected { color: #fff; }
.theme-spillman table.grid th { background: #d4d0c8; border: 1px outset #f0f0f0; position: static; }
.theme-spillman .titlebar { background: linear-gradient(90deg, #0a246a, #3a6ea5); color: #fff; padding: 3px 8px; font-weight: 700; font-size: 12px; display: flex; justify-content: space-between; }
.theme-spillman .menubar { background: #d4d0c8; padding: 2px 6px; display: flex; gap: 12px; border-bottom: 1px solid #808080; }
.theme-spillman .menubar span:first-letter { text-decoration: underline; }
.theme-spillman button { border: 2px outset #f0f0f0; background: #d4d0c8; border-radius: 0; padding: 2px 8px; }
.theme-spillman button.primary { background: #d4d0c8; color: #000; border: 2px outset #f0f0f0; font-weight: 700; }
.theme-spillman button.danger { background: #d4d0c8; color: #800000; border: 2px outset #f0f0f0; }
.theme-spillman input, .theme-spillman select, .theme-spillman textarea { border: 2px inset #f0f0f0; background: #fff; border-radius: 0; }
.theme-spillman .workspace { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "queue units detail" "side units detail"; gap: 3px; padding: 3px; }
.theme-spillman .cmd { background: #000; color: #c0c0c0; border-top: 2px inset #f0f0f0; }
.theme-spillman .cmd .prompt { color: #ffff55; }
.theme-spillman .cmd input { background: #000; color: #55ff55; border: 0; }
.theme-spillman .cmd-out { background: #000; color: #c0c0c0; }
.theme-spillman .statusbar { background: #d4d0c8; border-top: 1px solid #fff; }
.theme-spillman .pri, .theme-spillman .status-chip { border-radius: 0; }
.theme-spillman .toast { background: #ffffe1; color: #000; border: 1px solid #000; }
.theme-spillman .modal { background: #d4d0c8; color: #000; }
.theme-spillman .gate-card { background: #d4d0c8; color: #000; }
.theme-spillman .tabs { background: #d4d0c8; }
.theme-spillman .tabs button.on { color: #000; border-bottom-color: #0a246a; }

/* ---------------------------------------------------------------------------
   CentralSquare Enterprise CAD. A web application: dark slate, orange
   accents, a top navigation strip, table queues with pills. Vespucci PD.
--------------------------------------------------------------------------- */
.theme-centralsquare {
  --bg: #0f172a; --panel: #1e293b; --panel-2: #273449; --line: #334155; --fg: #e2e8f0; --fg-dim: #94a3b8; --accent: #f97316;
  --font: 'Segoe UI', Inter, Arial, sans-serif; --mono: Consolas, monospace; --radius: 8px; --size: 13px;
  --title-bg: #273449; --title-fg: #fdba74; --row-hover: rgba(249,115,22,.08); --sel: rgba(249,115,22,.2);
}
.theme-centralsquare .topnav { background: #0b1222; border-bottom: 1px solid #334155; padding: 8px 16px; display: flex; align-items: center; gap: 18px; }
.theme-centralsquare .topnav .brand { font-weight: 600; }
.theme-centralsquare .topnav .brand small { color: var(--fg-dim); font-weight: 400; margin-left: 8px; }
.theme-centralsquare .topnav .tabs { border: 0; background: transparent; }
.theme-centralsquare .workspace { grid-template-columns: 1.1fr 1.2fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "queue detail units" "queue detail side"; gap: 10px; padding: 10px; }
.theme-centralsquare .pane > .title { border-bottom: 1px solid var(--line); }
.theme-centralsquare .status-chip, .theme-centralsquare .pri { border-radius: 12px; }
.theme-centralsquare button.primary { color: #0f172a; font-weight: 700; }
.theme-centralsquare .statusbar { background: #0b1222; }

/* ---------------------------------------------------------------------------
   ZOLL Dispatch. Fire and EMS: black with alarm red and amber, big apparatus
   tiles, MPDS determinants on every incident, large touch-friendly buttons.
--------------------------------------------------------------------------- */
.theme-zoll {
  --bg: #0d0d0d; --panel: #171717; --panel-2: #232323; --line: #3a3a3a; --fg: #f2f2f2; --fg-dim: #a3a3a3; --accent: #e53935;
  --font: 'Segoe UI', Arial, sans-serif; --mono: Consolas, monospace; --radius: 4px; --size: 14px;
  --title-bg: #2a0e0e; --title-fg: #ffb4ad; --row-hover: rgba(229,57,53,.1); --sel: rgba(229,57,53,.25);
}
.theme-zoll .header { background: linear-gradient(#2a0e0e, #171717); border-bottom: 3px solid #e53935; padding: 8px 14px; display: flex; align-items: center; gap: 16px; }
.theme-zoll .header .brand { font-weight: 900; letter-spacing: .14em; color: #fff; font-size: 15px; }
.theme-zoll .header .brand small { color: #ffb4ad; font-weight: 400; letter-spacing: 0; margin-left: 10px; }
.theme-zoll .header .tabs { border: 0; background: transparent; }
.theme-zoll .workspace { grid-template-columns: 1fr 1.2fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "queue detail units" "side detail units"; gap: 8px; padding: 8px; }
.theme-zoll .pri { min-width: 64px; letter-spacing: .08em; }
.theme-zoll .status-chip { font-size: 12px; min-width: 42px; }
.theme-zoll .me-status button { padding: 16px 6px; font-size: 15px; }
.theme-zoll table.grid { font-size: 13px; }
.theme-zoll .statusbar { background: #111; }

/* ---------------------------------------------------------------------------
   Mark43 CAD. Cloud-native and light: white surface, slate text, one blue
   accent, pill navigation, 8 px corners. Looks like the newest thing in the room.
--------------------------------------------------------------------------- */
.theme-mark43 {
  --bg: #f6f7f9; --panel: #ffffff; --panel-2: #eef1f5; --line: #dde3ea; --fg: #1f2933; --fg-dim: #6b7785; --accent: #2563eb;
  --font: 'Segoe UI', Inter, system-ui, Arial, sans-serif; --mono: Consolas, monospace; --radius: 8px; --size: 13px;
  --title-bg: #ffffff; --title-fg: #1f2933; --row-hover: rgba(37,99,235,.06); --sel: rgba(37,99,235,.12);
}
.theme-mark43 .pane { box-shadow: 0 1px 2px rgba(31,41,51,.08); border-color: #e3e8ef; }
.theme-mark43 .pane > .title { border-bottom: 1px solid #eef1f5; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #6b7785; }
.theme-mark43 .m43bar { background: #fff; border-bottom: 1px solid #dde3ea; padding: 8px 16px; display: flex; align-items: center; gap: 16px; }
.theme-mark43 .m43bar .brand { font-weight: 600; font-size: 16px; }
.theme-mark43 .m43bar .brand small { color: var(--fg-dim); font-weight: 400; margin-left: 10px; font-size: 12px; }
.theme-mark43 .m43bar .tabs { border: 0; background: transparent; }
.theme-mark43 .m43bar .tabs button { border-radius: 14px; border-bottom: 0; padding: 4px 12px; }
.theme-mark43 .m43bar .tabs button.on { background: #e8f0fe; color: #2563eb; }
.theme-mark43 .workspace { grid-template-columns: 1fr 1.2fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "queue detail units" "side detail units"; gap: 10px; padding: 10px; }
.theme-mark43 .pri, .theme-mark43 .status-chip { border-radius: 10px; }
.theme-mark43 table.grid th { background: #f6f7f9; color: #6b7785; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.theme-mark43 .cmd { background: #fff; }
.theme-mark43 .cmd input { background: #eef1f5; }
.theme-mark43 .statusbar { background: #fff; }
.theme-mark43 .toast { background: #fff; color: #1f2933; }
.theme-mark43 .modal { background: #fff; }
.theme-mark43 .gate-card { background: #fff; color: #1f2933; }

/* ---------------------------------------------------------------------------
   Axon Dispatch. Charcoal and Axon yellow, heavy uppercase labels, square
   corners: the evidence-first console, loud and fast.
--------------------------------------------------------------------------- */
.theme-axon {
  --bg: #121212; --panel: #1c1c1c; --panel-2: #262626; --line: #383838; --fg: #f2f2f2; --fg-dim: #9a9a9a; --accent: #f7d117;
  --font: 'Segoe UI', Arial, sans-serif; --mono: Consolas, monospace; --radius: 2px; --size: 13px;
  --title-bg: #000000; --title-fg: #f7d117; --row-hover: rgba(247,209,23,.08); --sel: rgba(247,209,23,.18);
}
.theme-axon .axonbar { background: #000; border-bottom: 3px solid #f7d117; padding: 8px 14px; display: flex; align-items: center; gap: 16px; }
.theme-axon .axonbar .brand { font-weight: 600; font-size: 14px; }
.theme-axon .axonbar .brand small { color: #9a9a9a; margin-left: 10px; font-weight: 400; }
.theme-axon .axonbar .tabs { border: 0; background: transparent; }
.theme-axon .axonbar .tabs button { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; }
.theme-axon .pane > .title { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 800; }
.theme-axon .workspace { grid-template-columns: 1.1fr 1.2fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "queue detail units" "queue detail side"; gap: 6px; padding: 6px; }
.theme-axon button.primary { color: #000; font-weight: 800; }
.theme-axon .pri, .theme-axon .status-chip { border-radius: 0; font-weight: 800; }
.theme-axon .statusbar { background: #000; }

/* ---------------------------------------------------------------------------
   The showroom, and the bar under a demo console.
--------------------------------------------------------------------------- */
.showroom { min-height: 100%; padding: 36px 20px 80px; background: radial-gradient(1200px 600px at 20% 0%, #24313f, #11151a); color: #e6e9ee; font: 14px/1.45 'Segoe UI', Tahoma, Arial, sans-serif; }
.showroom .head { max-width: 1180px; margin: 0 auto 22px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.showroom h1 { margin: 0 0 6px; font-size: 26px; letter-spacing: .02em; }
.showroom .lede { color: #9aa4b1; max-width: 68ch; margin: 0; }
.showroom .head a, .showroom .head button { color: #4aa3ff; }
.product-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.product-card { background: #1a2029; border: 1px solid #30394a; border-radius: 8px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.product-card .swatch { display: flex; height: 10px; border-radius: 4px; overflow: hidden; }
.product-card .swatch span { flex: 1; }
.product-card .company { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #9aa4b1; }
.product-card .name { font-size: 18px; font-weight: 700; margin: 0; }
.product-card .name small { color: #9aa4b1; font-weight: 400; font-size: 12px; margin-left: 6px; }
.product-card .pitch { margin: 0; color: #d5dbe3; }
.product-card .feel { margin: 0; color: #9aa4b1; font-size: 13px; }
.product-card .facts { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; font-size: 12px; margin: 4px 0; }
.product-card .facts dt { color: #9aa4b1; }
.product-card .facts dd { margin: 0; font-family: Consolas, monospace; }
.product-card ul { margin: 0; padding-left: 18px; color: #c9d1db; font-size: 13px; }
.product-card .users { font-size: 12px; color: #9aa4b1; }
.product-card .users b { color: #e6e9ee; }
.product-card .seats { margin-top: auto; padding-top: 6px; display: grid; gap: 6px; }
.product-card .buttons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.product-card .buttons .badge { font: 700 10px/1 Consolas, monospace; letter-spacing: .1em; border: 1px solid #3a4350; color: #9aa4b1; border-radius: 3px; padding: 5px 6px; min-width: 22px; text-align: center; }
.product-card .buttons .badge.v2 { border-color: #2e8b57; color: #79d6a5; }
.product-card .buttons .missing { color: #6f7b89; font-size: 12px; }
.product-card .buttons button { background: #2b323b; border: 1px solid #3a4350; color: #e6e9ee; border-radius: 4px; padding: 6px 12px; cursor: pointer; font: inherit; }
.product-card .buttons button.primary { background: #4aa3ff; border-color: #4aa3ff; color: #fff; font-weight: 600; }
.product-card .buttons.v2 button.primary { background: #2e8b57; border-color: #2e8b57; }
.product-card .adopt { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #9aa4b1; flex-wrap: wrap; }
.product-card .adopt select { background: #2b323b; border: 1px solid #3a4350; color: #e6e9ee; border-radius: 4px; padding: 3px 6px; font: inherit; }
.product-card .adopt button { background: #2e8b57; border: 0; color: #fff; border-radius: 4px; padding: 4px 10px; cursor: pointer; font: inherit; }
.demo-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 6px 12px; background: #0b0f14; color: #dfe6ee; font: 12px 'Segoe UI', Tahoma, Arial, sans-serif; border-top: 2px solid #4aa3ff; }
.demo-bar b { letter-spacing: .1em; margin-right: 6px; color: #4aa3ff; }
.demo-bar select, .demo-bar button { background: #1d2633; border: 1px solid #3a4656; color: #dfe6ee; border-radius: 3px; padding: 3px 9px; cursor: pointer; font: inherit; white-space: nowrap; }
.demo-bar button.on { background: #4aa3ff; border-color: #4aa3ff; color: #fff; }
.demo-bar .to-v2 { color: #79d6a5; border: 1px solid #2e8b57; border-radius: 3px; padding: 3px 9px; text-decoration: none; white-space: nowrap; }
.demo-bar .note { margin-left: auto; color: #8a97a8; }
body.demo .cad { padding-bottom: var(--demo-bar, 34px); }
body.demo .toasts { bottom: calc(var(--demo-bar, 34px) + 44px); }