:root {
  --bg: #0d0f14;
  --surface: #161820;
  --surface2: #1e2028;
  --surface3: #252830;
  --border: rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.13);
  --accent: #f0a500;
  --accent2: #e06c00;
  --accent-soft: rgba(240,165,0,0.12);
  --accent-glow: rgba(240,165,0,0.3);
  --green: #22c55e;
  --green-soft: rgba(34,197,94,0.12);
  --red: #ef4444;
  --red-soft: rgba(239,68,68,0.12);
  --blue: #3b82f6;
  --blue-soft: rgba(59,130,246,0.12);
  --purple: #a855f7;
  --purple-soft: rgba(168,85,247,0.12);
  --text: #f0f0f0;
  --text2: #9ca3af;
  --text3: #6b7280;
  --sidebar-w: 240px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--surface); }
::-webkit-scrollbar-thumb { background:var(--surface3); border-radius:99px; }

/* SIDEBAR */
#sidebar {
  position:fixed; left:0; top:0; bottom:0; width:var(--sidebar-w);
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; z-index:100;
  transition:transform 0.3s cubic-bezier(.4,0,.2,1);
}
.sidebar-logo { padding:22px 20px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; }
.logo-icon {
  width:36px; height:36px; background:var(--accent); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono',monospace; font-weight:700; font-size:14px; color:#000;
  flex-shrink:0; overflow:hidden;
}
.logo-icon img { width:100%; height:100%; object-fit:cover; border-radius:8px; }
.logo-text .name { font-weight:700; font-size:15px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.logo-text .tagline { font-size:11px; color:var(--text3); margin-top:1px; }
.sidebar-nav { flex:1; padding:10px 0; overflow-y:auto; }
.nav-label { font-size:10px; font-weight:600; color:var(--text3); letter-spacing:.08em; text-transform:uppercase; padding:12px 20px 5px; }
.nav-item {
  display:flex; align-items:center; gap:10px; padding:9px 20px;
  cursor:pointer; color:var(--text2); font-size:13.5px; font-weight:500;
  transition:all .15s; border-left:2px solid transparent;
}
.nav-item:hover { color:var(--text); background:rgba(255,255,255,0.04); }
.nav-item.active { color:var(--accent); background:var(--accent-soft); border-left-color:var(--accent); }
.nav-item .icon { font-size:15px; width:20px; text-align:center; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.nav-badge {
  margin-left:auto; background:var(--accent); color:#000;
  font-size:10px; font-weight:700; padding:2px 6px; border-radius:99px;
  min-width:18px; text-align:center;
}
.nav-badge:empty { display:none; }
.sidebar-footer { padding:14px 20px; border-top:1px solid var(--border); }
.company-info { font-size:12px; color:var(--text3); line-height:1.5; }
.company-info strong { color:var(--text2); display:block; }

/* MAIN */
#main { margin-left:var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column; }
.topbar {
  position:sticky; top:0; z-index:50;
  background:rgba(13,15,20,0.88); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:0 32px; height:60px; display:flex; align-items:center; gap:16px;
}
.topbar h1 { font-size:18px; font-weight:700; flex:1; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.hamburger { display:none; background:none; border:none; color:var(--text); cursor:pointer; font-size:20px; padding:8px; }

/* BUTTONS */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px; border-radius:var(--radius-sm);
  font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
  cursor:pointer; border:none; transition:all .15s;
  text-decoration:none; white-space:nowrap;
}
.btn-primary { background:var(--accent); color:#000; }
.btn-primary:hover { background:#ffb827; transform:translateY(-1px); box-shadow:0 4px 16px var(--accent-glow); }
.btn-secondary { background:var(--surface3); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { border-color:var(--border2); }
.btn-ghost { background:transparent; color:var(--text2); padding:8px 12px; }
.btn-ghost:hover { background:var(--surface2); color:var(--text); }
.btn-danger { background:var(--red-soft); color:var(--red); border:1px solid rgba(239,68,68,0.2); }
.btn-danger:hover { background:var(--red); color:#fff; }
.btn-success { background:var(--green-soft); color:var(--green); border:1px solid rgba(34,197,94,0.2); }
.btn-success:hover { background:var(--green); color:#fff; }
.btn-sm { padding:5px 11px; font-size:12px; }
.btn-icon { padding:7px; }

/* CONTENT */
.content { flex:1; padding:28px 32px; }
.page { display:none; }
.page.active { display:block; }

/* CARDS */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.card-title { font-size:13px; font-weight:600; color:var(--text2); }
.stat-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; display:flex; flex-direction:column; gap:8px; position:relative; overflow:hidden;
}
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; }
.stat-card.orange::before { background:var(--accent); }
.stat-card.green::before { background:var(--green); }
.stat-card.blue::before { background:var(--blue); }
.stat-card.purple::before { background:var(--purple); }
.stat-label { font-size:11px; color:var(--text3); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.stat-value { font-size:26px; font-weight:700; font-family:'Space Mono',monospace; letter-spacing:-.02em; }
.stat-value.orange { color:var(--accent); }
.stat-value.green { color:var(--green); }
.stat-value.blue { color:var(--blue); }
.stat-value.purple { color:var(--purple); }
.stat-change { font-size:12px; color:var(--text3); }

/* GRIDS */
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.grid-12 { display:grid; grid-template-columns:1fr 2fr; gap:16px; }

/* TABLE */
.table-wrap { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; }
thead tr { background:var(--surface2); }
th { padding:11px 14px; text-align:left; font-size:11px; font-weight:600; color:var(--text3); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
td { padding:11px 14px; font-size:13.5px; border-top:1px solid var(--border); color:var(--text2); }
tr:hover td { background:rgba(255,255,255,0.015); }
td strong { color:var(--text); font-weight:600; }
.td-actions { display:flex; gap:5px; align-items:center; }

/* BADGES */
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; font-size:11.5px; font-weight:600; }
.badge::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.7; }
.badge-pendente { background:rgba(245,158,11,0.12); color:#f59e0b; }
.badge-aprovado { background:var(--green-soft); color:var(--green); }
.badge-recusado { background:var(--red-soft); color:var(--red); }
.badge-producao { background:var(--blue-soft); color:var(--blue); }
.badge-finalizado { background:var(--purple-soft); color:var(--purple); }
.badge-retirada { background:rgba(245,158,11,0.2); color:#f59e0b; }
.badge-entregue { background:rgba(34,197,94,0.2); color:var(--green); }
.badge-overdue { background:var(--red-soft); color:var(--red); }

/* MODALS */
.overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.75);
  z-index:200; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(4px);
}
.overlay.open { display:flex; }
.modal {
  background:var(--surface); border:1px solid var(--border2); border-radius:16px;
  width:100%; max-width:660px; max-height:90vh; overflow-y:auto;
  box-shadow:0 24px 64px rgba(0,0,0,0.6); animation:modalIn .2s ease;
}
.modal-lg { max-width:900px; }
@keyframes modalIn { from { opacity:0; transform:translateY(16px) scale(.98); } to { opacity:1; transform:none; } }
.modal-header {
  padding:18px 22px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; background:var(--surface); z-index:1;
}
.modal-header h3 { font-size:16px; font-weight:700; }
.modal-body { padding:22px; }
.modal-footer {
  padding:14px 22px; border-top:1px solid var(--border);
  display:flex; gap:10px; justify-content:flex-end;
  position:sticky; bottom:0; background:var(--surface);
}
.close-btn {
  background:none; border:none; color:var(--text3); cursor:pointer;
  font-size:20px; width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border-radius:6px; transition:all .15s;
}
.close-btn:hover { background:var(--surface3); color:var(--text); }

/* FORMS */
.form-group { margin-bottom:14px; }
.form-row { display:grid; gap:14px; }
.form-row.cols-2 { grid-template-columns:1fr 1fr; }
.form-row.cols-3 { grid-template-columns:1fr 1fr 1fr; }
label { display:block; font-size:11.5px; font-weight:600; color:var(--text3); margin-bottom:5px; letter-spacing:.03em; text-transform:uppercase; }
input, select, textarea {
  width:100%; background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:9px 12px; color:var(--text);
  font-family:'Inter',sans-serif; font-size:14px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
select option { background:var(--surface2); }
textarea { resize:vertical; min-height:70px; }
.input-prefix { position:relative; }
.input-prefix span { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text3); font-size:13px; pointer-events:none; }
.input-prefix input { padding-left:28px; width:100%; }

/* QUICK CLIENT */
.quick-client-box {
  background:var(--surface2); border:1px solid var(--accent); border-radius:var(--radius);
  padding:16px; margin-bottom:16px; animation:modalIn .15s ease;
}

/* FILE UPLOAD */
.file-upload-area {
  border:2px dashed var(--border2); border-radius:var(--radius); padding:20px;
  text-align:center; cursor:pointer; transition:all .2s; color:var(--text3);
  font-size:13px; min-height:60px; display:flex; align-items:center; justify-content:center; flex-direction:column;
}
.file-upload-area:hover { border-color:var(--accent); background:var(--accent-soft); }

/* UPLOAD AREAS */
.upload-area-small {
  border:2px dashed var(--border2); border-radius:var(--radius); padding:12px;
  cursor:pointer; transition:all .2s; text-align:center;
}
.upload-area-small:hover { border-color:var(--accent); background:var(--accent-soft); }
.logo-preview-area {
  height:56px; display:flex; align-items:center; justify-content:center;
  color:var(--text3); font-size:12px; overflow:hidden; border-radius:6px;
}
.logo-preview-area img { max-height:52px; max-width:100%; object-fit:contain; }
.upload-area-mini {
  border:1px dashed var(--border2); border-radius:6px; padding:8px 12px;
  cursor:pointer; transition:all .2s; font-size:12px; color:var(--text3);
  display:flex; align-items:center; gap:8px;
}
.upload-area-mini:hover { border-color:var(--accent); background:var(--accent-soft); }

/* PIX COMPACT */
.pix-compact-grid { display:grid; grid-template-columns:1fr auto; gap:16px; align-items:start; }
.qr-preview-small {
  width:100px; min-height:80px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px;
  background:var(--surface2); border-radius:8px; border:1px solid var(--border);
  padding:10px;
}
.qr-preview-small canvas, .qr-preview-small img { border-radius:4px; }

/* ITEMS TABLE */
.items-table-wrap { border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:12px; }
.items-table-wrap th { background:var(--surface3); }
.item-row input { background:transparent; border:none; padding:5px 6px; border-radius:4px; color:var(--text); font-size:13px; }
.item-row input:focus { background:var(--surface2); outline:none; box-shadow:inset 0 0 0 1px var(--accent); }
.item-row td { padding:5px 6px; vertical-align:middle; }

/* TOTALS */
.total-section { background:var(--surface2); border-radius:var(--radius-sm); padding:14px; margin-top:12px; }
.total-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; font-size:14px; }
.total-row.grand { font-size:17px; font-weight:700; border-top:1px solid var(--border); margin-top:8px; padding-top:10px; }
.total-row.grand .val { color:var(--accent); font-family:'Space Mono',monospace; }

/* TOAST */
#toast-container { position:fixed; bottom:24px; right:24px; z-index:999; display:flex; flex-direction:column; gap:8px; }
.toast {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  background:var(--surface2); border:1px solid var(--border2); border-radius:var(--radius-sm);
  box-shadow:var(--shadow); font-size:13.5px; min-width:260px;
  animation:toastIn .25s ease;
}
.toast.success { border-left:3px solid var(--green); }
.toast.error { border-left:3px solid var(--red); }
.toast.info { border-left:3px solid var(--blue); }
@keyframes toastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:none; } }

/* SEARCH BAR */
.search-bar { position:relative; flex:1; max-width:300px; }
.search-bar input { padding-left:34px; }
.search-bar .icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text3); pointer-events:none; }

