/* =========================================================================
   Segfy Intranet — design system (adaptado do mockup Claude Design)
   Tokens dark/light + shell (sidebar/topbar) + componentes + login.
   ========================================================================= */

/* ----- Tokens ----- */
[data-theme="dark"] {
    --bg:#0a0c10; --surface:#12151c; --surface-2:#181c25; --surface-3:#1e232e; --surface-hover:#1b2029;
    --border:#232834; --border-strong:#2e3542;
    --text:#eef1f6; --text-2:#a4aebd; --text-3:#697283;
    --accent:#3b82f6; --accent-hover:#60a5fa; --accent-soft:rgba(59,130,246,.16); --accent-border:rgba(59,130,246,.40);
    --success:#34d399; --danger:#f87171; --warning:#fbbf24;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -8px rgba(0,0,0,.5);
    color-scheme:dark;
}

[data-theme="light"] {
    --bg:#f3f5f8; --surface:#ffffff; --surface-2:#f5f7fa; --surface-3:#eef1f5; --surface-hover:#f0f3f7;
    --border:#e6e9ee; --border-strong:#d6dbe3;
    --text:#0f1722; --text-2:#54606f; --text-3:#8a94a3;
    --accent:#2563eb; --accent-hover:#1d4ed8; --accent-soft:rgba(37,99,235,.08); --accent-border:rgba(37,99,235,.32);
    --success:#059669; --danger:#dc2626; --warning:#d97706;
    --shadow:0 1px 2px rgba(16,24,40,.05),0 12px 28px -10px rgba(16,24,40,.12);
    color-scheme:light;
}

