/* ===== Cards ===== */
.card{
  background:var(--color-white);border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);padding:16px;
}
.stat-card{
  background:var(--color-white);border-radius:var(--radius-lg);padding:16px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:6px;
  border-left:4px solid var(--color-gold);
}
.stat-card .label{font-size:12px;color:var(--color-text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.stat-card .value{font-size:22px;font-weight:800;color:var(--color-navy-dark)}
.stat-card .sub{font-size:12px;color:var(--color-text-muted)}
.grid-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:768px){.grid-stats{grid-template-columns:repeat(4,1fr)}}

/* ===== Buttons ===== */
.btn{
  border:none;border-radius:var(--radius-sm);padding:10px 16px;font-weight:600;font-size:14px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.15s;
}
.btn-primary{background:var(--color-navy);color:#fff}
.btn-primary:hover{background:var(--color-navy-dark)}
.btn-gold{background:var(--color-gold);color:#3a2c05;box-shadow:var(--shadow-gold)}
.btn-gold:hover{background:var(--color-gold-light)}
.btn-outline{background:transparent;color:var(--color-navy);border:1.5px solid var(--color-navy)}
.btn-ghost{background:var(--color-mist);color:var(--color-navy-dark)}
.btn-danger{background:#fee2e2;color:var(--color-danger)}
.btn-sm{padding:6px 12px;font-size:12.5px}
.btn-block{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* ===== Badges ===== */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700}
.badge-gold{background:var(--color-cream);color:#8a6a15;border:1px solid var(--color-gold-light)}
.badge-navy{background:var(--color-mist);color:var(--color-navy)}
.badge-success{background:#dcfce7;color:var(--color-success)}
.badge-warning{background:#fef3c7;color:var(--color-warning)}
.badge-danger{background:#fee2e2;color:var(--color-danger)}

/* ===== Forms ===== */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:13px;font-weight:600;color:var(--color-navy-dark)}
.field input,.field select,.field textarea{
  border:1.5px solid var(--color-mist);border-radius:var(--radius-sm);padding:10px 12px;
  font-size:14px;background:#fff;color:var(--color-text);outline:none;transition:.15s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--color-navy)}
.field .hint{font-size:11.5px;color:var(--color-text-muted)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.search-bar{position:relative}
.search-bar input{padding-left:36px}
.search-bar .icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);opacity:.5}

/* ===== Table (responsive card-list on mobile) ===== */
.data-table{width:100%;border-collapse:collapse}
.data-table th{
  text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--color-text-muted);padding:10px 12px;border-bottom:2px solid var(--color-mist);
}
.data-table td{padding:12px;border-bottom:1px solid var(--color-mist);font-size:13.5px}
.data-table tr:hover td{background:var(--color-cream)}
@media(max-width:767px){
  .data-table thead{display:none}
  .data-table, .data-table tbody, .data-table tr, .data-table td{display:block;width:100%}
  .data-table tr{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);margin-bottom:10px;padding:6px 4px}
  .data-table td{border:none;display:flex;justify-content:space-between;gap:10px;padding:8px 12px}
  .data-table td::before{content:attr(data-label);font-weight:700;color:var(--color-text-muted);font-size:11.5px}
}

/* ===== Toast ===== */
.toast-container{position:fixed;top:calc(14px + var(--safe-top));right:14px;z-index:var(--z-toast);display:flex;flex-direction:column;gap:8px;max-width:320px}
.toast{
  background:#1f2937;color:#fff;padding:12px 14px;border-radius:var(--radius-sm);font-size:13.5px;
  box-shadow:var(--shadow-md);display:flex;align-items:center;gap:10px;animation:toast-in .2s ease;
}
.toast.success{background:#166534}
.toast.error{background:#991b1b}
.toast.warning{background:#92400e}
@keyframes toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ===== Modal / Drawer ===== */
.modal-backdrop{position:fixed;inset:0;background:rgba(20,26,45,.55);z-index:var(--z-modal);display:flex;align-items:flex-end;justify-content:center}
.modal-box{
  background:#fff;border-radius:20px 20px 0 0;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;
  padding:18px 18px calc(18px + var(--safe-bottom));animation:sheet-up .22s ease;
}
@media(min-width:768px){
  .modal-backdrop{align-items:center}
  .modal-box{border-radius:var(--radius-lg);max-height:82vh}
}
@keyframes sheet-up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.modal-header h3{margin:0;font-size:16px}
.modal-close{background:var(--color-mist);border:none;border-radius:50%;width:30px;height:30px;font-size:16px;color:var(--color-navy)}

/* ===== Confirmation dialog ===== */
.confirm-box{max-width:360px;text-align:center}
.confirm-box .icon-warn{font-size:34px;margin-bottom:6px}
.confirm-actions{display:flex;gap:10px;margin-top:16px}
.confirm-actions .btn{flex:1}

/* ===== Empty state ===== */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 16px;text-align:center;color:var(--color-text-muted)}
.empty-state .icon{font-size:40px;margin-bottom:10px;opacity:.6}
.empty-state h4{color:var(--color-text-muted)}

/* ===== Tabs / Chips (filter) ===== */
.chip-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.chip{
  white-space:nowrap;padding:7px 14px;border-radius:999px;background:var(--color-mist);
  color:var(--color-navy-dark);font-size:12.5px;font-weight:600;border:none;
}
.chip.active{background:var(--color-navy);color:#fff}

/* ===== Update banner ===== */
.update-banner{
  position:fixed;bottom:calc(var(--bottom-nav-h) + 12px + var(--safe-bottom));left:14px;right:14px;
  background:var(--color-navy-dark);color:#fff;padding:12px 14px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:space-between;gap:10px;z-index:var(--z-toast);box-shadow:var(--shadow-md);
}
@media(min-width:768px){.update-banner{left:auto;right:24px;bottom:24px;max-width:320px}}

/* ===== Login screen ===== */
.login-card{
  background:#fff;border-radius:var(--radius-lg);padding:32px 26px;width:100%;max-width:380px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.login-brand{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:20px}
.login-brand .logo-circle{
  width:56px;height:56px;border-radius:50%;background:var(--color-gold);
  display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--color-navy-dark);font-weight:800;
  box-shadow:var(--shadow-gold);
}
.login-brand h2{margin:0;font-size:17px;text-align:center}
.login-brand p{font-size:12.5px;color:var(--color-text-muted)}
.login-error{background:#fee2e2;color:var(--color-danger);padding:9px 12px;border-radius:var(--radius-sm);font-size:12.5px;margin-bottom:12px}