/* ============================================================
   Välek Tuus OÜ — Roundcube (Elastic skin) kohandatud stiil
   Laetakse layout.html kaudu peale skini enda CSS-i,
   nii ei lähe see Roundcube uuenduste käigus kaduma.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --vt-black:#060909;
  --vt-dark:#0a0f0a;
  --vt-card:#0e1510;
  --vt-card2:#121a12;
  --vt-border:#1c2b1c;
  --vt-border2:#243424;
  --vt-green:#256318;
  --vt-green-mid:#2f7a1e;
  --vt-glow:#4dc435;
  --vt-white:#edf2ed;
  --vt-grey:#7a8f7a;
  --vt-grey-light:#aabcaa;
  --vt-fd:'Bebas Neue',sans-serif;
  --vt-fb:'Outfit',sans-serif;
  --vt-fm:'JetBrains Mono',monospace;
}

/* ---------- Üldine baas ---------- */
html, body{
  background:var(--vt-black) !important;
  color:var(--vt-white) !important;
  font-family:var(--vt-fb) !important;
}
a{ color:var(--vt-glow) !important; }
a:hover{ color:var(--vt-white) !important; }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:var(--vt-dark); }
::-webkit-scrollbar-thumb{ background:var(--vt-border2); border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:var(--vt-green-mid); }

/* ---------- Peamine paigutus / tööriistariba ---------- */
#layout, #layout-content, .content-panel, .box-inner{
  background:var(--vt-black) !important;
}
.header, .header-title, .toolbar, .searchbar, .listing-wrapper, .footer, .statusbar{
  background:var(--vt-dark) !important;
  border-color:var(--vt-border) !important;
  color:var(--vt-grey-light) !important;
}
.header-title, h1, h2, h3{
  font-family:var(--vt-fd) !important;
  letter-spacing:.03em;
}

/* Nupud */
.btn, button, .toolbar a.button, .listing-actions a{
  font-family:var(--vt-fb) !important;
  border-radius:6px !important;
  transition:all .25s cubic-bezier(.4,0,.2,1) !important;
}
.btn-primary, .mainmenu .active, .listing li.selected, tr.message.selected, tr.selected td{
  background:var(--vt-green) !important;
  border-color:var(--vt-green-mid) !important;
  color:var(--vt-white) !important;
}
.btn-primary:hover{
  background:var(--vt-green-mid) !important;
  box-shadow:0 0 16px rgba(77,196,53,.35) !important;
}

/* Sõnumite/kaustade nimekiri */
.listing, .message-list, table.messagelist{
  background:var(--vt-black) !important;
  color:var(--vt-grey-light) !important;
}
.listing li, .message-list tr, table.messagelist tr{
  border-color:var(--vt-border) !important;
}
.listing li:hover, .message-list tr:hover{
  background:rgba(37,99,24,.12) !important;
}
.message-list tr.unread{
  color:var(--vt-white) !important;
  font-weight:600 !important;
}

/* Sisendväljad üldiselt (seaded, otsing jne) */
input, select, textarea, .form-control{
  background:var(--vt-card2) !important;
  border:1px solid var(--vt-border2) !important;
  color:var(--vt-white) !important;
  font-family:var(--vt-fb) !important;
  border-radius:6px !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus{
  border-color:var(--vt-glow) !important;
  box-shadow:0 0 0 3px rgba(77,196,53,.18) !important;
  outline:none !important;
}

/* ============================================================
   SISSELOGIMISLEHT
   ============================================================ */
body.task-login,
#layout-content.selected.no-navbar{
  position:relative;
  min-height:100vh;
  background:
    radial-gradient(ellipse 60% 60% at 70% 30%, rgba(37,99,24,.20) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 10% 80%, rgba(37,99,24,.10) 0%, transparent 65%),
    linear-gradient(160deg,#060909 0%,#08100a 55%,#060909 100%) !important;
  display:flex !important;
  align-items:flex-start;
  justify-content:center;
  padding-top:8vh;
}

/* peen taustavõrgustik, samasugune nagu kodulehe heros */
body.task-login::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(rgba(37,99,24,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,24,.06) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 40%, #000 0%, transparent 100%);
  pointer-events:none;
  z-index:0;
}

/* Päris logo (valeklogos.png, konfigureeritud skin_logo kaudu) */
#logo{
  display:block;
  margin:0 auto 1.6rem;
  max-height:64px;
  max-width:220px;
  object-fit:contain;
  filter:drop-shadow(0 0 18px rgba(77,196,53,.25));
  animation:vtFadeDown .7s cubic-bezier(.22,1,.36,1) both;
}

