/* ═══════════════════════════════════════════════════
   DYNE — Sistema de Controle de Horas  v3.0
   Fiel à planilha H-05-2026.xlsx
   Fonte: Inter + JetBrains Mono
═══════════════════════════════════════════════════ */

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

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:     #1e3a5f;
  --navy-dk:  #0c1f3d;
  --navy-lt:  #2e5f8a;
  --blue:     #2563eb;
  --blue-lt:  #dbeafe;
  --blue-50:  #eff6ff;
  --green:    #16a34a;
  --green-lt: #f0fdf4;
  --amber:    #d97706;
  --amber-lt: #fffbeb;
  --red:      #dc2626;
  --red-lt:   #fef2f2;
  --purple:   #7c3aed;
  --purple-lt:#f5f3ff;

  --g900: #0f172a;
  --g800: #1e293b;
  --g700: #334155;
  --g600: #475569;
  --g500: #64748b;
  --g400: #94a3b8;
  --g300: #cbd5e1;
  --g200: #e2e8f0;
  --g100: #f1f5f9;
  --g50:  #f8fafc;
  --white:#ffffff;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.1),0 4px 8px rgba(0,0,0,.06);
  --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-xl: 16px;
  --font: 'Inter',system-ui,sans-serif;
  --mono: 'JetBrains Mono','Fira Mono',monospace;
}

