/* ==========================================================================
   10-base.css
   Base styles – typography, layout foundation
   ========================================================================== */

/* --------------------------------------------------------------------------
   Global reset (minimal, safe for legacy)
   -------------------------------------------------------------------------- */

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

html {
  font-size: 100%;
}

body {
  margin: 0;
  padding: 0;

  font-family: var(--font-family-sans);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);

  background: var(--color-bg-app);
  color: var(--color-text-primary);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3) 0;
  font-weight: 600;
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

h1 { font-size: var(--h1-size); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-md); }
h6 { font-size: var(--font-size-sm); }
p {
  margin: 0 0 var(--space-4) 0;
  color: var(--color-text-secondary);
}

small {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Layout helpers (non-opinionated)
   -------------------------------------------------------------------------- */

.container {
  padding: var(--space-6);
}

.surface {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   Tables – base (DataTables will extend this)
   -------------------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  background-color: var(--color-bg-surface);
}

th, td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: middle;
}

th {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--color-text-secondary);
  background-color: var(--color-bg-muted);
  border-bottom: 1px solid var(--color-border-subtle);
}

td {
  border-bottom: 1px solid var(--color-border-subtle);
}

tbody tr:hover {
  background-color: var(--color-bg-muted);
}

/* Numeric alignment helper */
td.is-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Forms – neutral base
   -------------------------------------------------------------------------- */

input,
select,
textarea {
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);

  padding: var(--space-2) var(--space-3);

  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);

  background-color: var(--color-bg-surface);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Utility text colors
   -------------------------------------------------------------------------- */

.text-muted {
  color: var(--color-text-muted);
}

.text-secondary {
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Navigation / Menus – ensure active item is readable in Light + Dark
   -------------------------------------------------------------------------- */

/*
  Some menu implementations mark the currently selected item with `.active` or
  `aria-current="page"` but forget to set a contrasting background in the light
  theme. This rule makes the selected item always readable.
*/
.dropdown-menu a.active,
.dropdown-menu a[aria-current="page"],
.menu a.active,
.menu a[aria-current="page"],
.hamburger-menu a.active,
.hamburger-menu a[aria-current="page"],
#hamburgerMenu a.active,
#hamburgerMenu a[aria-current="page"],
.nav-menu a.active,
.nav-menu a[aria-current="page"] {
  background-color: var(--color-primary);
  color: var(--color-primary-text);
}

/* Keep hover readable too */
.dropdown-menu a.active:hover,
.dropdown-menu a[aria-current="page"]:hover,
.menu a.active:hover,
.menu a[aria-current="page"]:hover,
.hamburger-menu a.active:hover,
.hamburger-menu a[aria-current="page"]:hover,
#hamburgerMenu a.active:hover,
#hamburgerMenu a[aria-current="page"]:hover,
.nav-menu a.active:hover,
.nav-menu a[aria-current="page"]:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-primary-text);
}

/* --------------------------------------------------------------------------
   Scrollbars (optional, subtle)
   -------------------------------------------------------------------------- */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-border-strong);
  border-radius: 999px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}