/* ────────────────────────────────────────────────────────────────────
   UHANDA Workspace — uusi design (2026-05-20)
   Korvaa Paper-designin asteittain. Pilotti: index.html (Koti).
   Muut sivut käyttävät edelleen /assets/uhanda-paper.css.

   Sisältää alias-tokenit (--ambient-card-a, --ink-*, --sage-deep) jotka
   pitävät Info-taulun inline-CSS:n (index.html rivit 25-426) toiminnassa
   ilman muutoksia — vain värit päivittyvät workspace-palettiin.

   ─── Brand Book v1.1 LUKKO (2026-05-21) ─────────────────────────────
   Aksentti:        --uw-sage-deep = #5b7a6a  (Sage Deeper, v1.1)
                                              ent. #6b8a78 v1.0, #5b8a72 v0
   Aksentti-pale:   --uw-sage-pale = #d2dfd6
   Napit:           --uw-btn       = #3d3a35  (Ink Soft, ei puhdas musta)
   Negatiivinen:    --uw-neg       = crimson #a02338, alpha 85%
                                     Yksinkertaistettu v1.0:n peach-mixistä.
                                     WCAG: 5.58:1 valkoisella, 5.02:1 peachilla
                                     → AA pienillekin teksteille.
   Lämpökartta:     --uw-heat-0..7 = diverging #4a7099 → #f6efeb → #b8492e

   Käyttö-säännöt: ks. docs/uhanda-brand-book-v1.docx ja
                   _preview/brand-accent-preview.html
   ──────────────────────────────────────────────────────────────────── */


/* Bottom-navin omat säännöt eristetty erilliseen tiedostoon (jaettu RevManin
   kanssa). @import on ENNEN kaikkia tyylisääntöjä (CSS-vaatimus). */
@import url('uhanda-bottomnav.css');

/* ── Tokenit ────────────────────────────────────────────────────────── */

