/* === LCARS Design System — Star Trek TNG Interface === */
@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@400;500;600;700&family=Overpass+Mono:wght@400;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* LCARS Color Palette */
  --bg-deep: #000000;
  --bg: #000000;
  --surface: #0a0a0a;
  --surface2: #111111;
  --border: rgba(204,153,255,0.15);
  --border-light: rgba(204,153,255,0.25);

  /* No glass — LCARS is solid and flat */
  --glass: #0a0a0a;
  --glass-border: rgba(204,153,255,0.12);
  --glass-hover: #1a1a1a;
  --glass-strong: #151515;

  /* Text */
  --text: #FF9900;
  --text-dim: #CC99FF;
  --text-muted: #7766AA;
  --text-light: #554488;

  /* LCARS Accent — amber/orange dominant */
  --accent: #FF9900;
  --accent-dim: #DD8800;
  --accent-soft: rgba(255,153,0,0.10);
  --accent-border: rgba(255,153,0,0.40);

  /* LCARS Block Colors */
  --lcars-amber: #FF9900;
  --lcars-peach: #FF9966;
  --lcars-lavender: #CC99FF;
  --lcars-periwinkle: #9999FF;
  --lcars-sky: #99CCFF;
  --lcars-rose: #CC6699;
  --lcars-tan: #FFCC99;
  --lcars-blue: #6688CC;
  --lcars-red: #CC4444;

  /* Status colors — LCARS style */
  --success: #FF9900;
  --success-bg: rgba(255,153,0,0.10);
  --success-border: rgba(255,153,0,0.30);
  --warning: #FFCC99;
  --warning-bg: rgba(255,204,153,0.10);
  --warning-border: rgba(255,204,153,0.30);
  --danger: #CC4444;
  --danger-bg: rgba(204,68,68,0.12);
  --danger-border: rgba(204,68,68,0.30);
  --review: #CC99FF;
  --review-bg: rgba(204,153,255,0.10);
  --review-border: rgba(204,153,255,0.30);

  /* Typography — condensed + mono */
  --font: 'Antonio', 'Arial Narrow', sans-serif;
  --mono: 'Overpass Mono', 'Consolas', monospace;

  /* Shape — LCARS uses heavy rounding on specific sides */
  --radius: 24px;
  --radius-sm: 16px;
  --radius-xs: 8px;
  --shadow: none;
  --shadow-hover: none;
}

html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg-deep);
  background-image: none;
  background-attachment: fixed;
  letter-spacing: 0.02em;
}
#app { display: flex; height: 100vh; }

