/* Modern light theme with subtle shadows and good spacing */
:root{
  --bg:#f5f7fb;
  --text:#0f172a;
  --muted:#64748b;
  --card:#ffffff;
  --line:#e2e8f0;
  --brand:#0ea5e9;
  --brand-600:#0284c7;
  --primary:#2563eb;
  --primary-600:#1d4ed8;
  --success:#16a34a;
  --warn:#f59e0b;
  --danger:#ef4444;
  --dup:#fff7e6;

  --radius:12px;
  --shadow: 0 12px 28px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.06);

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body.tk{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  line-height:1.5;
}

/* Header / nav */
.tk-header{
  position:sticky;top:0;z-index:10;
  background:#ffffffc0; backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.tk-header-inner{
  max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;
}
.tk-brand{
  font-weight:800;letter-spacing:.2px;text-decoration:none;color:var(--brand-600);
}
.tk-nav{display:flex;gap:12px}
.tk-nav-link{
  color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px;transition:.15s;
}
.tk-nav-link:hover{color:var(--text);background:#f1f5f9}
.tk-nav-link.danger{color:var(--danger)}

/* Main page container */
.tk-container{
  max-width:100%;
  margin:18px auto;
  padding:0 20px;
  display:flex;
  justify-content:center;   /* default for most pages */
  align-items:flex-start;
}

/* Viewer: make the editor span full width and cancel left/right padding so the sidebar sits at the window edge */
.page-wide{
  flex:1 1 auto;           /* occupy full width of the container */
  margin:0 -20px;          /* negate tk-container left/right padding */
  width:calc(100% + 40px); /* keep content full width after negative margins */
}

/* Layout */
.editor-grid{
  display:grid;
  grid-template-columns:280px minmax(0,1fr); /* fixed sidebar + fluid editor */
  gap:18px;
  width:100%;
}
@media (max-width:960px){.editor-grid{grid-template-columns:1fr}}

.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
}
.panel.sidebar{position:sticky;top:84px;height:fit-content}
.panel.main{min-height:480px}
.panel.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel-title{font-weight:700;margin-bottom:8px}
.divider{height:1px;background:var(--line);margin:12px 0}

/* Sidebar */
.emp-list{list-style:none;margin:0;padding:0;max-height:52vh;overflow:auto}
.emp-list li{margin:0}
.emp-list li a{display:block;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--text)}
.emp-list li.active a{background:#eaf2ff;border:1px solid #c9dbff}
.emp-list li a:hover{background:#f7fafc}
.emp-list .empty{color:var(--muted);padding:6px 8px}
.actions .btn{margin-bottom:8px}
.w-full{width:100%}

/* Controls */
.label{color:var(--muted);margin-right:8px}
.input,.select{
  background:#fff;border:1px solid var(--line);color:var(--text);
  padding:8px 10px;border-radius:10px;outline:none;min-width:90px;
  transition:.15s border-color, .15s box-shadow;
}
.input:focus,.select:focus{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(147,197,253,.35)}
.inline{display:inline-flex;gap:10px;align-items:center}

/* Buttons */
.btn{
  appearance:none;border:1px solid var(--line);background:#f8fafc;color:var(--text);
  padding:10px 14px;border-radius:12px;text-decoration:none;cursor:pointer;
  transition:.15s filter, .15s transform;
}
.btn:hover{filter:brightness(1.02)}
.btn.primary{background:linear-gradient(180deg,#60a5fa,#3b82f6);color:white;border-color:#3b82f6}
.btn.primary.sm{padding:8px 12px;border-radius:10px}
.btn.danger{background:linear-gradient(180deg,#fca5a5,#ef4444);color:white;border-color:#ef4444}

/* Alerts */
.alert{border-radius:12px;padding:12px}
.alert.success{background:#ecfdf5;border:1px solid #a7f3d0}
.alert.warn{background:#fff7ed;border:1px solid #fed7aa}
.mb-8{margin-bottom:8px}
.mt-8{margin-top:8px}

/* Totals */
.panel.totals{
  display:grid;grid-template-columns:repeat(6,1fr);gap:12px;
}
.total{background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:10px}
.t-label{color:var(--muted);font-size:12px;margin-bottom:4px}
.t-val{font-weight:800}

/* Table */
.table-wrap{overflow:auto}
.table{
  width:100%;border-collapse:separate;border-spacing:0;
  font-size:14px;
}
.table thead th{
  position:sticky;top:0;background:#f1f5f9;border-bottom:1px solid var(--line);
  text-align:left;padding:10px;font-weight:700;
}
.table td{
  border-bottom:1px solid var(--line);
  padding:8px 10px;vertical-align:middle;
}
.table .num{text-align:right}
.table .mono{font-family:var(--mono)}
.table.compact td,.table.compact th{padding:8px}
.table tr.total td{font-weight:700;border-top:2px solid var(--line)}
.dup-row{background:var(--dup)}
.table input.input{width:110px}
.table .select{width:130px}

/* Utility */
.mr-8{margin-right:8px}