/* =========================================================
   CC app.css (sanitized)
   - Keeps the existing look & layout
   - Removes conflicting/duplicate blocks and broken fragments
   - Theme variables (dark + light) live here
   ========================================================= */

/* THEME VARS START */
:root{
  --bg:#0b1220;
  --card:#111a2e;
  --text:#e9eefc;
  --muted:#9fb0d0;
  --line:#223053;
  --accent:#6ea8ff;
  --danger:#ff7a7a;
  --topbar-bg:#000000;
}

body.light-mode{
  --bg:#f6f5f2;
  --card:#ffffff;
  --text:#1f2933;
  --muted:#6b7280;
  --line:#ddd8cf;
  --accent:#2563eb;
  --danger:#c0392b;
  --topbar-bg:#ffffff;
}
/* THEME VARS END */

*{ box-sizing:border-box; }

html, body{
  height:100%;
}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:linear-gradient(180deg,#070b14, var(--bg) 35%, #070b14);
  color:var(--text);
  transition: background 0.3s, color 0.3s;
}

/* Make sure light mode background is really light (matches your existing intention) */
body.light-mode{
  background:var(--bg) !important;
  color:var(--text) !important;
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ filter:brightness(1.08); }

code{
  background:#0a1020;
  padding:2px 6px;
  border:1px solid var(--line);
  border-radius:8px;
}

/* Container */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:20px;
}

/* Topbar / Nav */
.topbar{
  position:sticky;
  top:0;
  background:var(--topbar-bg, rgba(7,11,20,.85));
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
  z-index:10;
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 20px;
}

.brand{
  display:flex;
  align-items:baseline;
  gap:12px;
}

.brand-link{
  font-weight:800;
  font-size:18px;
  color:var(--text);
  text-decoration:none;
}

.brand-sub{
  color:var(--muted);
  font-size:13px;
}

.nav{
  display:flex;
  gap:14px;
  align-items:center;
}

.nav a{
  color:var(--text);
  opacity:.92;
  font-weight:700;
}
.nav a:hover{
  opacity:1;
}

.linkbtn{
  background:none;
  border:none;
  color:var(--accent);
  cursor:pointer;
  font:inherit;
  padding:0;
}

