/* ============================================================
   Sistema de Pedidos — Design System v2
   Carregado após Tailwind — usa !important onde necessário
   ============================================================ */
:root {
  --brand:        #4f46e5;
  --brand-dark:   #3730a3;
  --brand-light:  #eef2ff;
  --brand-mid:    #6366f1;
  --surface:      #ffffff;
  --surface-2:    #f8f7ff;
  --surface-3:    #f1f0fe;
  --border:       rgba(99,102,241,.13);
  --border-med:   rgba(99,102,241,.22);
  --text-1:       #1e1b4b;
  --text-2:       #4b5563;
  --text-3:       #9ca3af;
  --success-bg:   #ecfdf5; --success-text: #065f46; --success-bdr: #6ee7b7;
  --warn-bg:      #fffbeb; --warn-text:    #92400e; --warn-bdr:    #fcd34d;
  --danger-bg:    #fef2f2; --danger-text:  #991b1b; --danger-bdr:  #fca5a5;
  --info-bg:      #eff6ff; --info-text:    #1e40af; --info-bdr:    #93c5fd;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 20px; --radius-full: 9999px;
  --shadow-sm: 0 1px 3px rgba(79,70,229,.07),0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(79,70,229,.10),0 2px 4px rgba(0,0,0,.05);
  --shadow-lg: 0 8px 32px rgba(79,70,229,.14),0 4px 8px rgba(0,0,0,.06);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Inter','Segoe UI',system-ui,sans-serif !important; background: #f5f4fe !important; color: var(--text-1); min-height: 100vh; -webkit-font-smoothing: antialiased; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: var(--border-med); border-radius: 99px; }
[x-cloak] { display: none !important; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }
.line-clamp-2 { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }

/* ── Card ── */
.card {
  background: var(--surface) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  padding: 1.25rem !important;
  box-shadow: var(--shadow-sm) !important;
}
.card-flush { padding: 0 !important; }

/* ── Buttons — !important para vencer Tailwind preflight ── */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: .45rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  padding: .5rem 1rem !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all .15s !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}
.btn:active { transform: scale(.98) !important; }

