@charset "UTF-8";


:root {
  /* tekstivälja hover/fookus (input.pl); konteiner muudab ainult tokenit, nt valge tabel --focus-border: transparent */
  --focus-bg: #FFF8DD;
  --focus-border: #FFA600;
  --traffic-blue: #00A3CE;
  --traffic-green: #56AC1B;
  --traffic-red:   #EF2B2F;

  --gray-text: #8D92A5;

  /* https://mycolor.space/?hex=%23F7A600&sub=1, https://colors.artyclick.com/color-name-finder/ for names */
  /* valisin nimed ikkagi natuke oma suva järgi sarnaste hulgast, mis rohkem kõnetas, mitte kõige lähedasema */
  --pl: #f7a600;
  /* General gradient */
  --pl-citron: #95A81B;
  --pl-forest: #3B994F;
  --pl-deep-sea: #00816F;
  --pl-dark-aqua: #006572;
  --pl-rhino: #2F4858; /* rgb(47, 72, 88) */
  /* Matching gradient */
  --pl-sahara: #B5A600;
  --pl-leaf: #72A000;
  --pl-tree1: #0F9527;
  --pl-tree2: #008647;
  --pl-rainforest: #007562;
  /* Spot palette */
  --pl-mocha: #9E7C50;
  --pl-champagne: #FFECCC;
  --pl-dark-blue-green: #005248;
  /* Twisted spot palette (#005248 already defined) */
  --pl-light-sky: #C3FCF2;
  --pl-beetle-green: #4B8078; /* pigem hallikas */
  /* Classy palette */
  --pl-black-cow: #504538; 
  --pl-gray-olive: #B7A99A;
  --pl-aqua-green: #00D68F;
  --pl-green-haze: #009D5C;
  /* Cube palette */
  --pl-irish-coffee: #573429;
  --pl-dark-gray: #402E32;
  /* Switch palette */
  --pl-redwood: #571E00;
  --pl-teal-green: #006E60; /* sobib lingiks hästi */
  --pl-platinum: #DFE0DF;
  --pl-athens-gray: #F4F5F7;
  /* Small switch palette */
  --pl-eggshell: #F2E6E1;
  --pl-brownish: #A3705F;
  /* Skip gradient */
  --pl-pale-rose: #FFC0B6;
  --pl-salmon-pink: #FF8981;
  --pl-coral: #F29797;
  --pl-fuzzy-brown: #C25450;
  /* Natural palette (#DFE0DF defined as platinum) */
  --pl-dark-sand: #AA8C66;
  --pl-early-dawn: #FFF8EC;
  /* Matching palette (#504538 too similar to black-cow, #B7A99A is gray-oliv, #B7A99A is gray-olive) */
  --pl-dark-turquoise: #00D8BB; /* türkiis */
  --pl-bluish-green: #009F86;
  /* Squash palette */
  --pl-bright-sky: #00BEF5;
  --pl-neon-pink: #FF34B9;
  /* Grey friends (504538=black-cow, B7A99A=gray-olive) */
  /* Dotting palette (B7A99A=gray-olive, 00D68F=green-haze)  */
  --pl-aluminium: #9AB0A6;
  /* Skip shade gradient (FFC0B6=pale-rose)*/
  --pl-pale-orange: #FFA952;
  --pl-peach: #FFB186;
  /* Threedom */
  --pl-topaz: #00BFC6; /* sinakas-rohekas-hele */
  --pl-bright-lilac: #B755F5;
  /* Hilight palette (DFE0DF=platinum, 402E32=dark-gray) */
  --pl-otter-brown: #5D4118;
  /* Neighbor palette  */
  --pl-quicksand: #BD9284;
  --pl-cocoa: #935A47;
  --pl-woody-brown: #48352F;
  /* Discreet palette (AA8C66=dark-sand, 402E32=dark-gray, 402E32 skipped because almost woody brown)  */
  /* Dust palette (504538=black-cow, B7A99A=gray-olive, 00D68F=aqua-green  */
  /* Collective */
  --pl-dark-mustard: #9A9200;
  --pl-dark-mint-green: #00BC70;
  /* Friend palette (006B60~=teal-green) */
  --pl-reddish-brown: #723800;
  --pl-neptune: #61BAAD;
  /* Pin palette (5D4118=otter-brown, DFE0DF=platinum, 005248=dark-blue-green) */
  /* Shades (723800~=reddish-brown) */
  --pl-dirty-orange: #C87F00;
  --pl-muddy-brown: #9B5A00;
  --pl-chocolate: #4F1500;
  /* Random shades (C27A00~=dirty-orange, 581F00~=redwood, 3D0000~=deep-brown)  */
  --pl-deep-brown: #3F0000;

  --pl-link: #E78F00DE;

  --a-color: var(--pl-coral);
  --b-color: var(--pl-bluish-green); /* #33CC33; */
  --hi-color: #f5f5f5;  /* #EEEEFF; /* #99CCFF; */
  --sel-color: #fff1bf;   /* #CAE6FF; */

  --nav-height: 54px;

  --check-border: #FFFFFF;
  --check-mark: #C2C2C2;
  --check-fill: #FFFFFF;

  --surface: #FFFFFF;
  --text-strong: #000;
  --border: #E8EAED;
  --border-strong: #D9DADB;
  --accent-orange: #FFA600;        /* NB: erineb --pl (#F7A600) väärtusest */
  --accent-orange-hover: #E69500;
}