/* Logo switching */
.logo-light{ display:none; }
body.light-mode .logo-dark{ display:none; }
body.light-mode .logo-light{ display:inline; }

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  margin:14px 0;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* Keep your fixed overview/header mechanics */
.overview-header-fixed-absolute{
  position: fixed;
  top: 100px; /* adjust if needed */
  left: 0;
  width: 100vw;
  z-index: 150;
  background: var(--bg, #0b1220);
  display: flex;
  justify-content: center;
}
.overview-header-card{
  margin-bottom: 0;
  background: var(--card, #111a2e);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.12);
  padding-bottom: 0;
  width: 100%;
  max-width: 1100px;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
}
.bulk-toolbar-absolute{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 0 10px 24px;
}
.entries-scroll-area-absolute{
  margin-top: 230px; /* adjust if needed */
  max-height: calc(100vh - 240px);
  overflow-y: auto;
}
.entries-scroll-area{
  max-height: 70vh;
  overflow-y: auto;
}
.sticky-inside-area{
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--card, #111a2e);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.sticky-bulk-toolbar{
  position: sticky;
  top: 56px; /* adjust if needed */
  z-index: 100;
  background: var(--card, #111a2e);
  padding: 10px 0 10px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.bulk-toolbar{
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--card, #111a2e);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Headings */
h1,h2,h3{ margin:0 0 10px 0; }
h1{ font-size:22px; }
h2{ font-size:16px; color:var(--text); opacity:.95; }

/* Forms */
.form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

label{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--muted);
  font-size:13px;
}

/* Inputs (dark) */
input, select, textarea{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#0a1020;
  color:var(--text);
  outline:none;
  transition: background 0.3s, color 0.3s;
}

/* Inputs (light) */
body.light-mode input,
body.light-mode select,
body.light-mode textarea{
  background: #ffffff !important;
  color: #1f2933 !important;
  border: 1px solid #ddd8cf !important;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.06);
}

input:focus, select:focus, textarea:focus{
  border-color: rgba(110,168,255,.65);
  box-shadow: 0 0 0 4px rgba(110,168,255,.12);
}

body.light-mode input:focus,
body.light-mode select:focus,
body.light-mode textarea:focus{
  border-color: #2563eb !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.14) !important;
}

textarea{ resize:vertical; }

/* Layout grids */
.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:900px){
  .grid2{ grid-template-columns:1fr; }
}

.grid1{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

/* Alerts */
.alert{
  background:rgba(255,122,122,.12);
  border:1px solid rgba(255,122,122,.35);
  color:var(--text);
  padding:10px;
  border-radius:14px;
}

/* Buttons */
.btn{
  display:inline-block;
  background:linear-gradient(180deg, rgba(110,168,255,.25), rgba(110,168,255,.12));
  border:1px solid rgba(110,168,255,.45);
  color:var(--text);
  padding:10px 14px;
  border-radius:14px;
  font-weight:700;
  cursor:pointer;
}

.btn:hover{ filter:brightness(1.05); }

.btn-ghost{
  background:transparent;
  border:1px solid var(--line);
  color:var(--text);
}

.form-actions{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  margin-top:14px;
}

/* Tables */
.table{
  width:100%;
  border-collapse:collapse;
}
.table th, .table td{
  border-bottom:1px solid var(--line);
  padding:10px 8px;
  text-align:left;
  vertical-align:top;
}

.pill{
  display:inline-block;
  background:#0a1020;
  border:1px solid var(--line);
  padding:2px 8px;
  border-radius:999px;
  color:var(--muted);
  font-size:12px;
}

/* Help text */
.help{
  color:var(--muted);
  font-size:12px;
  margin-top:6px;
}

.textarea-wide{
  width:100%;
  min-height:110px;
}

/* Checkbox rows */
.checkbox-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
.checkbox-row{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--text);
}
.checkbox-row input{ margin:0; }

/* Date input */
.datewrap{
  display:flex;
  gap:10px;
  align-items:center;
}
.datebtn{
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
}
.datebtn:hover{ filter:brightness(1.08); }

/* Footer */
.footer{
  border-top:1px solid var(--line);
  padding:20px 0;
  color:var(--muted);
}

/* =========================================================
   LIGHT MODE READABILITY FIX (ONLY light-mode overrides)
   - Do NOT touch dark mode
   ========================================================= */

body.light-mode .card{
  background:#ffffff !important;
  border:1px solid var(--line) !important;
  box-shadow:0 10px 22px rgba(20,30,60,.10) !important;
  color:var(--text) !important;
}

body.light-mode .topbar{
  background:rgba(255,255,255,.88) !important;
  border-bottom:1px solid var(--line) !important;
}

body.light-mode .brand-link,
body.light-mode .nav a{
  color:var(--text) !important;
  opacity:1 !important;
}

body.light-mode .nav a:hover{
  filter:none !important;
  text-decoration:none !important;
  opacity:.85 !important;
}

/* Buttons */
body.light-mode .btn{
  background:#f2f4f7 !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
}
body.light-mode .btn:hover{
  filter:none !important;
  background:#e9edf3 !important;
}
body.light-mode .btn-ghost{
  background:transparent !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
}

/* Links + logout button */
body.light-mode a,
body.light-mode .linkbtn{
  color:var(--accent) !important;
}

/* Pills / small tags */
body.light-mode .pill{
  background:#f2f4f7 !important;
  color:var(--muted) !important;
}

/* Table */
body.light-mode .table th,
body.light-mode .table td{
  border-bottom:1px solid var(--line) !important;
}

/* Form controls */
body.light-mode input,
body.light-mode select,
body.light-mode textarea{
  background:#ffffff !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
}

body.light-mode input:focus,
body.light-mode select:focus,
body.light-mode textarea:focus{
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.14) !important;
}