/* =========================================================
   Apple macOS Ventura UI — Clean Final Version
   Dark Mode (default) + Automatic Light Mode
   Modern buttons + tabs + tables
   Mobile-only compact tables
   ========================================================= */

/* ------------------------------
   THEME VARIABLES (DARK DEFAULT)
   ------------------------------ */
:root {
  --bg: #0f1220;
  --text: #e6eaf2;
  --muted: #9aa4b2;

  --panel: #12172a;
  --panel-border: #243044;

  --accent: #0a84ff;
  --accent-press: #0071e3;
  --accent-glow: rgba(10,132,255,0.18);

  --pos: #12c45b;
  --neg: #ff5f57;
  --zero: #a0a8b5;

  --hover: rgba(255,255,255,0.04);
  --col-hover: rgba(10,132,255,0.15);

  --radius: 10px;
  --radius-pill: 999px;

  --shadow: 0 4px 16px rgba(0, 0, 0, 0.25);

  --font: ui-sans-serif, system-ui, -apple-system, "SF Pro Text",
          Roboto, "Noto Sans", Arial, sans-serif;
}

/* ------------------------------
   LIGHT MODE OVERRIDES
   ------------------------------ */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f7fb;
    --text: #0f1220;
    --muted: #6a7380;

    --panel: #ffffff;
    --panel-border: #e1e5ef;

    --accent: #0a84ff;
    --accent-press: #0071e3;
    --accent-glow: rgba(10,132,255,0.15);

    --hover: rgba(0,0,0,0.04);
    --col-hover: rgba(10,132,255,0.1);

    --shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}

/* ------------------------------
   BASE PAGE LAYOUT
   ------------------------------ */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

.page-wrap {
  max-width: 1200px;
  margin: 24px auto 80px auto;
  padding: 0 16px;
}

.page-header h1 {
  margin: 0 0 20px 0;
  font-size: 2rem;
}

/* ------------------------------
   TABS (APPLE MACOS STYLE)
   ------------------------------ */
.tab-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.tab-button {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--panel-border);
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
}

.tab-button:hover {
  background: rgba(255,255,255,0.10);
}

.tab-button.on {
  background: var(--accent-glow);
  border-color: transparent;
  box-shadow: 0 4px 14px var(--accent-glow);
}

/* ------------------------------
   SECTIONS (DASHBOARD/DETAIL/ADMIN)
   ------------------------------ */
.view-section {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ------------------------------
   APPLE BUTTONS
   ------------------------------ */
.action-button {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  border: none;
  color: white;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px var(--accent-glow);
  transition: 0.15s;
}

.action-button:hover {
  filter: brightness(1.08);
}

.action-button:active {
  background: var(--accent-press);
  transform: translateY(1px);
}

.action-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ------------------------------
   INPUT FIELDS
   ------------------------------ */
.input-field {
  padding: 10px 12px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
}

.input-field:focus {
  border-color: var(--accent);
  outline: none;
}

/* ------------------------------
   PILLS
   ------------------------------ */
.pill-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.pill {
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--panel-border);
  background: rgba(255,255,255,0.05);
  cursor: pointer;
  transition: 0.15s;
}

.pill:hover { background: var(--hover); }

.pill.on {
  background: var(--accent-glow);
  border-color: transparent;
}

/* ------------------------------
   TABLES
   ------------------------------ */
.table-container {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
}

table.nice {
  width: 100%;
  border-collapse: collapse;
  min-width: 650px;
}

table.nice th,
table.nice td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--panel-border);
  text-align: left;
  white-space: nowrap;
}

table.nice thead th {
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 2;
  font-weight: 700;
}

/* Sorting arrows */
table.nice th.sort-asc::after  { content: " ▲"; }
table.nice th.sort-desc::after { content: " ▼"; }

/* Column hover */
.col-hover { background: var(--col-hover) !important; }

/* Detail table positive/negative colors */
.points-pos  { color: var(--pos); font-weight: 700; }
.points-neg  { color: var(--neg); font-weight: 700; }
.points-zero { color: var(--zero); font-weight: 700; }

/* ------------------------------
   MOBILE-ONLY TABLE SHRINK
   ------------------------------ */
@media (max-width: 600px) {
  table.nice th,
  table.nice td {
    font-size: 0.75rem;
    padding: 6px 8px;
  }

  table.nice {
    min-width: 450px;
  }

  table.nice thead th {
    padding: 6px 8px;
  }
}