@charset "UTF-8";

* { font-optical-sizing: auto; }
/* Klaviatuurifookus on üle saidi sama oranž mis välja fookusraam; tekstiväljad (input.pl) näitavad fookust raamiga, mitte outline'iga */
:focus-visible { outline: 2px solid var(--focus-border); outline-offset: 1px; }
html { margin: 0; padding: 0; border: 0 none; }
body {
  box-sizing: border-box;
  /* position: absolute; height: 100%; width: 100%; overflow: auto; */
  padding: 0;
  margin: 0;
  width: 100%; max-width: 100%;
  min-width: 1000px;
  font-size: 14px;
  font-family: "PT Sans", sans-serif;
  color: #212121;
}
::placeholder {
  user-select: none;
}

body:has(.page-fixed) {
  position: fixed;
  top: 0; left: 0; width: 100%;
  height: 100%; max-height: 100%;
}

main.page-fixed {
  position: absolute;
  box-sizing: border-box;
  width: 100%; left: 0; right: 0;
  height: calc(100% - var(--nav-height));
  max-height: calc(100% - var(--nav-height));
  top: var(--nav-height);
  bottom: 0;
}

main.page-spacing {
  box-sizing: border-box;
  padding: 30px 20px;
}

/* Loendileht (filtririba + .table-section > .table-container): main täidab akna navi alt, tabel võtab
   filtririba alt kogu ülejäänud kõrguse ja kerib ise -- body ei keri kunagi, ka madalal aknal */
main.list-page {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--nav-height));
  .table-section { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .table-container { flex: 1; min-height: 0; overflow: auto; }
}

input, button {
  font-family: "PT Sans", sans-serif;
}
table { border-collapse: collapse; }
label, button, menu, nav { user-select: none }

.ignore-mouse { pointer-events: none }
.ignore-mouse-inside * { pointer-events: none }

/* automaatse sünkroniseerimise (partner-tenant) ikoon */
.tenant-sync { color: var(--pl-teal-green); display: inline-flex; align-items: center; }

.colorlegend {
  margin: 0 6px;
  vertical-align: baseline;
  transform: scale(1.7) translate(0, 1px);
  font-weight: bold;
  &.a { color: var(--a-color); }
  &.b { color: var(--b-color); }
}

