@charset "UTF-8";

:root {
  --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;
  /* Small switch palette */
  --pl-eggshell: #F2E6E1;
  --pl-brownish: #A3705F;
  /* Skip gradient */
  --pl-pale-rose: #FFC0B6;
  --pl-salmon-pink: #FF8981;
  --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-fuzzy-brown);  /* #FF6699; */
  --b-color: var(--pl-bluish-green); /* #33CC33; */
  --hi-color: #f5f5f5;  /* #EEEEFF; /* #99CCFF; */
  --sel-color: #fff1bf;   /* #CAE6FF; */

  --nav-height: 54px;
}

* { scrollbar-width: thin; font-optical-sizing: auto; }
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;
}

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

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

.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); }
}

nav ul.days {
  margin: 0; padding: 0;

  li.selected { text-shadow: 0px 2px 3px var(--pl-gray-olive); box-shadow: 2px 2px 4px var(--pl-brownish); transition: box-shadow .2s; }
  /* li.selected { text-shadow: 1px 1px 1px var(--pl-aluminium); } */
  li {
    display: inline flow-root;
    padding: 6px 12px 3px 12px;
    border: 1px solid var(--pl-gray-olive);
    border-radius: 6px;
    color: var(--pl-otter-brown);
    margin-right: 6px;
    cursor: pointer;
    background-color: white;
    transition: box-shadow .2s;
  }
}

.popbox {
  position: fixed;
  z-index: 1000;
}

.nowrap { white-space: nowrap }
.num { text-align: right; }
.smaller { font-size: 85%; }

.subject .wboard { font-size: 16px; padding: 4px 12px; cursor: pointer; }
.bold { font-weight: bold }

.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); }
.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;
}
  
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; }
}

.input-choice,
.input-suggest,
.input-search  /* input-search is in search module only as apr 2025 */
{
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  /* position: relative; /* to get suggestions list on right place */
  input { border: 0 none; outline: 0 none; display: inline-block; flex-grow: 1; box-sizing: border-box; }
}

.input-choice,
.input-suggest,
.input-search,
.inline-choice,
.inline-suggest {
  ul {
    position: absolute; z-index: 9999;
    align-self: flex-start; user-select: none; min-width: 200px; cursor: default; box-sizing: border-box;
    list-style-type: none; margin: 0; padding: 0; background-color: white;
    /*transform: translate(0,100%);*/

    /* NOTE: I may want to move this out of here but then again this is good default */
    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'; }
  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;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; 
    user-select: none;
    vertical-align: center;
  }
  li.known { color: var(--pl-teal-green); }
  li.unknown { color: var(--pl-dark-sand); }

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


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

.toast {
  --toast-color: var(--pl-salmon-pink);
  --toast-height: 90px;
  --toast-width: 350px;
  --toast-time: 3500ms;
  --toast-leave-time: 1500ms;
  --toast-appear-time: 750ms;
  position: fixed;
  box-sizing: border-box;
  height: var(--toast-height);
  width: var(--toast-width);
  padding: 12px 14px;
  font-family: "PT Sans";
  /* box-shadow: px 0px 9px 8px var(--pl-aluminium); */
  background-color: var(--pl-early-dawn);
  color: var(--pl-dark-gray);
  z-index: 999999; /* must be bigger than curtain */
  opacity: 0;
  border-radius: 12px;
  display: grid;
  gap: 8px;
  grid-template-columns: 40px 1fr 30px;
  grid-template-rows: 1fr 2fr;
  grid-template-areas:
    "icon head"
    "icon body";
  /* transition: transform 1.5s, opacity 1.9s; */
  transition: transform var(--toast-leave-time) ease-in, opacity var(--toast-leave-time);
  transform: translateY(var(--slide-y)) translateX(var(--slide-x));

  .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 { transition: transform .7s, opacity 1s; opacity: 1; } */
  &.rise { transform: translateY(0px) translateX(0px); 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 }