#login-form{
  position:relative;
  z-index:1;
  width:100%;
  max-width:400px;
  margin:0 auto;
  padding:2.4rem 2.2rem 2rem;
  background:var(--vt-card) !important;
  border:1px solid var(--vt-border) !important;
  border-radius:14px;
  box-shadow:0 24px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(77,196,53,.06) inset;
  animation:vtRise .6s cubic-bezier(.22,1,.36,1) .1s both;
  overflow:visible;
}

#login-form::before{
  content:'';
  position:absolute;
  top:-1px; left:12%; right:12%;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--vt-glow),transparent);
}

#login-form label{
  font-family:var(--vt-fm) !important;
  font-size:.68rem !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--vt-glow) !important;
  margin-bottom:.4rem;
  display:block;
}

#login-form input[type="text"],
#login-form input[type="password"]{
  width:100%;
  padding:.75rem .9rem !important;
  margin-bottom:1.1rem;
  font-size:.95rem !important;
  background:var(--vt-card2) !important;
  border:1px solid var(--vt-border2) !important;
  color:var(--vt-white) !important;
  border-radius:8px !important;
  transition:border-color .25s ease, box-shadow .25s ease;
}
#login-form input[type="text"]:focus,
#login-form input[type="password"]:focus{
  border-color:var(--vt-glow) !important;
  box-shadow:0 0 0 3px rgba(77,196,53,.18) !important;
}

#login-form button,
#login-form input[type="submit"],
#login-form .button{
  width:100%;
  padding:.85rem 1rem !important;
  margin-top:.4rem;
  background:var(--vt-green) !important;
  border:1px solid var(--vt-green-mid) !important;
  color:var(--vt-white) !important;
  font-family:var(--vt-fb) !important;
  font-weight:500 !important;
  letter-spacing:.02em;
  border-radius:8px !important;
  cursor:pointer;
  transition:all .3s cubic-bezier(.4,0,.2,1) !important;
}
#login-form button:hover,
#login-form input[type="submit"]:hover{
  background:var(--vt-green-mid) !important;
  box-shadow:0 0 24px rgba(77,196,53,.3), 0 6px 18px rgba(0,0,0,.4) !important;
  transform:translateY(-2px);
}

#login-footer{
  position:relative;
  z-index:1;
  text-align:center;
  margin-top:1.4rem;
  font-family:var(--vt-fm) !important;
  font-size:.62rem !important;
  letter-spacing:.08em;
  color:var(--vt-grey) !important;
  animation:vtFadeUp .7s ease .3s both;
}
#login-footer a{ color:var(--vt-grey-light) !important; }
#login-footer a:hover{ color:var(--vt-glow) !important; }

