/* ============================================================
   ChappTrack.css -- Modern Design System
   CSS-only facelift - Light Default / Teal Accent Theme
   Dark via prefers-color-scheme AND [data-theme="dark"]

   NOTE: every legacy class name is preserved. The code-behind
   (Framework/Web/DisplayTable.cs, PageHelper.cs) emits these
   names at runtime, so they must not be renamed:
     Layout, Main, TableCellHeading, TableHeadingClass,
     TableCellSubHeading, GridRowHeaderClass, GridRowItem,
     GridRowItemEven, GridRowItemOdd, CellText, CellTitleText,
     MainLink, SubTitleLink, home, homeLink, homeDate, Footer,
     smalllink, PercentText, HeaderNonTitle, ForumAuthorText,
     ForumDisplayName, PostBody, DateTime, CodeBlock,
     QuoteBlock, QuoteCell, layoutright, TextBox, Label,
     LabelText, DropDownList, email, Box2, Even, Odd
   ============================================================ */

/* ---------- Design Tokens (Light -- Default) ---------- */
:root {
   --color-bg:                hsl(220, 15%, 97%);
   --color-bg-gradient-start: hsl(220, 15%, 95%);
   --color-bg-gradient-end:   hsl(220, 12%, 98%);
   --color-surface:           hsl(0, 0%, 100%);
   --color-surface-raised:    hsl(220, 15%, 96%);
   --color-border:            hsl(220, 14%, 85%);
   --color-border-subtle:     hsl(220, 14%, 90%);

   --color-primary:           hsl(192, 80%, 38%);
   --color-primary-hover:     hsl(192, 80%, 32%);
   --color-primary-muted:     hsl(192, 40%, 88%);

   --color-accent:            hsl(262, 55%, 52%);
   --color-accent-hover:      hsl(262, 55%, 42%);

   --color-text:              hsl(220, 20%, 20%);
   --color-text-secondary:    hsl(220, 12%, 45%);
   --color-text-muted:        hsl(220, 10%, 62%);
   --color-text-heading:      hsl(220, 25%, 12%);

   --color-success:           hsl(152, 55%, 36%);
   --color-warning:           hsl(38, 90%, 45%);
   --color-error:             hsl(0, 70%, 50%);
   --color-error-bg:          hsl(0, 85%, 96%);
   --color-error-border:      hsl(0, 60%, 82%);

   --color-link:              hsl(192, 75%, 35%);
   --color-link-hover:        hsl(192, 80%, 28%);

   --color-table-header:      hsl(220, 15%, 92%);
   --color-table-row-odd:     hsl(0, 0%, 100%);
   --color-table-row-even:    hsl(220, 15%, 97%);
   --color-table-row-hover:   hsl(192, 40%, 94%);
   --color-table-border:      hsl(220, 14%, 88%);

   --color-code-bg:           hsl(220, 16%, 96%);
   --color-quote-bg:          hsl(152, 30%, 95%);
   --color-quote-border:      hsl(152, 35%, 75%);

   --font-family:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
   --font-mono:    ui-monospace, 'Cascadia Code', 'Consolas', 'SF Mono', Menlo, monospace;

   --font-size-xs:   0.75rem;
   --font-size-sm:   0.8125rem;
   --font-size-base: 0.875rem;
   --font-size-md:   1rem;
   --font-size-lg:   1.125rem;
   --line-height:    1.6;

   --space-xs:  0.25rem;
   --space-sm:  0.5rem;
   --space-md:  1rem;
   --space-lg:  1.5rem;
   --space-xl:  2rem;

   --radius-sm:   4px;
   --radius-md:   8px;
   --radius-lg:   12px;
   --radius-pill: 9999px;

   --shadow-sm: 0 1px 3px hsla(220, 20%, 50%, 0.10), 0 1px 2px hsla(220, 20%, 50%, 0.06);
   --shadow-md: 0 4px 12px hsla(220, 20%, 50%, 0.10), 0 2px 4px hsla(220, 20%, 50%, 0.05);
   --shadow-lg: 0 8px 30px hsla(220, 20%, 50%, 0.12), 0 4px 8px hsla(220, 20%, 50%, 0.06);

   --transition-fast: 150ms ease;
   --transition-base: 250ms ease;
}

