/* assets/css/thema.css */
/* ============================================================
   SHOVEL THEMA v1.0 (User-first, mobile-first)
   - Light/Dark
   - Accent switch
   - Safe area aware
   ============================================================ */

:root{
  --accent: #4361ee;
  --accent-2: #3a0ca3;

  --success:#06d6a0;
  --warning:#ffd166;
  --danger:#ef476f;

  --bg:#f3f5f9;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;

  --card:#ffffff;
  --card2:#f8fafc;

  --shadow: 0 10px 25px -5px rgba(0,0,0,.06), 0 8px 10px -6px rgba(0,0,0,.02);

  --sidebar-w: 270px;
  --bottom-h: 86px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);

  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;

  --tap: transparent;
}

html[data-theme="dark"]{
  --bg:#0b1220;
  --surface:#0f172a;
  --surface-2:#111c33;
  --text:#e5e7eb;
  --muted:#9aa4b2;
  --border:#1f2a44;
  --card:#0f172a;
  --card2:rgba(255,255,255,.03);
  --shadow: 0 14px 34px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: var(--tap);
  overflow-x:hidden;
  min-height:100vh;
}

/* Layout */
.app-shell{ display:flex; min-height:100vh; }
.main-content{
  margin-left: var(--sidebar-w);
  width: calc(100% - var(--sidebar-w));
  padding: 28px;
  padding-top: calc(18px + var(--safe-top));
  padding-bottom: calc(var(--bottom-h) + 18px + var(--safe-bot));
}

/* Card system */
.card{
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: 22px;
  margin-bottom: 18px;
}

.card-title{
  margin:0;
  font-size: 16px;
  font-weight: 850;
  letter-spacing: -.2px;
}

.subtle{
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

/* Top hero */
.hero{
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 75%, #0000) 0%, color-mix(in srgb, var(--accent-2) 65%, #0000) 100%);
  color:white;
  border-radius: var(--radius-xl);
  padding: 18px 18px;
  box-shadow: 0 12px 30px rgba(67,97,238,.25);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.hero-left{ display:flex; align-items:center; gap:12px; }
.avatar{
  width:42px; height:42px;
  border-radius: 14px;
  background: rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  font-weight: 900;
}
.hero h1{
  margin:0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.3px;
}
.hero p{ margin:2px 0 0 0; opacity:.9; font-size: 12px; font-weight:650; }
.hero-actions{ display:flex; gap:10px; align-items:center; }
.chip{
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
  color:white;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 850;
  cursor:pointer;
}

/* Stats */
.stats-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(190px,1fr));
  gap: 14px;
}
.stat{
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: 18px;
}
.stat .k{ font-size: 11px; color: var(--muted); font-weight: 850; text-transform:uppercase; letter-spacing:.6px; }
.stat .v{ margin-top: 8px; font-size: 24px; font-weight: 950; letter-spacing:-.8px; display:flex; align-items:center; gap:8px; }
.stat .note{ margin-top: 6px; font-size: 12px; color: var(--muted); font-weight: 650; }
.v.success{ color: var(--success); }
.v.warning{ color: var(--warning); }
.v.danger{ color: var(--danger); }

/* Inputs */
label{ display:block; margin-bottom: 8px; font-size: 12px; color: var(--muted); font-weight: 850; }
input:not([type="checkbox"]), select{
  width:100%;
  padding: 14px 14px;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, #ffffff 12%);
  color: var(--text);
  font-size: 15px;
  font-weight: 650;
  outline:none;
  appearance:none; -webkit-appearance:none;
}
input:not([type="checkbox"]):focus, select:focus{
  border-color: color-mix(in srgb, var(--accent) 75%, var(--border) 25%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  background: var(--surface);
}
.btn-primary{
  width:100%;
  border:none;
  padding: 16px;
  border-radius: 16px;
  background: var(--accent);
  color:white;
  font-weight: 950;
  cursor:pointer;
  box-shadow: 0 12px 25px color-mix(in srgb, var(--accent) 25%, transparent);
}
.btn-primary:active{ transform: scale(.99); }

/* Check containers */
.check{
  display:flex;
  gap:12px;
  align-items:center;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  cursor:pointer;
  transition:.15s;
}
.check input{ width:22px; height:22px; accent-color: var(--accent); }
.check.on{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border) 45%);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface) 90%);
}
.check .t{ display:flex; flex-direction:column; gap:2px; }
.check .t b{ font-size: 13px; }
.check .t small{ font-size: 11px; color: var(--muted); font-weight:650; }

