/* ── PALLETS BASE ──
   CSS custom properties, reset, and core layout.
   Every other stylesheet builds on top of this.
   Load order: base.css → shell.css → [module].css
   ───────────────────────────────────────────── */

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

/* ── DESIGN TOKENS ── */
:root {

  /* Shell (dark chrome) */
  --shell-bg:           #0e0d0b;
  --shell-surface:      #1a1814;
  --shell-border:       #2e2b24;

  /* Workspace (light content area) */
  --ws-bg:              #f0ebe0;
  --ws-surface:         #ffffff;
  --ws-border:          #e2d9cc;

  /* Accent — Pallets orange */
  --accent:             #f05f00;
  --accent-hover:       #d45200;
  --accent-soft:        rgba(240, 95, 0, 0.12);
  --accent-text:        #c44800;

  /* Text on dark (shell) */
  --text-on-shell:      #f5efe6;
  --text-on-shell-2:    rgba(245, 239, 230, 0.45);

  /* Text on light (workspace) */
  --text-on-ws:         #1a1714;
  --text-on-ws-2:       rgba(26, 23, 20, 0.5);

  /* Modal */
  --modal-dark-bg:      #13110e;
  --modal-dark-border:  #2e2b24;

  /* Status */
  --success:            #2e7d4f;
  --danger:             #c0392b;
  --warning:            #d4850a;

  /* Layout */
  --shell-width:        220px;
  --topbar-height:      52px;

  /* Typography */
  --font-display:       'Lora', serif;
  --font-ui:            'Outfit', sans-serif;

  /* Radius */
  --radius-sm:          5px;
  --radius-md:          10px;
  --radius-lg:          14px;

  /* Transitions */
  --transition-fast:    0.15s ease;
  --transition-med:     0.25s ease;
}

/* ── BASE ELEMENTS ── */
html, body {
  height: 100%;
  background: var(--shell-bg);
  font-family: var(--font-ui);
  color: var(--text-on-shell);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font-family: var(--font-ui);
  cursor: pointer;
}

input, textarea, select {
  font-family: var(--font-ui);
}

a {
  color: var(--accent);
  text-decoration: none;
}

/* ── APP GRID ── */
.app {
  display: grid;
  grid-template-columns: var(--shell-width) 1fr;
  grid-template-rows: var(--topbar-height) 1fr;
  height: 100vh;
}

/* Sidebar hidden — dashboard and settings views */
.app.no-sidebar {
  grid-template-columns: 0 1fr;
}

.app.no-sidebar .sidebar {
  display: none;
}

/* ── SCROLLBARS ── */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--ws-border);
  border-radius: 3px;
}

.sidebar::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb,
.quick-breakdown::-webkit-scrollbar-thumb {
  background: var(--shell-border);
}

/* ── UTILITY CLASSES ── */
.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── TOAST ── */
/* Shared notification component used by all modules */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--shell-surface);
  border: 1px solid var(--shell-border);
  border-radius: var(--radius-md);
  padding: 0.65rem 1rem;
  font-size: 12px;
  color: var(--text-on-shell);
  z-index: 500;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.2s;
  pointer-events: none;
  max-width: 280px;
  line-height: 1.4;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.success {
  border-color: rgba(46, 125, 79, 0.4);
  background: #0d1f14;
}

.toast.error {
  border-color: rgba(192, 57, 43, 0.4);
  background: #1f0d0d;
}

.toast.warning {
  border-color: rgba(212, 133, 10, 0.4);
  background: #1f1a0d;
}

/* ── LOADING SCREEN ── */
.app-loading {
  position: fixed;
  inset: 0;
  background: var(--shell-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  z-index: 900;
}

.app-loading.hidden {
  display: none;
}

.app-loading-wordmark {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-on-shell);
  opacity: 0.4;
}

.app-loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(245, 239, 230, 0.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ── SHARED ANIMATIONS ── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.9; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}