/* EMPTY STATE */
.empty-state { text-align:center; padding:60px 20px; color:var(--text3); }
.empty-state .icon { font-size:48px; margin-bottom:12px; }
.empty-state p { font-size:14px; margin-bottom:16px; }

/* SECTION HEADER */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:12px; flex-wrap:wrap; }
.section-header h2 { font-size:20px; font-weight:700; }

/* FILTER PILLS */
.filter-pills { display:flex; gap:6px; flex-wrap:wrap; }
.pill { padding:5px 12px; border-radius:99px; font-size:12px; font-weight:500; cursor:pointer; border:1px solid var(--border); color:var(--text3); transition:all .15s; }
.pill.active { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.pill:hover:not(.active) { border-color:var(--border2); color:var(--text); }

/* DIVIDER */
.divider { height:1px; background:var(--border); margin:16px 0; }

/* CHART */
.chart-container { position:relative; height:200px; }

/* TOGGLE GROUP */
.toggle-group { display:flex; flex-wrap:wrap; gap:8px; }
.toggle-item { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:13px; color:var(--text2); }
.toggle-item input[type=checkbox] { width:auto; accent-color:var(--accent); width:16px; height:16px; cursor:pointer; }
.toggle-label { font-size:13px; }

/* WHATSAPP BUBBLE */
.whatsapp-bubble {
  background:#1e2a1e; border:1px solid rgba(34,197,94,0.2); border-radius:12px 12px 12px 0;
  padding:14px 16px; font-size:14px; line-height:1.6; color:var(--text); white-space:pre-wrap;
  max-width:100%; word-break:break-word;
}

/* HISTORY */
.history-item { padding:10px 0; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.history-item:last-child { border-bottom:none; }

/* INFO ROW */
.info-row { display:flex; gap:12px; margin-bottom:8px; font-size:14px; }
.info-row .lbl { color:var(--text3); min-width:120px; font-weight:500; }

/* STATUS SELECT in table */
.status-select {
  background:transparent; border:none; cursor:pointer;
  font-size:11.5px; font-weight:600; padding:3px 8px; border-radius:99px;
  outline:none;
}

/* SIDEBAR OVERLAY */
#sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99; }

/* MOBILE */
@media(max-width:900px) {
  #sidebar { transform:translateX(-100%); }
  #sidebar.open { transform:translateX(0); box-shadow:var(--shadow); }
  #sidebar-overlay.open { display:block; }
  #main { margin-left:0; }
  .hamburger { display:flex; }
  .content { padding:18px 14px; }
  .topbar { padding:0 14px; }
  .grid-4, .grid-3 { grid-template-columns:repeat(2,1fr); }
  .grid-12 { grid-template-columns:1fr; }
  .form-row.cols-2, .form-row.cols-3 { grid-template-columns:1fr; }
  .pix-compact-grid { grid-template-columns:1fr; }
  .qr-preview-small { width:100%; flex-direction:row; height:auto; min-height:unset; }
}
@media(max-width:540px) {
  .grid-4, .grid-2 { grid-template-columns:1fr; }
}

code { background:var(--surface3); padding:2px 6px; border-radius:4px; font-size:11px; color:var(--accent); }

/* ===================== AUTH SCREEN ===================== */
#auth-screen {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); overflow: hidden;
}
#auth-screen[style*="display: none"],
#auth-screen[style*="display:none"] {
  pointer-events: none !important;
  visibility: hidden !important;
}
.auth-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.auth-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(240,165,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,165,0,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: gridMove 20s linear infinite;
}
@keyframes gridMove { from { transform: translateY(0); } to { transform: translateY(48px); } }
.auth-glow-1 {
  position: absolute; top: -20%; left: -10%;
  width: 60vw; height: 60vw; max-width: 600px; max-height: 600px;
  background: radial-gradient(circle, rgba(240,165,0,0.12) 0%, transparent 70%);
  animation: glow1 8s ease-in-out infinite alternate;
}
.auth-glow-2 {
  position: absolute; bottom: -20%; right: -10%;
  width: 50vw; height: 50vw; max-width: 500px; max-height: 500px;
  background: radial-gradient(circle, rgba(59,130,246,0.1) 0%, transparent 70%);
  animation: glow2 10s ease-in-out infinite alternate;
}
@keyframes glow1 { from { transform: scale(1) translate(0,0); } to { transform: scale(1.2) translate(5%,5%); } }
@keyframes glow2 { from { transform: scale(1) translate(0,0); } to { transform: scale(1.3) translate(-5%,-5%); } }

