/* ═══════════════════════════════════════════════════════
   TEKA Kompass — Stylesheet
   ═══════════════════════════════════════════════════════ */

:root {
  --bg:#f0f6fc; --card:#fff; --ink:#2b2b2b; --muted:#6f6f6f; --line:#dde6ee;
  --accent:rgb(47,62,139); --accent-ink:#fff; --link:rgb(47,62,139); --radius:12px;
}
[data-theme="dark"] {
  --bg:#0f1720; --card:#111827; --ink:#e5e7eb; --muted:#9ca3af; --line:#243244;
  --accent:#60a5fa; --accent-ink:#0b1220; --link:#93c5fd;
}

* { box-sizing:border-box; margin:0; padding:0 }
body { background:var(--bg); color:var(--ink); font-family:system-ui,-apple-system,sans-serif; line-height:1.35; min-height:100vh }

/* ═══ HEADER ═══ */
.header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; margin:24px 24px 0; border-radius:12px; background:#2f3e8b; color:#fff }
.header-left { display:flex; align-items:center; gap:12px }
.header-title { font-size:18px; font-weight:700; display:flex; align-items:center }
.back-btn { height:32px; padding:0 14px; border:1px solid rgba(255,255,255,.35); background:0 0; color:#fff; border-radius:8px; cursor:pointer; font-size:13px; font-weight:600; display:none; align-items:center; gap:6px }
.back-btn:hover { background:rgba(255,255,255,.12) }
.theme-btn { height:32px; width:32px; border:1px solid rgba(255,255,255,.35); background:0 0; color:#fff; border-radius:8px; cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center }

/* ═══ LANDING PAGE ═══ */
.landing { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px }
.landing-sub { font-size:15px; color:var(--muted); margin-bottom:40px }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:20px; max-width:1000px; width:100% }
a.nav-card { text-decoration:none; color:inherit; }
.nav-card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px 20px; text-align:center; cursor:pointer; transition:all .25s; display:flex; flex-direction:column; align-items:center; gap:12px; position:relative; overflow:hidden }
.nav-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--accent); opacity:0; transition:opacity .25s }
.nav-card:hover { border-color:var(--accent); box-shadow:0 8px 24px rgba(47,62,139,.12); transform:translateY(-4px) }
.nav-card:hover::before { opacity:1 }
.nav-icon { width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:26px; background:#eef2ff; color:var(--accent); transition:all .25s }
[data-theme="dark"] .nav-icon { background:#1e293b }
.nav-card:hover .nav-icon { background:var(--accent); color:#fff; transform:scale(1.08) }
.nc-title { font-size:15px; font-weight:700; color:var(--ink) }

/* ═══ CLOUD SEARCH ═══ */
.cs-box { max-width:1000px; width:100%; margin-top:32px; text-align:center }
.cs-title { font-size:18px; font-weight:700; color:var(--accent); margin-bottom:6px }
.cs-sub { font-size:13px; color:var(--muted); margin-bottom:16px }
.cs-input-wrap { display:flex; align-items:center; gap:12px; padding:12px 18px; background:var(--card); border:1px solid var(--line); border-radius:24px; box-shadow:0 2px 8px rgba(0,0,0,.06); cursor:text; transition:border-color .2s,box-shadow .2s; max-width:600px; margin:0 auto }
.cs-input-wrap:focus-within { border-color:var(--accent); box-shadow:0 2px 12px rgba(47,62,139,.12) }
.cs-input-wrap input { border:none; background:none; outline:none; font-size:14px; color:var(--ink); width:100%; font-family:inherit }
.cs-input-wrap input::placeholder { color:var(--muted) }

/* ═══ SEARCH PAGE ═══ */
.search-page { display:none; flex-direction:column; gap:14px; padding:14px 24px 24px }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px }
.card h4 { margin:0; font-size:13px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.3px }
.card-hdr { display:flex; justify-content:space-between; align-items:center; cursor:pointer; user-select:none; padding-bottom:4px }
.card-hdr:hover h4 { color:var(--accent) }
.chv { transition:transform .3s; font-size:12px; color:var(--muted) }
.chv.closed { transform:rotate(-90deg) }

/* ═══ FILTER GRID ═══ */
.dg { display:grid; grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); gap:20px; align-items:start; margin-top:14px }
.fb { background:#fafafa; border:1px solid var(--line); border-radius:10px; padding:16px 20px }
[data-theme="dark"] .fb { background:#17202d }
.fb-title { margin:0 0 14px; font-size:13px; text-transform:uppercase; letter-spacing:.5px; font-weight:700; color:var(--accent); border-bottom:2px solid var(--line); padding-bottom:8px }
.fr { display:flex; align-items:center; margin-bottom:10px; gap:14px }
.fr:last-child { margin-bottom:0 }
.fr > label:first-child { flex:0 0 32%; font-size:13px; font-weight:600; color:var(--muted); word-wrap:break-word; padding-right:8px }
.fr > *:not(label:first-child) { flex:1; min-width:0 }

/* ═══ INPUTS ═══ */
.fc { width:100%; padding:7px 11px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font-size:13px; min-height:36px }
.fc:focus { outline:2px solid var(--accent); border-color:transparent }
.cb-w { display:flex; align-items:center; gap:8px; height:36px }
.cb-w input { width:16px; height:16px; accent-color:var(--accent); cursor:pointer }
.cb-w label { cursor:pointer; font-size:13px }
.btn { background:var(--accent); color:var(--accent-ink); border:none; padding:0 20px; border-radius:8px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; height:36px; font-size:13px }
.btn:hover { opacity:.9 }
.f-actions { margin-top:18px; display:flex; align-items:center; border-top:1px solid var(--line); padding-top:14px; flex-wrap:wrap; gap:10px }

/* ═══ MULTISELECT DROPDOWN ═══ */
.msw { position:relative; width:100%; user-select:none }
.mst { width:100%; padding:7px 11px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--muted); font-size:13px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; min-height:36px }
.mst.hv { color:var(--ink) }
.mst::after { content:'▼'; font-size:9px; color:var(--muted); margin-left:8px }
.msd { display:none; position:absolute; top:100%; left:0; min-width:100%; width:max-content; max-width:90vw; background:var(--card); border:1px solid var(--line); border-radius:8px; margin-top:4px; max-height:280px; overflow-y:auto; z-index:100; box-shadow:0 4px 12px rgba(0,0,0,.15); padding:4px 0 }
.msd.open { display:block }
.mo { display:flex; align-items:center; padding:7px 12px; cursor:pointer; font-size:13px; gap:8px; white-space:nowrap; padding-right:20px }
.mo:hover { background:var(--bg) }

/* ═══ TREE NODES ═══ */
.tn { display:flex; align-items:center; padding:5px 10px; cursor:pointer; font-size:13px; gap:8px; white-space:nowrap; padding-right:20px }
.tn:hover { background:var(--bg) }
.tc { margin-left:22px; border-left:1px solid var(--line); display:none }
.tc.exp { display:block }
.tt { width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; border-radius:4px; color:var(--muted); font-size:9px; transition:transform .2s }
.tt.open { transform:rotate(90deg) }
.tt.inv { visibility:hidden; pointer-events:none }
.txb { width:15px; height:15px; accent-color:var(--accent); cursor:pointer; margin:0 }

/* ═══ TECHNICAL DATA TREE ═══ */
.ttc { padding:8px; max-height:400px }
.tt-cls { font-weight:700; margin-top:8px; margin-bottom:4px; color:var(--accent); font-size:11px; text-transform:uppercase; padding-left:4px }
.tt-fw { margin-left:10px; margin-bottom:6px }
.tt-fh { cursor:pointer; font-size:13px; padding:3px 6px; border-radius:4px; white-space:nowrap }
.tt-fh:hover { background:#e2e8f0 }
.tt-vs { display:none; margin-left:12px; border-left:2px solid var(--line); padding-left:8px }
.tt-vs.open { display:block }
.tt-opt { display:flex; align-items:flex-start; gap:6px; font-size:12px; padding:2px 0; white-space:nowrap }
.tt-opt input { margin-top:3px }

/* ═══ COLUMN SELECTOR ═══ */
.cgh { font-weight:700; color:var(--accent); padding:6px 8px; cursor:pointer; background:#f8f9fa; border-bottom:1px solid var(--line); border-top:1px solid var(--line); font-size:12px; display:flex; justify-content:space-between; align-items:center }
.cgh:first-child { border-top:none }
.cgh:hover { background:#e2e8f0 }
.cgi { display:none; padding-left:10px; background:#fff }
.cgi.open { display:block }

/* ═══ TABLE ═══ */
.tr { overflow-x:auto; margin-top:10px; min-height:100px }
table.tbl { width:100%; border-collapse:collapse; font-size:13px }
.tbl td { padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:middle }
.tbl th.sort { padding:9px 10px; border-bottom:1px solid var(--line); background:var(--bg); color:var(--muted); font-weight:700; white-space:nowrap; position:sticky; top:0; cursor:pointer; user-select:none; z-index:10; font-size:12px }
.tbl th.sort:hover { background:#e2e8f0 }
[data-theme="dark"] .tbl th.sort:hover { background:#1f2937 }
.si { margin-left:6px; font-size:9px; color:var(--muted) }
th.asc .si::after { content:'▲'; color:var(--accent) }
th.desc .si::after { content:'▼'; color:var(--accent) }
tr.sumr th { background:#f1f5f9; color:var(--accent); font-weight:800; border-bottom:2px solid var(--line); padding:7px 10px; font-size:12px }

/* ═══ TABLE LINKS & CELL MENUS ═══ */
.tl { color:var(--link); text-decoration:none; font-weight:500 }
.tl:hover { text-decoration:underline }
.tl::after { content:' ↗'; font-size:.8em; opacity:.5 }
.cmw { position:relative; display:inline-block; cursor:pointer }
.cmt { color:var(--link); font-weight:500; border-bottom:1px dashed var(--link) }
.cmt small { font-size:8px; opacity:.6 }
.cmd { display:none; position:absolute; top:100%; left:0; min-width:180px; background:var(--card); border:1px solid var(--line); border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,.2); padding:6px 0; z-index:999 }
.cmd.open { display:block }
.cmi { display:block; padding:7px 14px; color:var(--ink); text-decoration:none; font-size:12px; white-space:nowrap }
.cmi:hover { background:var(--bg); color:var(--accent) }

.loader { text-align:center; padding:30px; color:var(--muted); font-style:italic }

/* ═══ RESPONSIVE ═══ */
@media (max-width:600px) {
  .header { margin:12px 12px 0; padding:12px 14px }
  .search-page { padding:12px 12px 12px }
  .landing { padding:24px 12px }
  .card-grid { grid-template-columns:1fr 1fr; gap:12px }
  .nav-card { padding:20px 14px }
  .nav-icon { width:44px; height:44px; font-size:20px }
  .nc-title { font-size:13px }
  .dg { grid-template-columns:1fr }
  .fr { flex-direction:column; align-items:flex-start; gap:4px }
  .fr > label:first-child { flex:none; width:100% }
  .fr > *:not(label:first-child) { width:100% }
}