/* ═══════════════════════════════════════════════════════════
   base.css — Variables, reset, core structural layout
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── DARK MODE TOKENS (default) ─────────────────────────── */
:root {
  --bg:           #0a0c10;
  --bg2:          #0f1218;
  --bg3:          #161b24;
  --bg4:          #1d2433;
  --border:       #242d3e;
  --border2:      #2e3a50;
  --text:         #e8edf5;
  --text2:        #8a98b0;
  --text3:        #5a6880;
  --accent:       #3b82f6;
  --accent2:      #60a5fa;
  --accent-glow:  rgba(59,130,246,0.15);
  --green:        #10b981;
  --amber:        #f59e0b;
  --red:          #ef4444;
  --radius:       12px;
  --radius-sm:    7px;
  --sidebar-w:    220px;
  --topbar-h:     56px;
  --transition:   0.2s ease;
}

/* ── LIGHT MODE TOKENS ───────────────────────────────────── */
[data-theme="light"] {
  --bg:           #f9f9f9;
  --bg2:          #ffffff;
  --bg3:          #e8ecf4;
  --bg4:          #dde2ef;
  --border:       #d0d7e8;
  --border2:      #b8c3d8;
  --text:         #111827;
  --text2:        #4b5563;
  --text3:        #9ca3af;
  --accent:       #2563eb;
  --accent2:      #3b82f6;
  --accent-glow:  rgba(37,99,235,0.12);
  --green:        #059669;
  --amber:        #d97706;
  --red:          #dc2626;
}

/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Times New Roman', sans-serif;
  background:  var(--bg);
  color:       var(--text);
  min-height:  100vh;
  overflow-x:  hidden;
  transition:  background 0.25s ease, color 0.25s ease;
}

/* ── CORE LAYOUT ────────────────────────────────────────── */
#app {
  display:    flex;
  min-height: 100vh;
}

.main {
  flex:           1;
  margin-left:    var(--sidebar-w);
  min-height:     100vh;
  display:        flex;
  flex-direction: column;
  min-width:      0;
}

/* ── PAGE CONTAINER ─────────────────────────────────────── */
.page-container { flex: 1; padding: 24px; }
.page           { display: none; }
.page.active    { display: block; }
.page-header    { margin-bottom: 24px; }

.page-title {
  font-family:    'Times New Roman', sans-serif;
  font-size:      24px;
  font-weight:    800;
  letter-spacing: -0.5px;
}

.page-sub {
  font-size:  14px;
  color:      var(--text2);
  margin-top: 4px;
}

/* ── FILTER INPUT (shared across pages) ─────────────────── */
.filter-input {
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       8px 12px;
  color:         var(--text);
  font-size:     13px;
  font-family:   'Times New Roman', sans-serif;
  transition:    border var(--transition), box-shadow var(--transition);
  min-width:     140px;
}
.filter-input:focus {
  outline:      none;
  border-color: var(--accent);
  box-shadow:   0 0 0 3px var(--accent-glow);
}
.filter-input::placeholder { color: var(--text3); }

.filter-input-sm {
  background:    var(--bg3);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       6px 10px;
  color:         var(--text);
  font-size:     12px;
  font-family:   'Times New Roman', sans-serif;
  transition:    border var(--transition);
  width:         160px;
  max-width:     100%;
}
.filter-input-sm:focus { outline: none; border-color: var(--accent); }


/* ── CONFIRM DIALOG ─────────────────────────────────────── */
#confirmOverlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  z-index:         9999;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         20px;
  opacity:         0;
  transition:      opacity 0.18s ease;
}

#confirmOverlay.confirm-open { opacity: 1; }

.confirm-box {
  background:     var(--bg2);
  border:         1px solid var(--border2);
  border-radius:  var(--radius);
  padding:        28px 28px 22px;
  width:          100%;
  max-width:      360px;
  box-shadow:     0 24px 60px rgba(0,0,0,0.35);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            14px;
  transform:      scale(0.95) translateY(8px);
  transition:     transform 0.18s ease;
}

#confirmOverlay.confirm-open .confirm-box { transform: scale(1) translateY(0); }

.confirm-icon {
  width:           44px;
  height:          44px;
  background:      rgba(239,68,68,0.1);
  border:          1px solid rgba(239,68,68,0.25);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       20px;
  color:           var(--red);
  flex-shrink:     0;
}

.confirm-msg {
  font-size:   14px;
  font-weight: 600;
  color:       var(--text);
  text-align:  center;
  line-height: 1.5;
  word-break:  break-word;
}

.confirm-actions {
  display:    flex;
  gap:        10px;
  width:      100%;
  margin-top: 4px;
}

