@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --g900:#18181B; --g800:#27272A; --g700:#3F3F46; --g600:#52525B; --g500:#71717A;
  --g400:#A1A1AA; --g300:#D1D1D6; --g200:#E4E4E7; --g100:#F4F4F5; --g50:#FAFAFA; --w:#FFFFFF;
  --ok:#16A34A; --warn:#CA8A04; --err:#DC2626; --info:#3F3F46;
  --r:8px; --rl:12px;
  --s1:0 1px 3px rgba(0,0,0,.05); --s2:0 4px 16px rgba(0,0,0,.08);
  --sidebar-w:250px; --header-h:64px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--g50);color:var(--g900);font-family:'DM Sans',sans-serif;}
h1,h2,h3,h4{font-family:'Syne',sans-serif;font-weight:800;margin:0 0 .4em;color:var(--g900);}
code,.mono{font-family:'JetBrains Mono',monospace;}
a{color:var(--g900);text-decoration:none;}
button,input,select,textarea{font-family:'DM Sans',sans-serif;font-size:14px;}

.okla-shell{display:flex;min-height:100vh;}

/* Sidebar (menu lateral fixo à esquerda) */
.okla-sidebar{width:var(--sidebar-w);background:var(--g900);color:var(--g100);position:fixed;top:0;left:0;bottom:0;display:flex;flex-direction:column;z-index:40;}
.okla-sidebar .brand{padding:22px 20px;font-family:'Syne',sans-serif;font-weight:800;font-size:18px;letter-spacing:.3px;border-bottom:1px solid var(--g800);}
.okla-sidebar nav{flex:1;overflow-y:auto;padding:12px 0;}
.okla-sidebar .nav-item{display:flex;align-items:center;gap:10px;padding:11px 20px;color:var(--g300);font-size:14px;font-weight:500;border-left:3px solid transparent;}
.okla-sidebar .nav-item:hover{background:var(--g800);color:var(--w);}
.okla-sidebar .nav-item.active{background:var(--g800);color:var(--w);border-left-color:var(--w);}
.okla-sidebar .nav-item svg{width:18px;height:18px;flex-shrink:0;}
.okla-sidebar .nav-section{padding:14px 20px 6px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--g500);}

/* Header (menu superior à direita) */
.okla-header{position:fixed;top:0;left:var(--sidebar-w);right:0;height:var(--header-h);background:var(--w);border-bottom:1px solid var(--g200);display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 24px;z-index:30;}
.okla-header .user-chip{display:flex;align-items:center;gap:10px;padding:6px 12px;border-radius:var(--rl);background:var(--g100);font-size:13px;font-weight:600;}
.okla-header .icon-btn{position:relative;width:38px;height:38px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;background:var(--g100);border:none;cursor:pointer;}
.okla-header .icon-btn:hover{background:var(--g200);}
.okla-header .badge{position:absolute;top:-4px;right:-4px;background:var(--err);color:var(--w);font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 3px;}

.okla-main{margin-left:var(--sidebar-w);margin-top:var(--header-h);padding:28px;width:100%;}

.card{background:var(--w);border:1px solid var(--g200);border-radius:var(--rl);padding:20px;box-shadow:var(--s1);}
.card+.card{margin-top:16px;}
.grid{display:grid;gap:16px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:900px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

.stat{display:flex;flex-direction:column;gap:6px;}
.stat .label{font-size:12px;color:var(--g500);text-transform:uppercase;letter-spacing:.06em;}
.stat .value{font-family:'Syne',sans-serif;font-weight:800;font-size:28px;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:var(--r);border:1px solid transparent;font-weight:600;font-size:14px;cursor:pointer;transition:.15s;}
.btn-primary{background:var(--g900);color:var(--w);}
.btn-primary:hover{background:var(--g700);}
.btn-outline{background:var(--w);color:var(--g900);border-color:var(--g300);}
.btn-outline:hover{background:var(--g100);}
.btn-danger{background:var(--err);color:var(--w);}
.btn-sm{padding:6px 12px;font-size:13px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

.form-group{margin-bottom:16px;}
label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--g700);}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],input[type=number],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--g300);border-radius:var(--r);background:var(--w);color:var(--g900);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--g700);outline-offset:1px;}

