/* ==========================================================
   BITEFLOW POS & CRM — UI Components
   ========================================================== */

/* ── Buttons ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:8px 16px;border-radius:var(--radius-md);font-size:0.8125rem;font-weight:600;transition:all var(--transition-fast);white-space:nowrap;border:1px solid transparent;cursor:pointer}
.btn-sm{padding:5px 10px;font-size:0.75rem}
.btn-lg{padding:12px 24px;font-size:0.875rem}
.btn-primary{background:var(--accent);color:var(--text-inverse);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);box-shadow:var(--accent-glow)}
.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border)}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.btn-success{background:var(--success);color:#fff}
.btn-success:hover{filter:brightness(1.1)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{filter:brightness(1.1)}
.btn-warning{background:var(--warning);color:#000}
.btn-ghost{background:transparent;color:var(--text-secondary);border-color:var(--border)}
.btn-ghost:hover{background:var(--bg-hover);color:var(--text-primary)}
.btn-icon{width:36px;height:36px;padding:0;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center}
.btn-icon.sm{width:28px;height:28px;font-size:13px}
.btn:disabled,.btn.disabled{opacity:0.4;pointer-events:none}
.btn .btn-badge{background:var(--danger);color:#fff;font-size:0.6rem;padding:1px 5px;border-radius:var(--radius-full);margin-left:4px}

/* ── Cards ─────────────────────────────────────────────── */
.card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition-fast)}
.card:hover{border-color:var(--border-light)}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg) var(--space-xl);border-bottom:1px solid var(--border)}
.card-header-title{font-size:0.875rem;font-weight:700;color:var(--text-primary)}
.card-body{padding:var(--space-xl)}
.card-footer{padding:var(--space-lg) var(--space-xl);border-top:1px solid var(--border)}

/* ── Stat Cards ────────────────────────────────────────── */
.stat-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-md);transition:all var(--transition-fast)}
.stat-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat-card-header{display:flex;align-items:center;justify-content:space-between}
.stat-card-icon{width:40px;height:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:18px}
.stat-card-icon.cyan{background:var(--accent-muted);color:var(--accent)}
.stat-card-icon.green{background:var(--success-bg);color:var(--success)}
.stat-card-icon.orange{background:var(--warning-bg);color:var(--warning)}
.stat-card-icon.red{background:var(--danger-bg);color:var(--danger)}
.stat-card-icon.blue{background:var(--info-bg);color:var(--info)}
.stat-card-icon.purple{background:var(--purple-bg);color:var(--purple)}
.stat-card-trend{font-size:0.7rem;font-weight:600;padding:2px 6px;border-radius:var(--radius-full)}
.stat-card-trend.up{color:var(--success);background:var(--success-bg)}
.stat-card-trend.down{color:var(--danger);background:var(--danger-bg)}
.stat-card-value{font-size:1.75rem;font-weight:800;color:var(--text-primary);letter-spacing:-0.03em}
.stat-card-label{font-size:0.75rem;color:var(--text-secondary)}

/* ── Tables ────────────────────────────────────────────── */
.table-container{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--bg-secondary)}
.table-toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg);gap:var(--space-md);flex-wrap:wrap;border-bottom:1px solid var(--border)}
.table-toolbar-left{display:flex;align-items:center;gap:var(--space-sm);flex:1}
.table-toolbar-right{display:flex;align-items:center;gap:var(--space-sm)}
.table-search{position:relative}
.table-search input{padding:6px 10px 6px 30px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-size:0.8125rem;width:220px;transition:all var(--transition-fast)}
.table-search input:focus{border-color:var(--accent);width:280px}
.table-search i{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--text-tertiary)}

.data-table{width:100%;border-collapse:collapse}
.data-table thead{background:var(--bg-tertiary)}
.data-table th{padding:10px 16px;text-align:left;font-size:0.7rem;font-weight:700;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.06em;white-space:nowrap;border-bottom:1px solid var(--border)}
.data-table td{padding:12px 16px;font-size:0.8125rem;color:var(--text-secondary);border-bottom:1px solid var(--border);white-space:nowrap}
.data-table tbody tr{transition:background var(--transition-fast)}
.data-table tbody tr:hover{background:var(--bg-hover)}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table .col-actions{text-align:right}
.table-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);font-size:0.75rem;color:var(--text-tertiary)}