/* Error bar & saving indicator */
.error-bar { padding: 12px 24px; background: var(--danger-bg); border-bottom: 2px solid var(--lcars-red); color: var(--lcars-red); font-size: 14px; font-weight: 600; display: none; align-items: center; gap: 12px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.08em; }
.error-bar.show { display: flex; }
.saving-indicator { position: fixed; top: 16px; right: 16px; padding: 8px 20px; border-radius: 20px; background: var(--lcars-amber); color: #000; font-size: 13px; font-weight: 700; opacity: 0; transition: opacity 0.2s; z-index: 999; pointer-events: none; text-transform: uppercase; letter-spacing: 0.1em; }
.saving-indicator.show { opacity: 1; }

/* Buttons — LCARS pill shapes */
.btn { font-family: var(--font); font-size: 16px; font-weight: 600; padding: 8px 22px; border-radius: 20px; border: none; cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.06em; }
.btn svg { width: 16px; height: 16px; }
.btn-ghost { background: var(--surface2); border: 2px solid var(--lcars-lavender); color: var(--lcars-lavender); }
.btn-ghost:hover { background: var(--lcars-lavender); color: #000; }
.btn-sm { font-size: 14px; padding: 5px 14px; }
.btn-primary { background: var(--lcars-amber); color: #000; font-weight: 700; }
.btn-primary:hover { background: var(--lcars-peach); }
.btn-success { background: var(--lcars-peach); border: none; color: #000; font-weight: 700; }
.btn-success:hover { background: var(--lcars-tan); }
.btn-danger { background: var(--lcars-red); border: none; color: #fff; font-weight: 700; }
.btn-danger:hover { background: #dd5555; }

/* Badges — LCARS pill badges */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; border: 2px solid; text-transform: uppercase; }
.badge-warn { color: #000; background: var(--lcars-tan); border-color: var(--lcars-tan); }
.badge-ok { color: #000; background: var(--lcars-amber); border-color: var(--lcars-amber); }
.badge-danger { color: #fff; background: var(--lcars-red); border-color: var(--lcars-red); }
.badge-review { color: #000; background: var(--lcars-lavender); border-color: var(--lcars-lavender); }

/* Inputs — LCARS style */
.input, .select { font-family: var(--mono); font-size: 15px; padding: 7px 14px; border-radius: 8px; border: 2px solid var(--lcars-periwinkle); background: #000; color: var(--lcars-sky); outline: none; transition: all 0.15s; }
.input:focus, .select:focus { border-color: var(--lcars-amber); box-shadow: 0 0 0 2px rgba(255,153,0,0.2); }
.input::placeholder { color: var(--text-light); }
.select { cursor: pointer; }

/* Utilities */
.mono { font-family: var(--mono); font-size: 12px; }
.dim { color: var(--text-dim); }
.fw600 { font-weight: 600; }
.ellipsis { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spin { width: 28px; height: 28px; border: 3px solid rgba(255,153,0,0.15); border-top-color: var(--lcars-amber); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Scrollbar — LCARS amber */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: var(--lcars-periwinkle); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--lcars-amber); }

/* Detail view — top bar */
.detail-topbar { padding: 14px 24px; border-bottom: 3px solid var(--lcars-lavender); display: flex; align-items: center; gap: 12px; flex-shrink: 0; background: #000; }
.detail-topbar .inv-title { flex: 1; }
.detail-topbar .vendor { font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: 0.06em; }
.detail-topbar .sep { color: var(--text-muted); margin: 0 8px; }
.detail-topbar .meta { font-family: var(--mono); font-size: 15px; color: var(--lcars-sky); }

/* Detail view — split pane */
.detail-content { flex: 1; display: flex; overflow: hidden; }
.detail-left { flex: 1; min-width: 280px; border-right: 3px solid var(--lcars-periwinkle); display: flex; flex-direction: column; background: #000; }
.detail-right { width: 50%; min-width: 420px; overflow: hidden; display: flex; flex-direction: column; background: var(--surface); }

/* Image area */
.img-header { padding: 16px; border-bottom: 2px solid var(--lcars-periwinkle); }
.img-header .label { font-size: 15px; font-weight: 700; color: var(--lcars-lavender); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; }
.img-header a { font-size: 12px; color: var(--lcars-amber); text-decoration: none; }
.img-area { flex: 1; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; position: relative; }
.img-area img { border-radius: var(--radius-xs); border: 2px solid var(--lcars-periwinkle); }
.img-placeholder { text-align: center; color: var(--text-muted); padding: 24px; }
.img-placeholder .icon { font-size: 40px; margin-bottom: 12px; opacity: 0.3; }

/* Zoom & page nav */
.zoom-controls { position: absolute; bottom: 12px; right: 12px; display: flex; gap: 4px; z-index: 5; background: #111; border: 2px solid var(--lcars-periwinkle); border-radius: 16px; padding: 3px; }
.zoom-btn { width: 30px; height: 28px; border-radius: 8px; border: none; background: transparent; color: var(--lcars-amber); font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: var(--mono); transition: background 0.1s; }
.zoom-btn:hover { background: var(--lcars-amber); color: #000; }
.zoom-level { font-size: 11px; font-family: var(--mono); color: var(--lcars-sky); display: flex; align-items: center; padding: 0 4px; min-width: 38px; justify-content: center; }
.page-nav { position: absolute; bottom: 12px; left: 12px; display: flex; gap: 4px; z-index: 5; background: #111; border: 2px solid var(--lcars-periwinkle); border-radius: 16px; padding: 3px; align-items: center; }
.page-nav .zoom-btn { font-size: 13px; }
.page-nav .page-label { font-size: 11px; font-family: var(--mono); color: var(--lcars-sky); padding: 0 6px; }

/* Invoice details grid */
.inv-details { padding: 16px; border-top: 3px solid var(--lcars-lavender); background: #000; flex-shrink: 0; max-height: 40%; overflow: auto; }
.inv-details .label { font-size: 15px; font-weight: 700; color: var(--lcars-lavender); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px; }
.inv-grid { display: grid; grid-template-columns: 90px 1fr; gap: 6px 10px; font-size: 15px; }
.inv-grid .field-label { color: var(--lcars-periwinkle); padding: 3px 0; text-transform: uppercase; font-size: 12px; letter-spacing: 0.05em; }
.inv-issues { margin-top: 10px; }
.inv-issues .issue { font-size: 15px; color: var(--lcars-tan); margin-bottom: 2px; }

/* Line items table */
.li-header { padding: 12px 16px; border-bottom: 3px solid var(--lcars-peach); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.li-header .label { font-size: 15px; font-weight: 700; color: var(--lcars-peach); text-transform: uppercase; letter-spacing: 0.1em; }
.li-header .count { font-size: 15px; color: var(--lcars-sky); font-family: var(--mono); }
.li-scroll { flex: 1; overflow: auto; }
.li-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.li-table th { padding: 8px 10px; text-align: left; border-bottom: 2px solid var(--lcars-periwinkle); color: var(--lcars-lavender); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; position: sticky; top: 0; background: #111; z-index: 1; }
.li-table td { padding: 7px 10px; border-bottom: 1px solid rgba(153,153,255,0.1); color: var(--lcars-sky); }
.li-table tr.has-issue { background: rgba(255,204,153,0.08); }
.btn-del { width: 22px; height: 22px; border-radius: 4px; border: 1px solid transparent; background: transparent; color: var(--text-muted); font-size: 12px; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; opacity: 0; }
.li-table tr:hover .btn-del { opacity: 1; }
.btn-del:hover { background: var(--danger-bg); border-color: var(--lcars-red); color: var(--lcars-red); }

/* Editable cells */
.editable { cursor: pointer; padding: 2px 6px; border-radius: 4px; display: block; min-height: 22px; border-bottom: 1px dashed var(--lcars-periwinkle); transition: background 0.1s; }
.editable:hover { background: rgba(153,153,255,0.08); }
.editable.money, .editable.number { font-family: var(--mono); }
.edit-input { font-family: var(--mono); font-size: 13px; padding: 2px 6px; border-radius: 4px; border: 2px solid var(--lcars-amber); background: #000; color: var(--lcars-amber); outline: none; width: 100%; }
.edit-input.money, .edit-input.number { font-family: var(--mono); }

/* AI verify panel */
.ai-panel { padding: 12px 16px; border-bottom: 2px solid var(--lcars-periwinkle); background: #050505; font-size: 13px; max-height: 300px; overflow: auto; }
.ai-panel .ai-title { font-size: 13px; font-weight: 700; color: var(--lcars-amber); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.ai-panel .ai-close { cursor: pointer; margin-left: auto; color: var(--lcars-periwinkle); font-size: 14px; }
.ai-panel .ai-close:hover { color: var(--lcars-amber); }
.ai-finding { padding: 8px 12px; border-radius: 8px; margin-bottom: 6px; border: 2px solid; font-size: 13px; line-height: 1.5; }
.ai-finding.error { background: var(--danger-bg); border-color: var(--lcars-red); color: var(--lcars-red); }
.ai-finding.warning { background: rgba(255,204,153,0.08); border-color: var(--lcars-tan); color: var(--lcars-tan); }
.ai-finding.info { background: var(--accent-soft); border-color: var(--lcars-amber); color: var(--lcars-amber); }
.ai-finding.ok { background: rgba(153,204,255,0.08); border-color: var(--lcars-sky); color: var(--lcars-sky); }
.ai-loading { display: flex; align-items: center; gap: 10px; padding: 16px; color: var(--lcars-lavender); }
.ai-loading .spin { width: 18px; height: 18px; border-width: 2px; }

/* Loading & empty states */
.loading-screen { display: flex; align-items: center; justify-content: center; flex: 1; flex-direction: column; gap: 12px; color: var(--lcars-lavender); padding: 60px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; }
.empty { padding: 40px; text-align: center; color: var(--lcars-periwinkle); font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; }

/* ============================================
   LCARS ANIMATIONS — Red Alert, Warp Speed, Transitions
   ============================================ */

/* === RED ALERT MODE === */
@keyframes redAlertPulse {
  0%, 100% { box-shadow: inset 0 0 0 3px rgba(204,68,68,0.0); }
  50% { box-shadow: inset 0 0 0 3px rgba(204,68,68,0.7); }
}
@keyframes redAlertBorder {
  0%, 100% { border-color: var(--lcars-red); opacity: 0.6; }
  50% { border-color: #ff4444; opacity: 1; }
}
@keyframes redAlertGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(204,68,68,0.2); }
  50% { box-shadow: 0 0 20px rgba(204,68,68,0.5); }
}

body.red-alert { animation: redAlertPulse 2s ease-in-out infinite; }
body.red-alert .sidebar-logo { animation: redAlertBorder 2s ease-in-out infinite; background: var(--lcars-red); }
body.red-alert .sidebar-user { animation: redAlertBorder 2s ease-in-out infinite; background: var(--lcars-red); }
body.red-alert .sidebar-logo .logo-orb::after { background: var(--lcars-red); }
body.red-alert .stat-card:nth-child(3),
body.red-alert .stat-card:nth-child(4) { animation: redAlertGlow 2s ease-in-out infinite; border-left-color: var(--lcars-red); }

/* Red alert top bar accent */
body.red-alert .topbar::before { background: var(--lcars-red); animation: redAlertBorder 2s ease-in-out infinite; }

/* === WARP SPEED LOADING === */
@keyframes warpStar {
  0% { transform: translateZ(0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateZ(200px) scale(0); opacity: 0; }
}
@keyframes warpStreakH {
  0% { width: 2px; opacity: 0; }
  20% { opacity: 1; }
  100% { width: 120px; opacity: 0; }
}

.warp-field {
  position: relative;
  width: 200px;
  height: 200px;
  perspective: 400px;
  overflow: hidden;
}
.warp-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--lcars-amber);
  border-radius: 50%;
}
.warp-streak {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lcars-amber), var(--lcars-sky), transparent);
  border-radius: 1px;
  animation: warpStreakH 0.8s linear infinite;
}
.warp-text {
  font-family: var(--font);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--lcars-lavender);
  margin-top: 16px;
  animation: warpTextPulse 1.2s ease-in-out infinite;
}
@keyframes warpTextPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* === ANIMATED TRANSITIONS === */
/* Panel slide-in on view switch */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.lcars-slide-in { animation: slideInRight 0.35s ease-out both; }
.lcars-slide-left { animation: slideInLeft 0.35s ease-out both; }

/* Staggered row fade-in */
@keyframes rowFadeIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
.inv-table tbody tr,
.v-table tbody tr {
  animation: rowFadeIn 0.3s ease-out both;
}

/* Stat number count-up (handled in JS — CSS just adds a subtle scale pop) */
@keyframes statPop {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.stat-value.counting { animation: statPop 0.5s ease-out both; }

/* Responsive */
@media (max-width: 768px) {
  .detail-content { flex-direction: column; }
  .detail-left { width: 100%; min-width: auto; border-right: none; border-bottom: 3px solid var(--lcars-periwinkle); max-height: 45vh; }
}