:root {
  /* Paletti — yksivärinen peach paper koko taustana. Off-white-fade oikeasta
     alakulmasta peittää viimeisen ~1/3:n diagonaalia, alkaa ristikulman
     puolivälin tienoilta. Tunnelma: lämmin peach pää-osa + kevyempi alaoikea. */
  --uw-bg:               #f6efeb;
  --uw-bg-soft:          #f9f3ef;
  --uw-card-bg:          #ffffff;
  --uw-card-bg-soft:     #fbf7f4;
  --uw-ink:              #1a1815;
  --uw-ink-soft:         #3d3a35;
  --uw-ink-mute:         #7a7770;
  --uw-ink-faint:        #b8b3aa;
  --uw-border:           #e8e1dc;
  --uw-border-soft:      #f0e9e3;
  --uw-hover-bg:         #f0e9e3;
  --uw-active-bg:        #ece4dc;
  --uw-active-bg-hover:  #e0d6cd;
  /* Aksentti — LUKITTU 2026-05-21 brand book v1.1. Sage Deeper.
     Käyttö-sääntö: yksi accent-arvo per kortti­rivi (KPI), bar-peak,
     ▲-glyph. EI painikkeissa, EI sidebarin active-merkissä.
     WCAG: 4.16:1 peachilla (AA-large), 4.73:1 valkoisella (AAA-large). */
  --uw-sage-deep:        #5b7a6a;
  --uw-sage-pale:        #d2dfd6;
  --uw-avatar-bg:        #a89578;

  /* Painikkeen tumma — LUKITTU 2026-05-21. Pehmeä warm-dark, ei puhdas
     musta. Vain painikkeissa; brand-teksti ja sidebar-active käyttävät
     --uw-ink (#1a1815). */
  --uw-btn:              #3d3a35;
  --uw-btn-hover:        #524e46;

  /* Negatiivinen — LUKITTU 2026-05-21 brand book v1.1. Crimson 85% alpha.
     Yksinkertaistettu v1.0:n peach-mixistä — antaa paremman saturaation ja
     parantaa WCAG-kontrastia. Käyttö: ▼-deltat, peruutusten KPI-luku,
     −€-summat, "Korvaa"-tyyppinen quiet-danger-nappi.
     WCAG: 5.58:1 valkoisella, 5.02:1 peachilla → AA myös pienille teksteille. */
  --uw-neg:              color-mix(in oklab, #a02338 85%, transparent);
  --uw-neg-pale:         color-mix(in oklab, #a02338 18%, #ffffff);

  /* Lämpökartta — LUKITTU 2026-05-21. Diverging-paletti 8 askeleessa.
     Kylmä sininen (#4a7099) → neutraali peach (#f6efeb, sama kuin --uw-bg)
     → kuuma punainen (#b8492e). Käyttö: kalenteri-heatmap, room-heatmap,
     mikä tahansa pivot-näkymä. */
  --uw-heat-0:           #4a7099;   /* kylmin, alikäyttö */
  --uw-heat-1:           #8aa8c2;
  --uw-heat-2:           #cfd9e2;
  --uw-heat-3:           #f6efeb;   /* neutraali, sama kuin --uw-bg */
  --uw-heat-4:           #f4d4b8;
  --uw-heat-5:           #e3aa8a;
  --uw-heat-6:           #cf7a5a;
  --uw-heat-7:           #b8492e;   /* kuumin, ylivaraus */

  /* Layout */
  --uw-sidebar-w:           240px;
  --uw-sidebar-w-collapsed:  60px;
  --uw-topbar-h:             69px;
  --uw-radius:               10px;
  --uw-radius-sm:             6px;
  --uw-radius-xs:             4px;

  /* Shadow */
  --uw-shadow-card:         0 1px 2px rgba(20,18,14,0.04), 0 4px 8px rgba(20,18,14,0.025);
  --uw-shadow-card-hover:   0 2px 4px rgba(20,18,14,0.06), 0 8px 16px rgba(20,18,14,0.04);
  --uw-shadow-dropdown:     0 4px 8px rgba(20,18,14,0.06), 0 12px 24px rgba(20,18,14,0.08);

  /* Transitions */
  --uw-tr-snappy:  160ms cubic-bezier(.2,.7,.2,1);
  --uw-tr-smooth:  240ms cubic-bezier(.2,.7,.2,1);

  /* Fontit */
  --uw-display:  'Archivo Black', system-ui, sans-serif;
  --uw-body:     'League Spartan', 'Inter', system-ui, sans-serif;
  /* Legacy-nimi --uw-mono pidetään ettei vaadi laaja-alaista refaktoria,
     mutta sisältö on nyt League Spartan (kaikki mono-fontit pois 2026-05-20). */
  --uw-mono:     'League Spartan', 'Inter', system-ui, sans-serif;

  /* Alias-tokenit Info-taulun inline-CSS:n (--ambient-* + --ink-* + --sage-deep)
     tukemiseen. Mahdollistaa että index.html:n shift/booking/occupancy-CSS
     toimii muutoksitta — vain värit vaihtuvat workspace-palettiin. */
  --ambient-card-a:  var(--uw-card-bg);
  --ambient-card-b:  var(--uw-card-bg-soft);
  --ambient-rule:    var(--uw-border);
  --ambient-edge:    color-mix(in oklab, var(--uw-border) 70%, transparent);
  --ambient-glow:    color-mix(in oklab, var(--uw-sage-deep) 10%, transparent);
  --ambient-shadow:  rgba(20,18,14,0.04);
  --ambient-warm:    var(--uw-bg-soft);
  --ambient-vig-x:   100%;
  --ink:             var(--uw-ink);
  --ink-soft:        var(--uw-ink-soft);
  --ink-mute:        var(--uw-ink-mute);
  --ink-faint:       var(--uw-ink-faint);
  --sage-deep:       var(--uw-sage-deep);
  --sage-pale:       var(--uw-sage-pale);

  /* paper-design legacy-tokenit jotka admin-paper.css käyttää.
     Mappaavat workspace-paletin arvoihin jotta admin-sivut toimivat
     workspace-chrome:n alla ilman erillistä CSS-haaraa. */
  --text:            var(--uw-ink);
  --text-muted:      var(--uw-ink-mute);
  --text-faint:      var(--uw-ink-faint);
  --surface:         var(--uw-card-bg);
  --card-bg:         var(--uw-card-bg);
  --card-border:     var(--uw-border);
  --card-shadow:     0 1px 2px rgba(20,18,14,0.04), 0 4px 8px rgba(20,18,14,0.025);
  --input-bg:        var(--uw-card-bg);
  --input-border:    var(--uw-border);
  --input-focus-bg:  var(--uw-bg-soft);
  --chip-bg:         var(--uw-bg-soft);
  --chip-border:     var(--uw-border);
  --chip-hover-bg:   var(--uw-hover-bg);
  --chip-on-bg:      color-mix(in oklab, var(--uw-sage-deep) 18%, transparent);
  --chip-on-border:  color-mix(in oklab, var(--uw-sage-deep) 50%, transparent);
  --chip-on-text:    var(--uw-sage-deep);
  --toggle-bg:       var(--uw-bg-soft);
  --toggle-border:   var(--uw-border);
  --toggle-hover-bg: var(--uw-hover-bg);
  --row-bg:          var(--uw-card-bg);
  --row-border:      var(--uw-border);
  --role-chip-bg:    color-mix(in oklab, var(--uw-sage-deep) 15%, transparent);
  --role-chip-text:  var(--uw-sage-deep);
  --perm-group-bg:   var(--uw-bg-soft);
  --perm-group-border: var(--uw-border);
  --accent:          var(--uw-sage-deep);
  --divider:         var(--uw-border);

  /* Brand book v1 semanttiset alias-nimet (2026-05-21).
     Suositellaan uudessa koodissa --uw-accent / --uw-accent-pale,
     mutta --uw-sage-deep / --uw-sage-pale jäävät kanonisina arvoina
     ettei vanha HTML (70+ tiedostoa) rikkoudu. */
  --uw-accent:       var(--uw-sage-deep);
  --uw-accent-pale:  var(--uw-sage-pale);
  --line:            var(--uw-border);
  --sans:            var(--uw-body);
  --serif:           var(--uw-body);
  --mono:            var(--uw-body);
}


/* ── Reset + base ───────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--uw-ink);
  font-family: var(--uw-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Body — peach-blob keskittyy topbarin alarajaan ja häipyy noin
   "YÖTÄ"-sanan kohdalla. Sekundääri-aaltoja vasemmassa reunassa ja
   alaosassa, kevyt cool-vasta alaoikealla. Base lähes-valkoinen. */
body {
  background:
    /* Korner-blobi: pieni haalea peach-heijastus juuri topbar+sidebar
       -ristissä (~4% × 6% viewportista) — luo "valo heijastuu kulmasta"
       -efektin. Hyvin haalea, ei dominoiva. */
    radial-gradient(
      ellipse 5% 5% at 4% 6%,
      rgba(237, 209, 200, 0.28) 0%,
      rgba(237, 209, 200, 0.12) 45%,
      rgba(237, 209, 200, 0) 100%
    ),
    /* Pää-blob: anchor ylähäällä (-19%), kapenee säteittäin alas+oikealle. */
    radial-gradient(
      ellipse 52% 24% at 0% -19%,
      rgba(237, 209, 200, 0.85) 0%,
      rgba(243, 221, 212, 0.65) 32%,
      rgba(243, 221, 212, 0) 75%
    ),
    /* Sekundääri-blob: pinkahtava aalto vasemman reunan keskellä */
    radial-gradient(
      ellipse 20% 26% at 4% 42%,
      rgba(238, 211, 207, 0.38) 0%,
      rgba(238, 211, 207, 0) 70%
    ),
    /* Kolmas blob: pieni alavasen peach-tertiääri jotta sivu hengittää */
    radial-gradient(
      ellipse 18% 22% at 10% 85%,
      rgba(240, 218, 210, 0.28) 0%,
      rgba(240, 218, 210, 0) 75%
    ),
    /* Kevyt cool-vasta alaoikealla (referenssi-tunnelma) */
    radial-gradient(
      ellipse 55% 50% at 95% 95%,
      rgba(235, 238, 240, 0.40) 0%,
      rgba(235, 238, 240, 0) 65%
    ),
    /* Base: pehmeä peach-cream (topbarin keskiväri) — koko workspace */
    #f7f0ec;
  background-attachment: fixed;
  min-height: 100vh;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 { margin: 0; }
p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }


/* ── Page-wrapper ───────────────────────────────────────────────────── */

.uw-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: var(--uw-topbar-h) 1fr;
}


/* ── Topbar ─────────────────────────────────────────────────────────── */

.uw-topbar {
  /* STRICTLY FIXED — ei sticky:ä, ei iOS-overscroll-wobblea ylä-tönäisyssä.
     Topbar pysyy viewportin yläreunassa absoluuttisesti, .uw-page-grid
     reservoi yhä topbar-korkuisen rivin sisällölle (ks. row 1) joten
     layout ei siirry. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  height: var(--uw-topbar-h);
  padding: 0 24px;
  /* Solidi opaakki peach→pearl gradient — body-teksti EI näy läpi
     enää. Sama -25% peach -sävy yläpäässä kuin sidebarissa. */
  background: linear-gradient(
    to right,
    #f6e6df 0%,
    #f7ebe5 22%,
    #f7eee9 38%,
    #f7f3f1 55%,
    #f7f3f1 100%
  );
  /* Elävä border-bottom: tummin peach-päässä (vasen) → vaalenee
     oikealle nykyiseen border-sävyyn. */
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(to right,
    #c8b9ad 0%,
    #d6c8bd 30%,
    var(--uw-border) 65%,
    var(--uw-border) 100%
  ) 1;
  /* Henno tumma elevation-shadow joka antaa "leijuu paperin päällä"
     -tunnun. Peach-overflow tulee ::after-pseudoelementistä joka
     kapenee säteittäin. */
  box-shadow:
    0 1px 2px rgba(20, 18, 14, 0.05),
    0 4px 14px rgba(20, 18, 14, 0.06);
}

.uw-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.uw-brand-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  transition: opacity var(--uw-tr-snappy);
}
.uw-brand-link:hover { opacity: 0.78; }