/* ---------- Dark Theme ---------- */
/* Explicit opt-in wins in both directions; system preference is the default. */
@media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
      --color-bg:                hsl(220, 20%, 10%);
      --color-bg-gradient-start: hsl(220, 22%, 8%);
      --color-bg-gradient-end:   hsl(220, 18%, 14%);
      --color-surface:           hsl(220, 18%, 15%);
      --color-surface-raised:    hsl(220, 16%, 18%);
      --color-border:            hsl(220, 14%, 24%);
      --color-border-subtle:     hsl(220, 14%, 20%);

      --color-primary:           hsl(192, 70%, 50%);
      --color-primary-hover:     hsl(192, 70%, 60%);
      --color-primary-muted:     hsl(192, 50%, 30%);

      --color-accent:            hsl(262, 60%, 60%);
      --color-accent-hover:      hsl(262, 60%, 70%);

      --color-text:              hsl(220, 15%, 88%);
      --color-text-secondary:    hsl(220, 12%, 60%);
      --color-text-muted:        hsl(220, 10%, 45%);
      --color-text-heading:      hsl(220, 20%, 95%);

      --color-success:           hsl(152, 55%, 45%);
      --color-warning:           hsl(38, 90%, 55%);
      --color-error:             hsl(0, 70%, 55%);
      --color-error-bg:          hsl(0, 40%, 15%);
      --color-error-border:      hsl(0, 50%, 30%);

      --color-link:              hsl(192, 65%, 55%);
      --color-link-hover:        hsl(192, 70%, 70%);

      --color-table-header:      hsl(220, 20%, 18%);
      --color-table-row-odd:     hsl(220, 18%, 13%);
      --color-table-row-even:    hsl(220, 18%, 15%);
      --color-table-row-hover:   hsl(220, 18%, 20%);
      --color-table-border:      hsl(220, 14%, 22%);

      --color-code-bg:           hsl(220, 20%, 11%);
      --color-quote-bg:          hsl(152, 25%, 14%);
      --color-quote-border:      hsl(152, 30%, 28%);

      --shadow-sm: 0 1px 3px hsla(0, 0%, 0%, 0.30), 0 1px 2px hsla(0, 0%, 0%, 0.20);
      --shadow-md: 0 4px 12px hsla(0, 0%, 0%, 0.35), 0 2px 4px hsla(0, 0%, 0%, 0.20);
      --shadow-lg: 0 8px 30px hsla(0, 0%, 0%, 0.40), 0 4px 8px hsla(0, 0%, 0%, 0.20);
   }
}

:root[data-theme="dark"] {
   --color-bg:                hsl(220, 20%, 10%);
   --color-bg-gradient-start: hsl(220, 22%, 8%);
   --color-bg-gradient-end:   hsl(220, 18%, 14%);
   --color-surface:           hsl(220, 18%, 15%);
   --color-surface-raised:    hsl(220, 16%, 18%);
   --color-border:            hsl(220, 14%, 24%);
   --color-border-subtle:     hsl(220, 14%, 20%);

   --color-primary:           hsl(192, 70%, 50%);
   --color-primary-hover:     hsl(192, 70%, 60%);
   --color-primary-muted:     hsl(192, 50%, 30%);

   --color-accent:            hsl(262, 60%, 60%);
   --color-accent-hover:      hsl(262, 60%, 70%);

   --color-text:              hsl(220, 15%, 88%);
   --color-text-secondary:    hsl(220, 12%, 60%);
   --color-text-muted:        hsl(220, 10%, 45%);
   --color-text-heading:      hsl(220, 20%, 95%);

   --color-success:           hsl(152, 55%, 45%);
   --color-warning:           hsl(38, 90%, 55%);
   --color-error:             hsl(0, 70%, 55%);
   --color-error-bg:          hsl(0, 40%, 15%);
   --color-error-border:      hsl(0, 50%, 30%);

   --color-link:              hsl(192, 65%, 55%);
   --color-link-hover:        hsl(192, 70%, 70%);

   --color-table-header:      hsl(220, 20%, 18%);
   --color-table-row-odd:     hsl(220, 18%, 13%);
   --color-table-row-even:    hsl(220, 18%, 15%);
   --color-table-row-hover:   hsl(220, 18%, 20%);
   --color-table-border:      hsl(220, 14%, 22%);

   --color-code-bg:           hsl(220, 20%, 11%);
   --color-quote-bg:          hsl(152, 25%, 14%);
   --color-quote-border:      hsl(152, 30%, 28%);

   --shadow-sm: 0 1px 3px hsla(0, 0%, 0%, 0.30), 0 1px 2px hsla(0, 0%, 0%, 0.20);
   --shadow-md: 0 4px 12px hsla(0, 0%, 0%, 0.35), 0 2px 4px hsla(0, 0%, 0%, 0.20);
   --shadow-lg: 0 8px 30px hsla(0, 0%, 0%, 0.40), 0 4px 8px hsla(0, 0%, 0%, 0.20);
}

/* ============================================================
   Base
   ============================================================ */

html {
   height: 100%;
   box-sizing: border-box;
   -webkit-text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: inherit; }

body {
   min-height: 100%;
   margin: 0;
   padding: 0;
   /* The old tiled img/bgnew.jpg is replaced by a flat gradient. */
   background-color: var(--color-bg);
   background-image: linear-gradient(160deg, var(--color-bg-gradient-start), var(--color-bg-gradient-end));
   background-attachment: fixed;
   color: var(--color-text);
   font-family: var(--font-family);
   font-size: var(--font-size-base);
   line-height: var(--line-height);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

img { border: 0; max-width: 100%; vertical-align: middle; }
hr {
   border: 0;
   border-top: 1px solid var(--color-border);
   margin: var(--space-md) 0;
}

/* ============================================================
   Page shell
   The masters nest: div > table.Layout > div#maindiv > table.Main
   Neutralise the outer wrappers, make table.Main the card.
   ============================================================ */

table {
   background-color: transparent;
   border-collapse: collapse;
   border-spacing: 0;
   margin: 0;
   padding: 0;
}

table.Layout {
   width: 100%;
   max-width: 1180px;
   margin: 0 auto;
   padding: var(--space-lg) var(--space-md);
   background-color: transparent;
   border: 0;
}

table.Layout > tbody > tr > td { padding: 0; }

#maindiv {
   height: auto !important;
   width: 100%;
}

/* The main content card. Legacy markup sets width=1000px inline; override it. */
table.Main {
   width: 100% !important;
   max-width: none;
   background-color: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
   overflow: hidden;
}

td.Main,
TD.Main {
   background-color: transparent;
   padding: 0;
   vertical-align: top;
}

/* the 10px gutter cells in the master become real padding */
table.Main > tbody > tr > td.Main[width="10"] { width: var(--space-lg) !important; }

/* main content cell */
table.Main > tbody > tr > td.Main[align="left"] {
   width: auto !important;
   padding: var(--space-lg) 0;
}

/* ============================================================
   Navigation (ct.master header)
   ============================================================ */

table.Main > tbody > tr > td.Main > div[align="center"]:first-child {
   padding-bottom: var(--space-md);
   margin-bottom: var(--space-lg);
   border-bottom: 1px solid var(--color-border-subtle);
   font-size: 0;              /* collapse the * separators */
   line-height: 0;
}

a.MainLink,
A:link.MainLink,
A:visited.MainLink {
   display: inline-block;
   margin: 3px 2px;
   padding: 7px 14px;
   border: 1px solid transparent;
   border-radius: var(--radius-pill);
   color: var(--color-text-secondary);
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
   font-variant: normal;
   font-weight: 600;
   letter-spacing: 0.01em;
   text-decoration: none;
   transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

a.MainLink:hover,
A:hover.MainLink {
   background-color: var(--color-primary-muted);
   border-color: var(--color-primary);
   color: var(--color-primary-hover);
   font-variant: normal;
   text-decoration: none;
}

a.MainLink:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
}

/* ============================================================
   Links
   ============================================================ */

a,
A:link,
A:visited {
   color: var(--color-link);
   font-size: inherit;
   font-variant: normal;       /* was small-caps */
   text-decoration: none;
   transition: color var(--transition-fast);
}

a:hover,
A:hover {
   color: var(--color-link-hover);
   font-variant: normal;
   text-decoration: underline;
}

a:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
   border-radius: var(--radius-sm);
}

A:link.email, A:visited.email { color: var(--color-link); font-size: inherit; font-variant: normal; }
A:hover.email                 { color: var(--color-link-hover); font-variant: normal; }

A:link.Box2, A:Visited.Box2   { color: var(--color-text-secondary); }

A:link.Even, A:link.Odd,
A:Visited.Even, A:Visited.Odd { color: var(--color-link); }
A:hover.Even, A:hover.Odd     { color: var(--color-link-hover); text-decoration: underline; }

A:link.SubTitleLink,
A:visited.SubTitleLink {
   color: hsla(0, 0%, 100%, 0.85);
   font-size: var(--font-size-xs);
   font-variant: normal;
   font-weight: 600;
   text-decoration: none;
}

A:hover.SubTitleLink {
   color: #fff;
   font-variant: normal;
   text-decoration: underline;
}

.smalllink {
   color: var(--color-link);
   font-family: var(--font-family);
   font-size: var(--font-size-xs);
   font-weight: 600;
}

/* ============================================================
   Section / table headings
   ============================================================ */

.TableHeadingClass {
   width: 100%;
   margin: 0 0 var(--space-md) 0;
   background-color: transparent;
   border: 1px solid var(--color-table-border);
   border-radius: var(--radius-md);
   overflow: hidden;
}

/* was a blue tiled gif */
.TableCellHeading {
   height: auto;
   padding: 10px 14px;
   background-color: var(--color-primary);
   background-image: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
   border: 0;
   color: #fff;
   font-size: var(--font-size-base);
   font-weight: 600;
   letter-spacing: 0.01em;
}

.TableCellSubHeading {
   height: auto;
   margin: 0;
   padding: 4px 14px 8px;
   background-color: transparent;
   border-width: 0;
   color: hsla(0, 0%, 100%, 0.9);
   font-size: var(--font-size-xs);
   font-weight: 500;
}

.HeaderNonTitle {
   color: hsla(0, 0%, 100%, 0.85);
   font-family: var(--font-family);
   font-size: var(--font-size-xs);
}

/* Action links sitting ON the coloured banner (e.g. "Add Key").
   These would otherwise inherit the dark-teal body link colour and
   disappear against the banner, so give them their own treatment. */
.TableCellHeading a,
.TableCellHeading A:link,
.TableCellHeading A:visited,
.TableCellSubHeading a,
.TableCellSubHeading A:link,
.TableCellSubHeading A:visited {
   display: inline-block;
   padding: 3px 10px;
   background-color: hsla(0, 0%, 100%, 0.16);
   border: 1px solid hsla(0, 0%, 100%, 0.45);
   border-radius: var(--radius-pill);
   color: #fff;
   font-size: var(--font-size-xs);
   font-variant: normal;
   font-weight: 600;
   letter-spacing: 0.01em;
   text-decoration: none;
   white-space: nowrap;
   transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.TableCellHeading a:hover,
.TableCellHeading A:hover,
.TableCellSubHeading a:hover,
.TableCellSubHeading A:hover {
   background-color: hsla(0, 0%, 100%, 0.30);
   border-color: #fff;
   color: #fff;
   text-decoration: none;
}

.TableCellHeading a:focus-visible,
.TableCellSubHeading a:focus-visible {
   outline: 2px solid #fff;
   outline-offset: 2px;
}

/* ============================================================
   Grids and form rows
   GridRowItem is used BOTH for data grids and for label/field
   form layout, so it stays deliberately subtle.
   ============================================================ */

.GridRowHeaderClass {
   margin: 0;
   padding: 9px 12px;
   background-color: var(--color-table-header);
   background-image: none;      /* was gradient.header.gif */
   border: 1px solid var(--color-table-border);
   color: var(--color-text-heading);
   font-size: var(--font-size-xs);
   font-weight: 600;
   letter-spacing: 0.03em;
   text-align: left;
   text-transform: uppercase;
   white-space: nowrap;
}

.GridRowItem,
.GridRowItemEven,
.GridRowItemOdd {
   padding: 8px 12px;
   border: 1px solid var(--color-table-border);
   border-collapse: collapse;
   color: var(--color-text);
   vertical-align: top;
}

.GridRowItem     { background-color: var(--color-surface); }
.GridRowItemOdd  { background-color: var(--color-table-row-odd); }
.GridRowItemEven { background-color: var(--color-table-row-even); }

tr:hover > .GridRowItemOdd,
tr:hover > .GridRowItemEven {
   background-color: var(--color-table-row-hover);
   transition: background-color var(--transition-fast);
}

.CellText {
   color: var(--color-text-secondary);
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
}

.CellTitleText {
   color: var(--color-text-heading);
   cursor: help;                /* was crosshair */
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
   font-weight: 600;
}

.PercentText {
   color: var(--color-text);
   font-family: var(--font-family);
   font-variant-numeric: tabular-nums;
}

TD.layoutright {
   background-color: transparent;
   text-align: right;
   vertical-align: top;
}

/* ============================================================
   Home / bulletins
   ============================================================ */

div.home,
Div.home {
   width: 100%;
   overflow: auto;
   padding: var(--space-md);
   background-color: var(--color-surface-raised);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   color: var(--color-text);
}

.homeLink {
   color: var(--color-text);
   font-family: var(--font-family);
   font-size: var(--font-size-md);
   font-weight: 600;
}

.homeDate {
   color: var(--color-text-muted);
   font-size: var(--font-size-xs);
   font-weight: 600;
}

/* ============================================================
   Forum
   ============================================================ */

.ForumAuthorText {
   color: var(--color-text-secondary);
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
}

.ForumDisplayName {
   color: var(--color-text-heading);
   font-family: var(--font-family);
   font-weight: 600;
}

.PostBody {
   color: var(--color-text);
   font-family: var(--font-family);
   line-height: var(--line-height);
}

.DateTime {
   color: var(--color-text-muted);
   font-family: var(--font-family);
   font-size: var(--font-size-xs);
}

hr.Forum {
   border-top: 1px solid var(--color-border-subtle);
   color: var(--color-border-subtle);
}

div.CodeBlock,
Div.CodeBlock {
   width: 100%;
   margin-bottom: var(--space-sm);
   padding: var(--space-md);
   overflow: auto;
   background-color: var(--color-code-bg);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   color: var(--color-text);
   font-family: var(--font-mono);
   font-size: var(--font-size-sm);
   line-height: 1.5;
   text-align: left;
   white-space: pre-wrap;
}

div.QuoteBlock,
Div.QuoteBlock {
   width: 100%;
   margin-bottom: var(--space-sm);
   padding: var(--space-md);
   overflow: auto;
   background-color: var(--color-quote-bg);
   border: 1px solid var(--color-quote-border);
   border-left: 3px solid var(--color-success);
   border-radius: var(--radius-md);
   color: var(--color-text);
   font-size: var(--font-size-sm);
   text-align: left;
}

td.QuoteCell { color: var(--color-text); }

/* ============================================================
   Forms
   ASP.NET renders bare input/select/textarea, so style the
   elements as well as the legacy class names.
   ============================================================ */

.Label {
   color: var(--color-text-secondary);
   font-family: var(--font-family);
   font-size: var(--font-size-xs);
   font-weight: 600;
   letter-spacing: 0.02em;
   text-transform: uppercase;
}

.LabelText {
   color: var(--color-text);
   font-family: var(--font-family);
   font-size: var(--font-size-base);
}

input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], input[type="url"],
input[type="date"], input[type="file"],
select, textarea,
.TextBox, .DropDownList {
   max-width: 100%;
   padding: 7px 10px;
   background-color: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   color: var(--color-text);
   font-family: var(--font-family);
   font-size: var(--font-size-base);
   outline: none;
   transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

textarea { line-height: var(--line-height); }

input[type="text"]:focus, input[type="password"]:focus,
input[type="email"]:focus, input[type="number"]:focus,
input[type="search"]:focus, input[type="url"]:focus,
input[type="date"]:focus,
select:focus, textarea:focus,
.TextBox:focus, .DropDownList:focus {
   border-color: var(--color-primary);
   box-shadow: 0 0 0 3px hsla(192, 70%, 50%, 0.18);
}

input[type="text"]:disabled, input[type="password"]:disabled,
select:disabled, textarea:disabled {
   background-color: var(--color-surface-raised);
   color: var(--color-text-muted);
   cursor: not-allowed;
}

input[type="checkbox"], input[type="radio"] {
   accent-color: var(--color-primary);
   margin-right: var(--space-xs);
   vertical-align: middle;
}

input[type="submit"], input[type="button"], input[type="reset"], button {
   padding: 8px 18px;
   background-color: var(--color-primary);
   background-image: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
   border: 1px solid var(--color-primary-hover);
   border-radius: var(--radius-sm);
   box-shadow: var(--shadow-sm);
   color: #fff;
   cursor: pointer;
   font-family: var(--font-family);
   font-size: var(--font-size-base);
   font-weight: 600;
   letter-spacing: 0.01em;
   transition: filter var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

input[type="submit"]:hover, input[type="button"]:hover,
input[type="reset"]:hover, button:hover {
   box-shadow: var(--shadow-md);
   filter: brightness(1.08);
}

input[type="submit"]:active, input[type="button"]:active,
input[type="reset"]:active, button:active {
   box-shadow: var(--shadow-sm);
   transform: translateY(1px);
}

input[type="submit"]:focus-visible, input[type="button"]:focus-visible,
input[type="reset"]:focus-visible, button:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
}

input[type="submit"]:disabled, input[type="button"]:disabled, button:disabled {
   background-image: none;
   background-color: var(--color-text-muted);
   border-color: var(--color-text-muted);
   box-shadow: none;
   cursor: not-allowed;
}

/* ASP.NET validators and error labels render red text */
span[style*="color:Red"], span[style*="color: Red"],
.ErrorText {
   color: var(--color-error) !important;
   font-size: var(--font-size-sm);
   font-weight: 500;
}

/* ============================================================
   Footer
   ============================================================ */

.Footer {
   color: var(--color-text-muted);
   font-size: var(--font-size-xs);
   font-variant: normal;
   text-align: center;
}

table.Main > tbody > tr:last-child > td.Main {
   padding-top: var(--space-md);
   border-top: 1px solid var(--color-border-subtle);
}

/* ============================================================
   Responsive
   The legacy layout is a fixed 1000px table; soften it on
   narrow screens and let wide tables scroll rather than
   forcing the page to scroll horizontally.
   ============================================================ */

@media (max-width: 1040px) {
   table.Layout { padding: var(--space-md) var(--space-sm); }

   table.Main > tbody > tr > td.Main[width="10"] { width: var(--space-sm) !important; }

   table.Main > tbody > tr > td.Main[align="left"] {
      padding: var(--space-md) 0;
   }
}

@media (max-width: 640px) {
   body { font-size: var(--font-size-sm); }

   table.Layout { padding: var(--space-sm) 0; }

   table.Main {
      border-left: 0;
      border-radius: 0;
      border-right: 0;
   }

   a.MainLink, A:link.MainLink, A:visited.MainLink {
      padding: 6px 10px;
      font-size: var(--font-size-xs);
   }

   .GridRowHeaderClass { padding: 7px 8px; }

   .GridRowItem, .GridRowItemEven, .GridRowItemOdd { padding: 6px 8px; }
}

@media print {
   body { background: #fff; color: #000; }
   table.Main { border: 0; box-shadow: none; }
   a.MainLink { display: none; }
}

/* ============================================================
   Modal overlay (Scripts/ctmodal.js)
   Detail pages open in a same-origin iframe over a blurred page.
   ============================================================ */

html.ctModalOpen,
html.ctModalOpen body {
   overflow: hidden;
}

/* Blur everything except the overlay itself. The overlay is appended as the
   last child of <body>, so blur body's other children. */
html.ctModalOpen body > *:not(.ctModalOverlay) {
   filter: blur(4px);
   pointer-events: none;
   transition: filter var(--transition-base);
   -webkit-user-select: none;
   user-select: none;
}

.ctModalOverlay {
   position: fixed;
   inset: 0;
   top: 0; right: 0; bottom: 0; left: 0;   /* inset fallback */
   z-index: 1000;
   display: none;
   align-items: center;
   justify-content: center;
   padding: var(--space-lg);
   background-color: hsla(220, 25%, 12%, 0.55);
   -webkit-backdrop-filter: blur(2px);
   backdrop-filter: blur(2px);
}

.ctModalOverlay.isVisible {
   display: flex;
   animation: ctModalFade var(--transition-base) ease both;
}

@keyframes ctModalFade {
   from { opacity: 0; }
   to   { opacity: 1; }
}

.ctModalDialog {
   display: flex;
   flex-direction: column;
   width: 100%;
   max-width: 1100px;
   height: 88vh;
   max-height: 88vh;
   overflow: hidden;
   background-color: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg);
   animation: ctModalRise var(--transition-base) ease both;
}

@keyframes ctModalRise {
   from { opacity: 0; transform: translateY(8px) scale(0.99); }
   to   { opacity: 1; transform: none; }
}

.ctModalHead {
   display: flex;
   flex: 0 0 auto;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-md);
   padding: 10px 14px;
   background-color: var(--color-primary);
   background-image: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
   color: #fff;
}

.ctModalTitle {
   font-size: var(--font-size-base);
   font-weight: 600;
   letter-spacing: 0.01em;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.ctModalActions {
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
   gap: var(--space-sm);
}

a.ctModalOpen,
a.ctModalOpen:link,
a.ctModalOpen:visited {
   padding: 3px 10px;
   background-color: hsla(0, 0%, 100%, 0.16);
   border: 1px solid hsla(0, 0%, 100%, 0.45);
   border-radius: var(--radius-pill);
   color: #fff;
   font-size: var(--font-size-xs);
   font-weight: 600;
   text-decoration: none;
   white-space: nowrap;
}

a.ctModalOpen:hover {
   background-color: hsla(0, 0%, 100%, 0.30);
   border-color: #fff;
   color: #fff;
   text-decoration: none;
}

button.ctModalClose {
   width: 28px;
   height: 28px;
   padding: 0;
   background-color: hsla(0, 0%, 100%, 0.16);
   background-image: none;
   border: 1px solid hsla(0, 0%, 100%, 0.45);
   border-radius: var(--radius-pill);
   box-shadow: none;
   color: #fff;
   cursor: pointer;
   font-size: 18px;
   font-weight: 400;
   line-height: 1;
}

button.ctModalClose:hover {
   background-color: hsla(0, 0%, 100%, 0.30);
   border-color: #fff;
   box-shadow: none;
   filter: none;
}

.ctModalBody {
   flex: 1 1 auto;
   min-height: 0;
   background-color: var(--color-surface);
}

iframe.ctModalFrame {
   display: block;
   width: 100%;
   height: 100%;
   border: 0;
   background-color: transparent;
}

@media (max-width: 640px) {
   .ctModalOverlay { padding: 0; }

   .ctModalDialog {
      height: 100%;
      max-height: 100%;
      border: 0;
      border-radius: 0;
   }
}

@media (prefers-reduced-motion: reduce) {
   .ctModalOverlay.isVisible,
   .ctModalDialog { animation: none; }

   html.ctModalOpen body > *:not(.ctModalOverlay) { transition: none; }
}

/* ============================================================
   Row delete action
   Replaces img/x.gif. The icon is a themeable SVG mask defined
   once here rather than inline SVG repeated on every row.
   Native title="" supplies the tooltip.
   ============================================================ */

.VisuallyHidden {
   position: absolute !important;
   width: 1px;
   height: 1px;
   margin: -1px;
   padding: 0;
   overflow: hidden;
   border: 0;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   white-space: nowrap;
}

a.DeleteAction,
a.DeleteAction:link,
a.DeleteAction:visited {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 26px;
   height: 26px;
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: var(--radius-sm);
   cursor: pointer;
   text-decoration: none;
   transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

a.DeleteAction:hover,
a.DeleteAction:focus-visible {
   background-color: var(--color-error-bg);
   border-color: var(--color-error-border);
   text-decoration: none;
}

a.DeleteAction:focus-visible {
   outline: 2px solid var(--color-error);
   outline-offset: 1px;
}

.DeleteIcon {
   display: block;
   width: 15px;
   height: 15px;
   background-color: var(--color-text-muted);
   transition: background-color var(--transition-fast);
   /* trash can */
   -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: center;
   mask-position: center;
   -webkit-mask-size: contain;
   mask-size: contain;
}

a.DeleteAction:hover .DeleteIcon,
a.DeleteAction:focus-visible .DeleteIcon {
   background-color: var(--color-error);
}

/* ============================================================
   Package manifest viewer (project_manifest.aspx)
   ============================================================ */

td.ManifestPicker {
   padding: var(--space-md) 0;
   display: flex;
   align-items: center;
   gap: var(--space-sm);
   flex-wrap: wrap;
}

td.ManifestPicker .Label { margin-right: var(--space-xs); }

td.ManifestPicker select { min-width: 260px; }

/* Drop timestamps are a fixed, shorter width than package names. */
td.ManifestPicker select#ddlDrop { min-width: 200px; }

.ManifestMeta {
   color: var(--color-text-muted);
   font-family: var(--font-family);
   font-size: var(--font-size-xs);
   margin-left: var(--space-sm);
}

.ManifestStatus {
   display: none;
   margin: var(--space-sm) 0 var(--space-md);
   padding: 10px 14px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   background-color: var(--color-surface-raised);
   color: var(--color-text-secondary);
   font-size: var(--font-size-sm);
}

.ManifestStatus.is-warn {
   background-color: hsla(38, 90%, 50%, 0.10);
   border-color: hsla(38, 90%, 45%, 0.35);
   color: var(--color-warning);
}

.ManifestStatus.is-error {
   background-color: var(--color-error-bg);
   border-color: var(--color-error-border);
   color: var(--color-error);
}

/* wide grid scrolls in its own box rather than pushing the page sideways */
#manifestGridWrap {
   overflow-x: auto;
   border-radius: var(--radius-md);
}

#manifestGrid { min-width: 720px; }

#manifestGrid th.ManifestNum,
#manifestGrid td.ManifestNum {
   text-align: right;
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
}

