/* md3_overrides.css
   共用 Material Design 3（MD3）樣式覆寫：同時涵蓋桌機與手機 RWD。
   目標：不大改既有 DOM / JS，透過 token + 元件化 CSS 讓三個前端一致、現代、可用性提升。
*/

/* -----------------------------
   1) Design tokens (MD3-like)
   ----------------------------- */
:root {
  /* Typography */
  --md3-font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Shapes */
  --md3-radius-xs: 8px;
  --md3-radius-sm: 12px;
  --md3-radius-md: 16px;
  --md3-radius-lg: 24px;
  --md3-radius-xl: 28px;
  --md3-radius-pill: 999px;

  /* Elevation (subtle) */
  --md3-elev-1: 0 1px 2px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06);
  --md3-elev-2: 0 2px 6px rgba(0,0,0,.10), 0 6px 16px rgba(0,0,0,.08);

  /* Motion */
  --md3-ease: cubic-bezier(.2, 0, 0, 1);

  /* Color tokens (light) — 以中性 + 深色 primary 呈現 MD3 質感 */
  --md3-bg: #FFFBFE;          /* background */
  --md3-surface: #FFFBFE;     /* surface */
  --md3-surface-1: #F7F2FA;   /* surface-container-low */
  --md3-surface-2: #F3EDF7;   /* surface-container */
  --md3-outline: rgba(29, 27, 32, .18);
  --md3-outline-variant: rgba(29, 27, 32, .10);

  --md3-primary: #1F1F1F;
  --md3-on-primary: #FFFFFF;
  --md3-primary-container: rgba(31,31,31,.10);
  --md3-on-surface: #1D1B20;
  --md3-on-surface-variant: rgba(29, 27, 32, .72);

  --md3-error: #B3261E;
  --md3-error-container: rgba(179, 38, 30, .12);
  --md3-success: #146C2E;
  --md3-success-container: rgba(20, 108, 46, .12);

  /* Focus ring */
  --md3-focus: rgba(31, 31, 31, .28);
}

@media (prefers-color-scheme: dark) {
  :root {
    --md3-bg: #141218;
    --md3-surface: #141218;
    --md3-surface-1: #1D1A22;
    --md3-surface-2: #231F2A;
    --md3-outline: rgba(230, 225, 229, .22);
    --md3-outline-variant: rgba(230, 225, 229, .14);

    --md3-primary: #E6E1E5;
    --md3-on-primary: #1F1F1F;
    --md3-primary-container: rgba(230,225,229,.14);
    --md3-on-surface: #E6E1E5;
    --md3-on-surface-variant: rgba(230, 225, 229, .72);

    --md3-error: #F2B8B5;
    --md3-error-container: rgba(242, 184, 181, .16);
    --md3-success: #81C995;
    --md3-success-container: rgba(129, 201, 149, .16);

    --md3-focus: rgba(230, 225, 229, .28);
  }
}

