/* ==========================================================================
   base.css
   Custom properties, resets, typography, and migrated customSCN.css rules.
   ========================================================================== */

/* Custom Properties
   ========================================================================== */

:root {
  --color-primary: #2196f3;
  --color-primary-dark: #1976d2;
  --color-primary-light: #bbdefb;
  --color-text: #333;
  --color-text-light: #666;
  --color-bg: #f6f6f6;
  --color-surface: #fff;
  --color-border: #ddd;
  --color-info-bg: #FFC;
  --color-info-border: #FC3;
  --color-accent: #2196f3;
  --color-accent-dark: #1e88e5;
  --color-accent-subtle: #e3f2fd;
  --color-accent-text: #1565c0;
  --color-nav-bg: #1976d2;
  --color-hover: #f0f0f0;
  --color-secondary: #e0e0e0;
  --color-secondary-text: #333;
  --color-table-stripe: #f9f9f9;
  --color-table-border: #eee;
  --radius: 0.5rem;
  --shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/* Box-sizing Reset
   ========================================================================== */

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

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

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.6;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  -webkit-text-size-adjust: 100%;
}

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

a {
  color: var(--color-primary);
}

a:visited {
  color: var(--color-primary-dark);
}

/* From customSCN.css
   ========================================================================== */

.wrappable {
  word-wrap: break-word !important;
  white-space: normal !important;
}

th {
  text-align: left;
}

p {
  margin: 0px;
  margin-bottom: 0.6em;
}

p:last-child {
  margin: 0px;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.noshadow {
  box-shadow: none !important;
}

.info {
  background-color: var(--color-info-bg);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  border: solid 1px var(--color-info-border);
  border-left: 4px solid var(--color-info-border);
}

li:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

label {
  padding-top: 5px;
}

table {
  border-spacing: 0px;
  width: 100%;
}

table td,
table th {
  padding: 0.4rem 0.6rem;
  line-height: 1.4;
}

table tr {
  border-bottom: 1px solid var(--color-table-border);
}

table tr:nth-child(even) {
  background: var(--color-table-stripe);
}

row:after {
  clear: both;
}

.total {
  border-top: solid 2px var(--color-text-light);
  border-bottom: solid 2px var(--color-text-light);
  background-color: var(--color-secondary);
}

.totalBox {
  border-top: solid 2px var(--color-text-light);
  border-bottom: solid 2px var(--color-text-light);
  background-color: var(--color-secondary);
}

div.total label {
  font-weight: bold;
}

div.total input {
  font-weight: bold;
  background-color: var(--color-info-bg);
}

div.input {
}

.floatLeft {
  float: left;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#imgFrame {
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
}

/* Loader / Spinner
   ========================================================================== */

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto 10px;
  border: 4px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Ordered Lists
   ========================================================================== */

ol {
  padding-left: 1.5em;
}

ol li {
  list-style: decimal;
}

ol li::after {
  content: none;
  display: none;
}

/* Dark Mode
   ========================================================================== */

html[data-theme="dark"] {
  --color-primary: #64b5f6;
  --color-primary-dark: #42a5f5;
  --color-primary-light: #1a3a5c;
  --color-text: #e0e0e0;
  --color-text-light: #aaa;
  --color-bg: #121212;
  --color-surface: #1e1e1e;
  --color-border: #333;
  --color-info-bg: #2a2a1a;
  --color-info-border: #665500;
  --color-accent: #1565c0;
  --color-accent-dark: #0d47a1;
  --color-accent-subtle: #1a2d42;
  --color-accent-text: #90caf9;
  --color-nav-bg: #0d3b66;
  --color-hover: #2a2a2a;
  --color-secondary: #333;
  --color-secondary-text: #e0e0e0;
  --color-table-stripe: #252525;
  --color-table-border: #333;
}