/* MintMotive Ops — structural styles. Actual color values come from CSS
   custom properties set inline in base.html from Company Settings, so the
   Appearance admin page can change every one of them live.

   Design rules (brand): matte/flat only — no gradients, no drop shadows.
   Depth and hierarchy come from spacing, borders, weight and color, not
   elevation effects. A small spacing/radius scale keeps every card, button,
   table and form consistent across all ~25 modules without having to touch
   every template individually. */

* { box-sizing: border-box; }

:root {
  /* Spacing scale (4px base) — used throughout this file instead of
     one-off pixel values, so vertical rhythm stays consistent everywhere. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 28px;
  --sp-7: 36px;
  /* Radius scale */
  --r-sm: 7px;
  --r-md: 9px;
  --r-lg: 13px;
  --r-pill: 999px;
  /* One shared timing curve so every hover/focus/transition in the app
     feels like the same material instead of a grab-bag of durations. */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --t-fast: .12s;
  --t-med: .18s;
}

html, body {
  margin: 0; padding: 0;
  background: var(--page-bg);
  color: var(--text-primary);
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { font-family: 'Helvetica', Arial, sans-serif; font-weight: 700; margin: 0 0 .45em; letter-spacing: -.015em; line-height: 1.25; }
h1 { font-size: 26px; letter-spacing: -.02em; }
h2 { font-size: 18px; }
h3 { font-size: 15px; font-weight: 600; }
a { color: var(--accent); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.link-btn {
  background: none; border: none; padding: 0; margin: 0; font: inherit; cursor: pointer;
  color: inherit; text-decoration: none;
}
.link-btn:hover { text-decoration: underline; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm);
}
::selection { background: var(--accent); color: var(--text-on-accent); }

.app-shell { display: flex; min-height: 100vh; }

/* ---------------- Sidebar ---------------- */
.sidebar {
  width: 240px; flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-text, var(--page-bg));
  display: flex; flex-direction: column;
  padding: var(--sp-5) 0 var(--sp-4);
}
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 0 var(--sp-5) var(--sp-6); }
.sidebar .brand img { height: 28px; }
.sidebar .brand span { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15.5px; color: var(--sidebar-text); letter-spacing: -.01em; }
.sidebar nav { flex: 1; overflow-y: auto; padding: 0 var(--sp-3); }
.sidebar a.nav-item, .sidebar button.nav-group-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 9px var(--sp-3); margin: 1px 0; border-radius: var(--r-md);
  color: var(--sidebar-text); opacity: .78;
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .01em;
  text-decoration: none; border: none; background: none; width: 100%;
  text-align: left; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.sidebar a.nav-item:hover, .sidebar button.nav-group-toggle:hover { background: rgba(255,255,255,0.09); opacity: 1; text-decoration: none; }
.sidebar a.nav-item.active { background: var(--accent); color: var(--text-on-accent); opacity: 1; font-weight: 600; }
.sidebar .nav-group-items { padding-left: 14px; display: none; }
.sidebar .nav-group.open .nav-group-items { display: block; }
.sidebar .nav-group-toggle .chev { margin-left: auto; transition: transform var(--t-med) var(--ease); font-size: 10px; opacity: .65; }
.sidebar .nav-group.open .chev { transform: rotate(90deg); }
.sidebar .admin-item { border-top: 1px solid rgba(255,255,255,0.14); margin-top: var(--sp-2); padding-top: var(--sp-3) !important; }

