* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg:#0f172a; --panel:#111c33; --line:#25324d; --ink:#e8edf7; --muted:#93a2c0;
  --accent:#2f7de1; --accent2:#1c5fb8;
  --open:#1e5fa8; --open-b:#2f7de1;
  --pending:#b7791f; --approved:#1f7a45; --closed:#1a2540;
}
body{ font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--ink); line-height:1.45; }

.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 20px; background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand h1{ font-size:20px; letter-spacing:.5px; }
.logo, .logo-placeholder{ width:42px; height:42px; border-radius:10px; }
.logo-placeholder{ background:linear-gradient(135deg,var(--accent),var(--accent2)); display:grid; place-items:center; font-weight:800; font-size:22px; }
.authbar{ display:flex; gap:8px; align-items:center; }
.user-tag{ color:var(--muted); font-size:14px; }

.btn{ background:var(--accent); color:#fff; border:none; padding:9px 16px; border-radius:8px; cursor:pointer; font-size:14px; font-weight:600; }
.btn:hover{ background:var(--accent2); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn.ghost{ background:transparent; border:1px solid var(--line); color:var(--ink); }
.btn.ghost:hover{ background:#182642; }
.btn.small{ padding:6px 12px; font-size:13px; }
.btn.danger{ background:#8a1f2b; }
.btn.ok{ background:#1f7a45; }

main{ max-width:1100px; margin:0 auto; padding:24px 20px 60px; }
.view.hidden, .tabpane.hidden, .modal.hidden, .hidden{ display:none; }
.lead{ color:var(--muted); margin-bottom:20px; font-size:16px; }
.hint{ color:var(--muted); font-size:13px; margin:8px 0 14px; }
.hint.inline{ margin:0; }

.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:24px; cursor:pointer; transition:.15s; }
.card:hover{ transform:translateY(-3px); border-color:var(--accent); }
.card-ico{ font-size:40px; margin-bottom:10px; }
.card h2{ font-size:20px; margin-bottom:6px; }
.card p{ color:var(--muted); font-size:14px; }

.viewhead{ display:flex; align-items:center; gap:14px; margin-bottom:8px; }
.viewhead h2{ font-size:22px; }

.row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
label{ font-size:14px; color:var(--muted); display:flex; gap:6px; align-items:center; }
select, input{ background:#0c1526; color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:14px; }
select:focus, input:focus{ outline:none; border-color:var(--accent); }

/* Grid */
.grid-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.grid{ display:grid; min-width:760px; }
.gcell{ border:1px solid var(--line); padding:0; height:34px; display:grid; place-items:center; font-size:12px; user-select:none; }
.gcell.head{ background:#0c1526; font-weight:700; color:var(--muted); position:sticky; }
.gcell.daylabel{ background:#0c1526; font-weight:600; color:var(--ink); justify-content:flex-start; padding-left:10px; font-size:12px; white-space:nowrap; }
.slot{ cursor:pointer; transition:.1s; }
.slot.closed{ background:var(--closed); color:#3d4b6b; }
.slot.open{ background:var(--open); color:#d6ffe6; }
.slot.open:hover{ background:var(--open-b); }
.slot.pending{ background:var(--pending); color:#fff; cursor:pointer; }
.slot.approved{ background:var(--approved); color:#fff; cursor:pointer; }
.slot.sel{ outline:3px solid #fff; outline-offset:-3px; }
.slot.taken{ background:#8a1f2b; color:#fff; cursor:not-allowed; font-weight:700; font-size:11px; letter-spacing:.5px; }

.legend{ display:flex; gap:16px; font-size:13px; color:var(--muted); margin:6px 0 12px; flex-wrap:wrap; }
.legend .sw{ display:inline-block; width:14px; height:14px; border-radius:3px; vertical-align:-2px; margin-right:5px; }
.sw.closed{ background:var(--closed); } .sw.open{ background:var(--open); }
.sw.pending{ background:var(--pending); } .sw.approved{ background:var(--approved); }

.bookbar{ position:sticky; bottom:0; display:flex; justify-content:space-between; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin-top:14px; }
#selCount{ color:var(--muted); font-size:14px; }

/* tabs */
.tabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.tab{ background:transparent; border:none; color:var(--muted); padding:10px 16px; cursor:pointer; font-size:15px; border-bottom:2px solid transparent; }
.tab.active{ color:var(--ink); border-bottom-color:var(--accent); }

/* list */
.list{ display:flex; flex-direction:column; gap:10px; }
.res-item{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.res-item .who{ font-weight:600; }
.res-item .meta{ color:var(--muted); font-size:13px; margin-top:2px; }
.res-item .acts{ display:flex; gap:8px; align-items:center; }
.badge{ font-size:12px; padding:3px 8px; border-radius:20px; }
.badge.pending{ background:var(--pending); color:#fff; }
.badge.approved{ background:var(--open); color:#fff; }
.badge.rejected{ background:#4a2530; color:#e5a3ad; }

/* modal */
.modal{ position:fixed; inset:0; background:rgba(4,8,18,.7); display:grid; place-items:center; z-index:50; padding:16px; }
.modal-box{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px; width:100%; max-width:420px; position:relative; }
.modal-box h3{ margin-bottom:16px; }
.form{ display:flex; flex-direction:column; gap:10px; }
.form.narrow{ max-width:320px; }
.modal-close{ position:absolute; top:14px; right:16px; background:none; border:none; color:var(--muted); font-size:24px; cursor:pointer; }
.modal-err{ color:#ff8b8b; font-size:13px; min-height:16px; }
.muted{ color:var(--muted); font-size:13px; }
.muted a{ color:var(--accent); }
.modal-actions{ display:flex; gap:8px; margin-top:16px; }
.info-row{ display:flex; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); font-size:14px; }
.info-row b{ min-width:80px; color:var(--muted); font-weight:600; }

.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#1b2a48; border:1px solid var(--line);
  color:var(--ink); padding:12px 20px; border-radius:10px; z-index:80; font-size:14px; }

/* pilot merkezli eklemeler */
.pilot-card .card-ico{ font-size:34px; }
.pilotform{ max-width:420px; }
.catbox{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; padding:4px 0; }
.catbox .catlbl{ color:var(--muted); font-size:14px; }
.catbox label{ color:var(--ink); gap:5px; }
.catbox input[type=checkbox]{ width:16px; height:16px; accent-color:var(--accent); }
h3{ margin-bottom:12px; font-size:17px; }