/* Kerimisribad üle saidi: 4 px, hall pide, läbipaistev rada, nooleta. Kaks mootorit, kaks mehhanismi:
   - Blink/WebKit (Chrome, Safari): ::-webkit-scrollbar annab piksli täpsusega mõõdu ja nupud saab ära võtta.
     Chrome eirab neid reegleid elemendil, millel on standardne scrollbar-width või scrollbar-color, seepärast
     ei tohi neid siin harus seada.
   - Firefox (Gecko) tunneb ainult standardseid omadusi: laius on auto/thin/none ilma pikslita ja nuppude
     peitmist ei ole. thin on lähim; riba jääb ~8 px.
   Haru valib @supports selector(): Gecko ei tunne ::-webkit-scrollbar selektorit ja langeb teise harusse. */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 2px; }
  ::-webkit-scrollbar-button { display: none; }
}
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: #c1c1c1 transparent; }
}
/* Rakenduse kest (shell.js): baaskiri, ülemine <nav>, must-reload märk. Lehtede kuju on lehtede css-ides. */
body, input, select {
  color: var(--pl-dark-gray);
  font: 14px "PT Sans", sans-serif;
}

#must-reload {
  position: fixed;
  top: 12px;
  left: 50%;
  width: 30px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--pl);
  border: 1px solid white;
  cursor: pointer;
  z-index: 199999;
  transform: translateX(-50%);
  .icon {
    font-size: 22px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    animation: spin 6s linear infinite;
  }
}
@keyframes spin { 100% { transform:rotate(360deg); } }