/* ── Badges ────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--radius-full);font-size:0.7rem;font-weight:600;white-space:nowrap}
.badge-success{background:var(--success-bg);color:var(--success)}
.badge-warning{background:var(--warning-bg);color:var(--warning)}
.badge-danger{background:var(--danger-bg);color:var(--danger)}
.badge-info{background:var(--info-bg);color:var(--info)}
.badge-purple{background:var(--purple-bg);color:var(--purple)}
.badge-neutral{background:var(--bg-tertiary);color:var(--text-secondary)}
.badge-accent{background:var(--accent-muted);color:var(--accent)}
.badge-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}

/* ── Modals ────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:var(--z-modal);padding:var(--space-xl);animation:fadeIn 0.15s ease}
.modal-overlay.active{display:flex}
.modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-xl);width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;animation:scaleIn 0.2s ease;box-shadow:var(--shadow-xl)}
.modal-sm{max-width:420px}
.modal-md{max-width:600px}
.modal-lg{max-width:800px}
.modal-xl{max-width:1100px}
.modal-full{max-width:95vw;max-height:95vh}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-xl);border-bottom:1px solid var(--border);flex-shrink:0}
.modal-title{font-size:1rem;font-weight:700}
.modal-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);color:var(--text-tertiary);transition:all var(--transition-fast);font-size:18px}
.modal-close:hover{background:var(--danger-bg);color:var(--danger)}
.modal-body{padding:var(--space-xl);overflow-y:auto;flex:1}
.modal-footer{padding:var(--space-lg) var(--space-xl);border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:var(--space-sm);flex-shrink:0}

/* ── Forms ─────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:var(--space-xs)}
.form-label{font-size:0.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.04em}
.form-input,.form-select,.form-textarea{padding:9px 12px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-size:0.875rem;transition:all var(--transition-fast)}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted);outline:none}
.form-input::placeholder{color:var(--text-tertiary)}
.form-input-lg{padding:12px 16px;font-size:1rem}
.form-textarea{min-height:80px;resize:vertical}
.form-select{-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
.form-hint{font-size:0.7rem;color:var(--text-tertiary)}
.form-error{font-size:0.7rem;color:var(--danger)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-lg)}

/* Checkbox & Switch */
.form-check{display:flex;align-items:center;gap:var(--space-sm);cursor:pointer;font-size:0.8125rem}
.form-check input[type="checkbox"]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.form-switch{position:relative;width:36px;height:20px;display:inline-block}
.form-switch input{opacity:0;width:0;height:0}
.form-switch-slider{position:absolute;inset:0;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-full);transition:all var(--transition-fast);cursor:pointer}
.form-switch-slider::before{content:'';position:absolute;width:14px;height:14px;left:2px;top:50%;transform:translateY(-50%);background:var(--text-secondary);border-radius:50%;transition:all var(--transition-fast)}
.form-switch input:checked+.form-switch-slider{background:var(--accent);border-color:var(--accent)}
.form-switch input:checked+.form-switch-slider::before{left:calc(100% - 16px);background:#fff}

/* ── Tabs ──────────────────────────────────────────────── */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:var(--space-xl);overflow-x:auto}
.tab-item{padding:10px 20px;font-size:0.8125rem;font-weight:600;color:var(--text-tertiary);cursor:pointer;border-bottom:2px solid transparent;transition:all var(--transition-fast);white-space:nowrap}
.tab-item:hover{color:var(--text-primary)}
.tab-item.active{color:var(--accent);border-color:var(--accent)}