.auth-container {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px;
  margin: 0 20px;
}
.auth-panel {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 36px 36px 32px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
  animation: modalIn .25s ease;
}
.auth-panel.active { display: block; }

.auth-logo {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
}
.auth-logo-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--accent); display: flex; align-items: center; justify-content: center;
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: 16px; color: #000;
  overflow: hidden; flex-shrink: 0;
}
.auth-logo-icon img { width: 100%; height: 100%; object-fit: cover; }
.auth-logo-name { font-size: 18px; font-weight: 700; line-height: 1.2; }
.auth-logo-sub { font-size: 12px; color: var(--text3); margin-top: 2px; }

.auth-title { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.auth-subtitle { font-size: 14px; color: var(--text3); margin-bottom: 24px; }

.auth-field { margin-bottom: 16px; }
.auth-field label {
  display: block; font-size: 12px; font-weight: 600; color: var(--text3);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 7px;
}
.auth-input-wrap {
  position: relative; display: flex; align-items: center;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.auth-input-wrap:focus-within {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.auth-input-icon {
  position: absolute; left: 13px; font-size: 15px; pointer-events: none; z-index: 1;
}
.auth-input-wrap input {
  flex: 1; background: transparent; border: none; padding: 12px 14px 12px 40px;
  color: var(--text); font-size: 14px; outline: none; border-radius: 10px;
  box-shadow: none !important;
}
.auth-eye {
  background: none; border: none; cursor: pointer; padding: 10px 14px;
  font-size: 16px; color: var(--text3); transition: color .15s; line-height: 1;
}
.auth-eye:hover { color: var(--text); }

.auth-btn {
  width: 100%; padding: 13px; border-radius: 10px; border: none;
  background: var(--accent); color: #000; font-family: 'DM Sans', sans-serif;
  font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 6px;
  transition: all .15s; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.auth-btn:hover { background: #ffb827; transform: translateY(-1px); box-shadow: 0 6px 20px var(--accent-glow); }
.auth-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.auth-link {
  background: none; border: none; color: var(--accent); cursor: pointer;
  font-size: 13.5px; font-weight: 500; padding: 0; text-decoration: underline;
}
.auth-link:hover { color: #ffb827; }
.auth-switch { text-align: center; margin-top: 20px; font-size: 13.5px; color: var(--text3); }

.auth-alert {
  padding: 12px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px;
  line-height: 1.5;
}
.auth-alert-error { background: var(--red-soft); color: #fca5a5; border: 1px solid rgba(239,68,68,0.2); }
.auth-alert-success { background: var(--green-soft); color: #86efac; border: 1px solid rgba(34,197,94,0.2); }

.auth-spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(0,0,0,0.3); border-top-color: #000;
  border-radius: 50%; animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================== TOPBAR USER ===================== */
.topbar-user {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 12px 6px 6px; border-radius: 99px;
  border: 1px solid var(--border); transition: all .15s;
  position: relative;
}
.topbar-user:hover { background: var(--surface2); border-color: var(--border2); }
.topbar-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: #000; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.topbar-user-info { display: flex; flex-direction: column; line-height: 1.2; }
.topbar-user-info span { font-size: 13px; font-weight: 600; color: var(--text); }
.topbar-user-info small { font-size: 11px; color: var(--text3); }

.user-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--surface); border: 1px solid var(--border2); border-radius: 12px;
  min-width: 220px; box-shadow: var(--shadow); z-index: 300; overflow: hidden;
  animation: modalIn .15s ease;
}
.user-dropdown.open { display: block; }
.user-dropdown-header { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.user-dropdown-header strong { display: block; font-size: 14px; }
.user-dropdown-header small { color: var(--text3); font-size: 12px; }
.user-dropdown-item {
  padding: 11px 16px; font-size: 13.5px; cursor: pointer; color: var(--text2);
  transition: background .1s; display: flex; align-items: center; gap: 8px;
}
.user-dropdown-item:hover { background: var(--surface2); color: var(--text); }
.user-dropdown-item.danger { color: var(--red); }
.user-dropdown-item.danger:hover { background: var(--red-soft); }
.user-dropdown-divider { height: 1px; background: var(--border); }

/* ===================== SIDEBAR USER ===================== */
.user-info-sidebar {
  display: flex; align-items: center; gap: 10px;
}
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #000; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.btn-logout {
  background: none; border: none; cursor: pointer; color: var(--text3);
  font-size: 16px; padding: 4px; border-radius: 6px; transition: all .15s; margin-left: auto;
}
.btn-logout:hover { background: var(--red-soft); color: var(--red); }

/* ===================== PROFILE MODAL ===================== */
.user-avatar-big {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: #000; font-weight: 700; font-size: 22px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ===================== MOBILE AUTH ===================== */
@media(max-width:480px) {
  .auth-panel { padding: 28px 22px 24px; border-radius: 16px; }
  .auth-title { font-size: 20px; }
  .topbar-user-info { display: none; }
}


/* ═══════════════════════════════════════════════════════════
   KANBAN — Trello-like Design
   ═══════════════════════════════════════════════════════════ */
#kanban-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 20px;
  min-height: calc(100vh - 200px);
  align-items: flex-start;
}
#kanban-board::-webkit-scrollbar { height: 6px; }
#kanban-board::-webkit-scrollbar-thumb { background: var(--surface3); border-radius:99px; }

.kanban-col {
  width: 272px;
  min-width: 272px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 180px);
  flex-shrink: 0;
  transition: box-shadow .2s, border-color .2s;
}
.kanban-col.drag-over {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.kanban-col-top-bar {
  height: 4px;
  border-radius: 14px 14px 0 0;
  flex-shrink: 0;
}
.kanban-col-head {
  padding: 12px 14px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.kanban-col-name-wrap {
  flex: 1;
  min-width: 0;
}
.kanban-col-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  font-family: inherit;
  cursor: text;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background .15s;
}
.kanban-col-name:hover, .kanban-col-name:focus {
  background: var(--surface2);
}
.kanban-col-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.kanban-col-count {
  background: var(--surface3);
  color: var(--text3);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  font-family: 'JetBrains Mono', monospace;
}
.kanban-col-del {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 13px;
  padding: 3px 5px;
  border-radius: 4px;
  line-height: 1;
  transition: all .15s;
  opacity: 0;
}
.kanban-col:hover .kanban-col-del { opacity: 1; }
.kanban-col-del:hover { background: var(--red-soft); color: var(--red); }

.kanban-col-body {
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 60px;
}
.kanban-col-body::-webkit-scrollbar { width: 3px; }
.kanban-col-body::-webkit-scrollbar-thumb { background: var(--surface3); border-radius:99px; }

/* TASK CARD */
.kanban-task {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  cursor: grab;
  transition: all .18s;
  user-select: none;
  position: relative;
}
.kanban-task:hover {
  border-color: var(--border2);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  transform: translateY(-1px);
}
.kanban-task.dragging {
  opacity: .45;
  cursor: grabbing;
  transform: rotate(2deg) scale(1.02);
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
.kanban-task-accent {
  height: 3px;
  border-radius: 99px;
  margin-bottom: 10px;
}
.kanban-task-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 8px;
}
.kanban-task-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 6px;
}
.k-chip {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.k-chip-baixa   { background: rgba(34,197,94,.12);  color: var(--green); }
.k-chip-media   { background: rgba(59,130,246,.12);  color: var(--blue); }
.k-chip-alta    { background: rgba(245,158,11,.12);  color: #f59e0b; }
.k-chip-urgente { background: var(--red-soft);       color: var(--red); }
.k-chip-cli     { background: var(--surface3);       color: var(--text2); }

.kanban-task-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  gap: 6px;
}
.kanban-task-prazo {
  font-size: 11px;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: 4px;
}
.kanban-task-prazo.overdue { color: var(--red); font-weight: 600; }
.kanban-task-prazo svg { flex-shrink: 0; }
.kanban-task-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content:center;
  flex-shrink: 0;
}
.kanban-task-edit {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 13px;
  opacity: 0;
  transition: all .15s;
}
.kanban-task:hover .kanban-task-edit { opacity: 1; }
.kanban-task-edit:hover { background: var(--surface3); color: var(--text); }

/* ADD TASK BUTTON */
.kanban-add-task {
  margin: 6px 10px 10px;
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text3);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all .15s;
  font-family: inherit;
  width: calc(100% - 20px);
  flex-shrink: 0;
}
.kanban-add-task:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.kanban-add-task svg { flex-shrink: 0; }

/* ADD COLUMN */
.kanban-add-col {
  width: 240px;
  min-width: 240px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  padding-top: 4px;
}
.kanban-add-col-btn {
  width: 100%;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px dashed var(--border2);
  border-radius: 14px;
  color: var(--text3);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all .15s;
  font-family: inherit;
  font-weight: 600;
}
.kanban-add-col-btn:hover {
  background: var(--surface2);
  border-color: var(--accent);
  color: var(--accent);
}

/* DRAG GHOST */
.kanban-ghost {
  background: var(--accent-soft) !important;
  border: 2px dashed var(--accent) !important;
  opacity: .6 !important;
}

/* ═══════════════════════════════════════════════════════════
   AGENDA REMINDERS no Dashboard
   ═══════════════════════════════════════════════════════════ */
.agenda-reminder-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.agenda-reminder-item:last-child { border-bottom: none; }
.agenda-reminder-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.agenda-reminder-date {
  min-width: 80px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  font-family: 'JetBrains Mono', monospace;
}
.agenda-reminder-date.today { color: var(--accent); }
.agenda-reminder-date.overdue { color: var(--red); }
.agenda-reminder-info { flex: 1; min-width: 0; }
.agenda-reminder-title { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-reminder-sub { font-size: 11px; color: var(--text3); margin-top: 2px; }
.agenda-reminder-hora { font-size: 11px; color: var(--text3); font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }