/* ============================================================
   components.css — Reusable UI Components
   ============================================================ */

/* ---- Buttons ---- */
.btn {
  height: 34px; padding: 0 16px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600;
  border: none; cursor: pointer; font-family: inherit;
  transition: all var(--dur-fast);
}
.btn:active { transform: scale(.97); }
.btn .i { width: 13px; height: 13px; }

.btn-primary {
  background: var(--primary); color: #fff;
  box-shadow: 0 4px 12px rgba(34,197,94,.28);
}
.btn-primary:hover { opacity: .9; }

.btn-ghost {
  background: var(--card); color: var(--label);
  box-shadow: var(--shadow); border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--elev); }

.btn-danger {
  background: var(--danger-soft); color: var(--danger);
}
.btn-danger:hover { opacity: .8; }

.btn-sm {
  height: 30px; padding: 0 12px; border-radius: var(--r-sm);
  font-size: 10.5px; font-weight: 500;
  border: none; display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit; cursor: pointer;
}
.btn-sm.solid { background: var(--primary); color: #fff; }
.btn-sm.solid:hover { opacity: .9; }
.btn-sm.ghost { background: var(--elev); color: var(--label); }
.btn-sm.ghost:hover { background: var(--border); }
.btn-sm.danger { background: var(--danger-soft); color: var(--danger); }
.btn-sm.danger:hover { opacity: .8; }

.btn-icon {
   width: 36px; height: 36px; border-radius: 50%;
   background: var(--card); box-shadow: var(--shadow);
   display: flex; align-items: center; justify-content: center;
   color: var(--icon); flex: 0 0 36px;
   position: relative; cursor: pointer; border: none;
   padding: 0; font: inherit;
   }
.btn-icon .dot {
  position: absolute; top: 6px; right: 7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--danger); color: #fff;
  font-size: 8px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}

/* ---- Pills ---- */
.pill {
  display: inline-block; padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 9px; font-weight: 500; white-space: nowrap;
}
.pill-green  { background: var(--success-soft); color: var(--success-dark); }
.pill-red    { background: var(--danger-soft);  color: var(--danger); }
.pill-blue   { background: var(--info-soft);    color: var(--info); }
.pill-yellow { background: var(--warn-soft);    color: var(--warn-text); }
.pill-purple { background: var(--purple-soft);  color: var(--purple); }
.pill-gray   { background: var(--elev);         color: var(--label); }

/* ---- Chips / Filter Pills ---- */
.chips { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.chip {
  height: 30px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--card); box-shadow: var(--shadow);
  display: flex; align-items: center;
  font-size: 10.5px; font-weight: 500; color: var(--label);
  cursor: pointer; border: none; font-family: inherit;
  transition: all var(--dur-fast);
}
.chip.on { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(34,197,94,.25); }
.chip .cnt { margin-left: 6px; font-size: 9px; opacity: .7; }

/* ---- KPI Cards ---- */
/* Full-bleed by default. This rule used to cap the row at 1200px and centre it
   with auto margins, so any section without its own override (inventory,
   retailers, booking, cancel, communication) rendered its KPI cards floating
   in the middle instead of starting at the left edge. Home / Orders /
   Analytics already reset this, so the cap was only ever fighting them.
   auto-fit lets the row fill whatever width it is given and adapt to the
   actual card count instead of reserving empty columns. */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
  margin-top: 14px;
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
/* Icon removed: no outline or icon, and every number renders at one size so a
   row of cards reads as a single set. */
.kpi {
  padding: 13px 14px 12px; min-height: 104px;
  display: flex; flex-direction: column;
  cursor: pointer; transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.kpi .ic { display: none; }
.kpi .lbl { font-size: 9.5px; letter-spacing: .6px; text-transform: uppercase; font-weight: 600; margin-top: 0; color: var(--label); }
.kpi .num { font-size: 17px; font-weight: 700; color: var(--text); margin-top: 6px; letter-spacing: -.2px; line-height: 1.18; overflow-wrap: anywhere; }
/* Money uses the same size as counts; long values wrap instead of shrinking,
   so every card in the row stays typographically identical. */
.kpi .num.money { font-size: 17px; }
.kpi .foot { margin-top: auto; padding-top: 6px; font-size: 9.5px; color: var(--muted); display: flex; align-items: center; gap: 4px; overflow: hidden; }
.kpi .foot .up { color: var(--primary); }
.kpi .foot .dn { color: var(--danger); }
.kpi .foot .bl { color: var(--info); }
.kpi .foot .am { color: var(--warn); }

/* Card accent is semantic (good / bad / warn / cash / neutral), set by a
   tone class rather than by position, so a card's colour always matches its
   meaning regardless of how many cards a view shows. */
.kpi-neutral{border-color:rgba(100,116,139,.35)}
.kpi-neutral .lbl{color:var(--label)}

.kpi-cash{border-color:rgba(34,197,94,.55)}
.kpi-cash .lbl{color:#16a34a}
.kpi-cash .num{color:#16a34a}

.kpi-good{border-color:rgba(34,197,94,.5)}
.kpi-good .lbl{color:#18A54B}

.kpi-bad{border-color:rgba(239,79,87,.5)}
.kpi-bad .lbl{color:var(--danger)}

.kpi-warn{border-color:rgba(245,165,36,.55)}
.kpi-warn .lbl{color:var(--warn-text)}

.g-green  { background: var(--primary-soft); color: var(--primary); }
.g-red    { background: var(--danger-soft);  color: var(--danger); }
.g-blue   { background: var(--info-soft);    color: var(--info); }
.g-amber  { background: var(--warn-soft);    color: var(--warn); }
.g-purple { background: var(--purple-soft);  color: var(--purple); }

/* ---- Tables ---- */
.table-wrap {
  margin-top: 14px; background: var(--card);
  border-radius: var(--r-md); box-shadow: var(--shadow); overflow: hidden;
}
.table-scroll { overflow: auto; max-height: calc(100vh - 340px); scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.table-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.table-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted); }

table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 10.5px; }
thead { position: sticky; top: 0; z-index: 5; }
thead th {
  text-align: left; font-size: 9px; letter-spacing: .4px;
  text-transform: uppercase; color: var(--label); font-weight: 600;
  background: var(--elev); padding: 9px 10px;
  white-space: nowrap; border-bottom: 1px solid var(--border);
  cursor: pointer; user-select: none;
}
thead th:first-child { padding-left: 14px; }
thead th:first-child { border-radius: 5px 0 0 5px; }
thead th:last-child { border-radius: 0 5px 5px 0; text-align: right; }
thead th:hover { color: var(--primary); }

tbody td {
  padding: 8px 10px; color: var(--label);
  border-bottom: 1px solid var(--border);
  white-space: nowrap; vertical-align: middle;
}
tbody td:first-child { padding-left: 14px; }
tbody tr { cursor: pointer; transition: background var(--dur-fast); }
tbody tr:hover { background: rgba(34,197,94,.03); }
tbody tr:last-child td { border-bottom: 0; }
tbody td:last-child { text-align: right; }

/* ---- Pagination ---- */
.pagination {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-top: 1px solid var(--border);
  font-size: 10.5px; color: var(--muted);
}
.pagination .info { flex: 1; }
.pagination .pages { display: flex; gap: 4px; align-items: center; }
.pagination button {
  height: 28px; min-width: 28px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--card);
  color: var(--label); font-size: 10px; font-weight: 500;
  cursor: pointer; font-family: inherit; padding: 0 8px;
  display: flex; align-items: center; justify-content: center;
}
.pagination button:disabled { opacity: .4; cursor: not-allowed; }
.pagination button.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.pagination button:hover:not(:disabled):not(.on) { background: var(--elev); }
.per-page {
  height: 34px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--card);
  font-size: 10.5px; padding: 0 8px; font-family: inherit; color: var(--label);
}

/* ---- Search Box ---- */
.search-box {
  flex: 1; min-width: 200px; height: 36px; border-radius: 18px;
  background: var(--card); box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 8px; padding: 0 14px;
  font-size: 10.5px;
}
.search-box input {
  flex: 1; border: none; background: none; outline: none;
  font-size: 10.5px; font-family: inherit; color: var(--text);
}
.search-box .i { color: var(--icon); }

/* ---- Modal ---- */
.modal-bg {
  position: fixed; inset: 0;
  background: rgba(23,32,52,.5); z-index: 200;
  display: none; align-items: stretch; justify-content: flex-end;
  backdrop-filter: blur(2px);
}
.modal-bg.show { display: flex; }
.modal-panel {
  width: 680px; max-width: 100%; background: var(--card);
  box-shadow: -8px 0 32px rgba(0,0,0,.15);
  display: flex; flex-direction: column;
  animation: slideInRight var(--dur-normal) var(--ease);
}
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* ---- Modal (centered) ---- */
.modal-center {
  background: var(--card); border-radius: var(--r-xl);
  max-width: 540px; width: 100%; max-height: 90vh;
  overflow: auto; box-shadow: var(--shadow-pop);
}
.modal-center.wide { max-width: 700px; }

.modal-header {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--border);
}
.modal-header b { display: block; font-size: 14px; font-weight: 700; color: var(--text); }
.modal-header span { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.modal-header .x {
  margin-left: auto; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); border: none; background: none; cursor: pointer;
}
.modal-header .x:hover { background: var(--elev); color: var(--text); }
.modal-body { padding: 18px 20px; }
.modal-footer {
  display: flex; gap: 8px; padding: 14px 20px;
  border-top: 1px solid var(--border);
}

/* ---- Fields ---- */
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 10px; font-weight: 600; color: var(--label); margin-bottom: 4px; }
.field label small { color: var(--muted); font-weight: 400; }
.field .input {
  width: 100%; height: 34px; border-radius: var(--r-md);
  border: 1px solid var(--border); padding: 0 10px;
  font-size: 11px; color: var(--text); background: var(--bg);
}
.field .input:focus { border-color: var(--primary); outline: none; }
.field textarea.input { height: 70px; padding: 8px 10px; resize: vertical; }

/* Standalone input styling */
.input {
  width: 100%; height: 34px; border-radius: var(--r-md);
  border: 1px solid var(--border); padding: 0 10px;
  font-size: 11px; color: var(--text); background: var(--bg);
}
.input:focus { border-color: var(--primary); outline: none; }
.textarea.input { height: 70px; padding: 8px 10px; resize: vertical; }

/* ============================================================
   SELECTS — themed trigger
   The closed control is styled here; the open popup is drawn by the OS,
   so it is themed through `color-scheme` (see tokens.css) plus the
   option colours below (Firefox/Edge honour these, Chrome uses color-scheme).
   ============================================================ */
select.input,
select.per-page,
select.settings-input,
select.cx-sel {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 30px;
  cursor: pointer;
  color: var(--text);
  background-color: var(--card);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237C8797' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 150ms cubic-bezier(.22,1,.36,1), background-color 150ms cubic-bezier(.22,1,.36,1);
}
select.input:hover,
select.per-page:hover,
select.settings-input:hover { border-color: var(--line); background-color: var(--elev2) }
select.input:focus,
select.per-page:focus,
select.settings-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
select.input:disabled,
select.per-page:disabled { opacity: .55; cursor: not-allowed; background-image: none }

/* Popup list colours */
select option,
select.input option,
select.per-page option,
select.settings-input option {
  background-color: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
}
select option:checked { background-color: var(--primary-soft); color: var(--primary-dark) }

