/* ============================================================
ui.css — Event Mobility Command jagatud stiilid
Tokenid = design-system.html §6. Mobile first: baas on telefon,
@media (min-width) lisab suurematele ekraanidele.
Lehe-spetsiifiline CSS tuleb PÄRAST seda faili.
============================================================ */

:root{
  /* Värvid */
  --navy:#0B1F33;
  --navy2:#14314d;
  --orange:#FF6B1A;
  --orange-dark:#E0550A;
  --white:#F7F9FB;
  --paper:#fff;
  --slate:#5C6670;
  --border:#E2E8F0;
  --red:#D72638;
  --green:#1A9D5B;
  --amber:#E8A317;
  --blue:#227C9D;
  --purple:#8B5CF6;

  /* Staatuse taustad (heledad) */
  --red-bg:#FDEAEC;   --red-line:#F5B5BD;
  --green-bg:#EAFAF1; --green-line:#A7E3C4;
  --amber-bg:#FDF6E3; --amber-line:#F0DCA0; --amber-ink:#8A6108;
  --blue-bg:#E8F3F7;  --blue-line:#B5D8E4;

  /* Kuju */
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:10px;
  --radius-xl:14px;
  --pill:999px;
  --shadow-sm:0 1px 2px rgba(11,31,51,.05);
  --shadow-md:0 10px 30px rgba(11,31,51,.08);

  /* Vahed (design-system: 4 8 12 16 20 24 32) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;

  /* Tüpograafia */
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fs-xs:12px; --fs-sm:14px; --fs-md:16px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px;

  --max:1000px;
  --tap:44px; /* minimaalne puutesihtmärk */
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{font-family:var(--font);font-size:var(--fs-md);line-height:1.55;color:var(--navy);background:var(--white);}
img,svg,video{display:block;max-width:100%;}
button,input,select,textarea{font:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}
a:hover{text-decoration:underline;}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:2px;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
[hidden]{display:none!important;}

/* ---------- Tüpograafia ---------- */
h1{font-size:var(--fs-2xl);line-height:1.2;font-weight:800;}
h2{font-size:var(--fs-xl);line-height:1.25;font-weight:700;margin-bottom:var(--s2);}
h3{font-size:var(--fs-lg);line-height:1.3;font-weight:700;margin-bottom:var(--s2);}
.lead{color:var(--slate);font-size:var(--fs-md);margin-bottom:var(--s5);}
.muted{color:var(--slate);}
.small{font-size:var(--fs-sm);}
.xs{font-size:var(--fs-xs);}

/* ---------- Paigutus ---------- */
.container{max-width:var(--max);margin:0 auto;padding:0 var(--s4);}
.stack>*+*{margin-top:var(--s4);}
.row{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;}
.grid{display:grid;gap:var(--s4);grid-template-columns:1fr;}
@media (min-width:640px){
  .container{padding:0 var(--s5);}
  .grid-2{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:960px){
  .grid-3{grid-template-columns:repeat(3,1fr);}
  h1{font-size:34px;}
}

/* ---------- Päis ja navigatsioon ---------- */
.app-header{background:var(--navy);color:#fff;position:sticky;top:0;z-index:100;}
.app-header .bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:56px;max-width:var(--max);margin:0 auto;padding:0 var(--s4);}
.brand{display:flex;align-items:center;gap:var(--s2);font-weight:800;font-size:var(--fs-md);}
.brand span{color:var(--orange);}
.brand svg{width:28px;height:28px;}
.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;max-width:var(--max);margin:0 auto;padding:0 var(--s2);}
.tabs::-webkit-scrollbar{display:none;}
.tabs a,.tabs button{display:flex;align-items:center;min-height:var(--tap);padding:0 var(--s3);background:none;border:0;border-bottom:3px solid transparent;color:#fff;opacity:.75;font-size:var(--fs-sm);font-weight:600;white-space:nowrap;cursor:pointer;}
.tabs a:hover,.tabs button:hover{opacity:1;text-decoration:none;}
.tabs [aria-current="page"],.tabs [aria-selected="true"]{opacity:1;color:var(--orange);border-bottom-color:var(--orange);}
.lang-switch{display:flex;gap:2px;}
.lang-switch button{min-height:32px;padding:0 var(--s2);border:1px solid rgba(255,255,255,.3);background:none;color:#fff;border-radius:var(--radius-sm);font-size:var(--fs-xs);font-weight:700;cursor:pointer;}
.lang-switch button[aria-pressed="true"]{background:#fff;color:var(--navy);}

/* ---------- Kaardid ---------- */
.card{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--s4);box-shadow:var(--shadow-sm);}
@media (min-width:640px){.card{padding:var(--s5) var(--s6);}}
.card>h3:first-child,.card>h2:first-child{margin-top:0;}
.card-link{display:block;}
.card-link:hover{text-decoration:none;border-color:var(--orange);}

/* ---------- Nupud (design-system §7) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--tap);padding:0 var(--s5);border:1px solid transparent;border-radius:var(--radius-md);font-size:var(--fs-sm);font-weight:700;line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.btn:hover{text-decoration:none;filter:brightness(.95);}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;filter:none;}
.btn-o{background:var(--orange);color:#fff;}
.btn-g{background:var(--paper);color:var(--navy);border-color:var(--border);}
.btn-n{background:var(--navy);color:#fff;}
.btn-green{background:var(--green);color:#fff;}
.btn-r{background:var(--red);color:#fff;}
.btn-p{background:var(--purple);color:#fff;}
.btn-sm{min-height:32px;padding:0 var(--s3);font-size:var(--fs-xs);}
.btn-block{width:100%;}

/* ---------- Vormid ---------- */
.field{display:flex;flex-direction:column;gap:var(--s1);margin-bottom:var(--s3);}
.field label{font-size:var(--fs-sm);font-weight:600;}
.input,.select,.textarea{width:100%;min-height:var(--tap);padding:10px var(--s3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--paper);font-size:var(--fs-md);}
.textarea{min-height:96px;resize:vertical;}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,107,26,.2);}
.field .hint{font-size:var(--fs-xs);color:var(--slate);}
.field .err{font-size:var(--fs-xs);color:var(--red);}

/* ---------- Tabelid ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);}
.table th{background:var(--white);text-align:left;padding:10px;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--slate);border-bottom:2px solid var(--border);}
.table td{padding:10px;border-bottom:1px solid var(--border);vertical-align:top;}
.table tr:last-child td{border-bottom:0;}

/* ---------- Märgid ja staatused ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:var(--pill);font-size:var(--fs-xs);font-weight:700;border:1px solid transparent;background:var(--white);color:var(--slate);white-space:nowrap;}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;}
.badge.no-dot::before{display:none;}
/* Segmendi staatus: open | closing | safe (suletud) | opening */
.st-open{background:var(--green-bg);color:var(--green);border-color:var(--green-line);}
.st-closing,.st-opening{background:var(--amber-bg);color:var(--amber-ink);border-color:var(--amber-line);}
.st-safe,.st-closed{background:var(--red-bg);color:var(--red);border-color:var(--red-line);}
.st-info{background:var(--blue-bg);color:var(--blue);border-color:var(--blue-line);}

.banner{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s4);border-radius:var(--radius-xl);border:1px solid;font-weight:600;}
.banner strong{display:block;font-size:var(--fs-lg);}

