/* The old look: the previous Qualiphy web app's look on the new pages. It is loaded AFTER the theme and the page styles, only when a person sees the old look (see frontend/look.py), and it changes what the
   old app was known for: its purple, the light gray page under white cards, flat surfaces with a hairline border, squarer corners, a light menu, calmer weights. It is tokens first (every color a page uses
   comes from them), with a few rules for the things a token cannot say. The old look is light only (Allan, 2026-10-25: v1 had no dark mode and no switch for one), so there are no dark variables here, and the page is pinned to light in base.html and mode.js; the contrast of every text pair is tested. */
:root[data-look="old"] {
  --font-body: Inter, Poppins, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-body); --font-button: var(--font-body);
  --font-weight-heading: 600; --font-weight-button: 500;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px;
  --motion: 120ms;
  --font-size-h1: 1.75rem; --font-size-h2: 1.25rem; --content-max: 72rem;      /* the sizes the old look had before the default theme took Qualiphy's brand scale (36px / 24px headings, a 1400px page) */

  --color-bg: #efefef; --color-surface: #ffffff; --color-surface-2: #f6f6f8; --color-border: #e0e0e6;
  --color-text: #1c1c1c; --color-text-muted: #4b5563;
  --color-accent: #7348f0; --color-accent-hover: #6024dd; --color-on-accent: #ffffff; --color-accent-text: #6024dd;
  --color-focus: #6024dd;
  --color-danger-soft: #fdecec; --color-danger-text: #9b1c1c;
  --color-env-bg: #8f1d1d; --color-env-text: #ffffff;
  --color-assume-ro-bg: #dbeafe; --color-assume-ro-text: #0b2a4a; --color-assume-rw-bg: #ffd60a; --color-assume-rw-text: #231a00;
  --sidebar-bg: #0c0c0c; --sidebar-text: #ffffff; --sidebar-hover-bg: #232323;
  --sidebar-active-bg: #cfc9ff; --sidebar-active-text: #1c1c1c;
  --sidebar-accent: #cfc9ff;
  --old-on-dark: #ffffff; --old-denied: #ff8f8f; --old-btn-bg: #cfc9ff; --old-btn-text: #3b2f9e;
  --old-view-bg: #1d4ed8; --old-view-text: #ffffff;
  --old-ok-bg: #dcf5e4; --old-ok-text: #14532d; --old-off-bg: #fde4e4; --old-off-text: #9b1c1c; --old-chip-bg: #e4e0ff; --old-chip-text: #3b2f9e;
  --old-warn-bg: #fff1c9; --old-warn-text: #6b4200; --old-gray-bg: #e9e9ef; --old-gray-text: #3a3a46;
  --old-find-bg: #ff8a3d; --old-find-text: #1c1c1c;
  --color-live-on: #166534; --color-live-off: #b91c1c; --color-live-away: #92400e; --color-live-fg: #ffffff;      /* the provider's on/off switch and the Accept and Reject buttons of Video Call */
  --icon-tone: color-mix(in srgb, var(--color-accent) 22%, transparent);
  --shadow-card: 0 1px 2px rgb(0 0 0 / .06);
}

/* What a token cannot say. The old app's cards had a hairline border and almost no shadow; its page title was left-aligned and plain. */
:root[data-look="old"] .panel { border: 1px solid var(--color-border); box-shadow: var(--shadow-card); }
:root[data-look="old"] .page-head h1 { letter-spacing: 0; }
:root[data-look="old"] table th { background: var(--color-surface-2); font-weight: 600; }

/* The old menu: ONE black column, the old app's entries in its order, nothing else. The logo, a "Dashboard" row, then the entries; the page's title and Logout sit in a white bar over the page. */
:root[data-look="old"] .sidenav.oldnav { flex-direction: column; width: 15.5rem; overflow-y: auto; overflow-x: hidden; }
:root[data-look="old"] .oldnav .brand-link { color: var(--old-on-dark); }
:root[data-look="old"] .oldnav .brand { color: var(--old-on-dark); font-size: 1.9rem; }
:root[data-look="old"] .oldnav .brand-a { color: var(--old-on-dark); }
:root[data-look="old"] .oldnav .brand-b { color: var(--sidebar-accent); }
:root[data-look="old"] .oldnav-logo { padding: 1rem 1rem .5rem; }
/* The phone's top bar is opaque in the old look: the shell draws it 82% see-through, and the brand's purple over whatever scrolls under it (the Review Exam page on a phone) is under 4.5:1 (axe, DEVRED10). The Queue page already did this alone (old-queue.css). */
:root[data-look="old"] .mobilebar { background: var(--color-bg); backdrop-filter: none; }
/* v1's availability strip (OperatorAvailabilityStrip, AvailabilityToggle): a full-width band under the top bar of every provider page, near-black (v1's secondary color), white text, "Not Available", a toggle (green when on) and "Available" pushed to the right edge of a centered
   column. One button so the whole row is the target. Not in a live call (the frame leaves it out). */
