/*
 * ГАРАЖ 211 — Design System · components.css
 * Всі UI-компоненти єдиним стилем
 */

/* ═══════════════════════════════════════════════════
   NAVIGATION MENU
   ═══════════════════════════════════════════════════ */
.menu-section { margin-bottom:var(--sp-3); padding:var(--sp-1) 0; }
.menu-section-title {
  padding:var(--sp-1) var(--sp-5);
  font-size:var(--fs-xs); font-weight:var(--fw-bold);
  text-transform:uppercase; color:var(--color-text-muted);
  letter-spacing:.9px; margin-bottom:var(--sp-1);
}

.menu-item,
.menu-group-toggle {
  display:flex; align-items:center; gap:10px;
  padding:10px var(--sp-5);
  color:var(--color-text); text-decoration:none;
  transition:var(--t-base);
  border-left:3px solid transparent;
  font-size:var(--fs-base); font-weight:var(--fw-med);
  cursor:pointer;
}
.menu-item:hover,
.menu-group-toggle:hover {
  background:var(--color-hover);
  border-left-color:var(--color-primary);
  color:var(--color-primary);
}
.menu-item.active,
.menu-group-toggle.active {
  background:linear-gradient(90deg,var(--color-primary-light) 0%,transparent 100%);
  border-left-color:var(--color-primary);
  color:var(--color-primary); font-weight:var(--fw-semi);
}
.menu-chevron { transition:transform var(--t-base); }
.menu-chevron.rotated { transform:rotate(180deg); }

.menu-subitem { padding-left:46px !important; font-size:var(--fs-sm) !important; color:var(--color-text-sub); }
.menu-subitem:hover { background:var(--color-hover); border-left-color:var(--color-primary); color:var(--color-primary); }
.menu-icon { font-size:var(--icon-md); width:var(--icon-lg); text-align:center; flex-shrink:0; }

/* ═══════════════════════════════════════════════════
   SMART SEARCH
   ═══════════════════════════════════════════════════ */
.smart-input-box { position:relative; }
.smart-input-field {
  width:100%; padding:12px 48px 12px var(--sp-5);
  border:2px solid rgba(255,255,255,.3); border-radius:var(--r-2xl);
  background:rgba(255,255,255,.15); color:var(--color-text-inv);
  font-size:var(--fs-md); font-weight:var(--fw-med);
  outline:none; transition:var(--t-base);
}
.smart-input-field::placeholder { color:rgba(255,255,255,.68); font-weight:var(--fw-reg); }
.smart-input-field:focus { background:rgba(255,255,255,.25); border-color:rgba(255,255,255,.55); box-shadow:0 4px 12px rgba(0,0,0,.1); }

.smart-input-btn {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.92); color:var(--color-primary);
  border:none; width:36px; height:36px; border-radius:var(--r-full);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:var(--icon-lg); font-weight:var(--fw-bold); transition:var(--t-base);
}
.smart-input-btn:hover { transform:translateY(-50%) scale(1.1); box-shadow:var(--sh-sm); }