/* ---------- Sisenemis-animatsioonid ---------- */
@keyframes vtFadeDown{
  from{ opacity:0; transform:translateY(-16px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes vtRise{
  from{ opacity:0; transform:translateY(24px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes vtFadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  #logo, #login-form, #login-footer{ animation:none !important; }
}

/* ============================================================
   SISSELOGIMISE "MORPH ISE AUTOKS" ANIMATSIOON
   Kogu vorm (pealkiri, väljad, nupp) kaob elementhaaval,
   samal ajal kui keskele "kasvab" auto, mis siis minema sõidab.
   ============================================================ */

/* Vormi ümbris jääb paigale, aga selle sisu hajub välja */
#login-form.vt-drive{
  pointer-events:none;
}

/* Iga otsene laps (label/div/input/button) kaob eraldi, kergelt
   järjestikuse viivitusega — see annabki "morphi" tunde,
   nagu tekst sulaks eemale, mitte lihtsalt terve kast ei kahaneks. */
#login-form.vt-drive > *{
  transition:opacity .45s cubic-bezier(.4,0,.6,1), transform .45s cubic-bezier(.4,0,.6,1), filter .45s ease;
  opacity:0;
  transform:scale(.8) translateY(4px);
  filter:blur(3px);
}
#login-form.vt-drive > *:nth-child(1){ transition-delay:0s; }
#login-form.vt-drive > *:nth-child(2){ transition-delay:.04s; }
#login-form.vt-drive > *:nth-child(3){ transition-delay:.08s; }
#login-form.vt-drive > *:nth-child(4){ transition-delay:.12s; }
#login-form.vt-drive > *:nth-child(5){ transition-delay:.16s; }
#login-form.vt-drive > *:nth-child(6){ transition-delay:.2s; }
#login-form.vt-drive > *:nth-child(7){ transition-delay:.24s; }
#login-form.vt-drive > *:nth-child(8){ transition-delay:.28s; }

/* Vormi enda taust/raam sulab samuti veidi, et auto paistaks
   selle "seest" välja tulevat */
#login-form.vt-drive{
  transition:box-shadow .6s ease, border-color .6s ease, background .6s ease;
  border-color:transparent !important;
  box-shadow:none !important;
  background:transparent !important;
}
#login-form.vt-drive::before{
  opacity:0;
  transition:opacity .3s ease;
}

/* Auto ise: sünnib vormi keskelt, natuke "pop", siis sõidab minema */
.vt-car{
  position:fixed;
  z-index:99999;
  width:72px;
  height:32px;
  color:var(--vt-glow);
  opacity:0;
  transform:scale(.15) rotate(-6deg);
  pointer-events:none;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(77,196,53,.3));
}
.vt-car.vt-car-in{
  opacity:1;
  transform:scale(1) rotate(0deg);
  transition:opacity .35s cubic-bezier(.34,1.56,.64,1), transform .4s cubic-bezier(.34,1.56,.64,1);
}
.vt-car.vt-car-drive{
  transition:transform .95s cubic-bezier(.55,0,1,.45), opacity .3s ease .72s;
  transform:translateX(130vw) translateY(-10px) rotate(-2deg) scale(1.05);
  opacity:0;
}

.vt-wheel{
  transform-origin:center;
  animation:vtWheelSpin .4s linear infinite;
}
.vt-car-drive .vt-wheel{
  animation-duration:.09s;
}
@keyframes vtWheelSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

.vt-trail{
  position:absolute;
  right:100%;
  top:50%;
  width:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--vt-glow));
  opacity:0;
  transform:translateY(-50%);
}
.vt-car-drive .vt-trail{
  width:90px;
  opacity:.65;
  transition:width .95s ease, opacity .95s ease;
}

/* Väike "sähvatus" auto sünnikohal, nagu vorm plahvataks kokku autoks */
.vt-spark{
  position:fixed;
  z-index:99998;
  width:10px;
  height:10px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(77,196,53,.9) 0%, transparent 70%);
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  pointer-events:none;
}
.vt-spark.vt-spark-go{
  animation:vtSparkPop .5s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes vtSparkPop{
  0%{ transform:translate(-50%,-50%) scale(0); opacity:.9; }
  60%{ transform:translate(-50%,-50%) scale(14); opacity:.35; }
  100%{ transform:translate(-50%,-50%) scale(20); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .vt-car, .vt-spark, #login-form.vt-drive, #login-form.vt-drive > *{
    display:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
  #login-form.vt-drive{
    background:var(--vt-card) !important;
    border-color:var(--vt-border) !important;
  }
}


/* Final fix: layout-content had its own min-height:100vh + internal centering,
   which was overriding the outer body position. Strip that so the outer
   padding-top actually controls where the block sits. */
body.task-login #layout-content.selected.no-navbar{
  min-height:auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  padding-top:0 !important;
}
body.task-login{
  align-items:flex-start !important;
  padding-top:8vh !important;
}

/* ============================================================
   Modernization pass — transitions, stagger, hover polish
   ============================================================ */

/* Sidebar folders: sliding accent bar + smooth highlight instead of a flat swap */
#mailboxlist li, .folder-list li{
  position:relative;
  transition:background .25s ease, padding-left .25s ease;
}
#mailboxlist li::before, .folder-list li::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:var(--vt-glow);
  transform:scaleY(0);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
#mailboxlist li.selected::before, .folder-list li.selected::before,
#mailboxlist li.active::before, .folder-list li.active::before{
  transform:scaleY(1);
}
#mailboxlist li:hover, .folder-list li:hover{
  padding-left:4px;
}