/* Map tokens to existing variable sets so we don't rewrite every page */
:root {
  /* dashboard.html / threads_accounts.html use these */
  --md-sys-color-background: var(--md3-bg);
  --md-sys-color-surface: var(--md3-surface);
  --md-sys-color-surface-container: var(--md3-surface-1);
  --md-sys-color-primary: var(--md3-primary);
  --md-sys-color-primary-dark: color-mix(in srgb, var(--md3-primary) 88%, #000 12%);
  --md-sys-color-on-primary: var(--md3-on-primary);
  --md-sys-color-secondary-container: var(--md3-primary-container);
  --md-sys-color-on-surface: var(--md3-on-surface);
  --md-sys-color-outline: var(--md3-outline);
  --md-sys-color-surface-variant: var(--md3-surface-2);
  --md-sys-color-on-surface-variant: var(--md3-on-surface-variant);
  --md-sys-color-outline-variant: var(--md3-outline-variant);
  --md-sys-color-error: var(--md3-error);
  --md-sys-color-error-bg: var(--md3-error-container);
  --md-sys-color-error-bg-hover: color-mix(in srgb, var(--md3-error-container) 70%, var(--md3-error) 30%);
  --md-sys-color-success-chip: var(--md3-success);
  --md-sys-color-success-bg: var(--md3-success-container);
  --md-sys-color-success-bg-hover: color-mix(in srgb, var(--md3-success-container) 70%, var(--md3-success) 30%);
}

:root {
  /* cloud_admin_gui/index.html uses these */
  --bg: var(--md3-bg);
  --surface: var(--md3-surface);
  --primary: var(--md3-primary);
  --primary-dark: color-mix(in srgb, var(--md3-primary) 88%, #000 12%);
  --on-primary: var(--md3-on-primary);
  --outline: var(--md3-outline);
  --outline-variant: var(--md3-outline-variant);
  --text-main: var(--md3-on-surface);
  --text-sub: var(--md3-on-surface-variant);
  --error: var(--md3-error);
  --error-bg: var(--md3-error-container);
  --success: var(--md3-success);
  --success-bg: var(--md3-success-container);
  --hover: color-mix(in srgb, var(--md3-primary) 8%, transparent);
  --hover-btn: color-mix(in srgb, var(--md3-primary) 12%, transparent);
}

/* -----------------------------
   2) Global base + accessibility
   ----------------------------- */
html, body {
  font-family: var(--md3-font-family);
  background: var(--md3-bg);
  color: var(--md3-on-surface);
}

/* Better tap targets on touch devices */
@media (hover: none) and (pointer: coarse) {
  button, a, input, select {
    min-height: 44px;
  }
}

button, a, input, select, textarea {
  font-family: var(--md3-font-family);
}

/* Focus ring (MD3-like) */
:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--md3-focus);
  outline-offset: 2px;
}

/* -----------------------------
   3) Components (generic)
   ----------------------------- */

/* Buttons: keep existing classes but upgrade feel */
.btn-filled, .btn-primary {
  box-shadow: none;
}

.btn-filled, .btn-primary {
  background: var(--md3-primary) !important;
  color: var(--md3-on-primary) !important;
}

.btn-tonal {
  background: var(--md3-primary-container) !important;
  color: var(--md3-primary) !important;
}

.btn-danger {
  background: var(--md3-error-container) !important;
  color: var(--md3-error) !important;
}

.btn-success {
  background: var(--md3-success-container) !important;
  color: var(--md3-success) !important;
}

.btn-icon {
  border-radius: var(--md3-radius-pill) !important;
}

/* Cards */
.card, .stats-bar, .stat-card, .table-wrap {
  box-shadow: var(--md3-elev-1) !important;
  border: 1px solid var(--md3-outline-variant);
}

/* Table: add horizontal scroll container hints */
.table-container, .table-wrap {
  -webkit-overflow-scrolling: touch;
}

/* Dialogs: more MD3-like */
.modal-dialog, .modal {
  border: 1px solid var(--md3-outline-variant);
  box-shadow: var(--md3-elev-2);
}

/* Inputs */
input, select {
  border-color: var(--md3-outline) !important;
}

/* -----------------------------
   4) Responsive: MD3 layout rules
   ----------------------------- */

/* Tablet and down: reduce whitespace, allow wrapping */
@media (max-width: 900px) {
  body { padding: 16px !important; }
  header { gap: 12px !important; }
}

/* Phone: single-column, sticky actions patterns */
@media (max-width: 640px) {
  body { padding: 14px !important; }

  /* Make toolbars scrollable instead of wrapping into 3 lines */
  .toolbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .toolbar::-webkit-scrollbar { height: 8px; }
  .toolbar::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--md3-outline) 50%, transparent);
    border-radius: var(--md3-radius-pill);
  }

  /* Cards: slightly tighter */
  .card { border-radius: var(--md3-radius-md) !important; }
  .stats-bar { border-radius: var(--md3-radius-md) !important; }

  /* Dialogs go near-fullscreen */
  .modal-dialog, .modal {
    width: min(96vw, 720px) !important;
    max-width: 96vw !important;
    max-height: 88vh !important;
    overflow: auto !important;
    border-radius: var(--md3-radius-lg) !important;
  }
}