.uw-brand-logo {
  height: 29px;
  width: auto;
  display: block;
}

.uw-topbar-spacer {
  /* placeholder keskialueelle — myöhemmin sivukohtaista sisältöä (tab-row,
     päivänotsikko jne.). Etusivulla tyhjä. */
}

.uw-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}


/* ── Avatar + dropdown ──────────────────────────────────────────────── */

.uw-avatar-btn {
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--uw-avatar-bg);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--uw-body);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* Hyvin ohut espresso-musta kehä kuvan ympärillä */
  box-shadow: 0 0 0 1px rgba(31,26,21,.92);
  transition: transform var(--uw-tr-snappy), box-shadow var(--uw-tr-snappy);
}
.uw-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.uw-avatar-btn:hover { transform: scale(1.04); }
.uw-avatar-btn:active { transform: scale(0.98); }
.uw-avatar-btn:focus-visible {
  outline: 2px solid var(--uw-sage-deep);
  outline-offset: 2px;
}

/* Avatar hover -tooltip: käyttäjän koko nimi (Etunimi Sukunimi) */
.uw-avatar-tip {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  white-space: nowrap;
  background: #1f1a15;
  color: #f3ece3;
  font-family: var(--uw-body);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  padding: 6px 11px;
  border-radius: 9px;
  box-shadow: 0 8px 22px -8px rgba(31,26,21,.5);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease;
  z-index: 70;
}
.uw-topbar-right:has(.uw-avatar-btn:hover) .uw-avatar-tip { opacity: 1; transform: translateY(0); }
/* Piilota tooltip kun dropdown on auki (vältä päällekkäisyys) */
.uw-topbar-right:has(.uw-avatar-dropdown.open) .uw-avatar-tip { opacity: 0; }

.uw-avatar-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  padding: 8px;
  background: var(--uw-card-bg);
  border: 1px solid var(--uw-border);
  border-radius: var(--uw-radius);
  box-shadow: var(--uw-shadow-dropdown);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--uw-tr-snappy), transform var(--uw-tr-snappy);
}
.uw-avatar-dropdown.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.uw-avatar-dropdown-user {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--uw-border-soft);
  margin-bottom: 6px;
}
.uw-avatar-dropdown-name {
  font-family: var(--uw-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--uw-ink);
}
.uw-avatar-dropdown-email {
  font-family: var(--uw-body);
  font-weight: 500;
  font-size: 11.5px;
  color: var(--uw-ink-mute);
  letter-spacing: 0;
}

.uw-avatar-dropdown a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--uw-radius-sm);
  font-family: var(--uw-body);
  font-size: 13.5px;
  color: var(--uw-ink-soft);
  transition: background var(--uw-tr-snappy), color var(--uw-tr-snappy);
}
.uw-avatar-dropdown a:hover {
  background: var(--uw-hover-bg);
  color: var(--uw-ink);
}


/* ── Layout ─────────────────────────────────────────────────────────── */

/* Sidebar on position fixed (overlay-tyyli): kapea oletuksena, laajenee
   hoverilla labelin + lasten kanssa. Main-content saa kiinteän vasemman
   paddingin sidebarin kapealle leveydelle — main ei liiku kun sidebar
   laajenee, vaan sidebar leijuu sen päälle box-shadowin kanssa. */
.uw-layout {
  /* Topbar on position: fixed (ulkona grid-flowsta), joten .uw-layout
     valuisi auto-place:lla row 1:een ja painuisi topbarin taakse.
     Eksplisiittinen grid-row: 2 pakottaa sen pysymään topbarin alapuolella. */
  grid-row: 2;
  position: relative;
  padding-left: var(--uw-sidebar-w-collapsed);
  min-height: calc(100vh - var(--uw-topbar-h));
}


/* ── Sidebar ────────────────────────────────────────────────────────── */