@keyframes navSlide {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Ülemine riba on lehe ainus <nav> (shell.js Navbar). Kõrgus on --nav-height (main.css :root), lehed arvutavad
   oma kõrguse sellest; siin ei ole omaette arvu. Menüüd ja otsingutulemused on popoverid (top layer), riba ise
   vajab ainult sticky asendit lehe sisu kohal. */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  box-sizing: border-box;   /* alumine joon on kõrguse sees */
  background-color: #fff;
  border-bottom: 1px solid #E0E0E0;
  box-shadow: 0px 0px 4px 0px #00000026;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;

  .navbar-left {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .navbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  /* "Uus tellimus" ja sissetulevate kast on üks tervik: jagatud serv, väline raadius ainult otstes */
  .new-order-group {
    display: flex;
    align-items: center;
  }

  .new-order-btn {
    height: 26px;
    box-sizing: border-box;
    background-color: #FFA600;
    border: 1px solid #FFA600;
    border-radius: 4px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;

    /* nupp, nool ja sissetulevate märk on üks tervik: raadius ainult otstes, vahel hele joon */
    &:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgba(255, 255, 255, .5); }
    &:not(:last-child)  { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; }

    &.arrow {
      padding: 5px 4px 5px 2px;
      .msymbol { color: white; font-size: 18px; transition: transform .2s ease; }
      &[menu-open] .msymbol { transform: rotate(180deg); }
    }

    &:hover {
      background-color: #E69500;
      border-color: #E69500;
    }

    .icon-box {
      width: 16px;
      height: 16px;
      background-color: white;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;

      .msymbol {
        font-size: 12px;
        color: #FFA600;
        font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 24;
      }
    }

    .text {
      color: white;
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
    }
  }

  .sieve-badge {
    height: 26px;
    box-sizing: border-box;
    border: 1px solid #FFA600;
    border-radius: 0 4px 4px 0;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    background: #FFF7DE;
    color: var(--pl-dark-gray);
    transition: background-color 0.2s ease;

    &:hover {
      background: #FFEFC2;
    }

    .msymbol {
      font-size: 16px;
      line-height: 1;
    }

    .badge {
      background-color: #FFA600;
      color: white;
      font-size: 10px;
      font-weight: 700;
      padding: 4px 6px;
      border-radius: 4px;
      line-height: 1;
      min-width: 14px;
      text-align: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
  }

  .nav-items {
    display: flex;
    align-items: center;
    gap: 24px;
    user-select: none;
  }

  .nav-item {
    color: #2F2E31;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.2s ease;
    white-space: nowrap;
    padding: 0 8px;
    height: calc(var(--nav-height) - 1px);   /* riba sisukõrgus (ilma alumise jooneta): aktiivse lehe joon jookseb riba alumises servas */
    display: flex;
    align-items: center;
    border-bottom: 3px solid transparent;
    transition: border-bottom 0.2s ease, color 0.2s ease;
    margin-bottom: 2.5px;

    &:hover {
      color: #FFA600;
    }

    &.active {
      color: #FFA600;
      border-bottom: 3px solid #FFA600;
    }

    &[menu-open] .dropdown-arrow {
      transform: rotate(180deg);
    }

    .dropdown-arrow {
      font-size: 16px;
      margin-left: 4px;
      transition: transform 0.2s ease;
    }
  }

  .nav-search {
    display: inline-flex;
    align-items: center;
    height: 24px;
    border-radius: 8px;
    border: 1px solid #BCC7DD;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.03);
    min-width: 180px;
    width: 250px;
    margin: 0;
    padding: 0 6px 0 12px;
    box-sizing: border-box;
    cursor: text;

    /* otsingutulemuse kirje (shell.js resultItem) */
    .canceled { opacity: .6; }

    .id { color: var(--pl-link); margin-right: 12px; }
    .aadr, .badr { font-size: 95%; }
    .aadr::before,
    .badr::before {
      font-family: 'Material Symbols Outlined';
      font-weight: normal;
      font-style: normal;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      text-decoration: none;
      -webkit-font-feature-settings: 'liga';
      -webkit-font-smoothing: antialiased;
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
      user-select: none;
      width: 26px;
      opacity: .6;
    }
    .aadr::before { content: "arrow_upward_alt"; color: var(--a-color); }
    .badr::before { content: "arrow_downward_alt"; color: var(--b-color); }

    .client { flex-grow: 1; }
    .adate { font-size: 90%; color: var(--pl-aluminium); text-align: right; margin-left: 12px; }
    .result-head { display: flex; }
    .onfield { max-width: 380px; text-overflow: ellipsis; overflow: hidden; }

    mark {
      background-color: #FEF3C1;
      color: #333;
      padding: 1px 2px;
      border-radius: 2px;
    }

    .search-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 18px;
      color: #8D92A5;
      font-size: 16px;
      margin-left: 6px;
      flex-shrink: 0;
    }
    /* tekstiga otsingul on luubi asemel tühjendus-X (Input clearable); & on .nav-search ise */
    &:has(.clear-button) .search-icon { display: none; }

    .search-form {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      flex: 1;

      .input-box {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;

        /* tulemuste kast otsinguvälja all, mitte tavalises kirje-loendi kohas */
        ul.input-list {
          position-area: bottom span-right;
          inset: auto;
          max-height: 100%;
          max-width: 100%;
          overflow: hidden auto;
          position-try-fallbacks: none;
        }

        input {
          height: 18px;
          border: 0;
          outline: none;
          background: transparent;
          color: inherit;
          padding: 0;
          margin: 0;
          box-sizing: border-box;
          width: 100%;
          flex: 1;
          border-radius: 0;
        }
      }
    }
  }

  .nav-icon-btn {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    padding: 6px;
    background-color: #E1E4EA;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;

    &:hover {
      background-color: #D1D5DB;
    }

    .msymbol {
      font-size: 16px;
      color: #504639;
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }
  }

  .company-name {
    font-weight: 700;
    color: #2F2E31;
    white-space: nowrap;
  }

  .user-dropdown-trigger {
    height: 24px;
    border-radius: 4px;
    padding: 0 6px 0 10px;
    background-color: #E1E4EA;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background-color 0.2s ease;
    box-sizing: border-box;

    &:hover {
      background-color: #D1D5DB;
    }

    .user-name {
      font-size: 12px;
      font-weight: 700;
      color: #2F2E31;
      white-space: nowrap;
    }

    .dropdown-arrow {
      font-size: 16px;
      color: #504639;
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }
  }
}

