/* =========================================================
   JUMBO BLOCK® Dashboard – base.css  (GLOBAL)
   Shared: layout container, sections, panels, buttons,
   header flex, modal basics, a11y/focus, theme variables.
   CSP-safe. No page-specific styling.
   ========================================================= */

/* --- Reset (minimal) --- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

img { max-width: 100%; height: auto; display: block; }

:root{
  /* Fonts */
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Ubuntu, Cantarell, Arial, sans-serif;

  /* Sizing */
  --container-max: 1160px;  /* shared container width */
  --gap-1: 8px;
  --gap-2: 12px;
  --gap-3: 16px;

  /* CHANGED: was 24px -> tighter vertical rhythm */
  --gap-4: 16px;

  --pad-1: 8px;
  --pad-2: 12px;
  --pad-3: 16px;
  --pad-4: 20px;

  /* Radius / shadow */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,0.08);

  /* Colors (light) */
  --bg: #ffffff;
  --bg-soft: #f5f7f9;
  --text: #111827;
  --muted: #6b7280;
  --border: #d1d5db;

  --accent: #2563eb;
  --accent-soft: rgba(37,99,235,0.12);

  --ok: #16a34a;
  --warn: #d97706;
  --err: #dc2626;

  /* Focus ring */
  --focus: 0 0 0 2px rgba(37,99,235,0.45);
}

html[data-theme="dark"]{
  --bg: #0f172a;
  --bg-soft: #111827;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: #1f2937;

  --accent: #60a5fa;
  --accent-soft: rgba(96,165,250,0.16);

  --shadow: 0 1px 2px rgba(0,0,0,0.60);
}

body{
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Links --- */
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* --- Accessibility / focus --- */
:focus-visible{
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================================================
   GLOBAL LAYOUT PRIMITIVES
   ========================================================= */

/* Container */
.container{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--pad-3);
}

/* Sections (spacing between major blocks) */
/* CHANGED: was 24px top/bottom -> now 16px top/bottom */
.section{
  padding: var(--gap-4) 0;
}

/* CHANGED: compact was 16px -> now 12px */
.section.compact{
  padding: var(--gap-2) 0;
}

/* Header bar (title left, actions right) */
.header-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3);

  /* CHANGED: was 16px -> now 12px */
  margin-bottom: var(--gap-2);
}

.header-title{
  display: flex;
  align-items: baseline;
  gap: var(--gap-2);
  flex-wrap: wrap;
}

.header-actions{
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  flex-wrap: wrap;
}

/* Panels (shared card look) */
.panel{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  padding: var(--pad-3);
}

.panel.soft{
  background: var(--bg-soft);
}

.panel-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-2);
  margin-bottom: var(--gap-2);
}

.panel-title{
  font-weight: 600;
}

/* Simple stacks */
.stack{
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}

/* --- Buttons (shared, touch safe) --- */
.btn{
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  min-height: 42px;               /* gloves / shaky hands */
  cursor: pointer;
  box-shadow: none;
  transition: background 120ms ease, border-color 120ms ease, transform 60ms ease;
}

.btn:hover{
  background: var(--bg-soft);
}

.btn:active{
  transform: translateY(1px);
}

.btn.primary{
  border-color: transparent;
  background: var(--accent);
  color: #fff;
}

.btn.primary:hover{
  background: color-mix(in srgb, var(--accent) 88%, #000 12%);
}

/* fallback for browsers without color-mix (keeps it safe) */
@supports not (color-mix(in srgb, #000 50%, #fff)){
  .btn.primary:hover{ filter: brightness(0.95); }
}

.btn.ghost{
  background: transparent;
}

.btn.danger{
  border-color: transparent;
  background: var(--err);
  color: #fff;
}

.btn:disabled,
.btn[aria-disabled="true"]{
  opacity: 0.55;
  cursor: not-allowed;
}

/* Small label text */
.muted{ color: var(--muted); }
.hidden{ display: none !important; }

/* =========================================================
   MODAL BASICS (shared)
   ========================================================= */
.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--pad-3);
  z-index: 9999;
}

.modal-backdrop.open{ display: flex; }

.modal{
  width: 100%;
  max-width: 720px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: var(--pad-4);
}

.modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-2);
  margin-bottom: var(--gap-2);
}

.modal-title{ font-weight: 700; }

.modal-actions{
  display: flex;
  justify-content: flex-end;
  gap: var(--gap-2);
  margin-top: var(--gap-3);
}

@import url('/css/footer.css');

/* =========================================================
   Compact spacing override (wins against later rules)
   ========================================================= */

/* tighten vertical gaps between all major blocks */
.section{
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* compact variant even tighter */
.section.compact{
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* reduce header-to-content gap */
.header-bar{
  margin-bottom: 12px !important;
}

/* if any panels add extra outer spacing, keep it tight */
.panel{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* =========================================================
   Footer History Modal – CSP-safe, identical in START/ADMIN/CONTROL
   Scope: ONLY #history-modal
   ========================================================= */

#history-modal .version-modal-content{
  width: min(900px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - 120px) !important;
  overflow: auto !important;

  font-size: 16px !important;
  line-height: 1.45 !important;
}

#history-modal #history-modal-content{
  margin-top: 10px !important;
}

/* Top current card */
#history-modal #history-modal-content > div:first-child{
  padding: 12px 14px !important;
  border-radius: 14px !important;
  margin-bottom: 8px !important;

  border: 1px solid rgba(0,0,0,0.12) !important;
  background: rgba(0,0,0,0.02) !important;
}

html[data-theme="dark"] #history-modal #history-modal-content > div:first-child{
  border-color: rgba(255,255,255,0.16) !important;
  background: rgba(255,255,255,0.04) !important;
}

#history-modal .value{
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  margin-bottom: 6px !important;
}

#history-modal .small{
  font-size: 1.02rem !important;
  line-height: 1.45 !important;
  opacity: 0.88 !important;
}

/* Divider */
#history-modal .divider{
  height: 1px !important;
  margin: 14px 0 !important;
  background: rgba(0,0,0,0.12) !important;
}

html[data-theme="dark"] #history-modal .divider{
  background: rgba(255,255,255,0.16) !important;
}

/* Cards */
#history-modal .proposal-card{
  border-radius: 14px !important;
  padding: 14px !important;
  margin-top: 12px !important;

  border: 1px solid rgba(0,0,0,0.12) !important;
  background: rgba(0,0,0,0.015) !important;
}

html[data-theme="dark"] #history-modal .proposal-card{
  border-color: rgba(255,255,255,0.16) !important;
  background: rgba(255,255,255,0.03) !important;
}

#history-modal .proposal-title{
  font-size: 1.08rem !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  margin-bottom: 6px !important;
}

#history-modal .proposal-reason{
  font-size: 1.02rem !important;
  line-height: 1.45 !important;
  opacity: 0.92 !important;
  margin-bottom: 8px !important;
}

#history-modal .clean-list li{
  font-size: 1.0rem !important;
  line-height: 1.45 !important;
  margin: 7px 0 !important;
  opacity: 0.94 !important;
}