.uw-sidebar {
  position: fixed;
  top: var(--uw-topbar-h);
  left: 0;
  bottom: 0;
  width: var(--uw-sidebar-w-collapsed);
  z-index: 30;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 8px 24px;
  /* Reuna gradientilla: tummin peach-päässä (yläosa) → vaalenee
     alaspäin nykyiseen border-sävyyn. */
  border-right: 1px solid transparent;
  border-image: linear-gradient(to bottom,
    #c8b9ad 0%,
    #d6c8bd 30%,
    var(--uw-border) 65%,
    var(--uw-border) 100%
  ) 1;
  /* Solidi opaakki gradient — body-teksti EI näy läpi enää. Top-peach
     on -25% kevennetty (rgb 243,221,212 → 246,230,223 = 25% blend
     valkoiseen) → kuultaa kuin "haalea peach paperilla", ei räikeä.
     Backdrop-filter poistettu (tarpeeton kun bg on opaakki). */
  background: linear-gradient(
    to bottom,
    #f6e6df 0%,
    #f7ebe5 12%,
    #f7f3f1 26%,
    #f7f3f1 100%
  );
  /* Henno tumma elevation-shadow oikealle (sama tyyli kuin topbarissa).
     Peach-overflow tulee ::after-pseudoelementistä joka kapenee
     säteittäin. */
  box-shadow:
    1px 0 2px rgba(20, 18, 14, 0.05),
    4px 0 14px rgba(20, 18, 14, 0.06);
  /* Piilota scrollbar — sidebar on aina kompakti, ei tarvitse näkyvää
     "roller bar" -indikaattoria. Sisältö pysyy scrollattavissa. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Sidebar on navigaatio-chrome — labelit eivät ole valittavaa tekstiä
     (esti "Chat"-sanan valikoitumisen klikatessa). */
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition:
    width var(--uw-tr-smooth),
    padding var(--uw-tr-smooth),
    box-shadow var(--uw-tr-smooth),
    transform var(--uw-tr-smooth);
}
.uw-sidebar::-webkit-scrollbar { display: none; }

/* JS-pohjainen .is-expanded -luokka togglataan mouseenter/mouseleave-eventeillä
   (workspace.js). CSS :hover oli altis transition-aikaisille hover-area-
   bugille kun sidebar laajenee position-fixed-tilassa — JS-pohjainen
   on tarkempi (mouseleave laukeaa kun cursor lähtee DOM-laatikon). */
.uw-sidebar.is-expanded {
  width: var(--uw-sidebar-w);
  padding: 18px 14px 24px;
  /* Auki-tilassa vahvempi elevation — sidebar leijuu selvemmin
     bodyn yli. Peach-overflow tulee ::after-pseudosta joka seuraa
     sidebarin oikeaa reunaa erikseen. */
  box-shadow:
    1px 0 2px rgba(20, 18, 14, 0.06),
    6px 0 24px rgba(20, 18, 14, 0.10);
  /* Auki-tilassa solidi opaakki, lähes pearl koko korkeudella —
     vain hento peach-vihje yläreunassa. */
  background: linear-gradient(
    to bottom,
    #f8ece6 0%,
    #f7f3f1 14%,
    #f7f3f1 100%
  );
}

.uw-sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.uw-sidebar-group[hidden] { display: none; }

/* Sub-section-erottaja: siro vaakaviiva sidebar-ryhmien välillä (2026-05-22).
   Käyttö: <hr class="uw-sidebar-divider" /> kahden ryhmän välissä, esim.
   eristämään sivu-spesifiset ryhmät (Admin, RM, Pricing Master) Koti:n alle.
   COLLAPSED-tilassa (60px sidebar): viiva PIILOSSA, ikonit tiiviisti.
   Erottelu näkyy vain laajennetussa tilassa kun ryhmien otsikot näkyvät. */
.uw-sidebar-divider {
  display: none;
  border: 0;
  height: 0;
  margin: 0;
}
.uw-sidebar.is-expanded .uw-sidebar-divider {
  display: block;
  border-top: 1px solid var(--uw-border);
  margin: 6px 14px;
}

/* Group-label (mono uppercase) näkyy vain laajennetussa tilassa.
   Kapea-tilassa display:none → ikonit pinottuna tasaisesti yhden sarakkeen.
   Käyttäjäpyyntö 2026-05-20: "kun menu on closed, niin tuo ikonit tasaisesti
   etäisyydeltä toisistaan. mutta kun avaa, niin väliin tulee otsikot." */
.uw-sidebar-group-label {
  display: none;
  font-family: var(--uw-body);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--uw-ink-mute);
  padding: 8px 10px 2px;
  white-space: nowrap;
  overflow: hidden;
}
.uw-sidebar.is-expanded .uw-sidebar-group-label {
  display: block;
}

/* uwContextGroup = JS-injektoitu konteksti-osio (2026-05-25). Näytetään
   Workspace-ryhmän jälkeen kun pathname matchaa CONTEXT_SECTIONS-rekisterin
   merkintään (uhanda-workspace.js). Erottuu muista ryhmistä ohuilla ylä-
   ja ala-viivoilla; ryhmäotsikko on piilotettu koska top-row (esim.
   "UrakkaPorukka") toimii itse otsikkona. Viivat näkyvät vain expanded-
   tilassa — kapea-tila pitää ikonit tiiviisti pinottuna. */
.uw-sidebar.is-expanded #uwContextGroup {
  border-top: 1px solid var(--uw-border);
  border-bottom: 1px solid var(--uw-border);
  margin: 6px 14px;
  padding: 8px 0;
}
#uwContextGroup > .uw-sidebar-group-label {
  display: none !important;
}

/* Kun context-section korvaa top-level-ryhmän (esim. Admin tai Intra & HR),
   piilotetaan sama ryhmä sidebar:sta ettei "vanha malli" leiju viereisenä
   duplikaattina. data-replaces-group asetetaan JS:llä injektion yhteydessä. */
.uw-sidebar[data-replaces-group="uwGroupLT"]    #uwGroupLT,
.uw-sidebar[data-replaces-group="uwGroupCS"]    #uwGroupCS,
.uw-sidebar[data-replaces-group="uwGroupHR"]    #uwGroupHR,
.uw-sidebar[data-replaces-group="uwGroupPR"]    #uwGroupPR,
.uw-sidebar[data-replaces-group="uwGroupTAL"]   #uwGroupTAL,
.uw-sidebar[data-replaces-group="uwGroupADMIN"] #uwGroupADMIN {
  display: none !important;
}

/* Sidebar-list = ryhmän rivit. Rivi = yksi top + valinnainen sub-list. */
.uw-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.uw-sidebar-row {
  list-style: none;
}