.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;}
.badge-ok{background:#DCFCE7;color:#166534;}
.badge-warn{background:#FEF9C3;color:#854D0E;}
.badge-err{background:#FEE2E2;color:#991B1B;}
.badge-info{background:var(--g100);color:var(--g700);}

table{width:100%;border-collapse:collapse;font-size:14px;}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--g500);padding:10px;border-bottom:1px solid var(--g200);}
td{padding:10px;border-bottom:1px solid var(--g100);}

.flash{padding:12px 16px;border-radius:var(--r);margin-bottom:16px;font-size:14px;font-weight:500;}
.flash-error{background:#FEE2E2;color:#991B1B;}
.flash-success{background:#DCFCE7;color:#166534;}
.flash-info{background:var(--g100);color:var(--g700);}

/* Calendário desktop (paisagem) */
.schedule-grid{overflow-x:auto;}
.schedule-table{border-collapse:collapse;min-width:900px;}
.schedule-table th,.schedule-table td{border:1px solid var(--g200);padding:8px;font-size:13px;text-align:center;vertical-align:top;}
.schedule-table th{background:var(--g100);}
.schedule-table td.employee-name{text-align:left;font-weight:600;background:var(--g50);position:sticky;left:0;}
.shift-cell{border-radius:var(--r);padding:6px;font-size:12px;font-weight:600;}
.shift-cell.folga{color:var(--g400);}
.shift-cell.extra{background:#FEF9C3;color:#854D0E;}
.shift-cell.confirmado{background:var(--g100);color:var(--g800);}

/* Modo fotografia mobile */
.photo-card{background:var(--g900);color:var(--w);border-radius:16px;padding:24px;text-align:center;max-width:380px;margin:0 auto;}
.photo-card .pdate{font-family:'Syne',sans-serif;font-weight:800;font-size:20px;}
.photo-card .pweekday{font-size:12px;letter-spacing:.15em;color:var(--g400);text-transform:uppercase;margin-bottom:16px;}
.photo-card .pname{font-size:18px;font-weight:700;margin:10px 0 2px;}
.photo-card .psector{font-size:13px;color:var(--g400);margin-bottom:14px;}
.photo-card .ptime{font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:600;margin-bottom:14px;}
.photo-nav{display:flex;justify-content:space-between;align-items:center;max-width:380px;margin:14px auto 0;}

.bottom-nav{display:none;}
@media(max-width:860px){
  .okla-sidebar{transform:translateX(-100%);transition:.2s;}
  .okla-sidebar.open{transform:translateX(0);}
  .okla-header{left:0;}
  .okla-main{margin-left:0;padding:16px;padding-bottom:80px;}
  .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--w);border-top:1px solid var(--g200);z-index:50;}
  .bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0;font-size:11px;color:var(--g500);}
  .bottom-nav a.active{color:var(--g900);}
  .bottom-nav svg{width:20px;height:20px;}
}
.empty-state{text-align:center;padding:48px 20px;color:var(--g500);}

@media print{
  .okla-sidebar,.okla-header,.bottom-nav,.btn,form,.no-print{display:none !important;}
  .okla-main{margin:0;padding:0;}
  body{background:#fff;}
  .schedule-table{min-width:0;}
}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--g50);padding:20px;}
.login-box{width:100%;max-width:380px;background:var(--w);border:1px solid var(--g200);border-radius:var(--rl);padding:32px;box-shadow:var(--s2);}
.login-box h1{font-size:20px;text-align:center;}
.login-box .sub{text-align:center;color:var(--g500);font-size:13px;margin-bottom:24px;}