.smart-result-popup {
  position:fixed; top:calc(var(--topbar-h) + 12px); left:50%; transform:translateX(-50%);
  width:min(860px,94vw); background:var(--color-surface); border-radius:var(--r-lg);
  box-shadow:var(--sh-xl); z-index:1001; max-height:82vh;
  display:flex; flex-direction:column; overflow:hidden;
}
.smart-result-popup.show { animation:slideDown .22s ease; }
@keyframes slideDown {
  from { opacity:0; transform:translateX(-50%) translateY(-14px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}
.smart-result-header {
  padding:var(--sp-4) var(--sp-6); background:var(--grad-brand);
  display:flex; justify-content:space-between; align-items:center; flex-shrink:0;
}
.smart-result-close {
  background:rgba(255,255,255,.2); border:none; font-size:var(--fs-xl);
  cursor:pointer; color:var(--color-text-inv); line-height:1;
  width:32px; height:32px; border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center; transition:var(--t-fast);
}
.smart-result-close:hover { background:rgba(255,255,255,.35); }
.smart-result-content { padding:var(--sp-6); overflow-y:auto; flex:1; }

@keyframes siSpin { to { transform:rotate(360deg); } }
.si-spinner {
  width:44px; height:44px; border:4px solid var(--color-border);
  border-top-color:var(--color-secondary); border-radius:var(--r-full);
  animation:siSpin .8s linear infinite; margin:0 auto var(--sp-4);
}
.si-chip {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--color-surface-sub); border-radius:var(--r-full);
  padding:3px 10px; font-size:var(--fs-sm); font-weight:var(--fw-med); white-space:nowrap;
}
.si-card { border-radius:var(--r-md); padding:12px var(--sp-5); margin-bottom:var(--sp-4); border-left:4px solid; }
.si-card-green  { background:var(--color-success-light); border-color:var(--color-success); }
.si-card-orange { background:var(--color-warning-light); border-color:var(--color-warning); }
.si-card-blue   { background:var(--color-info-light);    border-color:var(--color-info); }
.si-card-yellow { background:#fefce8; border-color:#eab308; }

/* ═══════════════════════════════════════════════════
   WIDGETS (загальні — для сторінок)
   ═══════════════════════════════════════════════════ */
.widget {
  background:var(--color-surface); border-radius:var(--r-lg);
  padding:var(--sp-5); margin-bottom:var(--sp-5);
  border:1px solid var(--color-border); box-shadow:var(--sh-xs);
}
.widget-title {
  font-size:var(--fs-base); font-weight:var(--fw-bold);
  color:var(--color-text); margin-bottom:var(--sp-4);
  display:flex; align-items:center; gap:var(--sp-2);
}
.stat-card { display:flex; justify-content:space-between; align-items:center; padding:var(--sp-3) 0; border-bottom:1px solid var(--color-border); }
.stat-card:last-child { border-bottom:none; }
.stat-label { font-size:var(--fs-sm); color:var(--color-text-sub); }
.stat-value { font-size:var(--fs-lg); font-weight:var(--fw-bold); color:var(--color-primary); }

/* ═══════════════════════════════════════════════════
   RIGHT SIDEBAR — WIDGET SYSTEM
   ═══════════════════════════════════════════════════ */

/* --- Шапка сайдбару --- */
.wr-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 14px 9px;
  border-bottom:1px solid var(--color-border);
  background:var(--color-surface);
  position:sticky; top:0; z-index:10;
}
.wr-header-title {
  font-size:12px; font-weight:700; color:var(--color-text-sub); letter-spacing:.4px;
  display:flex; align-items:center; gap:6px;
}
.wr-header-title-dot {
  width:7px; height:7px; border-radius:50%; background:var(--color-primary);
  box-shadow:0 0 0 2px var(--color-primary-light);
}
.wr-header-actions { display:flex; gap:4px; align-items:center; }
.wr-icon-btn {
  background:none; border:none; cursor:pointer;
  width:28px; height:28px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--color-text-muted); transition:all .15s;
}
.wr-icon-btn:hover  { background:var(--color-primary-light); color:var(--color-primary); }
.wr-icon-btn.active { background:var(--color-primary-light); color:var(--color-primary); }
.wr-icon-btn:disabled { opacity:.35; cursor:not-allowed; }