/* ---------------- Top bar ---------------- */
.topbar {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-6); border-bottom: 1px solid var(--border);
  background: var(--card-bg);
}
.topbar form.search { flex: 1; max-width: 460px; }
.topbar form.search input {
  width: 100%; padding: 9px 14px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--page-bg); color: var(--text-primary);
  font-family: 'Helvetica', Arial, sans-serif;
}
.topbar .spacer { flex: 1; }
.theme-toggle, .user-chip {
  font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 500;
  background: var(--page-bg); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 7px 13px; cursor: pointer; color: var(--text-primary);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.theme-toggle:hover { background: var(--border); }
.user-chip { cursor: default; color: var(--text-secondary); }

/* ---------------- Content ---------------- */
.content { flex: 1; padding: var(--sp-6); max-width: 1400px; }
.flash {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); margin-bottom: var(--sp-4);
  font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 500;
  border-left: 3px solid transparent;
}
.flash.error { background: #fdecea; color: #7a1f1f; border-color: #b3261e; }
.flash.success { background: #e8f5e9; color: #1b5e20; border-color: #2e7d32; }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--sp-6); gap: var(--sp-3); flex-wrap: wrap; }
.page-header h1 { margin-bottom: .15em; }
.page-header .subtitle { color: var(--text-secondary); font-size: 13.5px; margin-top: 2px; max-width: 640px; }

.card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); margin-bottom: var(--sp-5);
  transition: border-color var(--t-med) var(--ease);
  /* A wide data-table (6+ columns is common — Users & Roles, PO line
     items, Warehouse locations) has nowhere else to go on a phone screen.
     Without this, the table blows past the card's edge and drags the
     entire page into horizontal scroll instead of just itself — this
     keeps the card's own width fixed and lets only its contents scroll. */
  overflow-x: auto;
}
.card h2 { margin-top: 0; font-size: 16.5px; }
.card h2, .card h3 { margin-top: 0; }
.card > .subtitle { color: var(--text-secondary); font-size: 13px; margin: -6px 0 var(--sp-4); line-height: 1.55; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 13.5px;
  padding: 9px 18px; border-radius: var(--r-md); border: 1px solid var(--border); cursor: pointer;
  background: var(--card-bg); color: var(--text-primary); text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              filter var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover { text-decoration: none; background: var(--page-bg); border-color: var(--text-secondary); }
.btn:active { transform: translateY(1px); filter: brightness(0.96); }
.btn-accent { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); font-weight: 600; }
.btn-accent:hover { filter: brightness(0.94); background: var(--accent); border-color: var(--accent); }
.btn-danger { background: transparent; color: #b3261e; border-color: #e6a5a5; }
.btn-danger:hover { background: #fdecea; border-color: #b3261e; }
.btn-sm { padding: 6px 13px; font-size: 12px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data-table th {
  text-align: left; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary);
  border-bottom: 1px solid var(--border); padding: var(--sp-2) var(--sp-3) var(--sp-2) 0;
  white-space: nowrap;
}
table.data-table td { padding: 11px var(--sp-3) 11px 0; border-bottom: 1px solid var(--border); }
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tr:hover td { background: rgba(158,196,181,0.08); }
table.data-table a.row-link { color: var(--text-primary); font-weight: 600; }
table.data-table a.row-link:hover { color: var(--accent); }

.badge {
  display: inline-block; padding: 3.5px 11px; border-radius: var(--r-pill); font-size: 11px;
  font-family: 'Poppins', sans-serif; font-weight: 600; letter-spacing: .015em;
  background: var(--border); color: var(--card-bg);
}
.badge.accent { background: var(--accent); color: var(--text-on-accent); }

label { display: block; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--text-secondary); margin: var(--sp-3) 0 var(--sp-1); }
input, select, textarea {
  width: 100%; padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--page-bg); color: var(--text-primary); font-family: 'Helvetica', Arial, sans-serif; font-size: 14px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(158,196,181,0.25); outline: none; }