:root[data-look="old"] .oldstrip { display: flex; flex-direction: column; align-items: center; padding: .5rem 1.6rem; background: var(--sidebar-bg); color: var(--old-on-dark); }
:root[data-look="old"] .oldstrip > form, :root[data-look="old"] .oldstrip > .presence-rail-btn, :root[data-look="old"] .oldstrip > .presence-rail-note { width: 100%; max-width: 80rem; }
:root[data-look="old"] .oldstrip .rail-presence-form { display: flex; justify-content: flex-end; margin: 0; }
:root[data-look="old"] .oldstrip .presence-rail-btn { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem 1rem; min-height: 2.75rem; padding: .25rem .5rem; border: 0; border-radius: var(--radius-md); background: none; color: inherit; font: inherit; font-size: .8125rem; font-weight: 500; text-align: right; cursor: pointer; box-shadow: none; }
:root[data-look="old"] .oldstrip .presence-rail-btn:hover { background: var(--sidebar-hover-bg); color: inherit; filter: none; }
:root[data-look="old"] .oldstrip .presence-rail-btn:focus-visible { outline: 3px solid var(--old-on-dark); outline-offset: 2px; }
:root[data-look="old"] .oldstrip .presence-rail-btn:disabled { cursor: not-allowed; opacity: .85; }
:root[data-look="old"] .oldstrip .presence-rail-track { display: flex; align-items: center; flex: none; width: 3.2rem; height: 1.7rem; padding: 2px; border: 2px solid currentColor; border-radius: 999px; }
:root[data-look="old"] .oldstrip .presence-rail-knob { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: currentColor; }
:root[data-look="old"] .oldstrip.rail-presence-online .presence-rail-track { justify-content: flex-end; background: var(--color-live-on); }
:root[data-look="old"] .oldstrip .oldstrip-away { padding: .1rem .6rem; border-radius: 999px; background: var(--color-live-away); color: var(--color-live-fg); }
:root[data-look="old"] .oldstrip .presence-rail-note { margin: 0; padding: 0 .5rem; font-size: .8rem; text-align: right; color: var(--old-denied); }
@media (min-width: 48rem) { :root[data-look="old"] .oldstrip .presence-rail-btn { font-size: 1rem; } }
:root[data-look="old"] .oldnav-head { display: flex; align-items: center; justify-content: space-between; padding: .5rem 1rem .8rem; font-size: 1.3rem; font-weight: 600; color: var(--old-on-dark); }
:root[data-look="old"] .oldnav-head .iconbtn { color: var(--old-on-dark); }
:root[data-look="old"] .oldmenu { gap: 0; padding-bottom: 1.5rem; }
:root[data-look="old"] .oldmenu .menu-link { border-radius: 0; padding: .8rem 1rem; gap: .75rem; font-weight: 500; font-size: .98rem; color: var(--sidebar-text); }
:root[data-look="old"] .oldmenu .menu-link:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text); }
:root[data-look="old"] .oldmenu .menu-link[aria-current="page"] { background: var(--sidebar-active-bg); color: var(--sidebar-active-text); box-shadow: none; }
:root[data-look="old"] .oldmenu .menu-link.soon { opacity: .5; cursor: not-allowed; pointer-events: none; }
:root[data-look="old"] .oldmenu .menu-link.denied { color: var(--old-denied); cursor: not-allowed; pointer-events: none; }
:root[data-look="old"] .oldmenu .oldlock { margin-left: auto; font-size: 1rem; }
:root[data-look="old"] .oldgroup > summary { list-style: none; }
:root[data-look="old"] .oldgroup > summary::-webkit-details-marker { display: none; }
:root[data-look="old"] .oldcaret { margin-left: auto; transition: transform var(--motion) var(--ease); }
:root[data-look="old"] .oldgroup[open] > summary .oldcaret { transform: rotate(180deg); }
:root[data-look="old"] .oldsub .menu-link { padding-left: 2.6rem; }
:root[data-look="old"] .oldbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.6rem; background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-card); }
:root[data-look="old"] .oldbar-title { display: flex; align-items: center; gap: .7rem; font-size: 1.55rem; font-weight: 500; color: var(--color-text); }
:root[data-look="old"] .oldbar-title .icon { font-size: 1.8rem; color: var(--color-accent-text); }
:root[data-look="old"] .oldbtn { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border: 0; border-radius: var(--radius-md); background: var(--old-btn-bg); color: var(--old-btn-text); font: inherit; font-weight: 600; box-shadow: var(--shadow-card); cursor: pointer; }
:root[data-look="old"] .oldbtn { text-decoration: none; }
:root[data-look="old"] .oldbtn:hover { filter: brightness(.96); }
:root[data-look="old"] .oldbtn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* The old Operators page: a big title with its button, "Search :" and "Licensed State :" over their fields, a "Results" chip with a round refresh button, then a flat table of centered columns with hairlines. */
:root[data-look="old"] .old-page { padding: 0 1.6rem 3rem; }
:root[data-look="old"] .old-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.6rem 0 1.4rem; }
:root[data-look="old"] .old-title h1 { margin: 0; font-size: 2rem; font-weight: 500; }
:root[data-look="old"] .old-filters { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-bottom: 1.2rem; }
:root[data-look="old"] .old-field { display: grid; gap: .4rem; flex: 1 1 18rem; max-width: 34rem; color: var(--color-text-muted); font-size: .95rem; }
:root[data-look="old"] .old-field input, :root[data-look="old"] .old-field select { height: 2.6rem; padding: 0 .9rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; box-shadow: var(--shadow-card); }
:root[data-look="old"] .old-resultbar { display: flex; align-items: center; justify-content: space-between; margin: 1.4rem 0 1rem; }
:root[data-look="old"] .old-resultbar .old-round { margin-left: auto; }          /* with no Results pill (OLDSHELL) the refresh button still sits at the right, as when the pill stood at the left */
:root[data-look="old"] .old-chip { display: inline-block; padding: .25rem .8rem; border-radius: 999px; background: var(--old-chip-bg); color: var(--old-chip-text); font-size: .9rem; font-weight: 500; }
:root[data-look="old"] .old-round { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: var(--old-chip-bg); color: var(--old-chip-text); cursor: pointer; box-shadow: var(--shadow-card); }
:root[data-look="old"] .old-round .icon { font-size: 1.3rem; }
:root[data-look="old"] .old-tablewrap { overflow-x: auto; }
:root[data-look="old"] .old-table { width: 100%; border-collapse: collapse; text-align: center; }
:root[data-look="old"] .old-table thead th { padding: 1rem .6rem; border-bottom: 3px solid var(--color-border); font-weight: 500; color: var(--color-text-muted); white-space: nowrap; background: transparent; }
:root[data-look="old"] .old-table td, :root[data-look="old"] .old-table th[scope="row"] { padding: 1.2rem .6rem; border-bottom: 1px solid var(--color-border); font-weight: 400; color: var(--color-text-muted); }
:root[data-look="old"] .old-table th[scope="row"] { background: transparent; }
:root[data-look="old"] .old-table tbody tr { cursor: pointer; }
:root[data-look="old"] .old-table tbody tr:hover { background: var(--color-surface-2); }
:root[data-look="old"] .old-name .rowlink { font: inherit; color: var(--color-text-muted); background: none; border: 0; padding: 0; cursor: pointer; text-align: center; }
:root[data-look="old"] .old-id { position: relative; }
:root[data-look="old"] .old-warn { display: inline-flex; align-items: center; gap: .3rem; margin-right: .4rem; padding: .1rem .5rem; border-radius: 999px; background: var(--old-off-bg); color: var(--old-off-text); font-size: .8rem; }
:root[data-look="old"] .old-avail { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; font-size: .85rem; font-weight: 600; }
:root[data-look="old"] .old-avail.on { background: var(--old-ok-bg); color: var(--old-ok-text); }
:root[data-look="old"] .old-avail.off { background: var(--old-off-bg); color: var(--old-off-text); }
:root[data-look="old"] .old-empty { margin: 2rem 0; color: var(--color-text-muted); text-align: center; }
:root[data-look="old"] .old-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.4rem 0; color: var(--color-text-muted); }
:root[data-look="old"] .old-btn { padding: .5rem 1rem; border: 0; border-radius: var(--radius-md); background: var(--old-btn-bg); color: var(--old-btn-text); font: inherit; font-weight: 600; cursor: pointer; }
:root[data-look="old"] .old-btn:disabled { opacity: .5; cursor: not-allowed; }