/* ---- Date Dropdown ---- */
.date-dropdown { position: relative; }
.date-dropdown-trigger {
  height: 34px; border-radius: 17px;
  background: var(--card); box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px; font-size: 10.5px; font-weight: 500;
  color: var(--label); cursor: pointer; user-select: none;
  border: none; font-family: inherit;
}
.date-dropdown-trigger .i { width: 13px; height: 13px; color: var(--icon); }
.date-dropdown-trigger .chev { width: 10px; height: 10px; color: var(--muted); transition: transform var(--dur-normal); }
.date-dropdown.open .date-dropdown-trigger .chev { transform: rotate(180deg); }
.date-dropdown-panel {
  position: absolute; top: 40px; right: 0;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
  padding: 6px; min-width: 220px; display: none; z-index: 20;
}
.date-dropdown.open .date-dropdown-panel { display: block; }
.date-dropdown-panel .dd-section {
  padding: 4px 6px; font-size: 9px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .8px; font-weight: 600; margin-top: 4px;
}
.date-dropdown-panel .dd-section:first-child { margin-top: 0; }
.date-dropdown-panel .dd-opt {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 10px; border-radius: var(--r-sm);
  border: none; background: none; font-size: 11px; font-weight: 500;
  color: var(--label); cursor: pointer; font-family: inherit; text-align: left;
}
.date-dropdown-panel .dd-opt:hover { background: var(--elev); }
.date-dropdown-panel .dd-opt.active { background: var(--primary-soft); color: var(--primary); }
.date-dropdown-panel .dd-opt .check { width: 14px; color: var(--primary); opacity: 0; }
.date-dropdown-panel .dd-opt.active .check { opacity: 1; }
.date-dropdown-panel .dd-divider { height: 1px; background: var(--border); margin: 4px 6px; }
.date-dropdown-panel .dd-apply {
  width: calc(100% - 12px); margin: 6px; padding: 7px;
  border-radius: var(--r-sm); border: none;
  background: var(--primary); color: #fff;
  font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.date-dropdown-panel .dd-apply:hover { opacity: .9; }

/* ---- Theme Toggle ---- */
/* Theme control: a single icon button, matching the gear beside it. It was a
   50px switch holding a 24px knob, so 26px of empty track read as a second,
   broken button rather than as part of a switch. */
.theme-toggle {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--card);
  cursor: pointer; position: relative;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 30px; padding: 0;
  transition: background var(--dur-normal), border-color var(--dur-normal), transform var(--dur-fast);
}
.theme-toggle:hover { background: var(--elev); transform: translateY(-1px); }
.theme-toggle:active { transform: scale(.95); }
[data-theme="dark"] .theme-toggle { background: var(--elev); border-color: var(--border); }
.toggle-knob {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.theme-icon { width: 15px; height: 15px; flex-shrink: 0; }
.sun-icon { display: block; color: #f59e0b; }
.moon-icon { display: none; width: 16px; height: 16px; }
[data-theme="dark"] .sun-icon { display: none; }
[data-theme="dark"] .moon-icon { display: block !important; fill: #f5f5f5 !important; color: #f5f5f5 !important; opacity: 1 !important; }

/* ---- Grid helpers ---- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* ---- Section title ---- */
.section-t { font-size: 10px; font-weight: 600; color: var(--label); text-transform: uppercase; letter-spacing: .5px; margin: 14px 0 8px; }

/* ---- Export bar ---- */
.export-bar {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: #fff;
  padding: 10px 20px; border-radius: 12px;
  display: none; align-items: center; gap: 16px;
  z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,.3); font-size: 12px;
}
.export-bar.show { display: flex; }
.export-bar button {
  height: 30px; padding: 0 14px; border-radius: 8px;
  border: none; font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.export-bar .done { background: var(--primary); color: #fff; }
.export-bar .cancel { background: rgba(255,255,255,.15); color: #fff; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .sidebar { display: none; }
  .main { margin-left: 0; }
}