/*
 * base.css — Reset, CSS variables, typography, global elements
 */

/* ─── Custom Properties ─────────────────────────────────────────────────── */

:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-text: #212121;
  --color-nav-bg: #060808;
  --color-nav-hover: #7d7d7d;
  --color-accent: #007cba;
  --color-accent-hover: #005a8e;
  --color-muted: #595959;
  --color-border: #cccccc;
  --color-heading-bg: #f5f5f5;
  --color-heading-text: #475569;
  --color-subheading: #334155;
  --color-light-accent: #f5a77d;
  --color-notes: #94a3b8;
  --color-row-even: #edf2f7;
  --color-row-alt:  #dce6ef;
  --color-quick-add: #dcfce7;
  --color-quick-filter: #f5f3e2;
  --color-filter-bg: #f2f9fd;
  --color-projected-text: #000000;
  --color-focus-ring: #007cba;
  --color-success-accent: #0da543;
  --color-error-accent: #a94343;

  /* Alert backgrounds — overridden in main.dark.css for the dark theme */
  --color-notice-bg: #d9edf7;
  --color-warning-bg: #fcf8e3;
  --color-error-bg: #f2dede;
  --color-success-bg: #dff0d8;

  /* Modern alert text + border colors (light theme).
     The .alert-* rules in components/widgets.css consume these.
     Overridden in main.dark.css for the dark theme. */
  --alert-info-text:      #1e40af;
  --alert-info-border:    #bfdbfe;
  --alert-success-text:   #166534;
  --alert-success-border: #bbf7d0;
  --alert-warning-text:   #92400e;
  --alert-warning-border: #fde68a;
  --alert-error-text:     #991b1b;
  --alert-error-border:   #fecaca;
  --alert-dark-bg:        var(--color-heading-bg);
  --alert-dark-border:    var(--color-border);
  --alert-dark-text:      var(--color-heading-text);

  /* Colored row pairs (even / odd) */
  --row-purple-even: #dd77ff;  --row-purple-odd: #ee88ff;
  --row-blue-even:   #66ccff;  --row-blue-odd:   #77ddff;
  --row-red-even:    #ff9988;  --row-red-odd:    #ffaaaa;
  --row-orange-even: #ffcc66;  --row-orange-odd: #ffdd77;
  --row-yellow-even: #ffff88;  --row-yellow-odd: #ffff55;
  --row-green-even:  #aaffaa;  --row-green-odd:  #ccffbb;

  /* Validation states */
  --color-required: #f07070;
  --color-warn-border: #f7d229;
  --color-upload: #6c3;
  --color-upload-light: #cfc;
  --color-pass-1: #f00;
  --color-pass-3: #f93;
  --color-pass-4: #6f6;
  --color-pass-6: #6c3;

  /* Typography */
  --font-base: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-heading: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-size-base: 0.875rem;   /* 14px */
  --font-size-sm: 0.75rem;      /* 12px */
  --font-size-xs: 0.625rem;     /* ~8pt */
  --font-size-h2: 1.125rem;     /* ~14pt */
  --font-size-h3: 1.125rem;     /* 18px */
  --font-size-h4: 1rem;         /* 16px */

  /* Layout */
  --page-max-width: 1100px;

  /* Form field widths (intentional fixed values) */
  --field-checkgap:     18px;
  --field-third:        60px;
  --field-half:         75px;
  --field-twothirds:   100px;
  --field-single:      150px;
  --field-onepointfive:225px;
  --field-double:      300px;
  --field-triple:      450px;
  --field-quadruple:   600px;

  /* Border radius */
  --radius-sm: 0.375rem;
  --radius:    0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;

  /* #3996 — extended token names used by styleGuide chrome.
     Aliased to PVM's existing tokens so we don't introduce new colors. */
  --color-text-soft:        var(--color-muted);
  --color-muted-light:      var(--color-notes);
  --color-muted-lighter:    var(--color-border);
  --color-link:             var(--color-heading-text);
  --color-nav-text:         #fff;
  --color-nav-hover-text:   #fff;
  --color-accent-text:      #fff;
  --color-border-soft:      var(--color-border);
}

/* ─── Box Sizing ─────────────────────────────────────────────────────────── */

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

/* ─── Reset ──────────────────────────────────────────────────────────────── */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  /* overflow-x: auto !important; */
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: 1.5;
}

/* ─── Tables ─────────────────────────────────────────────────────────────── */
/* Tailwind v4 does not reset border-collapse; ensure all tables collapse */

