/* ===== THEME TOKENS ===== */
:root{
  /* Dark (default) */
  --bg:#101418;
  --fg:#e8f0f2;
  --muted:#9fb3c8;
  --card:#161b22;
  --line:#22343f;
  --input:#0f1318;
  --accent:#2dd4bf;
}
:root[data-theme="light"]{
  --bg:#f6f7fb;
  --fg:#0f172a;
  --muted:#475569;
  --card:#ffffff;
  --line:#e5e7eb;
  --input:#ffffff;
  --accent:#0ea5e9;
}

/* ===== BASE ===== */
*{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg)}
a{color:var(--accent);text-decoration:none}

/* Button visual styles (colors only; sizing is in pro.css) */
.btn{
  background:var(--accent);
  color:#fff;             /* make .btn text white */
  display:inline-block;
  border-radius:.5rem;
  border:0;
  cursor:pointer;
}
.who{margin:0 .5rem}

/* ===== TOPBAR & SIDEBAR ===== */
.topbar{display:flex;align-items:center;gap:.75rem;background:var(--card);padding:.6rem 1rem;position:sticky;top:0;border-bottom:1px solid var(--line);z-index:10}
.topbar .spacer{flex:1}
.logo{font-size:1.2rem}
.icon-btn{background:transparent;border:0;color:var(--fg);font-size:1.15rem;cursor:pointer;padding:.25rem .4rem;border-radius:.4rem}
.icon-btn:hover{background:rgba(127,127,127,.12)}

.sidebar{position:fixed;top:3.2rem;left:0;width:240px;background:var(--card);height:calc(100% - 3.2rem);padding:1rem;overflow:auto;border-right:1px solid var(--line)}
.sidebar.hidden{display:none}
.sidebar a{display:block;padding:.45rem 0;border-bottom:1px solid var(--line);color:var(--fg)}

/* ===== CONTENT ===== */
.container{max-width:1000px;margin:1rem auto;padding:0 1rem}
h2{margin:.2rem 0 1rem}
form label{display:block;margin:.6rem 0}
input,select,textarea{width:100%;padding:.5rem;border-radius:.4rem;border:1px solid var(--line);background:var(--input);color:var(--fg)}
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:.55rem;text-align:left;vertical-align:top}
.ok{color:#38e28d}.error{color:#ff6b6b}

/* Small screens */
@media (max-width: 768px){
  .sidebar{width:80%;max-width:320px}
}
.logo-wrap{display:flex;align-items:center}
.logo-img{height:22px; width:auto; display:block}

/* Admin dashboard KPI cards */
.dashboard-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }

.stat-card, .kpi, .metric {
  background: var(--card) !important;
  color: var(--fg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-image: none !important;
}
.stat-card *, .kpi *, .metric * { color: inherit !important; }
.stat-card .muted, .kpi .muted, .metric .muted { color: var(--muted) !important; }

/* Keep sidebar links stacked and allow pushing bottom items */
.sidebar { height: 100vh; }
.sidebar .navlist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}
.sidebar .navlist .grow { flex: 1 1 auto; }