/* Top-row = ryhmän pää-rivi, klikattava linkki. Klikkaus-mekaniikka
   (workspace.js): jos rivillä on sub-list ja se ei ole auki → ensimmäinen
   klikkaus avaa lapset (preventDefault). Jos jo auki TAI ei sub-listia →
   normaali navigointi. Mobiilissa aina normaali navigointi. */
.uw-sidebar-top {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 8px;
  border-radius: var(--uw-radius-sm);
  font-family: var(--uw-body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--uw-ink);
  transition:
    background var(--uw-tr-snappy),
    transform var(--uw-tr-snappy),
    color var(--uw-tr-snappy);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  transform-origin: left center;
}
.uw-sidebar-top:hover {
  transform: scale(1.06);
  color: var(--uw-ink);
}
.uw-sidebar-top.active {
  font-weight: 700;
  color: var(--uw-ink);
}
.uw-sidebar-top.active:hover {
  transform: scale(1.06);
}

/* Glass-neliö — sama resepti kuin mobiilin bottom-navissa (.uw-bn-ric,
   uhanda-bottomnav.css), skaalattu sidebar-railiin → desktop ja mobiili linjassa. */
.uw-sidebar-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: #3a332d;
  background: linear-gradient(180deg, rgba(250, 240, 232, .92), rgba(240, 226, 214, .74));
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -3px 6px rgba(120, 90, 60, .08),
    0 1px 4px -1px rgba(40, 30, 25, .13);
}
.uw-sidebar-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
}
/* Tumma glass-variantti (chat-rivi) — vastaa mobiilin .uw-bn-ric.dash:ia. */
.uw-sidebar-icon.dash {
  background: linear-gradient(180deg, #4a4036, #332c24 52%, #1f1a15);
  border-color: transparent;
  color: #efe7dc;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 236, .2),
    inset 0 -2px 4px rgba(0, 0, 0, .3),
    0 2px 6px -2px rgba(40, 30, 25, .42);
}
/* Chat-rivi on <button> mutta käyttää .uw-sidebar-top -tyyliä → normalisoi. */
button.uw-sidebar-top {
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

/* Top-label näkyy vain laajennetussa tilassa */
.uw-sidebar-top-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 160ms ease;
}
.uw-sidebar.is-expanded .uw-sidebar-top-label {
  opacity: 1;
  transition-delay: 80ms;
}

/* +/− -toggle-merkki rivin oikealla. Näkyy vain laajennetussa tilassa ja
   vain riveillä joissa on data-has-sub. Merkki vaihtuu .open-tilassa. */
.uw-sidebar-toggle-mark {
  position: relative;
  margin-left: auto;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--uw-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  color: var(--uw-ink-mute);
  opacity: 0;
  transition: opacity 160ms ease;
}
.uw-sidebar-toggle-mark::before {
  content: '+';
  display: block;
  transform: translateY(-1px);
}
.uw-sidebar-row.open > .uw-sidebar-top .uw-sidebar-toggle-mark::before {
  content: '\2212'; /* minus sign */
}
.uw-sidebar.is-expanded .uw-sidebar-toggle-mark {
  opacity: 1;
  transition-delay: 80ms;
}

/* Sub-list = top-rowin lapset. Oletuksena collapsed (max-height 0).
   Avautuu klikkauksella (.uw-sidebar-row.open). Voi sisältää uudestaan
   sub-sub-listan jos lapsessa on toinen alataso. */
.uw-sidebar-sub-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  list-style: none;
  padding: 0 0 0 36px;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--uw-tr-smooth), padding-top var(--uw-tr-smooth), padding-bottom var(--uw-tr-smooth);
}
/* Sub-list avautuu VAIN kun sidebar on laajennettuna (is-expanded).
   Collapsed-tilassa (60px sidebar) ikonit pysyvät tiivisti pinottuna vaikka
   row.open olisi tilana — sub-list:in max-height: 400px aiheuttaisi muuten
   pystytilaa ikonien välille (2026-05-22 käyttäjäpalaute V5a:n yhteydessä). */
.uw-sidebar.is-expanded .uw-sidebar-row.open > .uw-sidebar-sub-list {
  max-height: 400px;
  padding-top: 2px;
  padding-bottom: 4px;
}

.uw-sidebar-item {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--uw-radius-xs);
  font-family: var(--uw-body);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--uw-ink-soft);
  transition: background var(--uw-tr-snappy), color var(--uw-tr-snappy), transform var(--uw-tr-snappy);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  transform-origin: left center;
}
.uw-sidebar-item:hover {
  color: var(--uw-ink);
  transform: scale(1.06);
}
.uw-sidebar-item.active {
  color: var(--uw-ink);
  font-weight: 700;
}
.uw-sidebar-item.active:hover {
  transform: scale(1.06);
}
.uw-sidebar-item.disabled {
  color: var(--uw-ink-faint);
  cursor: not-allowed;
}
.uw-sidebar-item.disabled:hover {
  background: transparent;
  color: var(--uw-ink-faint);
  transform: none;
}

.uw-sidebar-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sub-sub-list — kun sub-rivi sisältää oman alaosan (esim. Palvelukumppanit).
   Sama mekaniikka kuin sub-listin. CSS hierarkia tukee jo
   .uw-sidebar-row.open .uw-sidebar-sub-list, joten sama luokkanimitys toimii
   jos sub-itemi on uw-sidebar-row -tyyppinen "row" jolla on oma sub-list. */

/* Nested sub-row top: matchaa item-tyyliin (pienempi font/padding kuin
   top-level top). Käytetään kun sub-listalla on rivi jolla on oma sub-list. */
.uw-sidebar-sub-list .uw-sidebar-row[data-has-sub] > .uw-sidebar-top {
  padding: 5px 10px;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--uw-ink-soft);
  gap: 8px;
}
.uw-sidebar-sub-list .uw-sidebar-row[data-has-sub] > .uw-sidebar-top:hover {
  color: var(--uw-ink);
  transform: scale(1.06);
}
.uw-sidebar-sub-list .uw-sidebar-row.open > .uw-sidebar-top {
  color: var(--uw-ink);
  font-weight: 700;
}
/* Nested sub-list — pienempi sisennys jotta hierarkia ei venähdä liian
   syvälle. Parent-sub-listalla on jo 36px padding-left. */
