/* Global design foundation: tokens and reusable components only. */
:root {
  --color-canvas: #e6e6e6;
  --color-surface: #ffffff;
  --color-surface-subtle: #f5f5f5;
  --color-text: #3f4a56;
  --color-muted: #697582;
  --color-border: #d6d6d6;
  --color-control-border: #b8c2cc;
  --color-primary: #c60000;
  --color-primary-hover: #a90000;
  --color-nav: #676767;
  --color-nav-text: #ffffff;
  --color-success: #2f7d32;
  --color-warning: #a36200;
  --color-danger: #b42318;
  --font-sans: "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-control: 4px;
  --radius-card: 4px;
  --layout-sidebar-width: 248px;
  --font-size-increase: 2pt;
  --text-sm: calc(13px + var(--font-size-increase));
  --text-base: calc(14px + var(--font-size-increase));
  --text-title: calc(18px + var(--font-size-increase));
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--color-canvas); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.55; }
a, a:visited { color: inherit; }
a:hover { color: inherit; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; color: var(--color-text); font-weight: 700; line-height: 1.35; }
h1 { font-size: var(--text-title); }
h2 { font-size: calc(16px + var(--font-size-increase)); }
h3, h4, h5, h6 { font-size: var(--text-base); }
p, .muted { color: var(--color-muted); }
small { color: var(--color-muted); font-size: calc(.833333em + var(--font-size-increase)); }

/* Shell and navigation */
.sidebar { background: var(--color-nav); color: var(--color-nav-text); border-color: var(--color-nav); }
.sidebar a, .sidebar a:visited, .sidebar button { color: var(--color-nav-text); text-decoration: none; }
.sidebar nav { background: transparent; border-color: transparent; }
.sidebar nav a:hover { background: rgba(255, 255, 255, .1); color: var(--color-nav-text); }
.topbar { background: var(--color-surface); border-color: var(--color-border); }
.ui-drag-handle { color: inherit; }
.ui-dragging, .is-dragging, .dragging { opacity: .55; }

/* Card, heading and metric components */
.panel, .page-head, main > section, main > article { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: none; }
.panel, .page-head { padding: var(--space-4); }
.page-head p, .panel-head p { margin: var(--space-1) 0 0; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.metrics > article, .metric-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.metrics span { color: var(--color-muted); }
.metrics strong, .metric-value, .stat-value, .kpi-value, .count-value, .number-value, [data-ui="metric"] { color: var(--color-text); font-family: var(--font-sans); font-size: calc(28px + var(--font-size-increase)); font-weight: 700; line-height: 1.15; }
.metrics .warn strong, .metric-value--emphasis, .stat-value--emphasis, .kpi-value--emphasis, [data-ui="metric-emphasis"] { color: var(--color-primary); }
.metric-value--compact, .stat-value--compact, .kpi-value--compact, [data-ui="metric-compact"] { font-size: calc(22px + var(--font-size-increase)); }
.metric-value--inline, .stat-value--inline, .kpi-value--inline, [data-ui="metric-inline"] { font-size: calc(18px + var(--font-size-increase)); }

/* Form and action components */
label, legend { color: var(--color-text); font-size: var(--text-sm); font-weight: 700; }
input, select, textarea { min-height: 36px; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-control-border); border-radius: var(--radius-control); font: inherit; }
input[readonly], input:disabled, select:disabled, textarea:disabled { background: var(--color-surface-subtle); color: var(--color-muted); }
button, .button, .btn, input[type="submit"] { min-height: 34px; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-control-border); border-radius: var(--radius-control); font: inherit; font-weight: 700; text-decoration: none; }
button:hover, .button:hover, .btn:hover, input[type="submit"]:hover { background: var(--color-surface-subtle); }
button.primary, button.danger, button.button-primary, button.btn-primary, button.btn-danger, input[type="submit"].primary { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
button.primary:hover, button.danger:hover, button.button-primary:hover, button.btn-primary:hover, button.btn-danger:hover, input[type="submit"].primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
a.button, a.btn, a.primary, a.danger, a.button-primary, a.btn-primary, a.btn-danger { color: var(--color-text); background: var(--color-surface); border-color: var(--color-control-border); }
button:disabled, input:disabled { cursor: not-allowed; opacity: .55; }
.danger-text, .error-text { color: var(--color-danger); }

/* Notice, status and data components */
.notice, .alert, [role="alert"] { color: var(--color-text); background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.notice.info { background: #f4f7fa; }
.notice.success { background: #eef7ef; }
.notice.warning { background: #fff8e8; }
.notice.error { background: #fff0ef; }
.status, .badge { color: var(--color-text); background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: 999px; font-size: var(--text-sm); font-weight: 700; }
.status.normal, .status.success, .badge.live { color: var(--color-success); }
.status.error, .status.failed, .status.needs_attention, .badge.off { color: var(--color-danger); }
.status.running { color: #2b5c98; }
.status.pending, .status.configured, .status.read_verified, .badge.waiting { color: var(--color-warning); }
.badge.period-before { color: #39759f; background: #eef8ff; border-color: #b9d8ea; }
.badge.period-current { color: #b35b6d; background: #fff2f5; border-color: #f0c5cf; }
.badge.period-ended { color: #697582; background: #f0f1f2; border-color: #d6d6d6; }
.badge.period-unknown { color: var(--color-muted); background: var(--color-surface-subtle); border-color: var(--color-border); }
.table-wrap { border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th { color: var(--color-text); background: var(--color-surface-subtle); font-size: var(--text-sm); }
th, td { border-bottom: 1px solid var(--color-border); }

/* Shared record-list component */
.ui-record-list { display: grid; gap: var(--space-3); }
.ui-record { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-4); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.ui-record:has(.ui-record__image) { grid-template-columns: auto minmax(0, 1fr) auto; }
.ui-record__image { width: 112px; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.ui-record__body { min-width: 0; overflow-wrap: anywhere; }
.ui-record__eyebrow, .ui-record__summary, .ui-record__source { margin: 0 0 var(--space-2); }
.ui-record__title { margin: 0 0 var(--space-2); }
.ui-record__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-3) 0 0; }
.ui-record__facts dt, .ui-record__facts dd { margin: 0; overflow-wrap: anywhere; }
.ui-record__facts dt { color: var(--color-muted); font-size: var(--text-sm); }
.ui-record__action { margin: 0; align-self: center; white-space: nowrap; }

/* Authentication uses the same tokens and card component. */
.auth { background: var(--color-canvas); }
.auth-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }

@media (max-width: 720px) {
  .panel-head { display: grid; }
  .ui-record, .ui-record:has(.ui-record__image) { grid-template-columns: 1fr; }
  .ui-record__image { width: min(160px, 100%); }
  .ui-record__facts { grid-template-columns: 1fr; }
  .ui-record__action { justify-self: start; }
}