/* ----- Reset ----- */
* { box-sizing:border-box; }
html, body { margin:0; padding:0; height:100%; }
body {
    background:var(--bg); color:var(--text);
    font-family:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size:14px; -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
input, textarea, select, button { font-family:inherit; }
h1,h2,h3,h4 { margin:0; }

.mono { font-family:'JetBrains Mono', ui-monospace, monospace; }
.muted { color:var(--text-2); }
.muted-3 { color:var(--text-3); }
.hstack { display:flex; align-items:center; }
.between { justify-content:space-between; }

::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:8px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-track { background:transparent; }
::placeholder { color:var(--text-3); opacity:1; }

.ms {
    font-family:'Material Symbols Rounded'; font-weight:normal; font-style:normal; line-height:1;
    display:inline-block; white-space:nowrap; direction:ltr; vertical-align:middle;
    font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24; -webkit-font-smoothing:antialiased;
}

/* ----- App shell ----- */
.app { display:flex; height:100vh; width:100%; overflow:hidden; }

.sidebar {
    width:252px; flex:0 0 auto; background:var(--surface); border-right:1px solid var(--border);
    display:flex; flex-direction:column; transition:width .22s cubic-bezier(.4,0,.2,1); position:relative; z-index:2;
}
html[data-collapsed="1"] .sidebar { width:76px; }

.sidebar-brand { height:64px; display:flex; align-items:center; gap:11px; padding:0 18px; border-bottom:1px solid var(--border); }
html[data-collapsed="1"] .sidebar-brand { justify-content:center; padding:0; }

.brand-mark { width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,var(--accent),#6366f1); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.brand-mark i { width:12px; height:12px; background:#fff; transform:rotate(45deg); border-radius:2px; display:block; }
.brand-name { font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--text); white-space:nowrap; }

.sidebar-nav { flex:1; overflow-y:auto; padding:14px 12px; }
.nav-group-label { font-size:10.5px; font-weight:700; letter-spacing:.08em; color:var(--text-3); padding:0 12px; margin:0 0 8px; }
.nav-group-label.mt { margin-top:18px; }

.nav-item {
    display:flex; align-items:center; gap:12px; height:42px; padding:0 12px; border-radius:10px;
    color:var(--text-2); font-weight:500; cursor:pointer; transition:background .15s,color .15s; margin-bottom:3px;
}
.nav-item .ms { font-size:21px; flex:0 0 auto; }
.nav-label { font-size:13.5px; white-space:nowrap; flex:1; }
.nav-item:hover { background:var(--surface-hover); color:var(--text); }
.nav-item.active { color:var(--accent); background:var(--accent-soft); font-weight:600; box-shadow:inset 3px 0 0 var(--accent); }
.nav-item.disabled { opacity:.5; cursor:default; }
.nav-item.disabled:hover { background:transparent; color:var(--text-2); }
.nav-badge { font-size:10px; font-weight:700; padding:1px 7px; border-radius:20px; background:var(--surface-3); color:var(--text-3); font-family:'JetBrains Mono',monospace; }
html[data-collapsed="1"] .sidebar-brand .brand-name,
html[data-collapsed="1"] .nav-label,
html[data-collapsed="1"] .nav-group-label,
html[data-collapsed="1"] .nav-badge,
html[data-collapsed="1"] .su-info,
html[data-collapsed="1"] .su-logout { display:none; }
html[data-collapsed="1"] .nav-item { justify-content:center; padding:0; }

.sidebar-user { padding:12px; border-top:1px solid var(--border); }
.su-row { display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; }
.su-info { flex:1; min-width:0; }
.su-name { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.su-role { font-size:11.5px; color:var(--text-3); white-space:nowrap; }
.su-logout { background:none; border:none; color:var(--text-3); cursor:pointer; padding:5px; border-radius:7px; display:flex; }
.su-logout:hover { color:var(--danger); background:var(--surface-hover); }
.su-logout .ms { font-size:19px; }

.avatar { border-radius:9px; background:linear-gradient(135deg,#8b5cf6,#ec4899); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; flex:0 0 auto; }
.avatar.sm { width:34px; height:34px; font-size:13px; }
.avatar.xs { width:36px; height:36px; font-size:13px; cursor:pointer; }

/* ----- Main / topbar ----- */
.main { flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; }
.topbar { height:64px; flex:0 0 auto; display:flex; align-items:center; gap:16px; padding:0 24px; border-bottom:1px solid var(--border); background:var(--surface); }
.topbar-title { font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--text); }
.topbar-sub { font-size:12px; color:var(--text-3); }
.topbar-spacer { flex:1; }
.topbar-search { display:flex; align-items:center; gap:10px; width:100%; max-width:420px; height:40px; padding:0 14px; border:1px solid var(--border); background:var(--surface-2); border-radius:11px; }
.topbar-search input { flex:1; border:none; outline:none; background:transparent; color:var(--text); font-size:13.5px; }
.topbar-search .ms { font-size:19px; color:var(--text-3); }
.topbar-divider { width:1px; height:24px; background:var(--border); margin:0 4px; }

.icon-btn { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-2); background:none; border:none; }
.icon-btn:hover { background:var(--surface-hover); color:var(--text); }
.icon-btn .ms { font-size:21px; }

.content { flex:1; overflow-y:auto; background:var(--bg); }
.page { padding:28px 32px; max-width:1320px; }
.page-head { margin-bottom:22px; }
.page-title { font-size:20px; font-weight:700; letter-spacing:-.02em; color:var(--text); }
.page-sub { font-size:13.5px; color:var(--text-2); margin-top:3px; }

/* ----- Components ----- */
.card { background:var(--surface); border:1px solid var(--border); border-radius:14px; }
.card.p { padding:18px; }
.card.pad { padding:20px 22px; }
.grid { display:grid; gap:16px; }
.cols-auto { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }

.tile { border-radius:12px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; background:var(--accent-soft); color:var(--accent); }
.tile.lg { width:44px; height:44px; }
.tile.md { width:38px; height:38px; }
.tile .ms { font-size:24px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 18px; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer; border:1px solid transparent; transition:background .15s,border-color .15s,color .15s; white-space:nowrap; }
.btn .ms { font-size:19px; }
.btn-accent { background:var(--accent); color:#fff; box-shadow:0 8px 20px -8px var(--accent-border); }
.btn-accent:hover { background:var(--accent-hover); }
.btn-outline { background:var(--surface); border-color:var(--border); color:var(--text-2); }
.btn-outline:hover { color:var(--text); background:var(--surface-hover); }
.btn-block { width:100%; }
.btn-lg { height:48px; font-size:15px; border-radius:11px; }

.field { margin-bottom:16px; }
.label { font-size:13px; font-weight:600; color:var(--text-2); margin-bottom:7px; display:block; }
.input { width:100%; height:44px; padding:0 14px; border:1px solid var(--border); background:var(--surface-2); border-radius:10px; color:var(--text); font-size:14px; outline:none; }
.input:focus { border-color:var(--accent-border); }
.input-wrap { display:flex; align-items:center; gap:10px; height:46px; padding:0 14px; border:1px solid var(--border); background:var(--surface); border-radius:11px; }
.input-wrap:focus-within { border-color:var(--accent-border); }
.input-wrap .ms { font-size:19px; color:var(--text-3); }
.input-wrap input { flex:1; border:none; outline:none; background:transparent; color:var(--text); font-size:14px; }
.toggle-eye { cursor:pointer; }

.badge { font-size:11px; font-weight:600; padding:3px 9px; border-radius:6px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-2); display:inline-flex; align-items:center; gap:5px; }
.badge.soft { background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent); }
.status { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; }
.status .dot { width:6px; height:6px; border-radius:50%; }
.status.on { color:var(--success); } .status.on .dot { background:var(--success); }
.status.off { color:var(--text-3); } .status.off .dot { background:var(--text-3); }

.switch { width:38px; height:21px; border-radius:11px; background:var(--border-strong); position:relative; cursor:pointer; transition:background .2s; flex:0 0 auto; border:none; padding:0; }
.switch .knob { position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 2px rgba(0,0,0,.35); }
.switch.on { background:var(--accent); }
.switch.on .knob { transform:translateX(17px); }

.alert { border-radius:10px; padding:10px 14px; font-size:13px; display:flex; align-items:center; gap:8px; }
.alert-danger { background:color-mix(in srgb, var(--danger) 13%, transparent); color:var(--danger); border:1px solid color-mix(in srgb, var(--danger) 30%, transparent); }

/* ----- Auth (login / split-screen) ----- */
.auth { position:fixed; inset:0; display:flex; background:var(--bg); }
.auth-brand {
    flex:1.05; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px; color:#eef1f6;
    background:radial-gradient(130% 120% at 12% 8%, rgba(59,130,246,.28), transparent 52%),
               radial-gradient(120% 120% at 92% 96%, rgba(139,92,246,.18), transparent 50%),
               linear-gradient(155deg,#0c1322 0%,#0a0c10 70%);
}
.auth-brand .grid-bg { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:46px 46px; mask-image:radial-gradient(120% 90% at 30% 20%,#000,transparent 75%); }
.auth-brand .arow { position:relative; }
.auth-headline { font-size:38px; line-height:1.14; font-weight:700; letter-spacing:-.025em; max-width:440px; }
.auth-sub { margin-top:18px; font-size:15px; line-height:1.6; color:#a4aebd; max-width:440px; }
.auth-pill { font-size:11px; font-weight:600; color:#8a94a3; border:1px solid rgba(255,255,255,.16); padding:2px 8px; border-radius:20px; font-family:'JetBrains Mono',monospace; }

.auth-form { flex:1; position:relative; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg); }
.auth-card { width:100%; max-width:384px; animation:fadeUp .5s cubic-bezier(.2,.7,.2,1); }
.auth-theme { position:absolute; top:24px; right:24px; border:1px solid var(--border); background:var(--surface); }

@keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

@media (max-width:860px) {
    .auth-brand { display:none; }
}

/* ----- Toolbar / chips (catálogo) ----- */
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.chips { display:flex; gap:9px; flex-wrap:wrap; }
.chip { display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border-radius:9px; cursor:pointer; font-size:13px; font-weight:600; border:1px solid var(--border); background:var(--surface); color:var(--text-2); }
.chip:hover { color:var(--text); }
.chip.active { border-color:var(--accent-border); background:var(--accent-soft); color:var(--accent); }
.chip .count { font-size:11px; font-weight:700; padding:1px 6px; border-radius:20px; background:var(--surface-3); color:var(--text-3); font-family:'JetBrains Mono',monospace; }
.chip.active .count { background:var(--accent); color:#fff; }
.search-inline { display:flex; align-items:center; gap:9px; height:40px; padding:0 14px; border:1px solid var(--border); background:var(--surface-2); border-radius:10px; min-width:240px; }
.search-inline .ms { font-size:19px; color:var(--text-3); }
.search-inline input { flex:1; border:none; outline:none; background:transparent; color:var(--text); font-size:13.5px; }

/* ----- Cards de módulo ----- */
.mod-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }
.mod-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:14px; }
.mod-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.mod-title { font-size:15px; font-weight:700; color:var(--text); }
.mod-key { font-size:11px; color:var(--text-3); font-family:'JetBrains Mono',monospace; margin-top:2px; }
.mod-desc { font-size:12.5px; color:var(--text-2); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:38px; }
.mod-price { font-size:16px; font-weight:700; color:var(--text); font-family:'JetBrains Mono',monospace; }
.mod-sep { height:1px; background:var(--border); }
.mod-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mod-actions { display:flex; align-items:center; gap:4px; }
.thumb { width:44px; height:44px; border-radius:12px; object-fit:cover; flex:0 0 auto; border:1px solid var(--border); }
.empty { text-align:center; padding:56px 20px; color:var(--text-3); }
.empty .ms { font-size:42px; display:block; margin-bottom:10px; opacity:.6; }

/* ----- Drawer ----- */
.drawer-overlay { position:fixed; inset:0; z-index:50; display:none; }
.drawer-overlay.open { display:block; }
.drawer-overlay .scrim { position:absolute; inset:0; background:rgba(6,9,14,.55); animation:overlayIn .2s ease; }
.drawer { position:absolute; top:0; right:0; height:100%; width:560px; max-width:94vw; background:var(--surface); border-left:1px solid var(--border); display:flex; flex-direction:column; box-shadow:-20px 0 60px -20px rgba(0,0,0,.5); animation:drawerIn .26s cubic-bezier(.2,.7,.2,1); }
.drawer-head { height:66px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 22px; border-bottom:1px solid var(--border); }
.drawer-body { flex:1; overflow-y:auto; padding:22px; }
.drawer-foot { height:70px; flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:0 22px; border-top:1px solid var(--border); }
.form-section { font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--text-3); margin:22px 0 14px; }
.form-section.first { margin-top:0; }
.form-row { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--border); }
.form-row .frx { flex:1; }
.form-row .frt { font-size:14px; font-weight:600; color:var(--text); }
.form-row .frs { font-size:12.5px; color:var(--text-3); margin-top:2px; }
.input-prefix { display:flex; align-items:center; height:44px; border:1px solid var(--border); background:var(--surface-2); border-radius:10px; overflow:hidden; }
.input-prefix .pfx { padding:0 13px; font-size:13px; color:var(--text-3); font-weight:600; border-right:1px solid var(--border); height:100%; display:flex; align-items:center; }
.input-prefix input { flex:1; height:100%; padding:0 12px; border:none; background:transparent; color:var(--text); font-size:14px; outline:none; }
.input-prefix.mono input { font-family:'JetBrains Mono',monospace; font-size:13px; }
.textarea { width:100%; min-height:84px; padding:11px 14px; border:1px solid var(--border); background:var(--surface-2); border-radius:10px; color:var(--text); font-size:14px; outline:none; resize:vertical; line-height:1.5; font-family:inherit; }
@keyframes overlayIn { from { opacity:0; } to { opacity:1; } }
@keyframes drawerIn { from { transform:translateX(40px); opacity:0; } to { transform:none; opacity:1; } }

/* ----- Toasts ----- */
.toast-box { position:fixed; top:18px; right:18px; z-index:60; display:flex; flex-direction:column; gap:10px; }
.toast { display:flex; align-items:center; gap:9px; min-width:280px; max-width:380px; padding:12px 14px; border-radius:11px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); font-size:13.5px; color:var(--text); animation:drawerIn .2s ease; }
.toast .ms { font-size:19px; }
.toast.ok .ms { color:var(--success); }
.toast.err .ms { color:var(--danger); }

/* ----- Tabela + paginação ----- */
.table-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.table { width:100%; border-collapse:collapse; }
.table th { text-align:left; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-3); padding:11px 16px; border-bottom:1px solid var(--border); white-space:nowrap; }
.table td { padding:12px 16px; border-bottom:1px solid var(--border); font-size:13.5px; color:var(--text); vertical-align:middle; }
.table tbody tr:last-child td { border-bottom:none; }
.table tbody tr:hover { background:var(--surface-hover); }
.btn-sm { height:34px; padding:0 12px; font-size:13px; border-radius:9px; }
.btn-icon-sm { width:34px; height:34px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text-2); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.btn-icon-sm:hover { color:var(--text); background:var(--surface-hover); }
.btn-icon-sm.danger:hover { color:var(--danger); border-color:color-mix(in srgb, var(--danger) 40%, transparent); }
.btn-icon-sm .ms { font-size:18px; }
.pagination { display:flex; align-items:center; gap:6px; }
.page-btn { min-width:34px; height:34px; padding:0 10px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text-2); font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; }
.page-btn:hover { color:var(--text); }
.page-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.page-btn.disabled { opacity:.4; pointer-events:none; }
.crumb { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-3); cursor:pointer; }
.crumb:hover { color:var(--text-2); }