table {
  border-collapse: collapse;
}

/* ─── Links ──────────────────────────────────────────────────────────────── */

a {
  color: var(--color-heading-text);
  font-weight: bold;
  text-decoration: underline;
}
a:hover,
a:active {
  text-decoration: none;
}

/* ─── Typography ─────────────────────────────────────────────────────────── */

div.content h2 {
  clear: both;
  margin: 0 -0.625rem;
  font-size: var(--font-size-h2);
  color: var(--color-nav-bg);
  background: var(--color-heading-bg);
  padding: 0.625rem 0.625rem 0.625rem 1.25rem;
}
div.content h2 span.notes {
  color: var(--color-border);
  padding-left: 0.625rem;
  font-size: var(--font-size-sm);
  font-weight: normal;
  font-style: italic;
}
div.content h2 span.HasLinks {
  float: left;
}
div.content h2 br {
  clear: both;
}

div.content h3,
div.content h4 {
  clear: both;
  font-weight: normal;
  font-family: var(--font-heading);
}
div.content h3 {
  padding-left: 0.625rem;
  color: var(--color-heading-text);
  font-size: var(--font-size-h3);
}
div.content h4 {
  padding-left: 1.25rem;
  color: var(--color-subheading);
  font-size: var(--font-size-h4);
}
div.content h5 { padding-left: 1.5625rem; }
div.content h6 { padding-left: 1.875rem; }

div.content h3.light,
div.content h4.light {
  color: var(--color-light-accent);
}

div.content h3 span.notes,
div.content h4 span.notes {
  color: var(--color-notes);
  padding-left: 0.625rem;
  font-size: var(--font-size-sm);
  font-weight: normal;
  font-style: italic;
}
div.content h3 span.notes.right,
div.content h4 span.notes.right {
  float: right;
}

/* Heading section links (right-aligned) */
div.content h2 span.Links,
div.content h3 span.Links,
div.content h4 span.Links {
  display: inline;
  float: right;
  clear: none;
  font-size: var(--font-size-base);
  margin-right: 0.625rem;
  font-weight: normal;
  line-height: 22px;
  vertical-align: bottom;
}
div.content h3 span.Links,
div.content h4 span.Links {
  margin-top: -5px;
}
div.content h2 span.Links a {
  text-decoration: none;
}

/* Collapsible headings */
div.content h3.collapse,
div.content h4.collapse {
  cursor: pointer;
  background: url('../../../images/control_down.png') center left no-repeat;
  padding-left: 25px;
  margin-left: -5px;
}
div.content h3.collapse.up,
div.content h4.collapse.up {
  background-image: url('../../../images/control_right.png');
}

/* #3996 — h2 collapse chevron (left-side indicator), composite bg keeps
   the gray heading bar while showing the chevron icon. */
div.content h2.collapse {
  cursor: pointer;
  background: url('../../../images/control_down.png') 8px center no-repeat var(--color-heading-bg);
  padding-left: 28px;
}
div.content h2.collapse.up {
  background-image: url('../../../images/control_right.png');
}
div.content h3 label.help,
div.content h4 label.help {
  float: none;
  display: inline-block;
}

/* Alignment offsets that match form label widths */
div.content h3.single      { 
  padding-left: var(--field-single);      
  margin-top: 0.625rem; 
  margin-bottom: 0.25rem; 
  width: auto;
}
div.content h3.onepointfive{ 
  padding-left: var(--field-onepointfive); 
  margin-top: 0.625rem; 
  margin-bottom: 0.25rem; 
  width: auto;
}

/* ─── Global help/warning icon pseudo-element ────────────────────────────── */
/* Applied via .help / .helpWarning on labels, spans, and th cells everywhere */

.help::after,
.helpWarning::after {
  content: '';
  display: inline-block;
  vertical-align: text-top;
  margin-left: 5px;
  width: 16px;
  height: 16px;
}
.help::after        { background: url(../../../images/help.png)    center/contain no-repeat; }
.helpWarning::after { background: url(../../../images/warning.png) center/contain no-repeat; }

/* ─── AJAX error indicator ───────────────────────────────────────────────── */

#GlobalAjax {
  position: absolute;
  opacity: 0.8;
  background: #f00;
  font-weight: bold;
  color: #fff;
  padding: 2px;
}

pre.code-block {
  background: #f0f0f0;
  border: 1px solid #000;
}