.nowrap { white-space: nowrap }
.num { text-align: right; }
.smaller { font-size: 85%; }
.row-nr { font-size: 12px; color: #8D92A5; }

.subject .wboard { font-size: 16px; padding: 4px 12px; cursor: pointer; }
.bold { font-weight: bold }
/* hoveril paksem tekst -- vari, mitte font-weight, et laius ei muutuks ja fikseeritud veerus ellipsist ei tekiks */
.hbold:hover { text-shadow: 0.03em 0 0 currentColor, -0.03em 0 0 currentColor; }

.nospin { -moz-appearance: textfield; }
.nospin::-webkit-outer-spin-button,
.nospin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.fatal-error { padding: 28px; border-radius: 6px; font-size: large; color: var(--pl-reddish-brown); border: 1px solid var(--pl-redwood); background: white; }
.link { color: blue; text-decoration: underline; cursor: pointer; }

button.go {
  padding: 6px 12px 4px;
  background-color: var(--pl-champagne);
  border: 1px solid var(--pl);
  color: var(--pl-otter-brown);
  font-family: "PT Sans";
  font-size: 14px;
  border-radius: 3px; 
}
button.go:hover {
  border: 1px solid var(--pl-brownish);
  cursor: pointer; 
}

button.green {
  background-color: var(--pl-dark-mint-green);
  color: var(--pl-chocolate);
  border: 1px solid var(--pl-dark-gray);
  border-radius: 4px;
  /* font-family: "PT Sans"; */
  letter-spacing: .9px;
  font-optical-sizing: none;
  font-size: 14px;
  text-shadow: none;
  padding: 8px 14px;
}

button.action {
  background-color: var(--pl-pale-rose);
  color: var(--pl-irish-coffee);
  border: 1px solid var(--pl-irish-coffee);
  border-radius: 4px;
  /* font-family: "PT Sans"; */
  letter-spacing: .9px;
  font-optical-sizing: none;
  font-size: 14px;
  text-shadow: none;
  padding: 8px 14px;
}

/* Standardnupp (nimekirja "Lisa ..." nupud, modaali sulgemine): hall, ikoon ja/või tekst lastena,
   hover'il oranž. button.primary on vormi kinnitusnupp: oranž ja rasvane. */
button.base, button.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  height: 26px;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #E1E4EA;
  color: #1D1D1D;

  .msymbol { font-size: 1rem; }
  &:hover { background: #FFA600; color: #FFFFFF; }
  &:active { opacity: 0.7; }
}
button.primary {
  background: #FFA600;
  color: #FFFFFF;
  font-weight: bold;
  &:hover { background: #E69500; }
}
button.base:disabled, button.primary:disabled { opacity: 0.4; cursor: default; pointer-events: none; }

/* Split-nupp: põhitegevus vasakul, nool paremal avab menüü -- ainult nool on Menu host, põhinupp töötab ühe
   klikiga. Nupud ühe raadiusega tervikuks, vahel 1 px hele joon. Menüü ise kannab klassi split (.menubox.split
   allpool); grupp on split-button, et klassid ei langeks kokku. */
.split-button {
  display: inline-flex;
  > button { border-radius: 0; }
  > button:first-child { border-radius: 4px 0 0 4px; border-right-width: 0; }   /* raamiga nupul ei tule topeltjoont */
  > button:last-child { border-radius: 0 4px 4px 0; }
  > button.arrow {
    padding: 0 2px 0 0;
    border-left: 1px solid rgba(255, 255, 255, .5);   /* raamita nupul (base, primary) on see ainus vahejoon; raamiga nupp annab oma värvi */
    .msymbol { transition: transform .2s ease; }
    &[menu-open] .msymbol { transform: rotate(180deg); }
  }
}
/* split-nupu menüü on nupu jätk: joondub grupi parema servaga ja read käivad servast servani, ilma vaikimisi
   kasti 4 px polsterduseta ja rea ümarnurkadeta */
.menubox.split {
  position-area: bottom span-left;
  padding: 0;
  li.item { border-radius: 0; padding: 8px 12px; }
  &.up { position-area: top span-left; margin: 0 0 4px; position-try-fallbacks: flip-block; }   /* alati nupu kohal (nt lehe alaserva nupp) */
}

/* pöördumatu tegevus dialoogi jalus: tagasihoidlik, ei konkureeri salvestusnupuga */
button.subtle-action {
  padding: .3rem 0;
  border: 0 none;
  background: transparent;
  color: var(--pl-beetle-green);
  text-decoration: underline;
  cursor: pointer;
}
button.subtle-action:hover { color: var(--pl-fuzzy-brown); }
/* ikoon võtab teksti värvi ja jääb allajoonimisest välja (inline flow-root) */
button.subtle-action .icon { font-size: 18px; margin-right: 4px; vertical-align: middle; }
  
span.emoji {
  cursor: pointer;
  font-size: 14px;
  display: inline flow-root;
  padding: 0 3px;

  a { text-decoration: none }
  a:hover { text-decoration: none }
}

table.g-inline {
  td  { margin: 0; padding: 4px; border: 1px solid var(--pl-eggshell); }
  td:has(input) { padding: 0; }
  td:has(input:focus) { border-bottom: 1px solid transparent; }

  input[type=text] { border: 0 none; border-bottom: 2px solid transparent; padding: 4px; background-color: transparent; }
  input[type=text]:focus { outline: 0 none; border-bottom: 1px dotted var(--pl-fuzzy-brown); padding-bottom: 5px; }
  td.fname input,
  td.lname input { width: 11em }
  td.phone input { width: 10em }
  td.email input { width: 14em }

  select { border: 0 none; }
  select[selected="0"] { color: #999; }

  td.del { border: 0 none; }
  td.del .msymbol {
    display: none;
    height: 16px;
    width: 16px;
    font-size: 16px;
    font-weight: thin;
    padding: 0;
    border-radius: 50%;
    /* border: 1px solid transparent; */
    background-color: transparent;
    cursor: pointer;
    text-align: center;
    vertical-align: center;

    &:hover { color: 1px solid var(--pl-topaz); }
  }
  tr:hover td { background-color: var(--pl-early-dawn); }
  tr:hover td.del { background-color: transparent; }
  tr:hover td.del .msymbol { display: inline flow-root; }
}

/* Väärtuse tühjendus (main.js clearButton): väike hall ring valge X-iga, ilmub ainult väärtusega kastil */
.input-box .clear-button {
  flex: none;
  width: 14px;
  height: 14px;
  margin: 0 4px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #B0B0B0;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  &:hover { background: #F0381D; }
  &:disabled { color: #ccc; cursor: not-allowed; }
}
/* X ise (main.js clearButton): svg, kaks joont currentColor-iga. Paarisarvuline suurus on tahtlik: 14 px ringis
   jääb nihe 3 px täisarvuks, nii ümardab Chrome ringi ja svg-kasti poolel pikslil samas suunas */
button.clear-button svg {
  display: block;
  width: 8px;
  height: 8px;
  path { stroke: currentColor; stroke-width: 2; fill: none; }
}

/* Nimekirjaga või X-iga tekstiväli (main.js textInput): ümbris hoiab sisendit, X-i ja popover-nimekirja.
   Nimekiri ankurdub ümbrisele; korraga on lahti üks, seepärast piisab ühest ankrunimest. */
.input-box {
  display: inline-flex;
  align-items: center;
  &:has([popover]) { anchor-name: --listing; }
  > .currency { margin-left: .25em; user-select: none; }   /* InputMoney rahaühik, ainult väärtusega väljal */

  ul.input-list {
    position-anchor: --listing;
    inset: auto;
    top: anchor(bottom);
    left: anchor(left);
    min-width: anchor-size(width);
    position-try-fallbacks: flip-block;
    margin: 0;
    padding: 0;
    user-select: none; cursor: default; box-sizing: border-box;
    overscroll-behavior: contain;
    list-style-type: none;
    background-color: #FDFDFF;
    border: 1px solid var(--pl-eggshell);
    box-shadow: 3px 3px 6px var(--pl-eggshell);
    border-radius: 4px;
  }
  li { padding: 5px 6px 5px 6px; margin: 0; white-space: nowrap; box-sizing: border-box; }
  li.sel { background-color: var(--pl-champagne); }
  li::before { padding-right: 6px; }
  li.known::before { content: 'beenhere'; }
  /* ühendatud vedaja: beenhere asemel auto (sama kuju mis StatusIcon.delegated) */
  li.connected.known::before { content: 'delivery_truck_speed'; }
  li.unknown::before { content: 'search'; }
  li.unknown::before,
  li.known::before {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline flow-root;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    text-decoration: none;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    user-select: none;
    vertical-align: center;
  }
  li.known { color: var(--pl-teal-green); }
  li.unknown { color: var(--pl-dark-sand); }

  li .msymbol {
    font-size: 20px;
    padding: 3px 3px;
    color: #aaa;
  }
  li .msymbol:hover { color: var(--pl-beetle-green); }
}


@keyframes fadeInOpacity { 0% { opacity: 0; } 100% { opacity: 1 } }

/* Toast (main.js): popover top-layeris, asend ülal keskel; --stack on koht pinus (app.js). Popoveri
   UA-stiil (inset 0, margin auto, ääris, taust) kirjutatakse siin üle. Lahtiolekus grid, suletuna
   hoiab UA display: none -- seepärast on display :popover-open all, mitte klassi peal. */
.toast {
  --toast-color: var(--pl-salmon-pink);
  --toast-height: 90px;
  --toast-width: 350px;
  --toast-time: 3500ms;
  --toast-leave-time: 1500ms;
  --toast-appear-time: 750ms;
  --stack: 0;
  --slide-x: 0px;
  --slide-y: calc(-1 * (10px + var(--toast-height)));   /* tuleb ülevalt sisse ja läheb sinna tagasi */
  inset: auto;
  margin: 0;
  top: calc(10px + var(--stack) * (var(--toast-height) + 10px));
  left: calc(50vw - var(--toast-width) / 2);
  box-sizing: border-box;
  height: var(--toast-height);
  width: var(--toast-width);
  padding: 12px 14px;
  overflow: hidden;
  font-family: "PT Sans";
  background-color: var(--pl-early-dawn);
  color: var(--pl-dark-gray);
  opacity: 0;
  border-radius: 12px;
  gap: 8px;
  grid-template-columns: 40px 1fr 30px;
  grid-template-rows: 1fr 2fr;
  grid-template-areas:
    "icon head"
    "icon body";
  transition: transform var(--toast-leave-time) ease-in, opacity var(--toast-leave-time), top 0.3s ease-out;
  transform: translateX(var(--slide-x)) translateY(var(--slide-y));

  &:popover-open { display: grid; }

  /* ankurdatud (showToast anchor): koht tuleb ankrust ja position-area'st, ilmub paigalt */
  &[toastanchor] {
    --slide-x: 0px;
    --slide-y: 0px;
    top: auto;
    left: auto;
    margin: 6px 0;
    position-area: bottom span-right;
  }

  .head { grid-area: head; font-weight: bold; display: flex; justify-content: flex-end; flex-direction: column; }
  .body { grid-area: body;  }
  .icon { grid-area: icon; display: flex; align-items: center; font-size: 34px; }
/*
  .close { grid-area: close; display: flex; align-items: top; font-size: 22px; color: var(--pl-aluminium); justify-content: flex-end; }
  .close:hover { color: var(--pl-redwood); }
*/

  border: 2px solid var(--toast-color);
  .icon { color: var(--toast-color); }

  &.rise { transform: none; transition: transform var(--toast-appear-time) ease-out, opacity var(--toast-appear-time); opacity: 1; }
  &.succ  { --toast-color: var(--pl-leaf); }
  &.info  { --toast-color: var(--pl-bluish-green); }
  &.warn  { --toast-color: var(--pl-dirty-orange); }
  &.error { --toast-color: crimson; }
}

/****************************/

.ghost { display: block; opacity: 1; height: 0; width: 0; box-sizing: border-box; border: 0 none; outline: 0 none; visibility: hidden; pointer-events: none; }
.flex { display: flex }

/* Tekstiväljad (main.js textInput: Input, InputInt, InputFloat, InputMoney; wrap on textarea). Raam on
   alati olemas ja vaikimisi läbipaistev, et hover ja fookus kasti ei kasvataks; leht võib kuju üle sõita.
   .inliner on tekstisisene väli (aadressiread, kontaktid): sama kuju, väike padding. */
input.pl, textarea.pl {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  outline: none;
  padding: 0;
  box-sizing: border-box;
  field-sizing: content;   /* laius sisu järgi, tühjana placeholderi järgi; leht annab vajadusel width-i */
  transition: background-color 0.15s ease, border-color 0.15s ease;

  &::placeholder { color: rgba(0, 0, 0, 0.4); }
  &:hover, &:focus { background: var(--focus-bg); }
  &:focus { border-color: var(--focus-border); }
  &:disabled, &:disabled:hover { opacity: 0.6; cursor: not-allowed; background: transparent; }
  &.error, &.error:hover, &.error:focus { border-color: #E43C3C; background: rgba(228, 60, 60, 0.12); }
  &.input-int, &.input-float, &.input-money { text-align: right; font-variant-numeric: tabular-nums; padding: 2px 4px; }
  &.math-mode { border-color: var(--pl-topaz); background: rgba(0, 191, 198, 0.04); }   /* mustand on tehe */
  &.inliner { padding: 2px 4px; }
}
textarea.pl { resize: none; }
.input-passwd {
  position: relative;
  display: inline-flex;
  align-items: center;
  input { padding-right: 2rem; }
  button.reveal {
    position: absolute;
    right: 8px;
    border: 0;
    padding: 0;
    background: none;
    color: #8D92A5;
    cursor: pointer;
    display: inline-flex;
    &:hover { color: #1D1D1D; }
    .msymbol { font-size: 1rem; }
  }
}

/* Natiivne <input type=checkbox>, mille välimus on CSS-iga üle joonistatud — .check
   klass lülitab stiili sisse, ülejäänu (checked, disabled, label-klikk) töötab natiivselt.
   Linnuke on Material Symbols 'check' glüüf ::before-iga, nähtav alles :checked korral.
   Värvid tulevad tokenitest, nii et kontekst saab need üle kirjutada ilma reeglit
   kordamata: --check-border (ääris), --check-mark (linnuke + checked-ääris), --check-fill
   (checked-täide). */

.check {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  background:   var(--check-fill);
  /* kui teha border: ..., siis color ei muutu enam muutuja järgi dünaamiliselt igas olukorras */
  border-color: var(--check-border);
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  cursor: pointer;
  vertical-align: middle;
  display: inline-grid;
  place-content: center;
  transition: border-color 0.2s ease, background-color 0.2s ease;

  &::before {
    content: 'check';
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 15px;
    line-height: 1;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
    color: var(--check-mark);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  &:checked {
    &::before { opacity: 1; }
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

/* Lüliti: natiivne <input type=checkbox> nagu .check, aga rööpa ja nupuga. Üks suurus (32×18),
   nupp on ::before ja liigub transform-iga. */
input[type="checkbox"].toggle {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  position: relative;
  flex: none;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: #E1E4EA;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 120ms ease;

  &::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    transition: transform 120ms ease;
  }

  &:checked { background: #1E9F22; }
  &:checked::before { transform: translateX(14px); }

  &:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
}

/* Label-rida: <label> sisaldab checkboxi või lülitit + teksti, klikk togeldab natiivselt. */
label:has(> .check, > .toggle) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.panel {
  /* paneeli taust on üldiselt hall -- muudame checkboxi värve */
  --check-border: var(--pl);
  --check-mark: var(--pl);
  --check-fill: #FFFFFF; /* see küll kordab :root reeglit, aga anyways... */
}

/* Dialog (main.js): modaalne <dialog>, kõigil sama kuju -- hall paneel, päis tiitli ja X-iga, sisu,
   jalus. Leht annab class-iga ainult laiuse ja oma ridade paigutuse. Paneel on hall, seega checkboxi
   värvid nagu .panel-il. Lahtine dialoog on flex-tulp; suletuna hoiab brauser display: none. */
dialog.pl {
  --check-border: var(--pl);
  --check-mark: var(--pl);
  --check-fill: #FFFFFF;
  min-width: 446px;
  padding: 1rem;
  border: none;
  border-radius: 0.6rem;
  background: #F4F5F7;
  color: inherit;
  outline: none;   /* fookus võib sattuda kestale endale (klikk mittefookustatavale sisule), raam kasti ümber ei ütleks midagi */
  overscroll-behavior: contain;
  animation: fadeInOpacity ease .22s;

  &[open] { display: flex; flex-direction: column; gap: 1rem; }
  &::backdrop { background-color: #263E5080; backdrop-filter: blur(4px); }

  > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    h1 { margin: 0; font-size: 1.25rem; font-weight: 600; color: #1D1D1D; }
  }
  > .focus-sink { position: absolute; width: 0; height: 0; outline: none; }   /* avamise fookuse püüdja (main.js Dialog), paigutust ei mõjuta */
  > main { display: flex; flex-direction: column; gap: 1rem; }
  > footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; }   /* kinnitusnupp paremal; vasakule minev lisategevus võtab margin-right: auto */

  /* töö pooleli (main.js once): sisu ja jalus ei võta klikke, X jääb */
  &[busy] {
    cursor: progress;
    > main, > footer { pointer-events: none; }
    > footer button { opacity: 0.6; }
  }

  /* paljas kest (Dialog ilma title'ita): kuju annab sisu ise, kest on ainult top-layer + taust + sulgemine */
  &.bare {
    min-width: 0;
    max-width: 100vw;
    max-height: 100dvh;
    padding: 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    &[busy] > * { pointer-events: none; }
  }
}

/* sama kaitse dialoogist väljas: nupp ise kannab busy atribuuti */
button[busy] { pointer-events: none; opacity: 0.6; }

/* Kinnitusdialoog (main.js ConfirmDialog): kitsam kui vormidialoog; tühistav nupp esile tõstetud, kinnitav lingina */
dialog.pl.confirm {
  min-width: 0;
  max-width: 26rem;
  .confirm-message { line-height: 1.45; }
  .confirm-no {
    padding: .4rem .9rem;
    border: 1px solid var(--pl-teal-green);
    border-radius: 4px;
    background: var(--pl-teal-green);
    color: #FFF;
    cursor: pointer;
  }
  .confirm-yes {
    padding: .4rem .5rem;
    border: 0 none;
    background: transparent;
    color: var(--pl-beetle-green);
    text-decoration: underline;
    cursor: pointer;
  }
  .confirm-yes:hover { color: var(--pl-fuzzy-brown); }
}

/* Tip: hõljukkast (main.js setupTip). Ankur käib atribuudi, mitte inline-stiili kaudu: sihtmärgi
   oma stiili kirjutab mithril üle ja kasti oma kirjutab tip ise igal näitamisel puhtaks.
   Sama atribuut on kahes rollis -- sihtmärk annab ankru nime, kast kasutab seda -- ja need kaks ei
   tohi kokku sattuda: kui kast saaks ka anchor-name'i, oleks nimi kahe elemendi peal ja kast
   ankurduks iseendale.
   Nimed on loetletud, sest tüübiga attr() (`attr(tipanchor type(<custom-ident>))`) on ainult
   Chromes; loetelu pikkus on main.js-i LAYERS. Kihte tekib pesastamisest (tip interaktiivse tipi
   sees), seega neli on rohkem kui vaja. */
/* Toast: sama võte, loendi pikkus on main.js-i TOAST_ANCHORS */
:not(.toast)[toastanchor="0"] { anchor-name: --toast0; }
:not(.toast)[toastanchor="1"] { anchor-name: --toast1; }
:not(.toast)[toastanchor="2"] { anchor-name: --toast2; }
:not(.toast)[toastanchor="3"] { anchor-name: --toast3; }

.toast[toastanchor="0"] { position-anchor: --toast0; }
.toast[toastanchor="1"] { position-anchor: --toast1; }
.toast[toastanchor="2"] { position-anchor: --toast2; }
.toast[toastanchor="3"] { position-anchor: --toast3; }

:not(.tipbox)[tipanchor="0"] { anchor-name: --tip0; }
:not(.tipbox)[tipanchor="1"] { anchor-name: --tip1; }
:not(.tipbox)[tipanchor="2"] { anchor-name: --tip2; }
:not(.tipbox)[tipanchor="3"] { anchor-name: --tip3; }

.tipbox[tipanchor="0"] { position-anchor: --tip0; }
.tipbox[tipanchor="1"] { position-anchor: --tip1; }
.tipbox[tipanchor="2"] { position-anchor: --tip2; }
.tipbox[tipanchor="3"] { position-anchor: --tip3; }

.tipbox {
  position: fixed;
  inset: auto;
  margin: 6px 0 0;
  position-area: bottom span-right;
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
  max-width: 400px;
  padding: 8px 12px;
  border: 1px solid #E1E5E9;
  border-radius: 8px;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease, overlay .12s allow-discrete, display .12s allow-discrete;
}

.tipbox:popover-open { opacity: 1; }
@starting-style { .tipbox:popover-open { opacity: 0; } }

.tipbox.text { width: max-content; overflow-wrap: anywhere; }   /* lühike tekst ühel real, pikem (ka tühikuta veateade) murdub max-width juures, kerimisriba ei tule */
.tipbox.pop { pointer-events: auto; }   /* interaktiivne: sees saab klikkida ja sisestada */

/* Menu: hõljuv menüü (main.js setupMenu). Ankur käib atribuudi kaudu samal põhjusel mis Tip-il --
   kutsuja inline-stiili kirjutab mithril üle. Nimed on tipi omadest eraldi: ankru-nimi elab elemendi
   küljes ja jagatud loendis satuksid korraga lahti olev tip ja menüü samale nimele. Loendi pikkus on
   main.js-i LAYERS; kihte tekib alammenüüdest.
   Menüüd omav element saab lahtiolekus atribuudi menu-open -- sealt saab kutsuja css noole pöörata
   või rea esile tõsta, ilma et ta ise avatust jälgiks. */
/* menüü host (Menu paneb talle atribuudi menu) on klikitav nagu link */
[menu] { cursor: pointer; }

:not(.menubox)[menuanchor="0"] { anchor-name: --menu0; }
:not(.menubox)[menuanchor="1"] { anchor-name: --menu1; }
:not(.menubox)[menuanchor="2"] { anchor-name: --menu2; }
:not(.menubox)[menuanchor="3"] { anchor-name: --menu3; }
:not(.menubox)[menuanchor="4"] { anchor-name: --menu4; }

.menubox[menuanchor="0"] { position-anchor: --menu0; }
.menubox[menuanchor="1"] { position-anchor: --menu1; }
.menubox[menuanchor="2"] { position-anchor: --menu2; }
.menubox[menuanchor="3"] { position-anchor: --menu3; }
.menubox[menuanchor="4"] { position-anchor: --menu4; }

.menubox {
  position: fixed;
  inset: auto;
  margin: 4px 0 0;
  position-area: bottom span-right;
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
  min-width: 10rem;
  max-width: min(24rem, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  padding: 4px;
  border: 1px solid #E1E5E9;
  border-radius: 8px;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  opacity: 0;
  transition: opacity .12s ease, overlay .12s allow-discrete, display .12s allow-discrete;
}

.menubox:popover-open { opacity: 1; }
@starting-style { .menubox:popover-open { opacity: 0; } }

/* Alammenüü ankurdub reale, mitte kastile, ja rida on kastis 5px (padding + ääris) sissepoole.
   Sama 5 tuleb siin mõlemas suunas tagasi anda: siis joondub alammenüü esimene rida vanema reaga ja
   kasti vasak serv jääb vanema paremast servast 2px kaugusele. */
.menubox.sub {
  margin: -5px 0 0 7px;
  position-area: right span-bottom;
  position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
}

.menubox .menu-list { margin: 0; padding: 0; list-style: none; }

.menubox li.item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 5px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.menubox li.item:hover,
.menubox li.item:focus { outline: none; background: var(--pl-athens-gray); }
.menubox li.item.checked { background: #FFF8DD; }
.menubox li.item.danger { color: #C0392B; }
.menubox li.item.disabled { color: #9AA0A6; font-style: italic; cursor: default; }
.menubox li.item.disabled:hover { background: none; }

.menubox li.sep { height: 1px; margin: 4px 6px; background: #E1E5E9; }
.menubox li.free { padding: 6px 10px; }

.menubox li .label { flex: 1 1 auto; }
/* ikoonivöönd tekib ainult siis, kui menüüs on vähemalt üks ikoon -- siis on ka ikoonita read joondatud */
.menubox .icons li .i { display: flex; flex: none; align-items: center; justify-content: center; width: 18px; }
.menubox li .i .msymbol { font-size: 18px; }
.menubox li .i img { width: 18px; height: 18px; }
.menubox li .sub-arrow { flex: none; margin-right: -4px; color: #9AA0A6; font-size: 18px; }

/* suur menüü: rohkem õhku ja suurem kiri */
.menubox.big { font-size: 15px; }
.menubox.big li.item { gap: 10px; padding: 9px 12px; }
.menubox.big .icons li .i { width: 22px; }
.menubox.big li .i .msymbol { font-size: 22px; }
.menubox.big li .i img { width: 22px; height: 22px; }

/* plain: raam kutsuja enda sisule, ilma menüürea paddingu ja miinimumlaiuseta */
.menubox.plain { min-width: 0; padding: 0; }

/* Hilite (main.js). Üks reegel kogu rakenduse peale, sest ::highlight() nime ei saa CSS-is
   genereerida ja kõik piirkonnad annavad vahemikud samasse registrikirjesse. */
::highlight(search-highlight) {
  background-color: #FFF3CD;
  color: #856404;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 600;
}