.confirm-cancel {
  flex:          1;
  background:    var(--bg3);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  color:         var(--text2);
  font-size:     13px;
  font-weight:   600;
  padding:       10px;
  cursor:        pointer;
  font-family:   'Times New Roman', sans-serif;
  transition:    all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.confirm-cancel:hover { border-color: var(--border2); color: var(--text); }
.confirm-cancel:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

.confirm-ok {
  flex:          1;
  background:    var(--red);
  border:        none;
  border-radius: var(--radius-sm);
  color:         #fff;
  font-size:     13px;
  font-weight:   700;
  padding:       10px;
  cursor:        pointer;
  font-family:   'Times New Roman', sans-serif;
  transition:    all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.confirm-ok:hover { background: #c02020; }
.confirm-ok:focus { outline: 2px solid var(--red); outline-offset: 2px; }


/* ── PARTIAL RETURN DIALOG ───────────────────────────────── */
#partialReturnOverlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  z-index:         9999;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         20px;
  opacity:         0;
  transition:      opacity 0.18s ease;
}

#partialReturnOverlay.dialog-open { opacity: 1; }

.partial-return-box {
  background:     var(--bg2);
  border:         1px solid var(--border2);
  border-radius:  var(--radius);
  padding:        28px 28px 22px;
  width:          100%;
  max-width:      360px;
  box-shadow:     0 24px 60px rgba(0,0,0,0.35);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            14px;
  transform:      scale(0.95) translateY(8px);
  transition:     transform 0.18s ease;
}

#partialReturnOverlay.dialog-open .partial-return-box { transform: scale(1) translateY(0); }

.partial-return-icon {
  width:           44px;
  height:          44px;
  background:      rgba(245,158,11,0.1);
  border:          1px solid rgba(245,158,11,0.25);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.partial-return-icon svg { width: 22px; height: 22px; }

.partial-return-title {
  font-size:   15px;
  font-weight: 600;
  color:       var(--text);
  text-align:  center;
}

.partial-return-msg {
  font-size:   13px;
  color:       var(--text2);
  text-align:  center;
  line-height: 1.6;
  word-break:  break-word;
}
.partial-return-msg strong { color: var(--text); font-weight: 600; }

.partial-return-badge {
  display:        flex;
  align-items:    center;
  gap:            6px;
  background:     rgba(245,158,11,0.08);
  border:         1px solid rgba(245,158,11,0.2);
  border-radius:  var(--radius-sm);
  padding:        8px 16px;
  font-family:    'DM Mono', monospace;
  font-size:      13px;
  color:          var(--amber);
  letter-spacing: 0.02em;
}

.partial-return-actions {
  display:    flex;
  gap:        10px;
  width:      100%;
  margin-top: 4px;
}

.partial-return-cancel {
  flex:          1;
  background:    var(--bg3);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  color:         var(--text2);
  font-size:     13px;
  font-weight:   600;
  padding:       10px;
  cursor:        pointer;
  font-family:   'Times New Roman', sans-serif;
  transition:    all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.partial-return-cancel:hover { border-color: var(--border2); color: var(--text); }
.partial-return-cancel:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

.partial-return-proceed {
  flex:          1;
  background:    var(--amber);
  border:        none;
  border-radius: var(--radius-sm);
  color:         #fff;
  font-size:     13px;
  font-weight:   700;
  padding:       10px;
  cursor:        pointer;
  font-family:   'Times New Roman', sans-serif;
  transition:    all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.partial-return-proceed:hover { filter: brightness(0.9); }
.partial-return-proceed:focus { outline: 2px solid var(--amber); outline-offset: 2px; }

.status-missing {
  background: rgba(107, 114, 128, 0.12);   /* soft gray */
  color: var(--gray);                     /* or a darker gray text */
  border: 1px solid rgba(107, 114, 128, 0.30);
}

/* ── SIDEBAR ────────────────────────────────────────────── */
.sidebar {
  position:   fixed;
  top:        0;
  left:       0;
  height:     100vh;
  width:      var(--sidebar-w);
  background: var(--bg2);
  border-right: 1px solid var(--border);
  z-index:    100;
  overflow-y: auto;

  /* Toggle animation (matches mobile pattern) */
  transform:  translateX(0);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}

/* Collapsed state — sidebar slides off-screen */
.sidebar.closed {
  transform:  translateX(-100%);
  box-shadow: none;
}

/* ── MAIN shifts when sidebar opens/closes ──────────────── */
.main {
  flex:           1;
  margin-left:    var(--sidebar-w);
  min-height:     100vh;
  display:        flex;
  flex-direction: column;
  min-width:      0;
  transition:     margin-left 0.25s ease;
}

/* When sidebar is closed, main fills full width */
.main.sidebar-collapsed {
  margin-left: 0;
}

/* ── MENU BUTTON visible at all breakpoints ─────────────── */
.menu-btn {
  display: flex;
  align-items: center;
}

/* ── OVERLAY behind sidebar (desktop, optional) ─────────── */
.sidebar-backdrop {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(0, 0, 0, 0.4);
  z-index:    99;
  backdrop-filter: blur(2px);
  opacity:    0;
  transition: opacity 0.25s ease;
}
.sidebar-backdrop.visible {
  display: block;
  opacity: 1;
}