/* The menu's X and the three lines (script: old.js). Shut: the black column is gone and the page takes its width; the three lines show only then, and only on a wide window. */
:root[data-look="old"] .oldbar-left { display: inline-flex; align-items: center; gap: .9rem; min-width: 0; }
:root[data-look="old"] .old-hamburger { display: none; place-items: center; width: 2.4rem; height: 2.4rem; border: 0; border-radius: var(--radius-md); background: none; color: var(--color-text); font-size: 1.4rem; cursor: pointer; }
:root[data-look="old"] .old-hamburger:hover { background: var(--color-surface-2); }
:root[data-look="old"] .old-hamburger:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
:root[data-look="old"][data-oldnav="closed"] .old-hamburger { display: inline-grid; }
:root[data-look="old"][data-oldnav="closed"] .sidenav.oldnav { display: none; }
@media (max-width: 43.75rem) { :root[data-look="old"][data-oldnav="closed"] .old-hamburger { display: none; } :root[data-look="old"][data-oldnav="closed"] .sidenav.oldnav { display: flex; } }
:root[data-look="old"] .old-logo { display: block; width: 11.8rem; height: auto; }

/* UIFIX1 (Asad's UI round 1, UI1-PR-08 and PR-17, 2026-11-06): on a phone and an iPad every button of the old look and the pager's Prev and Next are at least 44 by 44 px (the View Exam and Review Exam row buttons were 107 by 38). Wider windows keep v1's sizes. */
@media (max-width: 64rem) {
  :root[data-look="old"] .old-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; box-sizing: border-box; min-height: 2.75rem; min-width: 2.75rem; }
}