.btn-primary {
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
  box-shadow: 0 1px 3px rgba(79,70,229,.35) !important;
}
.btn-primary:hover { background: var(--brand-dark) !important; border-color: var(--brand-dark) !important; color: #fff !important; }

.btn-secondary {
  background: var(--surface) !important;
  color: var(--text-1) !important;
  border-color: var(--border-med) !important;
}
.btn-secondary:hover { background: var(--surface-2) !important; border-color: var(--brand) !important; color: var(--brand) !important; }

.btn-ghost {
  background: transparent !important;
  color: var(--text-2) !important;
  border-color: transparent !important;
}
.btn-ghost:hover { background: var(--surface-2) !important; color: var(--brand) !important; }

.btn-danger {
  background: var(--danger-bg) !important;
  color: var(--danger-text) !important;
  border-color: var(--danger-bdr) !important;
}
.btn-danger:hover { background: #fee2e2 !important; }

.btn-success {
  background: #059669 !important;
  color: #fff !important;
  border-color: #059669 !important;
  box-shadow: 0 1px 3px rgba(5,150,105,.35) !important;
}
.btn-success:hover { background: #047857 !important; }

.btn-sm  { font-size: .8rem !important; padding: .35rem .75rem !important; }
.btn-lg  { font-size: 1rem !important; padding: .75rem 1.5rem !important; border-radius: var(--radius-lg) !important; }
.btn-xl  { font-size: 1.05rem !important; padding: 1rem 1.5rem !important; border-radius: var(--radius-xl) !important; }
.btn-block { width: 100% !important; justify-content: center !important; }

/* ── Inputs ── */
.input {
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid var(--border-med) !important;
  border-radius: var(--radius-md) !important;
  font-size: .875rem;
  color: var(--text-1) !important;
  background: var(--surface) !important;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
  font-family: inherit;
}
.input:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important; }
.input::placeholder { color: var(--text-3); }
.input-group { position: relative; }
.input-group .input { padding-left: 2.5rem; }
.input-group .input-icon { position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:1rem;pointer-events:none; }
.label { display:block;font-size:.8125rem;font-weight:500;color:var(--text-2);margin-bottom:.35rem; }

/* ── Badges ── */
.badge { display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:600;padding:.2rem .6rem;border-radius:var(--radius-full);letter-spacing:.02em; }
.badge-success  { background:var(--success-bg)!important;color:var(--success-text)!important; }
.badge-danger   { background:var(--danger-bg)!important;color:var(--danger-text)!important; }
.badge-warn     { background:var(--warn-bg)!important;color:var(--warn-text)!important; }
.badge-info     { background:var(--info-bg)!important;color:var(--info-text)!important; }
.badge-neutral  { background:#f3f4f6!important;color:#374151!important; }
.badge-purple   { background:#ede9fe!important;color:#5b21b6!important; }
.badge-brand    { background:var(--brand-light)!important;color:var(--brand)!important; }
.badge-rascunho   { background:#f3f4f6!important;color:#374151!important; }
.badge-enviado    { background:#dbeafe!important;color:#1e40af!important; }
.badge-em_analise { background:#fef9c3!important;color:#854d0e!important; }
.badge-aprovado   { background:#dcfce7!important;color:#166534!important; }
.badge-em_compra  { background:#ede9fe!important;color:#5b21b6!important; }
.badge-entregue   { background:#d1fae5!important;color:#065f46!important; }
.badge-rejeitado  { background:#fee2e2!important;color:#991b1b!important; }

/* ── Flash ── */
.flash { display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 1rem;border-radius:var(--radius-md);border-left:4px solid;font-size:.875rem;margin-bottom:1.25rem; }
.flash-sucesso { background:var(--success-bg);border-color:#10b981;color:var(--success-text); }
.flash-erro    { background:var(--danger-bg);border-color:#ef4444;color:var(--danger-text); }
.flash-aviso   { background:var(--warn-bg);border-color:#f59e0b;color:var(--warn-text); }
.flash-info    { background:var(--info-bg);border-color:#3b82f6;color:var(--info-text); }

/* ── Stat card ── */
.stat-card { background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);padding:1.25rem;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:1rem;text-decoration:none;transition:box-shadow .2s,transform .15s; }
.stat-card:hover { box-shadow:var(--shadow-md);transform:translateY(-1px); }
.stat-icon { width:3rem;height:3rem;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0; }
.stat-value { font-size:1.75rem;font-weight:700;color:var(--text-1);line-height:1; }
.stat-label { font-size:.8rem;color:var(--text-3);margin-top:.2rem; }

/* ── Page header ── */
.page-header { display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem; }
.page-title { font-size:1.5rem;font-weight:700;color:var(--text-1); }
.page-subtitle { font-size:.875rem;color:var(--text-3);margin-top:.15rem; }
.section-label { font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin:1.5rem 0 .5rem; }

/* ── Filter bar ── */
.filter-bar { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem 1.25rem;margin-bottom:1.25rem;box-shadow:var(--shadow-sm); }

/* ── Pill filters ── */
.pill-filter { display:inline-flex;align-items:center;padding:.35rem .9rem;border-radius:var(--radius-full);font-size:.8rem;font-weight:500;border:1px solid var(--border-med);color:var(--text-2);background:var(--surface);white-space:nowrap;transition:all .15s;text-decoration:none; }
.pill-filter:hover { border-color:var(--brand);color:var(--brand);background:var(--brand-light); }
.pill-filter.active { background:var(--brand)!important;color:#fff!important;border-color:var(--brand)!important; }

/* ── Toggle switch ── */
.toggle-wrap { display:flex;align-items:center;gap:.6rem;cursor:pointer; }
.toggle-wrap input[type=checkbox] { display:none; }
.toggle-track { width:2.75rem;height:1.5rem;background:#d1d5db;border-radius:var(--radius-full);position:relative;transition:background .2s;flex-shrink:0; }
.toggle-track::after { content:'';position:absolute;top:3px;left:3px;width:1.125rem;height:1.125rem;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2); }
.toggle-wrap input:checked + .toggle-track { background:var(--brand); }
.toggle-wrap input:checked + .toggle-track::after { transform:translateX(1.25rem); }

/* ── Step bar ── */
.step-bar { display:flex;gap:4px;margin-bottom:1.5rem; }
.step-bar-item { height:4px;border-radius:99px;flex:1;background:var(--border); }
.step-bar-item.done { background:var(--brand); }
.step-bar-item.active { background:var(--brand-mid); }

/* ── Timeline ── */
.timeline { position:relative;padding-left:1.5rem; }
.timeline::before { content:'';position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:var(--border); }
.timeline-item { position:relative;margin-bottom:.875rem; }
.timeline-item::before { content:'';position:absolute;left:-1.5rem;top:.35rem;width:10px;height:10px;border-radius:50%;background:var(--brand);border:2px solid var(--surface);box-shadow:0 0 0 2px var(--brand-light); }

/* ── Thumbnails ── */
.thumb { width:40px;height:40px;border-radius:var(--radius-sm);object-fit:cover;border:1px solid var(--border);cursor:zoom-in;transition:transform .2s,box-shadow .2s;display:block; }
.thumb:hover { transform:scale(1.12);box-shadow:var(--shadow-md); }
.thumb-placeholder { width:40px;height:40px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;color:var(--text-3); }

/* ── DataTables overrides ── */
table.dataTable { border-collapse:collapse !important;width:100% !important; }
table.dataTable thead th { background:var(--surface-2)!important;color:var(--text-2)!important;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.75rem 1rem;border-bottom:1px solid var(--border)!important;white-space:nowrap;cursor:pointer; }
table.dataTable thead th.sorting_asc, table.dataTable thead th.sorting_desc { color:var(--brand)!important; }
table.dataTable tbody tr:hover { background:var(--surface-2)!important; }
table.dataTable tbody td { padding:.8rem 1rem!important;font-size:.875rem;color:var(--text-1)!important;border-bottom:1px solid var(--border)!important;vertical-align:middle!important; }
.dataTables_wrapper .dataTables_filter input { border:1px solid var(--border-med)!important;border-radius:var(--radius-md)!important;padding:.4rem .75rem!important;font-size:.875rem;margin-left:.5rem;outline:none; }
.dataTables_wrapper .dataTables_filter input:focus { border-color:var(--brand)!important;box-shadow:0 0 0 3px rgba(99,102,241,.15)!important; }
.dataTables_wrapper .dataTables_length select { border:1px solid var(--border-med)!important;border-radius:var(--radius-md)!important;padding:.35rem .5rem!important;font-size:.875rem;margin:0 .35rem; }
.dataTables_wrapper .dataTables_info { font-size:.8rem;color:var(--text-3);padding-top:.75rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius:var(--radius-sm)!important;padding:.3rem .7rem!important;font-size:.8rem;border:1px solid transparent!important;transition:all .15s; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background:var(--brand)!important;color:#fff!important;border-color:var(--brand)!important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background:var(--brand-light)!important;color:var(--brand)!important; }

/* ── Modal ── */
.modal-backdrop { position:fixed;inset:0;background:rgba(30,27,75,.45);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem; }
.modal-box { background:var(--surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);width:100%;max-width:480px;padding:1.5rem; }
.modal-title { font-size:1.1rem;font-weight:700;margin-bottom:1rem;color:var(--text-1); }

@media(max-width:640px){ .hide-mobile{ display:none!important; } }
@media(min-width:641px){ .hide-desktop{ display:none!important; } }