code.ManifestSha {
   background: none;
   border: 0;
   padding: 0;
   color: var(--color-text-secondary);
   font-family: var(--font-mono);
   font-size: var(--font-size-xs);
   cursor: help;
}

/* ---------- manifest: orphan rows, actions, totals ---------- */

#manifestGrid th.ManifestAct,
#manifestGrid td.ManifestAct {
   width: 44px;
   text-align: center;
   white-space: nowrap;
}

/* a file on disk that ProjectOutput does not list */
.OrphanTag {
   display: inline-block;
   margin-left: var(--space-sm);
   padding: 1px 7px;
   background-color: hsla(38, 90%, 50%, 0.14);
   border: 1px solid hsla(38, 90%, 45%, 0.40);
   border-radius: var(--radius-pill);
   color: var(--color-warning);
   font-family: var(--font-family);
   font-size: 10.5px;
   font-weight: 600;
   letter-spacing: 0.02em;
   vertical-align: middle;
   white-space: nowrap;
}

/* How far back the selected drop is. Green for the drop that is actually
   shipping; neutral grey for the rest, because looking at an older drop is
   informational, not a problem -- amber stays reserved for orphaned files. */
.DropBadge {
   display: none;
   padding: 1px 8px;
   border-radius: var(--radius-pill);
   background-color: var(--color-surface-raised);
   border: 1px solid var(--color-border);
   color: var(--color-text-muted);
   font-family: var(--font-family);
   font-size: 10.5px;
   font-weight: 600;
   letter-spacing: 0.02em;
   vertical-align: middle;
   white-space: nowrap;
}