.uw-sidebar-sub-list .uw-sidebar-sub-list {
  padding: 0 0 0 16px;
}


/* ── Main ───────────────────────────────────────────────────────────── */

.uw-main {
  /* Etäisyys topbar/sidebar 20px (2026-06, käyttäjäpalaute). */
  padding: 20px 30px 28px 30px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

/* ── KANONINEN SISÄLTÖPINTA (yksi totuuden lähde) ─────────────────────────
   KAIKKI workspacen sisältö-wrapperit (riippumatta historiallisesta luokka-
   nimestä) ovat läpinäkyviä → sisältö istuu suoraan paper-body-taustalla, ei
   "maincard"-kerrosta. Nimivariantit ovat saman pinnan aliaksia:
     .uw-home              — Koti (index.html)
     .uw-card.uw-info-card — uhanda-kpi / kalustukset / kalustukset-lista
     .um-main              — admin-* / rev-man / tyovuorolista
     .up-data-surface      — kirjanpito
   Ulkoetäisyydet tulevat .uw-main / .um-main base-paddingista. Sivujen SISÄINEN
   sisältölayout (gap/grid/sektiot) on tarkoituksella sivukohtainen.
   Muuta pinnan käyttäytyminen TÄSTÄ yhdestä paikasta. .up-card (domain-kortit) säilyvät. */
.uw-home, .um-main, .up-data-surface, .uw-card.uw-info-card {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* Maincardit olivat läpinäkyviä mutta niiden oma marginaali jätti tuplainsetin
   (uw-main padding + maincard margin) → liikaa ilmaa. Nollataan marginaali +
   kevennetään paddingia, jotta sisältö istuu lähellä topbar/sidebaria. */
.um-main { margin: 0 !important; padding: 20px 30px 28px !important; max-width: none !important; }
.up-data-surface { margin: 0 !important; padding: 4px 0 8px !important; }
/* .uw-info-card on nyt näkymätön (maincard) → sen oma kortti-padding (.uw-card 22/24)
   työnsi sisällön turhaan kauas. Nollataan → .uw-main 20/30 on todellinen etäisyys. */
.uw-card.uw-info-card { padding: 0 !important; }

/* ─── MAIN CARD viewport-lock POISTETTU 2026-06-05 ────────────────────────
   Aiempi :has()-pohjainen viewport-lock (html/body 100vh + info-card
   overflow-y:auto sisäinen scroll) oli epäyhtenäinen legacy-malli: vain
   .uw-card.uw-info-card-sivut lukittiin, ja scroll-container leikkasi
   sisäkkorttien varjot/kulmat. Yhtenäinen kestävä ratkaisu: EI viewport-
   lockia millään sivulla → kaikki sivut natural body-scroll, sisältö
   suoraan paper-taustalla, .uw-main base-padding hoitaa etäisyydet.
   (uw-main--natural-opt-out on nyt tarpeeton — poistettu käytöstä.)
   ─────────────────────────────────────────────────────────────────────── */

.uw-greeting-row {
  margin-bottom: 28px;
}
.uw-greeting {
  font-family: var(--uw-display);
  font-weight: 900;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.05;
  visibility: hidden;
  letter-spacing: 0.005em;
  color: var(--uw-ink);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.uw-greeting.is-ready {
  visibility: visible;
}
.uw-greeting-sub {
  font-family: var(--uw-body);
  font-size: 14.5px;
  color: var(--uw-ink-mute);
}


/* ── Kortit (perustyyli) ────────────────────────────────────────────── */

.uw-card {
  background: var(--uw-card-bg);
  border: 1px solid var(--uw-border);
  border-radius: var(--uw-radius);
  box-shadow: var(--uw-shadow-card);
  padding: 22px 24px 20px;
  position: relative;
  transition: box-shadow var(--uw-tr-snappy), transform var(--uw-tr-snappy);
}
.uw-card.clickable { cursor: pointer; }
.uw-card.clickable:hover {
  box-shadow: var(--uw-shadow-card-hover);
  transform: translateY(-1px);
}


/* ── Info-taulu (käyttää säilytettyjä shift/booking/occ-tyylejä) ────── */

.uw-info-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px 20px;
}

.uw-info-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.uw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--uw-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--uw-ink-mute);
}
.uw-eyebrow .bar {
  width: 14px;
  height: 1px;
  background: var(--uw-sage-deep);
}
.uw-eyebrow.right {
  color: var(--uw-ink-faint);
}

.uw-info-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--uw-ink-mute);
  transition: background var(--uw-tr-snappy), color var(--uw-tr-snappy);
}
.uw-info-refresh:hover {
  background: var(--uw-hover-bg);
  color: var(--uw-ink);
}
.uw-info-refresh.spinning svg { animation: uw-spin 800ms linear infinite; }
@keyframes uw-spin {
  to { transform: rotate(360deg); }
}

.uw-info-title-block {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--uw-border-soft);
}
.uw-info-title {
  font-family: var(--uw-display);
  font-weight: 900;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: var(--uw-ink);
  text-transform: uppercase;
}
.uw-live-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--uw-body);
  font-weight: 500;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--uw-ink-faint);
}
.uw-live-bar .pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--uw-sage-deep);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--uw-sage-deep) 18%, transparent);
  animation: uw-pulse 1.8s ease-in-out infinite;
}
@keyframes uw-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}


/* Info-block-pattern (säilytetty Paper-mallin kanssa yhteensopivana —
   index.html:n inline-CSS yhdistää myös .up-info-block-luokkaan, joten
   tarvitsemme sekä .uw-* että .up-* nimet toimimaan) */
.uw-info-stream { display: block; }

.uw-info-block,
.up-info-block {
  padding: 14px 0 12px;
}
.uw-info-block + .uw-info-block,
.up-info-block + .up-info-block {
  border-top: 1px solid var(--uw-border-soft);
  margin-top: 0;
  padding-top: 14px;
}

.uw-info-block-head,
.up-info-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.uw-info-block-label,
.up-info-block-label {
  font-family: var(--uw-body);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--uw-ink-soft);
}
.uw-info-block-meta,
.up-info-block-meta {
  font-family: var(--uw-body);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--uw-ink-mute);
}
.uw-info-empty,
.up-info-empty {
  font-family: var(--uw-body);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--uw-ink-faint);
  padding: 6px 0;
}