/* Table */
.table-wrap{ overflow-x:auto; border-radius: 14px; }
table{ width:100%; border-collapse:separate; border-spacing:0; }
th{
  text-align:left;
  font-size: 11px;
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing:.6px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td{
  padding: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  white-space: nowrap;
  font-weight: 650;
  color: color-mix(in srgb, var(--text) 88%, var(--muted) 12%);
}
tr:last-child td{ border-bottom:none; }

/* Badge */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}
.badge.normal{ background: color-mix(in srgb, var(--border) 55%, transparent); color: var(--muted); }
.badge.weekend{ background: color-mix(in srgb, #fd7e14 22%, transparent); color: #fd7e14; }
.badge.fast{ background: color-mix(in srgb, #7209b7 22%, transparent); color:#b5179e; }

/* Privacy blur */
.blur-effect{ filter: blur(10px); pointer-events:none; user-select:none; transition:.2s; }

/* Navbar shared */
.sidebar{
  width: var(--sidebar-w);
  position: fixed;
  top:0; left:0; height:100vh;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 18px;
  padding-top: calc(18px + var(--safe-top));
  display:flex;
  flex-direction:column;
  z-index: 100;
}
.brand{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-bottom: 14px;
}
.brand h2{
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 20px;
  font-weight: 950;
  color: var(--accent);
}
.brand small{
  color: var(--muted);
  font-weight: 750;
}

.nav-btn, .nav-link{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: transparent;
  color: color-mix(in srgb, var(--text) 88%, var(--muted) 12%);
  font-weight: 850;
  cursor:pointer;
  text-decoration:none;
  transition:.12s;
}
.nav-btn:hover, .nav-link:hover{
  background: color-mix(in srgb, var(--border) 35%, transparent);
}
.nav-btn.active, .nav-link.active{
  background: var(--accent);
  color:white;
  box-shadow: 0 10px 18px color-mix(in srgb, var(--accent) 22%, transparent);
}
.nav-footer{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.logout-btn{
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 18%, transparent);
}
.logout-btn:hover{
  background: color-mix(in srgb, var(--danger) 16%, transparent);
}

/* Mobile header + bottom nav */
.mobile-top{
  display:none;
  position: fixed;
  top:0; left:0; right:0;
  z-index: 999;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  padding: 12px 14px;
  padding-top: calc(12px + var(--safe-top));
  align-items:center;
  justify-content:space-between;
}
.mobile-top .left{
  display:flex; align-items:center; gap:10px;
}
.mobile-title{
  font-weight: 950; letter-spacing:-.3px;
}
.icon-btn{
  width:36px; height:36px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.bottom-nav{
  display:none;
  position: fixed;
  left:0; right:0; bottom:0;
  height: var(--bottom-h);
  padding-bottom: var(--safe-bot);
  background: var(--surface);
  border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  z-index: 999;
  box-shadow: 0 -10px 25px rgba(0,0,0,.05);
  align-items:flex-start;
  justify-content:space-around;
  padding-top: 10px;
}
.bottom-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size: 11px;
  font-weight: 850;
  color: color-mix(in srgb, var(--muted) 95%, var(--text) 5%);
  text-decoration:none;
}
.bottom-item i{
  font-size: 20px;
  padding: 6px 14px;
  border-radius: 14px;
}
.bottom-item.active{
  color: var(--accent);
}
.bottom-item.active i{
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

/* Scrollbar — tema uyumlu */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 35%, transparent); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 55%, transparent); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(148,163,184,.18); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.32); }
html[data-theme="midnight"] ::-webkit-scrollbar-thumb { background: rgba(148,163,184,.14); }
html[data-theme="midnight"] ::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.28); }
/* Firefox */
/* Global scrollbar — tüm temalar */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 30%, transparent) transparent; }
html[data-theme="dark"] * { scrollbar-color: rgba(148,163,184,.18) transparent; }
html[data-theme="midnight"] * { scrollbar-color: rgba(148,163,184,.14) transparent; }

/* Webkit scrollbar (Chrome, Edge, Safari) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,.22); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.4); }
::-webkit-scrollbar-corner { background: transparent; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(148,163,184,.18); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.35); }
html[data-theme="midnight"] ::-webkit-scrollbar-thumb { background: rgba(148,163,184,.14); }
html[data-theme="midnight"] ::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.3); }

/* Responsive */
@media (max-width: 860px){
  .sidebar{ display:none; }
  .mobile-top{ display:flex; }
  .bottom-nav{ display:flex; }
  .main-content{
    margin-left:0;
    width:100%;
    padding: 14px;
    padding-top: calc(62px + var(--safe-top));
    padding-bottom: calc(var(--bottom-h) + 14px + var(--safe-bot));
  }
}