/* ---------- Olekud ---------- */
.empty{padding:var(--s6);text-align:center;color:var(--slate);border:1px dashed var(--border);border-radius:var(--radius-xl);}
.spinner{width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--orange);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.skeleton{background:linear-gradient(90deg,#eef1f4 25%,#f7f9fb 50%,#eef1f4 75%);background-size:200% 100%;animation:shimmer 1.2s infinite;border-radius:var(--radius-md);min-height:16px;}
@keyframes shimmer{to{background-position:-200% 0;}}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:var(--s5);transform:translateX(-50%);max-width:calc(100% - 32px);padding:var(--s3) var(--s4);background:var(--navy);color:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);font-size:var(--fs-sm);z-index:1000;}
.toast.err{background:var(--red);}

/* ---------- Jalus ---------- */
.app-footer{padding:var(--s8) 0;color:var(--slate);font-size:var(--fs-sm);text-align:center;}

/* ===== Eelistused (core/prefs.js): tume teema ja suur tekst ===== */
:root[data-theme="dark"]{
  --navy:#E6EDF5; --navy2:#1C3350; --white:#0F1A26; --paper:#162435; --slate:#A3B1BF; --border:#2B3D52;
  --red-bg:#3A1A20; --red-line:#7A2E3A; --green-bg:#133225; --green-line:#1F5A3D; --amber-bg:#3A2E10; --amber-line:#6E5518; --amber-ink:#F0C860; --blue-bg:#10303C; --blue-line:#1E5468;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 10px 30px rgba(0,0,0,.5);
  color-scheme:dark;
}
:root[data-theme="dark"] .btn-n{background:var(--navy2);color:#fff;}
:root[data-theme="dark"] .btn-g{background:var(--paper);color:var(--navy);border-color:var(--border);}
:root[data-theme="dark"] .input,:root[data-theme="dark"] .select,:root[data-theme="dark"] textarea{background:var(--paper);color:var(--navy);border-color:var(--border);}
:root[data-theme="dark"] .pill{background:var(--navy2);color:var(--navy);}
:root[data-theme="dark"] .chip{background:var(--paper);color:var(--navy);border-color:var(--border);}
/* Tumedas teemas on --navy hele tekstivärv; päis, toast ja muud navy-taustaga pinnad püsivad tumedad */
:root[data-theme="dark"] .app-header{background:#0B1F33;border-bottom:1px solid var(--border);}
:root[data-theme="dark"] .toast{background:#1C3350;}
:root[data-theme="dark"] .lang-switch button[aria-pressed="true"]{background:#E6EDF5;color:#0B1F33;}
:root[data-text="large"] body{zoom:1.15;}