.DropBadge.is-shown { display: inline-flex; align-items: baseline; }

.DropBadge.is-current {
   background-color: hsla(152, 55%, 40%, 0.14);
   border-color: hsla(152, 55%, 36%, 0.40);
   color: var(--color-success);
}

/* Compare sits inside the badge as a second segment, divided off by a hairline
   rule. It only ever appears on an older drop, so the pill stays a plain label
   for the current one. */
.DropBadge .CompareLink {
   display: none;
   margin-left: 6px;
   padding-left: 6px;
   border-left: 1px solid var(--color-border);
   color: inherit;
   font-size: 8.5px;
   font-weight: 700;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   text-decoration: none;
   opacity: 0.75;
}

.DropBadge .CompareLink.is-shown { display: inline; }

.DropBadge .CompareLink:hover,
.DropBadge .CompareLink:focus {
   color: var(--color-primary);
   text-decoration: underline;
   opacity: 1;
}

/* ---- drop comparison ---- */

.CompareToggle {
   font-family: var(--font-family);
   font-size: var(--font-size-xs);
   color: var(--color-text-muted);
   white-space: nowrap;
}

#compareGrid th.CompareSide,
#compareGrid td.CompareSide {
   border-left: 1px solid var(--color-border);
}

#compareGrid td.CompareAbsent {
   border-left: 1px solid var(--color-border);
   color: var(--color-text-muted);
   font-style: italic;
   text-align: center;
}

/* The change tag carries the colour; the row keeps only a faint wash, so a
   long list stays readable rather than turning into stripes. */
.CmpTag {
   display: inline-block;
   padding: 1px 7px;
   border-radius: var(--radius-pill);
   font-family: var(--font-family);
   font-size: 10.5px;
   font-weight: 600;
   letter-spacing: 0.02em;
   white-space: nowrap;
}