/* Message list: rows fade/slide in on every list refresh, staggered */
@keyframes vtRowIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}
.message-list tbody tr, table.messagelist tbody tr{
  animation:vtRowIn .28s cubic-bezier(.22,1,.36,1) both;
}
.message-list tbody tr:nth-child(1){ animation-delay:.02s; }
.message-list tbody tr:nth-child(2){ animation-delay:.045s; }
.message-list tbody tr:nth-child(3){ animation-delay:.07s; }
.message-list tbody tr:nth-child(4){ animation-delay:.095s; }
.message-list tbody tr:nth-child(5){ animation-delay:.12s; }
.message-list tbody tr:nth-child(6){ animation-delay:.145s; }
.message-list tbody tr:nth-child(7){ animation-delay:.17s; }
.message-list tbody tr:nth-child(8){ animation-delay:.195s; }
.message-list tbody tr:nth-child(9){ animation-delay:.22s; }
.message-list tbody tr:nth-child(10){ animation-delay:.245s; }

/* Message rows: gentle lift + border glow on hover instead of flat bg swap */
.message-list tbody tr, table.messagelist tbody tr{
  transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.message-list tbody tr:hover, table.messagelist tbody tr:hover{
  transform:translateX(2px);
  box-shadow:inset 3px 0 0 var(--vt-green-mid);
}

/* Unread messages: subtle pulsing dot instead of plain bold text */
.message-list tr.unread td.subject::before, table.messagelist tr.unread td.subject::before{
  content:'';
  display:inline-block;
  width:6px; height:6px;
  margin-right:6px;
  border-radius:50%;
  background:var(--vt-glow);
  box-shadow:0 0 0 rgba(77,196,53,.6);
  animation:vtPulse 2s infinite;
  vertical-align:middle;
}
@keyframes vtPulse{
  0%{ box-shadow:0 0 0 0 rgba(77,196,53,.55); }
  70%{ box-shadow:0 0 0 6px rgba(77,196,53,0); }
  100%{ box-shadow:0 0 0 0 rgba(77,196,53,0); }
}

/* Toolbar icons: lift + glow on hover instead of static */
.toolbar a.button, .toolbar-menu a.button{
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), filter .2s ease;
}
.toolbar a.button:hover, .toolbar-menu a.button:hover{
  transform:translateY(-2px);
  filter:drop-shadow(0 3px 8px rgba(77,196,53,.35));
}

/* Preview pane content: fade in when a message is opened */
#previewframe, .iframe-wrapper{
  animation:vtFadeUp .35s cubic-bezier(.22,1,.36,1) both;
}

/* Search bar: soft glow focus instead of flat border */
.searchbar input, #quicksearchbox{
  transition:box-shadow .25s ease, border-color .25s ease;
}
.searchbar input:focus, #quicksearchbox:focus{
  border-color:var(--vt-glow) !important;
  box-shadow:0 0 0 3px rgba(77,196,53,.15) !important;
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce){
  .message-list tbody tr, table.messagelist tbody tr,
  #mailboxlist li, .folder-list li,
  .toolbar a.button, .toolbar-menu a.button,
  #previewframe, .iframe-wrapper,
  .message-list tr.unread td.subject::before{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
}

/* ============================================================
   Modernization pass — transitions, stagger, hover polish
   ============================================================ */

/* Sidebar folders: sliding accent bar + smooth highlight instead of a flat swap */
#mailboxlist li, .folder-list li{
  position:relative;
  transition:background .25s ease, padding-left .25s ease;
}
#mailboxlist li::before, .folder-list li::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:var(--vt-glow);
  transform:scaleY(0);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
#mailboxlist li.selected::before, .folder-list li.selected::before,
#mailboxlist li.active::before, .folder-list li.active::before{
  transform:scaleY(1);
}
#mailboxlist li:hover, .folder-list li:hover{
  padding-left:4px;
}

/* Message list: rows fade/slide in on every list refresh, staggered */
@keyframes vtRowIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}
.message-list tbody tr, table.messagelist tbody tr{
  animation:vtRowIn .28s cubic-bezier(.22,1,.36,1) both;
}
.message-list tbody tr:nth-child(1){ animation-delay:.02s; }
.message-list tbody tr:nth-child(2){ animation-delay:.045s; }
.message-list tbody tr:nth-child(3){ animation-delay:.07s; }
.message-list tbody tr:nth-child(4){ animation-delay:.095s; }
.message-list tbody tr:nth-child(5){ animation-delay:.12s; }
.message-list tbody tr:nth-child(6){ animation-delay:.145s; }
.message-list tbody tr:nth-child(7){ animation-delay:.17s; }
.message-list tbody tr:nth-child(8){ animation-delay:.195s; }
.message-list tbody tr:nth-child(9){ animation-delay:.22s; }
.message-list tbody tr:nth-child(10){ animation-delay:.245s; }

