/* VF FSM — σκούρο θέμα. Όλα τα χρώματα εδώ (αλλάζουν από το λογότυπο της εταιρείας). */
:root {
  --bg:        #0d1512;
  --surface:   #141f1b;
  --surface-2: #1b2925;
  --line:      #263732;
  --text:      #e6eee9;
  --muted:     #8fa39a;
  --accent:    #f3b23a;   /* ήλιος */
  --accent-ink:#1b1405;
  --green:     #3fbf8f;   /* ενέργεια / ενεργό */
  --warn:      #e8a33c;
  --danger:    #e5675a;
  --link:      #7cc8ff;
  --radius:    10px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 var(--font); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* Κεφαλίδα */
.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 20px; padding-top: max(10px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.mark { width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--accent) 0 38%, transparent 40%),
              conic-gradient(from 0deg, var(--accent) 0 8%, transparent 8% 12.5%, var(--accent) 12.5% 20.5%, transparent 20.5% 25%,
                var(--accent) 25% 33%, transparent 33% 37.5%, var(--accent) 37.5% 45.5%, transparent 45.5% 50%,
                var(--accent) 50% 58%, transparent 58% 62.5%, var(--accent) 62.5% 70.5%, transparent 70.5% 75%,
                var(--accent) 75% 83%, transparent 83% 87.5%, var(--accent) 87.5% 95.5%, transparent 95.5%);
  -webkit-mask: radial-gradient(circle, #000 0 70%, transparent 71%); mask: radial-gradient(circle, #000 0 70%, transparent 71%); }
.search { flex: 1; max-width: 640px; }
.search input {
  width: 100%; padding: 10px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 15px;
}
.search input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); border-color: transparent; }
.me { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--muted); white-space: nowrap; }
.me-name { color: var(--text); }
.role { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.link { background: none; border: 0; color: var(--link); cursor: pointer; padding: 0; }

main { max-width: 1180px; margin: 0 auto; padding: 22px 20px 60px; }

/* Είσοδος */
.login { max-width: 460px; margin: 12vh auto 0; padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.login h1 { margin: 0 0 8px; font-size: 22px; }
.login p { color: var(--muted); margin: 0 0 22px; }
.hint { margin-top: 16px !important; font-size: 13px; }
.hint.err { color: var(--danger); }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn.small { padding: 4px 10px; font-size: 13px; border-radius: 6px; }

/* Αρχική */
.home h2 { font-size: 15px; color: var(--muted); font-weight: 500; margin: 26px 0 10px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stat b { display: block; font-size: 26px; font-weight: 650; }
.stat span { color: var(--muted); font-size: 13px; }

/* Αποτελέσματα */
.results { display: grid; gap: 6px; }
.group-title { margin: 18px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.hit { display: grid; grid-template-columns: minmax(92px, max-content) 1fr auto; gap: 12px; align-items: center;
  padding: 10px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.hit:hover { text-decoration: none; border-color: var(--accent); }
.hit .t { font-weight: 600; }
.hit .s { color: var(--muted); font-size: 13px; }
.code { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.empty { color: var(--muted); padding: 20px 0; }

/* Καρτέλα */
.crumbs { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.card-head h1 { margin: 0; font-size: 24px; }
.badge { font-size: 12px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.badge.active { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.badge.off { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.panel { grid-column: span 6; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; min-width: 0; }
.panel.wide { grid-column: span 12; }
.panel h2 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
dl.kv { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 6px 14px; margin: 0; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }
.missing { color: var(--warn); }
.folder { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.folder:first-of-type { border-top: 0; }
.folder .p { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; flex: 1; }
.subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; }
.chip:hover { border-color: var(--accent); }
ul.links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
ul.links li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vault { font-size: 12px; color: var(--muted); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
.show-m { display: none; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--surface-2); border: 1px solid var(--accent);
  padding: 10px 16px; border-radius: 8px; z-index: 10; }
.loading { color: var(--muted); }

@media (max-width: 760px) {
  .top { flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .me-name { display: none; }
  main { padding: 16px 16px 50px; }
  .panel, .panel.wide { grid-column: span 12; }
  .hit { grid-template-columns: 1fr; gap: 2px; }
  dl.kv { grid-template-columns: 1fr; gap: 2px; }
  dl.kv dd { margin-bottom: 8px; }
  .hide-m { display: none; }
  .show-m { display: block; }
  td, th { padding: 7px 5px; }
}