.CmpTag.cmp-changed {
   background-color: hsla(38, 90%, 50%, 0.14);
   border: 1px solid hsla(38, 90%, 45%, 0.40);
   color: var(--color-warning);
}

.CmpTag.cmp-added {
   background-color: hsla(152, 55%, 40%, 0.14);
   border: 1px solid hsla(152, 55%, 36%, 0.40);
   color: var(--color-success);
}

.CmpTag.cmp-removed {
   background-color: hsla(0, 70%, 50%, 0.12);
   border: 1px solid var(--color-error-border);
   color: var(--color-error);
}

.CmpTag.cmp-unchanged {
   background-color: hsla(0, 0%, 50%, 0.10);
   border: 1px solid var(--color-border);
   color: var(--color-text-muted);
}

#compareGrid tr.cmp-changed td { background-color: hsla(38, 90%, 50%, 0.05); }
#compareGrid tr.cmp-added   td { background-color: hsla(152, 55%, 40%, 0.05); }
#compareGrid tr.cmp-removed td { background-color: hsla(0, 70%, 50%, 0.05); }

#manifestGrid tr.is-orphan td {
   background-color: hsla(38, 90%, 50%, 0.06);
}

#manifestGrid tr.is-orphan:hover td {
   background-color: hsla(38, 90%, 50%, 0.12);
}

/* totals row -- reuses the header treatment so it reads as a summary band */
#manifestTotals td {
   border-top: 2px solid var(--color-table-border);
   text-transform: none;
   letter-spacing: 0;
   font-size: var(--font-size-sm);
}

#manifestTotals #totalFiles,
#manifestTotals #totalSize {
   font-weight: 700;
   color: var(--color-text-heading);
}

#btnRebuild {
   margin-left: var(--space-sm);
   padding: 6px 14px;
   font-size: var(--font-size-sm);
}

#btnRebuild:disabled {
   background-image: none;
   background-color: var(--color-text-muted);
   border-color: var(--color-text-muted);
   box-shadow: none;
   cursor: not-allowed;
}

/* breathing room between the package picker and the grid */
td.ManifestPicker {
   padding-bottom: calc(var(--space-md) + 5px);
}

.ManifestStatus { margin-top: 5px; }

#manifestGridWrap { margin-top: 5px; }

/* Rule between the orphan block and the tracked files below it. Drawn on the
   first tracked row rather than as a separate <tr>, so the zebra striping and
   column alignment are untouched. */
#manifestGrid tr.starts-tracked > td {
   border-top: 3px solid var(--color-text-secondary);
}

/* ---------- manifest: multi-select delete ---------- */

#manifestGrid input[type="checkbox"] {
   margin: 0;
   cursor: pointer;
   vertical-align: middle;
}

#manifestGrid tr.is-picked > td {
   background-color: var(--color-error-bg);
}

#manifestGrid tr.is-picked > td:first-child {
   box-shadow: inset 3px 0 0 var(--color-error);
}

#btnDelete {
   margin-left: var(--space-sm);
   padding: 6px 14px;
   font-size: var(--font-size-sm);
   background-image: linear-gradient(135deg, var(--color-error), hsl(0, 70%, 42%));
   border-color: hsl(0, 70%, 40%);
}

#btnDelete:disabled,
#btnRebuild:disabled {
   background-image: none;
   background-color: var(--color-text-muted);
   border-color: var(--color-text-muted);
   box-shadow: none;
   cursor: not-allowed;
}

/* ---- code signing ---- */

/* UNSIGNED is the whole reason for this column, so it gets a filled red box
   rather than the tinted pill used elsewhere -- it should be findable by
   scanning the column, not by reading it. */
.SignBad {
   display: inline-block;
   padding: 1px 7px;
   border: 1px solid var(--color-error);
   border-radius: var(--radius-sm, 3px);
   background-color: var(--color-error);
   color: hsl(0, 0%, 100%);
   font-family: var(--font-family);
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.06em;
   white-space: nowrap;
}

.SignOk {
   color: var(--color-text-secondary);
   font-family: var(--font-family);
   font-size: var(--font-size-xs);
   white-space: nowrap;
}

.SignNa {
   color: var(--color-text-muted);
   font-family: var(--font-family);
   font-size: var(--font-size-xs);
}

/* A row carrying an unsigned binary gets a faint wash too, so the offending
   file is obvious even when the column is scrolled out of view. */
#manifestGrid tr.is-unsigned td {
   background-color: hsla(0, 70%, 50%, 0.06);
}

/* Nothing deletable in this package -- drop the action column entirely rather
   than leaving an empty one with a select-all that controls nothing. */
#manifestGrid.no-actions th.ManifestAct,
#manifestGrid.no-actions td.ManifestAct {
   display: none;
}

/* "Keep me signed in" on the login card */
.LoginRemember,
.LoginRemember label {
   color: var(--color-text-secondary);
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
   cursor: pointer;
}

.LoginRemember input[type="checkbox"] {
   margin-right: 6px;
   vertical-align: middle;
}