input::placeholder, textarea::placeholder { color: var(--text-secondary); opacity: .6; }
textarea { min-height: 72px; }
.form-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.form-row > div { flex: 1; min-width: 180px; }
.checkbox-row { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.checkbox-row input { width: auto; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: var(--sp-5); flex-wrap: wrap; overflow-x: auto; }
.tabs a {
  padding: var(--sp-2) var(--sp-4); font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500;
  color: var(--text-secondary); border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tabs a:hover { color: var(--text-primary); text-decoration: none; }
.tabs a.active { color: var(--text-primary); border-bottom-color: var(--accent); font-weight: 600; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.stat-tile {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-4); border-top: 3px solid var(--accent);
  transition: border-color var(--t-med) var(--ease);
}
.stat-tile.pending-alert { border-top-color: #b3261e; }
.stat-tile.pending-alert .value { color: #b3261e; }
.stat-tile .label { font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; }
.stat-tile .value { font-size: 26px; font-weight: 700; margin-top: 6px; letter-spacing: -.015em; }

.empty-state {
  text-align: center; padding: var(--sp-7) var(--sp-5); color: var(--text-secondary);
  font-family: 'Poppins', sans-serif; font-size: 13px;
}

.doc-split { display: flex; gap: var(--sp-5); align-items: flex-start; flex-wrap: wrap; }
.doc-split .editor { flex: 1; min-width: 340px; }
.doc-split .preview-pane { flex: 1; min-width: 340px; position: sticky; top: 16px; }
/* This one preview intentionally mimics a printed page rather than the
   app's own flat UI, so it keeps its own paper-like shadow. */
.invoice-preview { background: #fff; color: #1E2124; border-radius: var(--r-md); padding: 28px; box-shadow: 0 1px 4px rgba(0,0,0,0.12); font-family: 'Helvetica', Arial, sans-serif; }
.invoice-preview .doc-title { font-weight: 700; font-size: 24px; margin-bottom: 4px; }
.invoice-preview table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px; }
.invoice-preview th { text-align: left; border-bottom: 2px solid #1E2124; padding: 6px 4px; font-family: 'Poppins', sans-serif; font-size: 11px; text-transform: uppercase; }
.invoice-preview td { padding: 6px 4px; border-bottom: 1px solid #e5e5e5; }
.invoice-preview .totals { margin-left: auto; width: 260px; }
.invoice-preview .totals div { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13.5px; }
.invoice-preview .totals .grand { font-weight: 700; font-size: 16px; border-top: 2px solid #1E2124; margin-top: 6px; padding-top: 8px; }

.line-items-grid td, .line-items-grid th { padding: 4px; }
.line-items-grid input, .line-items-grid select { font-size: 13px; padding: 6px 8px; }
.remove-line { color: #b3261e; cursor: pointer; font-weight: 700; transition: opacity var(--t-fast) var(--ease); }
.remove-line:hover { opacity: .7; }

.color-swatch-row { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-2) 0; }
.color-swatch-row input[type=color] { width: 44px; height: 34px; padding: 2px; }
.color-swatch-row label { margin: 0; width: 220px; flex-shrink: 0; }

.archive-row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); transition: background-color var(--t-fast) var(--ease); }
.archive-row:hover { background: rgba(158,196,181,0.06); }
.archive-row .thumb { width: 44px; height: 44px; border-radius: var(--r-md); object-fit: cover; background: var(--border); }

.bar-row { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-3) 0; }
.bar-row .bar-label { width: 90px; flex-shrink: 0; font-family: 'Poppins', sans-serif; font-size: 12px; color: var(--text-secondary); }
.bar-row .bar-track { flex: 1; background: var(--page-bg); border: 1px solid var(--border); border-radius: var(--r-sm); height: 22px; overflow: hidden; }
.bar-row .bar-fill { background: var(--accent); height: 100%; border-radius: 5px 0 0 5px; min-width: 2px; transition: width var(--t-med) var(--ease); }
.bar-row .bar-value { width: 90px; text-align: right; flex-shrink: 0; font-size: 13px; font-weight: 600; }

.kanban-board { display: flex; gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-2); align-items: flex-start; }
.kanban-col { background: var(--page-bg); border: 1px solid var(--border); border-radius: var(--r-lg); min-width: 220px; flex: 1; padding: var(--sp-3); min-height: 200px; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.kanban-col h3 { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin: var(--sp-1) 6px var(--sp-3); display: flex; justify-content: space-between; }
.kanban-col.drag-over { background: rgba(158,196,181,0.15); border-color: var(--accent); }
.kanban-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3); margin-bottom: var(--sp-2); cursor: grab; font-size: 13px; transition: border-color var(--t-fast) var(--ease); }
.kanban-card:hover { border-color: var(--accent); }
.kanban-card:active { cursor: grabbing; }
.kanban-card .kc-title { font-weight: 600; }
.kanban-card .kc-sub { color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
.kanban-card.dragging { opacity: 0.4; }

.gridfinity-map { margin: var(--sp-3) 0 var(--sp-6); }
.gridfinity-map .gf-title { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin-bottom: var(--sp-2); }
.gridfinity-row { display: flex; gap: 4px; margin-bottom: 4px; }
.gridfinity-cell {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--page-bg); display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 10.5px; text-align: center; padding: 2px; line-height: 1.2; position: relative;
  transition: border-color var(--t-fast) var(--ease);
}
.gridfinity-cell.empty { opacity: 0.35; }
.gridfinity-cell.needed { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); font-weight: 600; }
.gridfinity-cell .gf-order {
  position: absolute; top: 2px; left: 4px; font-size: 9px; font-weight: 700; opacity: 0.75;
}
.gridfinity-cell .gf-qty { font-size: 9.5px; opacity: 0.85; }

@media (max-width: 900px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; }
  .content { padding: var(--sp-4); }
  .topbar { padding: var(--sp-3) var(--sp-4); flex-wrap: wrap; row-gap: var(--sp-2); }
  .topbar form.search { order: 10; flex: 1 1 100%; max-width: none; }
  .card { padding: var(--sp-4); }
  h1 { font-size: 22px; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); }
  .form-row { gap: var(--sp-3); }
  .form-row > div { min-width: 140px; }
}