/* Message rows: gentle lift + border glow on hover instead of flat bg swap */
.message-list tbody tr, table.messagelist tbody tr{
  transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.message-list tbody tr:hover, table.messagelist tbody tr:hover{
  transform:translateX(2px);
  box-shadow:inset 3px 0 0 var(--vt-green-mid);
}

/* Unread messages: subtle pulsing dot instead of plain bold text */
.message-list tr.unread td.subject::before, table.messagelist tr.unread td.subject::before{
  content:'';
  display:inline-block;
  width:6px; height:6px;
  margin-right:6px;
  border-radius:50%;
  background:var(--vt-glow);
  box-shadow:0 0 0 rgba(77,196,53,.6);
  animation:vtPulse 2s infinite;
  vertical-align:middle;
}
@keyframes vtPulse{
  0%{ box-shadow:0 0 0 0 rgba(77,196,53,.55); }
  70%{ box-shadow:0 0 0 6px rgba(77,196,53,0); }
  100%{ box-shadow:0 0 0 0 rgba(77,196,53,0); }
}

/* Toolbar icons: lift + glow on hover instead of static */
.toolbar a.button, .toolbar-menu a.button{
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), filter .2s ease;
}
.toolbar a.button:hover, .toolbar-menu a.button:hover{
  transform:translateY(-2px);
  filter:drop-shadow(0 3px 8px rgba(77,196,53,.35));
}

/* Preview pane content: fade in when a message is opened */
#previewframe, .iframe-wrapper{
  animation:vtFadeUp .35s cubic-bezier(.22,1,.36,1) both;
}

/* Search bar: soft glow focus instead of flat border */
.searchbar input, #quicksearchbox{
  transition:box-shadow .25s ease, border-color .25s ease;
}
.searchbar input:focus, #quicksearchbox:focus{
  border-color:var(--vt-glow) !important;
  box-shadow:0 0 0 3px rgba(77,196,53,.15) !important;
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce){
  .message-list tbody tr, table.messagelist tbody tr,
  #mailboxlist li, .folder-list li,
  .toolbar a.button, .toolbar-menu a.button,
  #previewframe, .iframe-wrapper,
  .message-list tr.unread td.subject::before{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
}

/* ============================================================
   Brand pass — matching www.valektuus.com hero language:
   background grid + radial glow, mono eyebrow labels,
   pill stat badges, numbered-card weight, CTA-style buttons
   ============================================================ */

/* Whole app gets the same subtle grid + glow as the site's hero,
   not just the login page */
#layout{
  position:relative;
  background:
    radial-gradient(ellipse 50% 40% at 80% 0%, rgba(37,99,24,.14) 0%, transparent 65%),
    var(--vt-black) !important;
}
#layout::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(rgba(37,99,24,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,24,.045) 1px, transparent 1px);
  background-size:56px 56px;
  pointer-events:none;
  z-index:0;
}
#layout > *{ position:relative; z-index:1; }

/* Top bar: like the site's nav — small caps mono account label */
#taskmenu, .header-title, .topline{
  background:var(--vt-dark) !important;
  border-bottom:1px solid var(--vt-border) !important;
}
#topline .username, .header-title{
  font-family:var(--vt-fm) !important;
  letter-spacing:.08em;
  font-size:.78rem !important;
  color:var(--vt-grey-light) !important;
}

/* Folder list: numbered-card feel, mono uppercase labels like site's eyebrow tags */
#mailboxlist li, .folder-list li{
  border-radius:6px;
  margin:1px 6px;
}
#mailboxlist li a, .folder-list li a{
  font-family:var(--vt-fb) !important;
  letter-spacing:.01em;
}
#mailboxlist li.selected, .folder-list li.selected,
#mailboxlist li.active, .folder-list li.active{
  background:rgba(37,99,24,.16) !important;
  border-radius:6px;
}