.uw-skel-line,
.up-skel-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    var(--uw-border-soft) 0%,
    var(--uw-hover-bg) 50%,
    var(--uw-border-soft) 100%);
  background-size: 200% 100%;
  margin: 6px 0;
  animation: uw-skel 1.2s linear infinite;
}
.uw-skel-line.short,
.up-skel-line.short { width: 60%; }
@keyframes uw-skel {
  0%   { background-position: 0% 0%; }
  100% { background-position: -200% 0%; }
}


/* Booking-rivit (ryhmävaraukset) — yhteensopiva index.html:n inline-CSS:n
   kanssa joka käyttää .up-booking-luokkaa */
.up-booking {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: baseline;
  padding: 8px 0;
}
.up-booking + .up-booking {
  border-top: 1px solid var(--uw-border-soft);
}
.up-booking .booking-name {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.up-booking .booking-name .text {
  font-family: var(--uw-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--uw-ink);
}
.up-booking .booking-meta {
  grid-column: 1;
  font-family: var(--uw-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--uw-ink-mute);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.up-booking .booking-meta .dot { color: var(--uw-ink-faint); }
.up-booking .booking-meta .nights { color: var(--uw-ink-soft); }
.up-booking .booking-date {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-family: var(--uw-body);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--uw-ink-soft);
  text-align: right;
  white-space: nowrap;
}
.up-booking.unconfirmed .booking-name .text { color: var(--uw-ink); }
.up-booking .booking-flag {
  font-family: var(--uw-body);
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 2px 6px;
  border-radius: 3px;
  background: color-mix(in oklab, #d4925b 25%, transparent);
  color: #8a4f1f;
}


/* Booking-filter-tabit + näytä kaikki -toggle (säilytetty) */
.up-info-block-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin: 4px 0;
}
.up-info-tab {
  font-family: var(--uw-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--uw-ink-mute);
  background: transparent;
  border: 1px solid transparent;
  transition: background var(--uw-tr-snappy), color var(--uw-tr-snappy), border-color var(--uw-tr-snappy);
}
.up-info-tab:hover {
  color: var(--uw-ink);
  background: var(--uw-hover-bg);
}
.up-info-tab.active {
  color: var(--uw-ink);
  background: var(--uw-sage-pale);
  border-color: color-mix(in oklab, var(--uw-sage-deep) 30%, transparent);
}


/* ── No-access fallback ─────────────────────────────────────────────── */

.uw-no-access {
  display: none;
  min-height: 60vh;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
}
body.no-access-mode .uw-page > .uw-layout { display: none; }
body.no-access-mode .uw-no-access { display: flex; }

.uw-no-access-text {
  font-family: var(--uw-body);
  font-size: 18px;
  color: var(--uw-ink);
  margin-bottom: 8px;
}
.uw-no-access-user {
  font-family: var(--uw-body);
  font-weight: 500;
  font-size: 12px;
  color: var(--uw-ink-mute);
  letter-spacing: 0;
}


/* ── Mobile ─────────────────────────────────────────────────────────── */

@media (max-width: 880px) {
  /* Mobiilissa sidebar on off-canvas drawer: piilossa oletuksena, drawer-painike
     topbarissa avaa overlay-tilaisesti. Drawerissa kaikki labelit + lapset
     näkyvät aina (ei hover-mekaniikkaa, koska hoveria ei mobiilissa ole). */
  .uw-layout {
    padding-left: 0;
  }
  .uw-sidebar {
    width: 280px;
    z-index: 60;
    transform: translateX(-100%);
    box-shadow: 0 8px 24px rgba(20,18,14,0.18);
    padding: 18px 14px 24px;
  }
  /* Mobiilissa is-expanded ei vaikuta — drawer hoitaa kaiken */
  .uw-sidebar.is-expanded {
    width: 280px;
    padding: 18px 14px 24px;
    box-shadow: 0 8px 24px rgba(20,18,14,0.18);
  }
  /* Drawerissa labelit + group-otsikot näkyvät aina, sub-listat auki */
  .uw-sidebar-group-label {
    display: block;
  }
  .uw-sidebar-top-label,
  .uw-sidebar-label {
    opacity: 1;
  }
  .uw-sidebar-sub-list {
    max-height: none;
    padding-top: 2px;
    padding-bottom: 4px;
  }
  /* Mobile: ei zoom-efektiä (touch UX) */
  .uw-sidebar-top:hover,
  .uw-sidebar-item:hover {
    transform: none;
  }
  .uw-layout.drawer-open .uw-sidebar {
    transform: translateX(0);
  }

  /* Drawer-backdrop */
  .uw-layout.drawer-open::before {
    content: '';
    position: fixed;
    inset: var(--uw-topbar-h) 0 0 0;
    background: rgba(20,18,14,0.35);
    z-index: 55;
  }

  /* Topbar: kompaktimpi padding, logo skaalautuu pienempänä */
  .uw-topbar { padding: 0 16px; }
  .uw-brand-logo { height: 20px; }

  .uw-main { padding: 22px 18px 32px; }
}

@media (max-width: 540px) {
  .uw-greeting { font-size: 24px; }
  .uw-topbar { grid-template-columns: auto 1fr auto; gap: 12px; }
  .uw-brand-logo { height: 18px; }
  .uw-domain-card-title { font-size: 22px; }
  .uw-info-title { font-size: 24px; }
}


/* ── Mobile drawer-toggle (näkyy vain mobile-tilassa) ───────────────── */

.uw-mobile-menu-btn {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: var(--uw-radius-sm);
  align-items: center;
  justify-content: center;
  color: var(--uw-ink);
  background: transparent;
  margin-right: 4px;
}
.uw-mobile-menu-btn:hover { background: var(--uw-hover-bg); }
.uw-mobile-menu-btn svg { width: 20px; height: 20px; }
@media (max-width: 880px) {
  .uw-mobile-menu-btn { display: inline-flex; }
}

/* ============================================================
   Mobile UX — tap feedback (mirror uhanda-paper.css block).
   Sivut jotka käyttävät vain uhanda-workspace.css:ää saavat saman
   tap-fiiliksen ilman että pitää importata paper.css:ää.
   ============================================================ */
:where(html) { -webkit-tap-highlight-color: transparent; }
:where(button, a, [role="button"], summary, label, input[type="checkbox"], input[type="radio"]) {
  touch-action: manipulation;
}
@media (hover: none) and (pointer: coarse) {
  :where(button, a, .uw-mobile-menu-btn, [data-tap]):active {
    transform: scale(0.97);
    transition: transform 120ms cubic-bezier(.2,.7,.2,1);
  }
}

/* ═══ Mobiili peach-teema + bottom-navin shell-overridet (≤780px) ═══════════
   Bottom-navin OMAT säännöt (.uw-bottomnav / .uw-bn-*) on eristetty tiedostoon
   /assets/uhanda-bottomnav.css (ladataan @import-rivillä tämän tiedoston alussa),
   jotta RevMan voi cross-ladata pelkän bottom-navin ilman näitä shell-overrideja.
   Tähän jäävät VAIN workspacen shell-overridet (topbar/main/body/brand). */
.uw-brand-logo-mobile { display: none; }  /* näkyy vain mobiilissa (≤780px); injektoidaan uhanda-workspace.js:stä */

@media (max-width: 780px) {
  /* Burger pois — bottom-nav korvaa mobiilin drawerin */
  .uw-mobile-menu-btn { display: none !important; }
  /* Lämmin off-white tausta */
  body { background: #fcf8f5; }
  /* Topbar: override grid → flex jotta brand keskittyy (säilytä position:fixed).
     Logo keskelle, avatar absoluuttisesti oikealle. */
  .uw-topbar { background: linear-gradient(100deg, #f3e3db 0%, #f9efe9 72%); display: flex; justify-content: center; align-items: center; gap: 0; }
  .uw-topbar-spacer { display: none; }
  .uw-topbar-right { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
  /* Mobiilissa vaakalogo pois, pystysuora WORK.SPACE-mobiililogo tilalle */
  .uw-brand-logo { display: none; }
  .uw-brand-logo-mobile { display: block; height: 29px; width: auto; }
  /* Ei card-on-card: sisältö suoraan taustalle (ei peach-paneelia). Tilaa alapalkille. */
  .uw-main {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
    padding: 14px 16px calc(90px + env(safe-area-inset-bottom));
  }
}


/* ── Self-service Monday-yhdistys (avatar-dropdown rivi + modaali) ────────
   #uwMdConnect on <a> avatar-dropdownissa → perii .uw-avatar-dropdown a -tyylin.
   Injektoidaan uhanda-workspace.js:stä (uwMondayConnectMount). Näkyy jaetussa
   chromessa → mainsite + RevMan. */
.uw-md-connect.connected { color: var(--uw-sage-deep); font-weight: 600; }

.uw-md-modal { position: fixed; inset: 0; z-index: 2000; display: none; }
.uw-md-modal.open { display: block; }
.uw-md-backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 18, 14, 0.32);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.uw-md-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px));
  background: var(--uw-card-bg); border: 1px solid var(--uw-border);
  border-radius: var(--uw-radius); box-shadow: var(--uw-shadow-dropdown);
  padding: 20px 22px 18px; font-family: var(--uw-body);
}
.uw-md-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.uw-md-title { font-family: var(--uw-display, var(--uw-body)); font-size: 17px; font-weight: 600; color: var(--uw-ink); }
.uw-md-x { background: none; border: none; cursor: pointer; font-size: 16px; color: var(--uw-ink-mute); line-height: 1; padding: 4px; }
.uw-md-x:hover { color: var(--uw-ink); }
.uw-md-statusline { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--uw-ink-soft); margin-bottom: 14px; }
.uw-md-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--uw-ink-faint); flex: 0 0 auto; }
.uw-md-dot.ok { background: var(--uw-sage-deep); }
.uw-md-dot.warn { background: #d08a3a; }
.uw-md-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--uw-ink-mute); margin-bottom: 6px; }
.uw-md-input {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid var(--uw-border); border-radius: var(--uw-radius-sm);
  font-family: var(--uw-mono, ui-monospace, monospace); font-size: 13px;
  color: var(--uw-ink); background: var(--uw-card-bg-soft);
}
.uw-md-input:focus { outline: none; border-color: var(--uw-sage-deep); }
.uw-md-help { font-size: 11.5px; line-height: 1.5; color: var(--uw-ink-mute); margin: 10px 0 0; }
.uw-md-help b { color: var(--uw-ink-soft); font-weight: 600; }
.uw-md-err { margin-top: 10px; font-size: 12.5px; color: #b5503f; background: rgba(181, 80, 63, .08); border-radius: var(--uw-radius-sm); padding: 8px 10px; }
.uw-md-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.uw-md-disconnect {
  margin-right: auto; background: none; border: 1px solid var(--uw-border);
  color: var(--uw-ink-mute); border-radius: var(--uw-radius-sm);
  padding: 8px 14px; font-family: var(--uw-body); font-size: 13px; cursor: pointer;
}
.uw-md-disconnect:hover { color: #b5503f; border-color: color-mix(in oklab, #b5503f 40%, transparent); }
.uw-md-save {
  background: var(--uw-sage-deep); border: none; color: #fff;
  border-radius: var(--uw-radius-sm); padding: 9px 18px;
  font-family: var(--uw-body); font-size: 13px; font-weight: 600; cursor: pointer;
}
.uw-md-save:hover { filter: brightness(1.06); }
.uw-md-save:disabled { opacity: .6; cursor: default; }

/* ── iOS focus-zoom -esto (globaali, mobiili ≤780px) ───────────────────────
   iOS Safari zoomaa input/textarea/selectiin jos sen font-size < 16px. Pakota
   ≥16px mobiilissa → fokus ei enää zoomaa. !important voittaa komponenttikohtaiset
   pienemmät arvot (esim. .uc-input 14px). Pinch-zoom SÄILYY (ei viewport-lukkoa).
   Ei checkbox/radio/range/color/file/nappi. Sama sääntö myös uhanda-paper.css:ssä
   (kattaa molemmat sivu-perheet). */
@media (max-width: 780px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]),
  textarea,
  select { font-size: 16px !important; }
}