/* ── Reset ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
       background: #F5F5F7; color: #1D1D1F; min-height: 100vh; font-size: 14px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }

/* ── Layout ─────────────────────────────────────── */
.layout      { display: flex; min-height: 100vh; }
.sidebar     { width: 240px; flex-shrink: 0; background: #1C1C1E; display: flex;
               flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.main        { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar      { background: #fff; border-bottom: 1px solid #E5E5EA; padding: 0 28px;
               height: 60px; display: flex; align-items: center; justify-content: space-between;
               position: sticky; top: 0; z-index: 30; }
.content     { padding: 28px; flex: 1; }

/* ── Sidebar ─────────────────────────────────────── */
.sb-brand    { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.sb-brand-name { font-weight: 700; color: #fff; font-size: 15px; }
.sb-brand-sub  { font-size: 11px; color: #636366; margin-top: 1px; }
.sb-section  { padding: 8px 12px; }
.sb-label    { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
               color: #48484A; padding: 10px 8px 4px; }
.sb-link     { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
               color: #AEAEB2; font-size: 13.5px; font-weight: 500; transition: all .15s; cursor: pointer; }
.sb-link:hover  { background: rgba(255,255,255,.06); color: #fff; }
.sb-link.active { background: rgba(255,255,255,.10); color: #fff; }
.sb-link .icon  { width: 18px; text-align: center; font-size: 15px; flex-shrink: 0; }
.sb-footer   { margin-top: auto; padding: 12px; border-top: 1px solid rgba(255,255,255,.07); }

/* ── Topbar ─────────────────────────────────────── */
.page-title  { font-size: 17px; font-weight: 700; color: #1D1D1F; }
.breadcrumb  { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #6E6E73; }
.breadcrumb a { color: #6E6E73; }
.breadcrumb a:hover { color: #1D1D1F; }
.breadcrumb-sep { color: #C7C7CC; }
.tb-actions  { display: flex; align-items: center; gap: 10px; }

/* ── Cards de stats ─────────────────────────────── */
.stats-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card   { background: #fff; border-radius: 14px; padding: 18px 20px;
               border: 1px solid #E5E5EA; transition: box-shadow .15s; }
.stat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.stat-icon   { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center;
               justify-content: center; font-size: 18px; margin-bottom: 12px; }
.stat-val    { font-size: 24px; font-weight: 800; color: #1D1D1F; line-height: 1; margin-bottom: 4px; }
.stat-lbl    { font-size: 12px; color: #6E6E73; font-weight: 500; }

/* ── Card genérico ──────────────────────────────── */
.card        { background: #fff; border-radius: 14px; border: 1px solid #E5E5EA; overflow: hidden; }
.card-header { padding: 16px 20px; border-bottom: 1px solid #F2F2F7;
               display: flex; align-items: center; justify-content: space-between; }
.card-title  { font-size: 15px; font-weight: 700; color: #1D1D1F; }
.card-sub    { font-size: 12px; color: #6E6E73; margin-top: 1px; }
.card-body   { padding: 20px; }

/* ── Tabelas ────────────────────────────────────── */
.tbl-wrap    { overflow-x: auto; }
.tbl         { width: 100%; border-collapse: collapse; }
.tbl th      { padding: 10px 16px; text-align: left; font-size: 11px; font-weight: 600;
               text-transform: uppercase; letter-spacing: .07em; color: #6E6E73;
               background: #F9F9FB; border-bottom: 1px solid #E5E5EA; white-space: nowrap; }
.tbl td      { padding: 13px 16px; border-bottom: 1px solid #F2F2F7; color: #3A3A3C;
               vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: #F9F9FB; }
.tbl-mono    { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; }
.tbl-name    { font-weight: 600; color: #1D1D1F; }
.tbl-sub     { font-size: 12px; color: #AEAEB2; margin-top: 1px; }
.tbl-empty   { text-align: center; padding: 48px 20px; color: #AEAEB2; }

/* ── Badges ─────────────────────────────────────── */
.badge       { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
               border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.badge-pending  { background: #FFF7E6; color: #B45309; } .badge-pending::before  { background: #F59E0B; }
.badge-paid     { background: #ECFDF5; color: #047857; } .badge-paid::before     { background: #10B981; }
.badge-sent     { background: #EFF6FF; color: #1D4ED8; } .badge-sent::before     { background: #3B82F6; }
.badge-cancelled{ background: #FFF1F2; color: #BE123C; } .badge-cancelled::before{ background: #F43F5E; }
.badge-active   { background: #ECFDF5; color: #047857; } .badge-active::before   { background: #10B981; }
.badge-hidden   { background: #F4F4F5; color: #71717A; } .badge-hidden::before   { background: #A1A1AA; }

/* ── Botões ─────────────────────────────────────── */
.btn         { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
               font-weight: 600; border-radius: 9px; cursor: pointer; border: none;
               transition: all .15s; white-space: nowrap; font-size: 13.5px; }
.btn-primary { background: #1C1C1E; color: #fff; padding: 9px 18px; }
.btn-primary:hover { background: #2C2C2E; }
.btn-secondary { background: #F2F2F7; color: #1D1D1F; padding: 9px 16px; border: 1px solid #E5E5EA; }
.btn-secondary:hover { background: #E5E5EA; }
.btn-danger  { background: #FFF1F2; color: #BE123C; padding: 8px 14px; border: 1px solid #FECDD3; }
.btn-danger:hover { background: #FFE4E6; }
.btn-ghost   { background: transparent; color: #6E6E73; padding: 8px 12px; }
.btn-ghost:hover { background: #F2F2F7; color: #1D1D1F; }
.btn-sm      { font-size: 12px; padding: 6px 12px; border-radius: 7px; font-weight: 500; }
.btn-icon    { width: 32px; height: 32px; padding: 0; border-radius: 8px; }
.btn-success { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.btn-success:hover { background: #D1FAE5; }

/* ── Formulários ────────────────────────────────── */
.form-group  { margin-bottom: 16px; }
.form-label  { display: block; font-size: 13px; font-weight: 600; color: #3A3A3C; margin-bottom: 6px; }
.form-hint   { font-size: 11px; color: #AEAEB2; margin-top: 4px; }
.input       { width: 100%; background: #fff; border: 1.5px solid #E5E5EA; border-radius: 9px;
               padding: 10px 13px; font-size: 14px; color: #1D1D1F; outline: none;
               transition: border-color .15s; }
.input:focus { border-color: #1C1C1E; box-shadow: 0 0 0 3px rgba(28,28,30,.07); }
.input::placeholder { color: #AEAEB2; }
textarea.input { resize: vertical; min-height: 80px; }
select.input  { cursor: pointer; }
.input-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.input-span2 { grid-column: span 2; }

/* ── Upload zone ────────────────────────────────── */
.upload-zone { border: 2px dashed #D1D1D6; border-radius: 14px; padding: 40px 24px;
               text-align: center; cursor: pointer; transition: all .2s; background: #FAFAFA; }
.upload-zone:hover, .upload-zone.drag { border-color: #1C1C1E; background: #F5F5F7; }
.upload-zone-icon { font-size: 36px; margin-bottom: 10px; }
.upload-zone-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.upload-zone-sub   { font-size: 13px; color: #6E6E73; }

/* ── Progress ───────────────────────────────────── */
.progress-wrap { background: #fff; border: 1px solid #E5E5EA; border-radius: 12px; padding: 16px; }
.progress-bar-bg { background: #F2F2F7; border-radius: 999px; height: 6px; overflow: hidden; margin: 8px 0; }
.progress-bar-fill { background: #1C1C1E; height: 100%; border-radius: 999px; transition: width .2s; }
.progress-log { max-height: 120px; overflow-y: auto; font-size: 12px; line-height: 1.9; margin-top: 8px; }
.log-ok  { color: #047857; }
.log-err { color: #BE123C; }

/* ── Photo grid admin ───────────────────────────── */
.photo-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; padding: 4px; }
.photo-admin-cell { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #F2F2F7; }
.photo-admin-cell img { width: 100%; height: 100%; object-fit: cover; }
.photo-admin-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); display: flex;
                        align-items: center; justify-content: center; gap: 6px; transition: background .15s; }
.photo-admin-cell:hover .photo-admin-overlay { background: rgba(0,0,0,.55); }
.photo-admin-btn { opacity: 0; width: 30px; height: 30px; border-radius: 50%; border: none;
                   cursor: pointer; font-size: 13px; transition: opacity .15s; }
.photo-admin-cell:hover .photo-admin-btn { opacity: 1; }
.photo-admin-cover { position: absolute; top: 4px; left: 4px; background: rgba(255,193,7,.9);
                     color: #000; font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 4px; }

/* ── Detalhes encomenda ─────────────────────────── */
.order-detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.detail-row  { display: flex; justify-content: space-between; padding: 9px 0;
               border-bottom: 1px solid #F2F2F7; font-size: 13.5px; }
.detail-row:last-child { border-bottom: none; }
.detail-key  { color: #6E6E73; font-weight: 500; }
.detail-val  { color: #1D1D1F; font-weight: 600; text-align: right; }
.total-row   { display: flex; justify-content: space-between; padding: 12px 0;
               font-size: 16px; font-weight: 800; border-top: 2px solid #1C1C1E; margin-top: 4px; }

/* ── Alertas ────────────────────────────────────── */
.alert       { padding: 12px 16px; border-radius: 10px; font-size: 13.5px; margin-bottom: 16px; border: 1px solid; }
.alert-success { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
.alert-error   { background: #FFF1F2; color: #BE123C; border-color: #FECDD3; }

/* ── Modal ──────────────────────────────────────── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 100;
                  display: flex; align-items: center; justify-content: center; padding: 16px;
                  backdrop-filter: blur(4px); }
.modal-box   { background: #fff; border-radius: 18px; padding: 28px; width: 100%; max-width: 460px;
               box-shadow: 0 24px 64px rgba(0,0,0,.15); }
.modal-title { font-size: 18px; font-weight: 800; margin-bottom: 20px; }

/* ── Misc ───────────────────────────────────────── */
.divider     { border: none; border-top: 1px solid #F2F2F7; margin: 16px 0; }
.text-muted  { color: #6E6E73; }
.text-mono   { font-family: 'SF Mono', monospace; font-size: 12px; }
.fw-700      { font-weight: 700; }
.gap-8       { gap: 8px; }
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.section-title { font-size: 12px; font-weight: 700; text-transform: uppercase;
                 letter-spacing: .08em; color: #AEAEB2; margin-bottom: 12px; }