/* Navi menüüd on kolm varianti ühest kastist (main.css .menubox): read on siin paksemad ja joonega
   eraldatud, ning kaks paremat menüüd joonduvad ankru parema servaga. Menüüd ei ole navbari sees
   (main.js mountBox tõstab kasti body või dialoogi alla), seepärast on need reeglid eraldi. */
.menubox.nav-menu,
.menubox.user-menu,
.menubox.burger-menu {
  padding: 0;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  animation: navSlide 0.2s ease;

  li.item {
    border-radius: 0;
    border-bottom: 1px solid #F5F5F5;
    transition: background-color 0.2s ease, color 0.2s ease;

    &:last-child { border-bottom: none; }
    &:hover, &:focus { background-color: #F8F9FA; }
  }
}

.menubox.user-menu,
.menubox.burger-menu {
  position-area: bottom span-left;
  margin-top: 6px;
  min-width: 160px;
}

.menubox.nav-menu {
  margin-top: 0;
  min-width: 180px;
  font-weight: 700;

  li.item {
    padding: 12px 16px;
    &:hover, &:focus { color: #FFA600; }
    &.checked { background-color: #FFF3CD; color: #FFA600; }
  }
}

.menubox.user-menu {
  font-size: 12px;
  font-weight: 700;

  li.item {
    padding: 8px 12px;
    gap: 0;

    /* label kannab siin nii teksti kui rea lõpus olevat "vaheta identiteeti" nuppu */
    .label {
      display: flex;
      align-items: center;
      flex: 1;
      align-self: stretch;
    }

    &.checked { background-color: var(--pl-peach); }
  }

  .i {
    width: auto;
    margin-right: 8px;
  }

  .msymbol {
    font-size: 16px;
    color: #504639;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }

  /* "vaheta identiteeti" nupp on rea täiskõrgune ja ulatub rea parema servani: rea padding (8px 12px) neelatakse
     negatiivse margini ja oma paddinguga, nii et klikitav ala on suurem kui ikoon ise */
  .more {
    margin: -8px -12px -8px auto;
    padding: 8px 12px;
    align-self: stretch;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: color 0.2s ease;

    &:hover { color: #FFA600; }
  }
}

.menubox.burger-menu {
  font-weight: 700;

  li.item {
    padding: 12px 16px;
    &:hover, &:focus { color: #FFA600; }
  }
}

/*
.search-results {
  position: fixed;
  top: calc(var(--nav-height) + 12px);
  left: calc(50% - 100px);
  width: 400px;
  padding: 18px;
  background-color: var(--pl-early-dawn);
  border: 1px solid var(--pl-sahara);
  border-radius: 8px;
  z-index: 100;

  & > div {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--pl-eggshell);
    .onfield { max-width: 200px; white-space: nowrap; overflow: hidden; }
  }
}

#is_dev {
  display: none;
  width: 150px;
  position: fixed;
  top:10px;
  left:-50px;
  right:auto;
  transform: rotate(315deg);
  border: 0 none;
  font-size: 24px;
  background: var(--pl-forest);
  color:#fff;
  padding:.25em;
  text-align:center;
  z-index:99999;
}
body.dev {
  #is_dev { display: block }
  #is_dev:hover { opacity: 0; }
}
*/