/* --- Панель налаштувань --- */
.wr-settings {
  background:var(--color-surface-sub); border-bottom:2px dashed var(--color-border);
  padding:12px 13px 13px;
}
.wr-settings-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:9px;
}
.wr-settings-title { font-size:11px; font-weight:700; color:var(--color-text-sub); text-transform:uppercase; letter-spacing:.5px; }
.wr-settings-hint  { font-size:10px; color:var(--color-text-muted); }
.wr-drag-list { display:flex; flex-direction:column; gap:4px; }
.wr-drag-item {
  display:flex; align-items:center; gap:8px;
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px;
  padding:7px 10px; cursor:grab; user-select:none;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.wr-drag-item:hover          { border-color:var(--color-primary-light); box-shadow:var(--sh-xs); }
.wr-drag-item.drag-over      { border-color:var(--color-primary); background:var(--color-primary-light); box-shadow:var(--sh-sm); }
.wr-drag-item.drag-src       { opacity:.4; }
.wr-drag-handle              { font-size:13px; color:var(--color-border-strong); flex-shrink:0; line-height:1; }
.wr-drag-icon                { font-size:15px; line-height:1; }
.wr-drag-label               { font-size:12px; font-weight:600; color:var(--color-text); flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.wr-drag-module              { font-size:10px; color:var(--color-text-muted); white-space:nowrap; }

/* Toggle switch */
.wr-toggle {
  width:32px; height:18px; border-radius:9px; flex-shrink:0;
  position:relative; cursor:pointer; transition:background .2s;
}
.wr-toggle.on  { background:var(--color-primary); }
.wr-toggle.off { background:var(--color-border-strong); }
.wr-toggle-knob {
  position:absolute; top:2px; width:14px; height:14px; border-radius:50%;
  background:var(--color-surface); box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .2s;
}
.wr-toggle.on  .wr-toggle-knob { left:16px; }
.wr-toggle.off .wr-toggle-knob { left:2px; }

.wr-save-btn {
  margin-top:10px; width:100%; padding:8px 12px; border-radius:8px;
  font-size:12px; font-weight:700; border:none; cursor:pointer;
  background:var(--color-primary); color:var(--color-text-inv);
  transition:background .15s, opacity .15s;
}
.wr-save-btn:hover:not(:disabled) { background:var(--color-primary-dark); }
.wr-save-btn:disabled { opacity:.55; cursor:not-allowed; }
.wr-saved-msg { margin-top:6px; text-align:center; font-size:11px; color:var(--color-success); font-weight:600; }

/* --- Область контенту --- */
.wr-body { flex:1; overflow-y:auto; padding-bottom:12px; min-height:0; }
.wr-body::-webkit-scrollbar       { width:4px; }
.wr-body::-webkit-scrollbar-track { background:transparent; }
.wr-body::-webkit-scrollbar-thumb {
  background:var(--color-border);
  border-radius:var(--r-full);
  transition:background .2s;
}
.wr-body::-webkit-scrollbar-thumb:hover { background:var(--color-primary); }
.wr-body { scrollbar-width:thin; scrollbar-color:var(--color-border) transparent; }

/* --- Стан "порожньо/завантаження" --- */
.wr-state {
  padding:40px 20px 32px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.wr-state-emoji {
  font-size:40px; line-height:1;
  width:68px; height:68px; border-radius:var(--r-xl);
  background:var(--color-surface-sub); border:1px solid var(--color-border);
  display:flex; align-items:center; justify-content:center;
}
.wr-state-title {
  font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--color-text);
  margin-top:2px;
}
.wr-state-text  { font-size:var(--fs-xs); color:var(--color-text-muted); line-height:1.6; }
.wr-state-action {
  margin-top:4px; display:inline-flex; align-items:center; gap:5px;
  padding:6px 14px; border-radius:var(--r-md); border:none; cursor:pointer;
  font-size:var(--fs-sm); font-weight:var(--fw-semi);
  background:var(--color-primary-light); color:var(--color-primary);
  transition:background .15s;
}
.wr-state-action:hover { background:#d4dbff; }
/* loading pulse */
.wr-state-loading {
  width:40px; height:40px; border-radius:50%;
  border:3px solid var(--color-border);
  border-top-color:var(--color-primary);
  animation:wr-spin .7s linear infinite;
}
@keyframes wr-spin { to { transform:rotate(360deg); } }

/* --- Картка віджета --- */
.wr-widget {
  margin:6px 10px; border-radius:var(--r-md);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  box-shadow:var(--sh-xs);
  overflow:hidden;
  transition:box-shadow .2s, transform .2s;
}
.wr-widget:hover { box-shadow:var(--sh-sm); transform:translateY(-1px); }
/* Акцентна смуга зверху */
.wr-widget::before {
  content:''; display:block; height:3px;
  background:var(--grad-brand);
}

.wr-widget-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 11px 7px;
  background:var(--color-surface-sub);
  border-bottom:1px solid var(--color-border);
}
.wr-widget-title {
  display:flex; align-items:center; gap:7px;
  font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--color-text);
  min-width:0;
}
.wr-widget-icon {
  width:24px; height:24px; border-radius:6px; flex-shrink:0;
  background:var(--color-primary-light);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; line-height:1;
}
.wr-widget-title > span:last-child {
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.wr-widget-refresh {
  background:none; border:none; cursor:pointer; flex-shrink:0;
  width:26px; height:26px; border-radius:6px; font-size:15px;
  color:var(--color-text-muted); display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.wr-widget-refresh:hover   { background:var(--color-primary-light); color:var(--color-primary); }
.wr-widget-refresh.loading { opacity:.4; cursor:not-allowed; animation:wr-spin .8s linear infinite; }

.wr-widget-body { padding:0; }

/* --- Скелет завантаження --- */
.wr-skeleton { display:flex; flex-direction:column; gap:5px; padding:10px 11px; }
.wr-skeleton-row {
  height:28px; border-radius:6px;
  background:linear-gradient(90deg, var(--color-hover) 25%, var(--color-border) 50%, var(--color-hover) 75%);
  background-size:200% 100%;
  animation:wr-shimmer 1.3s infinite;
}
.wr-skeleton-row:nth-child(2) { width:80%; }
.wr-skeleton-row:nth-child(3) { width:60%; }
@keyframes wr-shimmer {
  0%   { background-position:-200% 0; }
  100% { background-position: 200% 0; }
}

/* --- type=stats --- */
.wr-stats { display:flex; flex-direction:column; }
.wr-stats-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--color-hover);
  text-decoration:none; color:inherit;
  transition:background .12s;
  gap:8px;
}
.wr-stats-row:last-child { border-bottom:none; }
.wr-stats-row:hover { background:var(--color-hover); }
.wr-stats-label { font-size:var(--fs-xs); color:var(--color-text-sub); line-height:1.3; }
.wr-stats-value {
  font-size:17px; font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums; letter-spacing:-.3px;
  white-space:nowrap; flex-shrink:0;
}

/* --- type=list --- */
.wr-list { display:flex; flex-direction:column; }
.wr-list-empty {
  font-size:var(--fs-xs); color:var(--color-text-muted);
  padding:16px 12px; text-align:center;
}
.wr-list-item {
  display:block; text-decoration:none; color:inherit;
  padding:8px 11px 8px 10px;
  border-left:3px solid transparent;
  border-bottom:1px solid var(--color-hover);
  transition:background .12s;
}
.wr-list-item:last-child { border-bottom:none; }
.wr-list-item:hover { background:var(--color-hover); }
.wr-list-item-top {
  display:flex; align-items:center; justify-content:space-between; gap:6px;
}
.wr-list-item-title {
  font-size:var(--fs-sm); font-weight:var(--fw-semi); color:var(--color-text);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  min-width:0; flex:1; line-height:1.3;
}
.wr-list-item-badge {
  flex-shrink:0; padding:2px 7px; border-radius:var(--r-full);
  font-size:var(--fs-xs); font-weight:var(--fw-bold);
  color:var(--color-text-inv); white-space:nowrap;
  line-height:1.4;
}
.wr-list-item-meta {
  font-size:var(--fs-xs); color:var(--color-text-sub); margin-top:2px;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  line-height:1.3;
}
.wr-list-item-sub { font-size:10px; color:var(--color-text-muted); margin-top:1px; line-height:1.3; }

/* --- type=alerts --- */
.wr-alerts { display:flex; flex-direction:column; }
.wr-alert-empty {
  font-size:var(--fs-xs); color:var(--color-success);
  padding:14px 12px; text-align:center;
}
.wr-alert-item {
  display:flex; gap:10px; padding:9px 12px;
  font-size:var(--fs-xs); align-items:flex-start;
  text-decoration:none;
  border-left:3px solid transparent;
  border-bottom:1px solid transparent;
  transition:filter .12s;
}
.wr-alert-item:last-child { border-bottom:none; }
.wr-alert-item:hover { filter:brightness(.96); }
.wr-alert-item.danger  {
  background:var(--color-danger-light); color:var(--color-danger);
  border-left-color:var(--color-danger);
  border-bottom-color:rgba(229,57,53,.08);
}
.wr-alert-item.warning {
  background:var(--color-warning-light); color:var(--color-warning);
  border-left-color:var(--color-warning);
  border-bottom-color:rgba(245,124,0,.08);
}
.wr-alert-item.info {
  background:var(--color-info-light); color:var(--color-info);
  border-left-color:var(--color-info);
  border-bottom-color:rgba(25,118,210,.08);
}
.wr-alert-icon { font-size:15px; line-height:1.35; flex-shrink:0; }
.wr-alert-text { font-weight:var(--fw-med); line-height:1.4; }

/* --- type=links --- */
.wr-links { display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:10px 11px; }
.wr-link-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; padding:12px 6px; border-radius:var(--r-md);
  min-height:58px;
  font-size:var(--fs-xs); font-weight:var(--fw-bold);
  color:var(--color-text-inv); text-align:center; text-decoration:none;
  box-shadow:var(--sh-xs);
  transition:transform .15s, box-shadow .15s, filter .15s;
}
.wr-link-btn:hover  { transform:translateY(-2px); box-shadow:var(--sh-sm); filter:brightness(1.08); }
.wr-link-btn:active { transform:translateY(0); box-shadow:var(--sh-xs); }
.wr-link-icon { font-size:20px; line-height:1; }