/* ── Toast ─────────────────────────────────────────────── */
.toast-container{position:fixed;top:var(--space-xl);right:var(--space-xl);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--space-sm);pointer-events:none}
.toast{display:flex;align-items:center;gap:var(--space-md);padding:12px 16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);font-size:0.8125rem;animation:slideInRight 0.3s ease;pointer-events:auto;min-width:280px;max-width:420px}
.toast.success{border-left:3px solid var(--success)}
.toast.error{border-left:3px solid var(--danger)}
.toast.warning{border-left:3px solid var(--warning)}
.toast.info{border-left:3px solid var(--info)}
.toast-icon{font-size:16px;flex-shrink:0}
.toast-message{flex:1;color:var(--text-primary)}
.toast-close{color:var(--text-tertiary);cursor:pointer;font-size:14px;flex-shrink:0}
.toast-close:hover{color:var(--text-primary)}

/* ── Empty State ───────────────────────────────────────── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-3xl);text-align:center;gap:var(--space-lg)}
.empty-state-icon{width:64px;height:64px;border-radius:var(--radius-xl);background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--text-tertiary)}
.empty-state-title{font-size:1rem;font-weight:700;color:var(--text-primary)}
.empty-state-text{font-size:0.8125rem;color:var(--text-secondary);max-width:360px}

/* ── Dropdown ──────────────────────────────────────────── */
.dropdown{position:relative;display:inline-block}
.dropdown-menu{position:absolute;top:calc(100% + 4px);right:0;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);min-width:180px;padding:var(--space-xs);z-index:var(--z-dropdown);display:none;animation:fadeInDown 0.15s ease}
.dropdown-menu.open{display:block}
.dropdown-item{display:flex;align-items:center;gap:var(--space-sm);padding:8px 12px;border-radius:var(--radius-sm);font-size:0.8125rem;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}
.dropdown-item:hover{background:var(--bg-hover);color:var(--text-primary)}
.dropdown-item.danger{color:var(--danger)}
.dropdown-divider{height:1px;background:var(--border);margin:var(--space-xs) 0}

/* ── Progress Bar ──────────────────────────────────────── */
.progress{height:6px;background:var(--bg-tertiary);border-radius:var(--radius-full);overflow:hidden}
.progress-bar{height:100%;border-radius:var(--radius-full);transition:width 0.5s ease;background:var(--accent)}
.progress-bar.success{background:var(--success)}
.progress-bar.warning{background:var(--warning)}
.progress-bar.danger{background:var(--danger)}

/* ── Confirm Dialog ────────────────────────────────────── */
.confirm-dialog{text-align:center;padding:var(--space-xl)}
.confirm-dialog-icon{width:56px;height:56px;border-radius:50%;margin:0 auto var(--space-xl);display:flex;align-items:center;justify-content:center;font-size:24px}
.confirm-dialog-icon.danger{background:var(--danger-bg);color:var(--danger)}
.confirm-dialog-icon.warning{background:var(--warning-bg);color:var(--warning)}
.confirm-dialog-title{font-size:1.125rem;font-weight:700;margin-bottom:var(--space-sm)}
.confirm-dialog-text{font-size:0.8125rem;color:var(--text-secondary);margin-bottom:var(--space-xl)}
.confirm-dialog-actions{display:flex;justify-content:center;gap:var(--space-sm)}

/* ── Stat Grid ─────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-lg)}

/* ── Misc ──────────────────────────────────────────────── */
.avatar-sm{width:24px;height:24px;font-size:0.6rem}
.avatar-lg{width:48px;height:48px;font-size:1.1rem}
.chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--radius-full);font-size:0.7rem;font-weight:500;background:var(--bg-tertiary);color:var(--text-secondary)}
.link{color:var(--accent);cursor:pointer;font-weight:500}
.link:hover{text-decoration:underline}
.kbd{display:inline-flex;align-items:center;padding:2px 6px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-xs);font-size:0.65rem;font-family:monospace;color:var(--text-tertiary)}
.skeleton{background:linear-gradient(90deg,var(--bg-tertiary) 25%,var(--bg-quaternary) 50%,var(--bg-tertiary) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}