html { font-size:14px; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font); background:var(--g100); color:var(--g900); line-height:1.5; }
a    { color:var(--blue); text-decoration:none; }
a:hover { color:#1d4ed8; }
input,select,button { font-family:var(--font); font-size:13px; }

/* ══ LAYOUT ═══════════════════════════════════════ */
.app-layout { display:flex; min-height:100vh; }

/* ══ SIDEBAR ══════════════════════════════════════ */
.sidebar {
  width:220px; background:var(--navy);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto; flex-shrink:0;
}
.sb-logo { display:flex;align-items:center;gap:11px;padding:20px 16px 16px;border-bottom:1px solid rgba(255,255,255,.08); }
.sb-badge { width:36px;height:36px;background:rgba(255,255,255,.15);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(255,255,255,.12); }
.sb-logo-text { display:flex;flex-direction:column;gap:1px; }
.sb-app  { font-size:14px;font-weight:700;color:white;letter-spacing:-.3px; }
.sb-sub  { font-size:10px;color:rgba(255,255,255,.45); }
.sb-nav  { flex:1;padding:12px 10px; }
.sb-section { font-size:9px;font-weight:700;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.1em;padding:0 8px;margin:4px 0 6px; }
.sb-item { display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);color:rgba(255,255,255,.6);font-size:13px;font-weight:400;text-decoration:none;transition:background .15s,color .15s;cursor:pointer;border:none;background:none;width:100%;text-align:left;margin-bottom:2px; }
.sb-item svg { flex-shrink:0;opacity:.75; }
.sb-item:hover,.sb-item.active { background:rgba(255,255,255,.12);color:white; }
.sb-item.active { font-weight:500; }
.sb-item.active svg,.sb-item:hover svg { opacity:1; }
.sb-logout { color:rgba(255,255,255,.4); }
.sb-logout:hover { color:#fca5a5;background:rgba(239,68,68,.1); }
.sb-bottom { padding:10px 10px 16px;border-top:1px solid rgba(255,255,255,.08); }
.sb-user { display:flex;align-items:center;gap:9px;padding:10px 8px 4px; }
.sb-avatar { width:30px;height:30px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:white;flex-shrink:0; }
.sb-user-name { font-size:12px;font-weight:500;color:rgba(255,255,255,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sb-user-role { font-size:10px;color:rgba(255,255,255,.4); }

/* ══ MAIN ═════════════════════════════════════════ */
.app-main { flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0; }

/* ══ TOPBAR ═══════════════════════════════════════ */
.topbar { background:white;border-bottom:1px solid var(--g200);padding:14px 28px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;box-shadow:var(--shadow-sm);gap:12px; }
.topbar-left { display:flex;align-items:center;gap:12px; }
.topbar-back { width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);border:1px solid var(--g200);color:var(--g500);transition:all .15s;flex-shrink:0; }
.topbar-back:hover { background:var(--g50);color:var(--g700);border-color:var(--g300); }
.topbar-title { font-size:17px;font-weight:600;color:var(--g900);letter-spacing:-.3px; }
.topbar-sub   { font-size:12px;color:var(--g400);margin-top:1px; }
.topbar-right { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }

/* ══ CONTENT ══════════════════════════════════════ */
.page-content { flex:1;padding:24px 28px;overflow-y:auto; }

/* ══ KPI ══════════════════════════════════════════ */
.kpi-row { display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:22px; }
.kpi-card { background:white;border-radius:var(--r-lg);padding:16px 18px;display:flex;align-items:center;gap:14px;border:1px solid var(--g200);box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s; }
.kpi-card:hover { box-shadow:var(--shadow-md);transform:translateY(-1px); }
.kpi-icon { width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.kpi-blue   { background:var(--blue-50);   color:var(--blue); }
.kpi-green  { background:var(--green-lt);  color:var(--green); }
.kpi-amber  { background:var(--amber-lt);  color:var(--amber); }
.kpi-purple { background:var(--purple-lt); color:var(--purple); }
.kpi-label { font-size:11px;color:var(--g400);font-weight:500;margin-bottom:3px; }
.kpi-val   { font-size:22px;font-weight:700;color:var(--g900);font-family:var(--mono);letter-spacing:-.5px; }

/* ══ PANELS ═══════════════════════════════════════ */
.panel { background:white;border-radius:var(--r-lg);border:1px solid var(--g200);box-shadow:var(--shadow-sm);margin-bottom:18px;overflow:hidden; }
.panel-head { display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--g100);gap:10px; }
.panel-title { display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--g700);text-transform:uppercase;letter-spacing:.05em; }
.panel-title svg { color:var(--g400);flex-shrink:0; }
.panel-actions { display:flex;gap:8px;align-items:center;flex-wrap:wrap; }
.panel-toggle { cursor:pointer;user-select:none; }
.panel-toggle:hover { background:var(--g50); }
.chevron { color:var(--g400);transition:transform .2s;flex-shrink:0; }
.collapsible .panel-body { display:none; }
.collapsible.open .panel-body { display:block; }
.collapsible.open .chevron { transform:rotate(180deg); }
.panel-footer { display:flex;align-items:center;gap:10px;padding:14px 18px;border-top:1px solid var(--g100);flex-wrap:wrap; }

/* ══ TABLES ═══════════════════════════════════════ */
.table { width:100%;border-collapse:collapse;font-size:13px; }
.table thead th { padding:10px 14px;font-size:11px;font-weight:600;color:var(--g500);text-transform:uppercase;letter-spacing:.04em;text-align:left;background:var(--g50);border-bottom:1px solid var(--g200);white-space:nowrap; }
.table tbody td { padding:11px 14px;border-bottom:1px solid var(--g100);vertical-align:middle; }
.table tbody tr:last-child td { border-bottom:none; }
.table tbody tr:hover td { background:var(--blue-50); }
.table-scroll { overflow-x:auto; }

/* ══ TABELA DE HORAS — fiel à planilha ══════════ */
.horas-table { min-width:860px; }
.horas-table thead th { padding:6px 5px;font-size:10px;background:var(--navy);color:white;border:1px solid var(--navy-lt);text-align:center; }

/* Colunas — proporção fiel às larguras da planilha */
.th-data  { width:80px; text-align:left !important; }
.th-dia   { width:68px; }
.th-time  { width:56px; }
.th-nodia { width:64px; }
.th-acum  { width:72px; }
.th-flag  { width:24px; }
.th-obs   { min-width:130px; text-align:left !important; }

.horas-table tbody td { padding:2px 4px;border-bottom:0.5px solid var(--g100);vertical-align:middle; }
.td-data { font-family:var(--mono);font-size:12px;padding-left:8px !important; }
.td-dia  { text-align:center;font-size:12px; }
.td-time { padding:2px 3px !important;text-align:center; }
.td-nd,.td-ac { text-align:center !important;font-weight:600; }
.td-obs  { min-width:130px; }

.tr-wknd td { background:#f8f9fb !important; }
.tr-alt  td { background:#fafbfd; }
.tr-hover:hover td { background:var(--blue-50) !important; }
.tr-total td { background:var(--navy) !important;color:white !important;font-weight:700;padding:9px 10px !important; }
.total-label { text-align:right !important;padding-right:16px !important;font-size:11px;text-transform:uppercase;letter-spacing:.05em;opacity:.85; }

.bdr-l { border-left:1px solid var(--g200) !important; }

/* Inputs da tabela */
.inp-t {
  width:70px;font-size:12px;padding:3px 4px;
  border:1px solid var(--g200);border-radius:4px;
  font-family:var(--mono);text-align:center;
  background:white;color:var(--g900);
  transition:border-color .15s,box-shadow .15s;
}
.inp-t:focus { border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1);outline:none; }
.inp-t:disabled { border-color:transparent;background:transparent;color:var(--g300);cursor:not-allowed; }
.inp-flag { cursor:pointer;accent-color:var(--amber);width:15px;height:15px; }
.inp-obs  { width:100%;border:none;background:transparent;font-size:12px;color:var(--g700);padding:2px 4px;outline:none;font-family:var(--font); }
.inp-obs:focus { border-bottom:1px solid var(--g300); }

/* ══ FORMS ════════════════════════════════════════ */
.form-grid-4,.form-grid-3,.form-grid-1 { display:grid;gap:0 16px;padding:18px 20px; }
.form-grid-4 { grid-template-columns:repeat(4,1fr); }
.form-grid-3 { grid-template-columns:repeat(3,1fr); }
.form-grid-1 { grid-template-columns:1fr; }
.field { margin-bottom:14px; }
.field label { display:block;font-size:11px;font-weight:600;color:var(--g500);margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em; }
.field input,.field select { width:100%;padding:8px 11px;border-radius:var(--r-sm);border:1px solid var(--g300);font-size:13px;color:var(--g900);background:white;transition:border-color .15s,box-shadow .15s; }
.field input:focus,.field select:focus { border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1);outline:none; }
.field input:read-only { background:var(--g50);color:var(--g500); }
.field-actions { display:flex;gap:8px;align-items:center;padding-top:6px;grid-column:1/-1; }
.inline-form   { display:flex;align-items:center;gap:6px; }
.sel-compact   { font-size:12px;padding:5px 8px;border-radius:var(--r-sm);border:1px solid var(--g300);background:white;color:var(--g700);cursor:pointer;outline:none; }
.sel-compact:focus { border-color:var(--blue); }

/* ══ BUTTONS ══════════════════════════════════════ */
.btn { display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r-sm);font-size:13px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .15s;text-decoration:none;white-space:nowrap;font-family:var(--font);line-height:1; }
.btn svg { flex-shrink:0; }
.btn-primary { background:var(--navy);color:white;border-color:var(--navy); }
.btn-primary:hover { background:var(--navy-dk);color:white;box-shadow:0 4px 12px rgba(30,58,95,.3); }
.btn-success { background:var(--green);color:white;border-color:var(--green); }
.btn-success:hover { background:#15803d;color:white; }
.btn-ghost { background:transparent;color:var(--g600);border-color:var(--g300); }
.btn-ghost:hover { background:var(--g50);color:var(--g900);border-color:var(--g400); }
.btn-danger-ghost { background:transparent;color:var(--red);border-color:var(--red); }
.btn-danger-ghost:hover { background:var(--red-lt); }
.btn-sm { padding:5px 12px;font-size:12px; }

/* ══ ALERTS ═══════════════════════════════════════ */
.alert { display:flex;align-items:center;gap:8px;padding:11px 16px;border-radius:var(--r);font-size:13px;margin-bottom:16px;border:1px solid; }
.alert-success { background:var(--green-lt);color:#166534;border-color:#bbf7d0; }
.alert-danger  { background:var(--red-lt);  color:#991b1b;border-color:#fecaca; }
.alert-warning { background:var(--amber-lt);color:#92400e;border-color:#fed7aa; }

/* ══ USER CELL ════════════════════════════════════ */
.user-cell { display:flex;align-items:center;gap:10px; }
.avatar { width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--navy-lt),var(--navy));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:white;flex-shrink:0;letter-spacing:-.5px; }
.user-name { font-size:13px;font-weight:500;color:var(--g900); }
.user-role { font-size:11px;color:var(--g400);margin-top:1px; }
.progress-cell { display:flex;flex-direction:column;gap:5px;min-width:110px; }
.progress-bar  { height:4px;background:var(--g100);border-radius:99px;overflow:hidden; }
.progress-fill { height:100%;background:linear-gradient(90deg,var(--blue),var(--navy-lt));border-radius:99px;transition:width .4s; }

/* ══ EMPTY STATE ══════════════════════════════════ */
.empty-state { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 20px;gap:10px;text-align:center; }
.empty-state p { color:var(--g400);font-size:13px; }

/* ══ INFO BOX ══════════════════════════════════════ */
.info-box { display:flex;align-items:flex-start;gap:8px;padding:12px 16px;border-radius:var(--r);background:var(--blue-50);border:1px solid var(--blue-lt);font-size:12px;color:var(--g700);margin-bottom:16px; }
.info-box svg { flex-shrink:0;margin-top:1px;color:var(--blue); }

/* ══ UTILITIES ════════════════════════════════════ */
.mono     { font-family:var(--mono); }
.txt-blue  { color:var(--navy)    !important; }
.txt-green { color:var(--green)   !important; }
.txt-red   { color:var(--red)     !important;font-weight:500; }
.txt-muted { color:var(--g500)    !important; }

/* ══ LOGIN ════════════════════════════════════════ */
.login-bg { background:var(--g100);min-height:100vh;display:flex;align-items:stretch; }
.login-split { display:flex;min-height:100vh;width:100%; }
.login-left { flex:1;background:linear-gradient(145deg,var(--navy-dk) 0%,var(--navy) 60%,#1a3d6b 100%);display:flex;flex-direction:column;justify-content:space-between;padding:40px 48px;position:relative;overflow:hidden; }
.login-left::before { content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none; }
.login-left-inner { position:relative;z-index:1; }
.login-left-footer { position:relative;z-index:1;font-size:11px;color:rgba(255,255,255,.3); }
.login-brand { display:flex;align-items:center;gap:14px;margin-bottom:48px; }
.brand-badge { width:46px;height:46px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:12px;display:flex;align-items:center;justify-content:center; }
.brand-name    { font-size:20px;font-weight:700;color:white; }
.brand-tagline { font-size:12px;color:rgba(255,255,255,.5);margin-top:2px; }
.login-headline { font-size:32px;font-weight:700;color:white;line-height:1.2;margin-bottom:16px;letter-spacing:-.5px; }
.txt-accent { color:#60a5fa; }
.login-desc { font-size:14px;color:rgba(255,255,255,.55);line-height:1.7;margin-bottom:32px;max-width:360px; }
.login-features { display:flex;flex-direction:column;gap:10px; }
.login-feature  { display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.7); }
.feat-dot { width:6px;height:6px;border-radius:50%;background:#60a5fa;flex-shrink:0; }
.login-right { width:420px;background:white;display:flex;align-items:center;justify-content:center;padding:40px 32px;flex-shrink:0; }
.login-form-wrap { width:100%;max-width:340px; }
.login-form-header { margin-bottom:28px; }
.login-form-header h1 { font-size:24px;font-weight:700;color:var(--g900);letter-spacing:-.4px; }
.login-form-header p  { font-size:13px;color:var(--g400);margin-top:4px; }
.login-form .field { margin-bottom:18px; }
.login-form label { display:block;font-size:12px;font-weight:600;color:var(--g600);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em; }
.input-wrap { position:relative; }
.input-icon { position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--g400);pointer-events:none; }
.input-wrap input { width:100%;padding:10px 12px 10px 36px;border:1.5px solid var(--g200);border-radius:var(--r);font-size:14px;color:var(--g900);transition:border-color .15s,box-shadow .15s;background:var(--g50); }
.input-wrap input:focus { border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.1);outline:none;background:white; }
.btn-login { width:100%;padding:12px;background:var(--navy);color:white;border:none;border-radius:var(--r);font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,box-shadow .15s;margin-top:8px;font-family:var(--font); }
.btn-login:hover { background:var(--navy-dk);box-shadow:0 8px 20px rgba(30,58,95,.3); }
.btn-login:active { transform:scale(.98); }

/* ══ RESPONSIVE ═══════════════════════════════════ */
@media(max-width:900px){.login-left{display:none;}.login-right{width:100%;}}
@media(max-width:768px){
  .sidebar{width:56px;}
  .sb-logo-text,.sb-item span,.sb-user-info,.sb-section,.sb-user-name,.sb-user-role{display:none;}
  .sb-logo{justify-content:center;padding:16px 8px;}
  .sb-item{justify-content:center;padding:10px;}
  .sb-user{justify-content:center;}
  .page-content{padding:14px;}
  .topbar{padding:10px 14px;}
  .kpi-val{font-size:18px;}
  .form-grid-4,.form-grid-3{grid-template-columns:1fr 1fr;}
}
@media(max-width:480px){
  .form-grid-4,.form-grid-3{grid-template-columns:1fr;}
  .kpi-row{grid-template-columns:1fr 1fr;}
}
@media print{
  .sidebar,.topbar,.btn,.panel-footer,.no-print{display:none!important;}
  .app-main{margin:0!important;}
  body{background:white!important;}
  .panel{box-shadow:none;border:1px solid #ccc;}
}