/* Unread/folder counters: pill badge like the site's "7 Teenust" stat chip */
#mailboxlist .unreadcount, .folder-list .unreadcount, .listing .count{
  font-family:var(--vt-fm) !important;
  font-size:.66rem !important;
  letter-spacing:.04em;
  background:var(--vt-card2) !important;
  border:1px solid var(--vt-border2) !important;
  color:var(--vt-glow) !important;
  border-radius:999px !important;
  padding:.1rem .55rem !important;
}

/* Section headers (Saabuvad, Kontaktid, Seaded etc): eyebrow-style small caps
   like "Meie teenused" / "Teenused" labels on the site */
.boxtitle, .searchbar-header, #countdisplay{
  font-family:var(--vt-fm) !important;
  font-size:.7rem !important;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--vt-glow) !important;
}

/* Primary/CTA buttons: match the site's rounded, glowing "Broneeri aeg →" button */
.btn-primary, button.mainaction, .formbuttons button{
  border-radius:8px !important;
  padding:.6rem 1.3rem !important;
  font-weight:500 !important;
  box-shadow:0 0 0 rgba(77,196,53,0);
  transition:box-shadow .25s ease, transform .2s ease, background .2s ease !important;
}
.btn-primary:hover, button.mainaction:hover, .formbuttons button:hover{
  box-shadow:0 0 20px rgba(77,196,53,.28) !important;
  transform:translateY(-1px);
}

/* Message subject / sender: numbered-card typographic weight */
.message-list .subject, table.messagelist .subject{
  font-family:var(--vt-fb) !important;
  font-weight:500 !important;
}
.message-list .fromto, table.messagelist .fromto{
  color:var(--vt-grey-light) !important;
}

/* Selected message row: green accent card like the site's numbered service cards */
.message-list tr.selected, table.messagelist tr.selected{
  background:rgba(37,99,24,.14) !important;
  box-shadow:inset 3px 0 0 var(--vt-glow) !important;
}

/* Contact/compose panel headers: same eyebrow treatment for consistency */
.contactfoldercontent .boxtitle, .propform legend, fieldset legend{
  font-family:var(--vt-fm) !important;
  font-size:.68rem !important;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--vt-glow) !important;
}

/* ============================================================
   Login → mailbox continuity + email-open animations
   ============================================================ */

/* Whole interface eases in when arriving fresh from login */
@keyframes vtLayoutArrive{
  from{ opacity:0; transform:scale(.98); }
  to{ opacity:1; transform:scale(1); }
}
#layout.vt-arrive{
  animation:vtLayoutArrive .55s cubic-bezier(.22,1,.36,1) both;
}

/* Car driving IN from the left edge, continuing the login exit */
.vt-car-arrive{
  transform:scale(.15) rotate(4deg);
}
.vt-car-arrive.vt-car-in{
  transition:opacity .3s cubic-bezier(.34,1.56,.64,1), transform .35s cubic-bezier(.34,1.56,.64,1);
  transform:scale(1) rotate(0deg);
}
.vt-car-arrive.vt-car-arrive-go{
  transition:transform .85s cubic-bezier(.4,0,.2,1), opacity .35s ease .5s;
  transform:translateX(55vw) translateY(-6px) rotate(1deg);
  opacity:0;
}

/* Row click: soft green flash instead of an abrupt highlight jump */
@keyframes vtRowFlash{
  0%{ box-shadow:inset 0 0 0 999px rgba(77,196,53,.28); }
  100%{ box-shadow:inset 0 0 0 999px rgba(77,196,53,0); }
}
.message-list tr.vt-row-clicked, table.messagelist tr.vt-row-clicked{
  animation:vtRowFlash .5s ease-out;
}

/* Preview pane: replays every time a new message loads, not just once */
@keyframes vtPreviewIn{
  from{ opacity:0; transform:translateY(10px) scale(.985); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.iframe-wrapper.vt-preview-in{
  animation:vtPreviewIn .4s cubic-bezier(.22,1,.36,1) both;
}

@media (prefers-reduced-motion: reduce){
  #layout.vt-arrive, .vt-car-arrive, .message-list tr.vt-row-clicked,
  table.messagelist tr.vt-row-clicked, .iframe-wrapper.vt-preview-in{
    animation:none !important;
    transform:none !important;
  }
}