.sidebar .profile-item {
  border-top: 1px solid var(--line, #e5e7eb);
  padding-top: 8px;
  margin-top: 8px;
}

/* Optional active styling */
.sidebar li.active > a { background: var(--card, #e5eef9); border-radius: 8px; }

/* status badges */
.status {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
  border-radius: 0.6rem;
  font-weight: 600;
  text-transform: capitalize;
}
.status.submitted { background: #f0ad4e; color: #fff; }
.status.approved  { background: #5cb85c; color: #fff; }
.status.rejected  { background: #d9534f; color: #fff; }
.status.signed    { background: #0275d8; color: #fff; }

/* --- Print-friendly view --- */
@media print {
  .topbar, #sidebar, .filters, .btn, .icon-btn, hr { display: none !important; }
  .container, main.container, .table-wrap, table.table { width: 100% !important; margin: 0 !important; }
  a[href]:after { content: ""; }
  body { background: #fff !important; color: #000 !important; }
  table.table th, table.table td { border-color: #888 !important; }
}

/* only add separators inside lists marked .with-dividers */
.sidebar nav .with-dividers li + li { border-top: 1px solid var(--sidebar-divider, #e5e7eb); }
@media (prefers-color-scheme: dark) {
  .sidebar nav .with-dividers li + li { border-color: rgba(255,255,255,.15); }
}

/* tidy spacing for groups */
.sidebar nav ul { margin: 0 0 10px; padding: 6px 0; }
.sidebar nav li a { display:block; padding:10px 12px; }
.btn.danger { background:#e74c3c; color:#fff; }
.btn.danger:hover { filter:brightness(.95); }

.avatar-160{ width:160px; height:160px; object-fit:cover; border-radius:9999px; display:block; border:2px solid var(--line) }
.profile-head .btn{ padding:.45rem .8rem }

/* password field toggle */
.pw-field { position: relative; display: block; }
.pw-toggle {
  position: absolute; right: .6rem; top: 50%;
  transform: translateY(-50%);
  border: 0; background: transparent; padding: .25rem;
  cursor: pointer; line-height: 0; color: var(--muted, #6b7280);
}
.pw-toggle svg { width: 20px; height: 20px; }
.pw-toggle:focus { outline: 2px solid var(--accent, #2dd4bf); border-radius: .5rem; }

/* === Mobile-friendly utilities === */
img, video, iframe { max-width:100%; height:auto; }
.container, .wrapper, .card, .panel { max-width:100%; overflow-wrap:anywhere; }

/* Desktop: thin buttons; Mobile: larger tap targets (sizing in pro.css) */
button, .btn, input[type="submit"] { min-height:auto; }
@media (max-width: 600px){
  button, .btn, input[type="submit"] { min-height:40px; }
}

/* Global table horizontal scrolling utility */
.table-responsive{
  width:100%;
  overflow-x:auto;
}
.table-responsive > table{
  min-width:720px; /* so columns don't squash too hard */
}


/* Fallback for pages without wrapper */
@media (max-width:1100px){
  .table, .tbl, table.table{
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* Helpers */
.nowrap{ white-space: nowrap; }
.break-any{ word-break: break-all; }

/* Comfortable inner spacing for all cards (visual spacing only) */
.card { padding: 1.5rem; }

/* ===== mobile tweaks ===== */
@media (max-width: 1024px){
  main.container{
    margin-left:0 !important;
    padding:1rem .75rem;
  }
  /* sidebar becomes overlay, not pushing content */
  .sidebar{
    width:82%;
    max-width:320px;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
  }
  main.shifted{
    margin-left:0 !important;
  }
  /* topbar text too long */
  .topbar .who{
    display:none;
  }
  .brand{
    font-size:1rem;
  }
}
@media (max-width: 480px){
  header.topbar{
    gap:.4rem;
  }
  main.container{
    padding:.75rem .5rem;
  }
}

/* Professional polish overrides — non-breaking, no DB dependencies */
:root{
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --shadow-sm: 0 6px 16px rgba(0,0,0,.18);
  --focus: 0 0 0 3px color-mix(in oklab, var(--accent) 50%, transparent);
}

/* Layout spacing */
.topbar{padding:.65rem 1rem}
.topbar .brand{letter-spacing:.5px;font-weight:730}
.logo-img{height:32px;width:auto;display:block}

/* Sidebar */
.sidebar{width:280px;box-shadow:var(--shadow-sm)}
.sidebar nav ul{padding:.4rem .75rem}
.sidebar nav li{margin:.2rem 0}
.sidebar nav a{display:flex;align-items:center;gap:.55rem;padding:.6rem .8rem;border-radius:.75rem}
.sidebar nav li.active a{
  background:color-mix(in oklab, var(--accent) 17%, transparent);
  color:var(--fg);
  outline:1px solid color-mix(in oklab, var(--accent) 40%, transparent)
}

/* Cards & panels (visual chrome only; padding lives in style.css) */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm)
}
/* Remove inner padding to avoid double-padding with .card in style.css */
.card .card-hd{border-bottom:1px solid var(--line);font-weight:650; padding:0}
.card .card-bd{padding:0}

/* Tables (no scroll utilities here; those live in style.css) */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden
}
.table th,.table td{padding:.7rem .8rem;border-bottom:1px solid var(--line);vertical-align:middle}
.table thead th{
  background:color-mix(in oklab, var(--card) 80%, var(--fg) 5%);
  text-align:left;
  font-weight:650
}
.table tbody tr:hover{background:color-mix(in oklab, var(--accent) 9%, transparent)}
.table tbody tr:last-child td{border-bottom:none}

/* Forms */
input[type="text"],input[type="email"],input[type="password"],input[type="date"],select,textarea{
  background:var(--input);
  color:var(--fg);
  border:1px solid var(--line);
  padding:.65rem .75rem;
  border-radius:.7rem;
  outline:none;
  width:100%
}
input:focus,select:focus,textarea:focus{
  box-shadow:var(--focus);
  border-color:color-mix(in oklab, var(--accent) 50%, var(--line))
}
label{font-size:.92rem;color:var(--muted)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:900px){.form-row{grid-template-columns:1fr}}

/* Buttons — thinner, keep existing colors from style.css */
.btn,
button,
input[type="submit"]{
  border-radius:.55rem;
  padding:.28rem .70rem;      /* thinner vertically */
  font-weight:600;
  transition:transform .05s ease, filter .2s ease;
  min-height:auto;
}
.btn:hover,
button:hover,
input[type="submit"]:hover{ filter:brightness(1.04) }
.btn:active,
button:active,
input[type="submit"]:active{ transform:translateY(1px) }
.btn:focus,
button:focus,
input[type="submit"]:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
/* keep touch targets reasonable only on phones */
@media (max-width:600px){
  .btn, button, input[type="submit"]{ min-height:40px; }
}

/* Utilities */
.container{max-width:1180px;margin:0 auto;padding:1rem}
.grid{display:grid;gap:1rem}
.grid.cols-2{grid-template-columns:1fr 1fr}
@media (max-width:1100px){.grid.cols-2{grid-template-columns:1fr}}

/* Alerts */
.alert{
  padding:.75rem 1rem;
  border-radius:.75rem;
  border:1px solid var(--line);
  background:color-mix(in oklab, var(--accent) 12%, transparent)
}

/* Fix hamburger alignment consistency */
#hamburger{font-size:1.2rem;line-height:1;height:38px;width:38px;border-radius:.6rem}

/* Login/Register shell */
.auth-shell{
  max-width:860px;margin:2rem auto;display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)
}
.auth-shell .art {
  flex: 1;
  background: url("politeknik.jpg") center center / cover no-repeat;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;

}
.auth-shell .pane{background:var(--card);padding:2rem}
@media (max-width:900px){
  .auth-shell{grid-template-columns:1fr}
  .auth-shell .art{display:none}
}

/* Table actions row */
.table .actions{display:flex;gap:.5rem;flex-wrap:wrap}
.badge{padding:.2rem .55rem;border-radius:.6rem;border:1px solid var(--line);font-size:.78rem}
.status-approved{background:rgba(34,197,94,.12)}
.status-pending{background:rgba(234,179,8,.12)}
.status-rejected{background:rgba(239,68,68,.12)}

/* Align PDF buttons under a "PDF" column when present */
.table td.pdf-cell a.btn{display:inline-block}

/* Mobile-friendly utilities unique to pro.css (non-overlapping with style.css) */
img, video, iframe { max-width:100%; height:auto; }
.container, .wrapper, .card, .panel { max-width:100%; overflow-wrap:anywhere; }

body.auth {
  background: linear-gradient(135deg, #dff4fb 0%, #eaf8ff 100%);
}