/* --- Помилка --- */
.wr-error {
  font-size:var(--fs-xs); color:var(--color-danger);
  padding:10px 12px; display:flex; align-items:center; gap:6px;
}

/* --- Футер --- */
.wr-footer {
  text-align:center; font-size:10px; color:var(--color-border-strong);
  padding:6px 0 8px; letter-spacing:.2px;
}

.opacity-40 { opacity:.4 !important; }

/* ═══════════════════════════════════════════════════
   FLASH ALERTS
   ═══════════════════════════════════════════════════ */
.flash-messages {
  position:fixed; top:calc(var(--topbar-h) + var(--sp-5));
  right:var(--sp-5); z-index:1100; max-width:420px; pointer-events:none;
}
.alert {
  pointer-events:all;
  padding:16px var(--sp-6); margin-bottom:var(--sp-4);
  border-radius:var(--r-lg); font-size:var(--fs-md); font-weight:var(--fw-med);
  display:flex; align-items:center; gap:var(--sp-4);
  animation:alertSlideIn .45s cubic-bezier(.68,-.55,.265,1.55);
  box-shadow:var(--sh-lg); cursor:pointer; transition:var(--t-base);
}
.alert:hover { transform:translateX(-4px); box-shadow:var(--sh-xl); }
.alert-icon { font-size:26px; line-height:1; flex-shrink:0; }
.alert-close {
  margin-left:auto; background:transparent; border:none; color:inherit;
  opacity:.55; width:22px; height:22px; cursor:pointer; font-size:20px;
  font-weight:var(--fw-bold); display:flex; align-items:center; justify-content:center;
  transition:var(--t-fast); line-height:1;
}
.alert-close:hover { opacity:1; transform:rotate(90deg) scale(1.15); }
.alert-success { background:var(--grad-success); color:var(--color-text-inv); }
.alert-danger,
.alert-error   { background:var(--grad-danger);  color:var(--color-text-inv); }
.alert-warning { background:var(--grad-warm);    color:var(--color-text-inv); }
.alert-info    { background:linear-gradient(135deg,#1976d2 0%,#42a5f5 100%); color:var(--color-text-inv); }

@keyframes alertSlideIn {
  0%  { transform:translateX(420px); opacity:0; }
  60% { transform:translateX(-16px); opacity:1; }
  80% { transform:translateX(8px); }
 100% { transform:translateX(0); }
}
@keyframes alertSlideOut { to { transform:translateX(420px) scale(.85); opacity:0; } }

/* ═══════════════════════════════════════════════════
   BUTTONS
   All buttons use the same base. Size and variant
   classes stack on top.

   SIZES:  .btn-sm | (default) | .btn-lg
   VARIANTS: .btn-primary | .btn-success | .btn-danger
             .btn-light   | .btn-ghost
   ICON-ONLY: .btn-action (+ colour class)
   ═══════════════════════════════════════════════════ */

button, .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  border:none; cursor:pointer; font-family:inherit; font-weight:var(--fw-semi);
  line-height:1; text-decoration:none; white-space:nowrap; transition:var(--t-base);
  border-radius:var(--r-md); padding:10px var(--sp-5); font-size:var(--fs-base);
  background:transparent; color:var(--color-text);
}
button:active, .btn:active { transform:scale(.96); }

.btn-sm { padding:7px var(--sp-4); font-size:var(--fs-sm); border-radius:var(--r-sm); }
.btn-lg { padding:13px var(--sp-8); font-size:var(--fs-md); }

.btn-primary {
  background:var(--grad-brand); color:var(--color-text-inv);
  box-shadow:0 4px 14px rgba(102,126,234,.38);
}
.btn-primary:hover { filter:brightness(1.08); box-shadow:0 6px 20px rgba(102,126,234,.52); color:var(--color-text-inv); }

.btn-success {
  background:var(--grad-success); color:var(--color-text-inv);
  box-shadow:0 4px 14px rgba(67,160,71,.35);
}
.btn-success:hover { filter:brightness(1.06); box-shadow:0 6px 20px rgba(67,160,71,.48); color:var(--color-text-inv); }

.btn-danger {
  background:var(--grad-danger); color:var(--color-text-inv);
  box-shadow:0 4px 14px rgba(229,57,53,.32);
}
.btn-danger:hover { filter:brightness(1.06); box-shadow:0 6px 20px rgba(229,57,53,.45); color:var(--color-text-inv); }

.btn-light {
  background:var(--color-surface-sub); color:var(--color-text-sub);
  border:1.5px solid var(--color-border);
}
.btn-light:hover { background:var(--color-hover); color:var(--color-text); }

.btn-ghost {
  background:transparent; color:var(--color-primary);
  border:1.5px solid var(--color-primary);
}
.btn-ghost:hover { background:var(--color-primary-light); }

/* Backward-compat named buttons */
.btn-save {
  display:inline-flex; align-items:center; gap:var(--sp-2); border:none;
  border-radius:var(--r-md); cursor:pointer; font-family:inherit; font-weight:var(--fw-semi);
  text-decoration:none; transition:var(--t-base); white-space:nowrap;
  padding:13px var(--sp-8); font-size:var(--fs-md);
  background:var(--grad-success); color:var(--color-text-inv);
  box-shadow:0 4px 14px rgba(67,160,71,.35);
}
.btn-create {
  display:inline-flex; align-items:center; gap:var(--sp-2); border:none;
  border-radius:var(--r-md); cursor:pointer; font-family:inherit; font-weight:var(--fw-semi);
  text-decoration:none; transition:var(--t-base); white-space:nowrap;
  padding:13px var(--sp-8); font-size:var(--fs-md);
  background:var(--grad-brand); color:var(--color-text-inv);
  box-shadow:0 4px 14px rgba(102,126,234,.38);
}
.btn-cancel {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  border-radius:var(--r-md); cursor:pointer; font-family:inherit; font-weight:var(--fw-semi);
  text-decoration:none; transition:var(--t-base); white-space:nowrap;
  padding:13px var(--sp-8); font-size:var(--fs-md);
  background:var(--color-surface-sub); color:var(--color-text-sub);
  border:1.5px solid var(--color-border);
}
.btn-save:hover, .btn-create:hover { filter:brightness(1.07); color:var(--color-text-inv); transform:translateY(-1px); }
.btn-cancel:hover { background:var(--color-hover); color:var(--color-text); }

/* Header outline-white button */
.btn-header-add {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:10px var(--sp-5); border-radius:var(--r-md);
  background:rgba(255,255,255,.16); color:var(--color-text-inv) !important;
  border:1.5px solid rgba(255,255,255,.42);
  font-weight:var(--fw-bold); font-size:var(--fs-base);
  min-height:44px;
  text-decoration:none !important; transition:var(--t-base); cursor:pointer;
}
.btn-header-add:hover { background:rgba(255,255,255,.3); }

/* Icon-only action buttons (use in table rows) */
.btn-action {
  display:inline-flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; border-radius:var(--r-sm);
  text-decoration:none; transition:var(--t-base); flex-shrink:0; line-height:1;
  width:var(--btn-icon-md); height:var(--btn-icon-md); font-size:var(--icon-sm);
  min-width:var(--btn-icon-md); min-height:var(--btn-icon-md);
  padding:0;
}
.btn-action svg { pointer-events:none; }
.btn-action:hover { transform:translateY(-2px); }
.btn-action:active { transform:scale(.9); }

.btn-view    { background:var(--color-info-light);    color:var(--color-info); }
.btn-view:hover    { background:#bbdefb; color:#0d47a1; }
.btn-edit    { background:var(--color-warning-light); color:var(--color-warning); }
.btn-edit:hover    { background:#ffe0b2; color:#bf360c; }
.btn-delete  { background:var(--color-danger-light);  color:var(--color-danger); }
.btn-delete:hover  { background:#fecdd3; color:#b71c1c; }
.btn-restore { background:var(--color-success-light); color:var(--color-success); }
.btn-restore:hover { background:#c8e6c9; color:#1b5e20; }
.btn-fire    { background:var(--color-danger-light);  color:var(--color-danger); }
.btn-fire:hover    { background:#fecdd3; color:#b71c1c; }

.actions-cell { display:flex; gap:6px; justify-content:center; align-items:center; }

/* ═══════════════════════════════════════════════════
   FORM ELEMENTS
   ═══════════════════════════════════════════════════ */
input, select, textarea {
  padding:10px var(--sp-3); border:1.5px solid var(--color-border);
  border-radius:var(--r-sm); font-size:var(--fs-base); font-family:inherit;
  color:var(--color-text); background:var(--color-surface);
  transition:var(--t-base); width:100%;
}
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(102,126,234,.14);
}
input::placeholder, textarea::placeholder { color:var(--color-text-muted); }
label { display:block; font-size:var(--fs-sm); font-weight:var(--fw-semi); color:var(--color-text-sub); margin-bottom:6px; }
.form-group { margin-bottom:var(--sp-5); }

/* ═══════════════════════════════════════════════════
   STATUS BADGES
   ═══════════════════════════════════════════════════ */
.status-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 12px; border-radius:var(--r-full);
  font-size:var(--fs-xs); font-weight:var(--fw-bold); white-space:nowrap;
}
.status-badge::before {
  content:''; display:inline-block; width:6px; height:6px;
  border-radius:var(--r-full); background:currentColor; flex-shrink:0;
}
.badge-paid     { background:var(--color-success-light); color:var(--color-success); }
.badge-queue    { background:var(--color-info-light);    color:var(--color-info); }
.badge-progress { background:var(--color-warning-light); color:var(--color-warning); }
.badge-pause    { background:var(--color-danger-light);  color:var(--color-danger); }
.badge-ready    { background:#ecfdf5; color:#065f46; }
.badge-pending  { background:var(--color-warning-light); color:var(--color-warning); }
.badge-active   { background:var(--color-success-light); color:var(--color-success); }
.badge-vacation { background:rgba(251,191,36,.18); color:#f59e0b; }
.badge-fired    { background:var(--color-danger-light);  color:var(--color-danger); }
.badge-inactive { background:#f5f5f5; color:var(--color-text-muted); }

/* ═══════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════ */
.page-header {
  padding:var(--sp-6) var(--sp-8); border-radius:var(--r-lg);
  margin-bottom:var(--sp-6);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:var(--sp-4); color:var(--color-text-inv); box-shadow:var(--sh-md);
}
.page-header h1 {
  margin:0; font-size:var(--fs-3xl); font-weight:var(--fw-bold);
  color:var(--color-text-inv); display:flex; align-items:center; gap:var(--sp-3);
}
.page-header p { margin:6px 0 0; color:rgba(255,255,255,.85); font-size:var(--fs-base); }

/* ═══════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════ */
.card {
  background:var(--color-surface); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm); border:1px solid var(--color-border);
  overflow:hidden; transition:var(--t-base);
}
.card:hover { box-shadow:var(--sh-md); }
.card-header {
  padding:var(--sp-4) var(--sp-6); border-bottom:1px solid var(--color-border);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
}
.card-title { font-size:var(--fs-md); font-weight:var(--fw-semi); color:var(--color-text); margin:0; }
.card-body  { padding:var(--sp-6); }

.page-cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--sp-4); }
.page-card {
  background:var(--color-surface); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm); padding:var(--sp-5); transition:var(--t-base);
  border:1px solid var(--color-border);
}
.page-card:hover { box-shadow:var(--sh-md); transform:translateY(-2px); }

/* ═══════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════ */
.data-table { width:100%; border-collapse:collapse; font-size:var(--fs-base); }
.data-table th {
  padding:10px var(--sp-4); text-align:left;
  font-size:var(--fs-xs); font-weight:var(--fw-bold);
  text-transform:uppercase; letter-spacing:.6px;
  color:var(--color-text-muted); background:var(--color-surface-sub);
  border-bottom:1px solid var(--color-border); white-space:nowrap;
}
.data-table td {
  padding:10px var(--sp-4); border-bottom:1px solid var(--color-border);
  color:var(--color-text); vertical-align:middle;
}
.data-table tbody tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover { background:var(--color-hover); }

/* ═══════════════════════════════════════════════════
   VIEW TOGGLE
   ═══════════════════════════════════════════════════ */
.view-toggle {
  display:inline-flex; border:1.5px solid var(--color-border);
  border-radius:var(--r-sm); overflow:hidden; flex-shrink:0;
}
.vt-btn {
  width:36px; height:36px; border:none; background:var(--color-surface);
  color:var(--color-text-sub); cursor:pointer; font-size:var(--icon-sm);
  transition:var(--t-base); display:flex; align-items:center; justify-content:center;
}
.vt-btn.active { background:var(--color-primary); color:var(--color-text-inv); }
.vt-btn:hover:not(.active) { background:var(--color-hover); color:var(--color-text); }

/* ═══════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(15,10,40,.55);
  z-index:1200; display:flex; align-items:center; justify-content:center;
  padding:var(--sp-5); backdrop-filter:blur(3px);
}
.modal {
  background:var(--color-surface); border-radius:var(--r-xl);
  width:100%; max-width:520px; box-shadow:var(--sh-xl); overflow:hidden;
}
.modal-header {
  padding:var(--sp-5) var(--sp-6); display:flex; align-items:center;
  justify-content:space-between; border-bottom:1px solid var(--color-border);
}
.modal-title { font-size:var(--fs-lg); font-weight:var(--fw-bold); color:var(--color-text); margin:0; }
.modal-close {
  width:32px; height:32px; border:none; background:transparent;
  color:var(--color-text-muted); cursor:pointer; font-size:20px;
  border-radius:var(--r-full); display:flex; align-items:center; justify-content:center;
  transition:var(--t-fast);
}
.modal-close:hover { background:var(--color-hover); color:var(--color-text); }
.modal-body   { padding:var(--sp-6); }
.modal-footer { padding:var(--sp-5) var(--sp-6); border-top:1px solid var(--color-border); display:flex; gap:var(--sp-3); justify-content:flex-end; }

/* ═══════════════════════════════════════════════════
   ALPINE UTILS
   ═══════════════════════════════════════════════════ */
[x-cloak] { display:none !important; }
.transition { transition-property:all; transition-timing-function:cubic-bezier(.4,0,.2,1); }
.duration-200 { transition-duration:200ms; }
.duration-300 { transition-duration:300ms; }
.ease-in      { transition-timing-function:cubic-bezier(.4,0,1,1); }
.ease-out     { transition-timing-function:cubic-bezier(0,0,.2,1); }
.ease-in-out  { transition-timing-function:cubic-bezier(.4,0,.2,1); }
.scale-95   { transform:scale(.95); }
.scale-100  { transform:scale(1); }
.opacity-0  { opacity:0; }
.opacity-100{ opacity:1; }
@keyframes fadeIn { from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:translateY(0);} }