/* ============================================================
   liitos-talentti-v2.css — Talentti-portaali, Asetukset & SaaS (ui-v2-kerros)
   Ladataan liitos-ui-v2.css:n JÄLKEEN. KAIKKI säännöt skoopattu .ui-v2:n alle.
   Toimii sekä ERP-sovelluksen sisällä (.rewo-app.ui-v2) ETTÄ Talentin
   standalone-shortcode-sivulla (.rewo-tp.ui-v2) — siksi tokenit määritellään
   tässä myös pelkälle .ui-v2:lle (varmuus jos .rewo-app puuttuu).
   ============================================================ */

/* tokenit myös ilman .rewo-app:ia (standalone Talentti) */
.ui-v2{
  --v2-paper:#FBFCFB; --v2-panel:#F4F6F4; --v2-card:#FFFFFF;
  --v2-ink:#1C2024; --v2-ink2:#3A4248; --v2-muted:#6B7278;
  --v2-line:#E6E9E6; --v2-line2:#EEF1EE;
  --v2-brand:#2C5F2D; --v2-accent:#54A924; --v2-accent-soft:#E7F2E1;
  --v2-sidebar:#0E2A20; --v2-blue:#2563EB; --v2-pos:#1F8A3B; --v2-neg:#C0341D; --v2-warn:#E08600;
  --v2-r-card:12px; --v2-r-ctrl:10px;
}
.rewo-tp.ui-v2{ background:var(--v2-panel); color:var(--v2-ink); }

/* ---------- portaalikuori (uudet komponentit) ---------- */
.ui-v2 .ptop{ height:60px; background:var(--v2-sidebar); color:#fff; display:flex; align-items:center; gap:14px; padding:0 22px; }
.ui-v2 .ptop .nm{ font-weight:800; font-size:18px; } .ui-v2 .ptop .sp{ flex:1; }
.ui-v2 .roletag{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 11px; border-radius:999px; background:#163B2C; color:#9fe6b0; border:1px solid #2f5a45; }
.ui-v2 .ptabs{ display:flex; gap:6px; background:#0b231b; padding:0 22px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ui-v2 .ptabs a{ padding:11px 14px; font-size:13.5px; font-weight:600; color:#9fb6a6; border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; text-decoration:none; }
.ui-v2 .ptabs a.on{ color:#fff; border-bottom-color:var(--v2-accent); }
.ui-v2 .portalbody{ padding:22px; max-width:1180px; margin:0 auto; }

/* profiili */
.ui-v2 .profile{ display:flex; gap:16px; align-items:center; background:var(--v2-card); border:1px solid var(--v2-line); border-radius:14px; padding:16px; flex-wrap:wrap; }
.ui-v2 .profile .pic{ width:60px; height:60px; border-radius:50%; background:#0E3A35; color:#84C24A; font-weight:800; font-size:20px; text-align:center; line-height:60px; flex:0 0 60px; }
.ui-v2 .profile .nm{ font-weight:800; font-size:18px; }
.ui-v2 .chipline{ margin-top:5px; }
.ui-v2 .chip{ display:inline-block; background:#EEF1EE; color:var(--v2-ink2); border-radius:7px; padding:3px 9px; font-size:12px; margin:3px 5px 0 0; }
.ui-v2 .chip.g{ background:var(--v2-accent-soft); color:var(--v2-brand); }
.ui-v2 .chip.warn{ background:#FBF3D6; color:#876b12; }
.ui-v2 .meta{ display:flex; gap:22px; font-size:12.5px; color:var(--v2-muted); flex-wrap:wrap; }
.ui-v2 .meta b{ color:var(--v2-ink); display:block; font-size:13.5px; }

/* tähtiarviot */
.ui-v2 .stars{ color:#E3A92B; font-size:15px; letter-spacing:1px; } .ui-v2 .stars .o{ color:#dcdcd2; }
.ui-v2 .rate4{ display:flex; gap:14px; flex-wrap:wrap; margin-top:4px; } .ui-v2 .rate4 .r{ font-size:12px; color:var(--v2-muted); }

/* toggle-kytkin (asetukset) */
.ui-v2 .switch{ width:40px; height:23px; border-radius:999px; background:#cfd4cd; position:relative; display:inline-block; vertical-align:middle; cursor:pointer; }
.ui-v2 .switch.on{ background:var(--v2-accent); }
.ui-v2 .switch:after{ content:""; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%; background:#fff; transition:.2s; }
.ui-v2 .switch.on:after{ left:19px; }
.ui-v2 .setrow{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--v2-line2); }
.ui-v2 .setrow .t{ font-weight:600; font-size:13.5px; } .ui-v2 .setrow .d{ font-size:12px; color:var(--v2-muted); } .ui-v2 .setrow .sp{ flex:1; }

/* mittari (tallennustila/kiintiö) */
.ui-v2 .meter{ height:8px; background:#EEF1EE; border-radius:999px; overflow:hidden; margin-top:6px; }
.ui-v2 .meter b{ display:block; height:100%; background:linear-gradient(90deg,#6CC23A,#2C5F2D); }
.ui-v2 .meter b.warn{ background:linear-gradient(90deg,#F2B23A,#E08600); }

/* istuimet + summa (SaaS) */
.ui-v2 .seatline{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--v2-line2); font-size:13.5px; }
.ui-v2 .seatline .sp{ flex:1; } .ui-v2 .seatline .q{ font-weight:800; }
.ui-v2 .bigtot{ display:flex; align-items:baseline; gap:8px; margin-top:10px; } .ui-v2 .bigtot .v{ font-size:28px; font-weight:800; font-variant-numeric:tabular-nums; }

/* ---------- SILTA: olemassa oleva Talentti-markup -> v2-ilme ---------- */
.ui-v2 .rewo-tp-card{ background:var(--v2-card); border:1px solid var(--v2-line); border-radius:var(--v2-r-card); box-shadow:0 1px 2px rgba(16,42,32,.05); }
.ui-v2 .rewo-tp-cardhead h2,
.ui-v2 .rewo-tp-cardhead h3{ font-weight:800; letter-spacing:-.01em; color:var(--v2-ink); }
.ui-v2 .rewo-tp-btn{ border-radius:var(--v2-r-ctrl); font-weight:700; }
.ui-v2 .rewo-tp-table{ font-variant-numeric:tabular-nums; }
.ui-v2 .rewo-tp-table th{ text-transform:uppercase; letter-spacing:.05em; font-size:11px; font-weight:700; color:#8a9090; border-bottom:1px solid var(--v2-line); }
.ui-v2 .rewo-tp-table td{ border-bottom:1px solid var(--v2-line2); }
.ui-v2 .rewo-tp-table tbody tr:hover td{ background:#FAFBFA; }
.ui-v2 .rewo-tp-top{ background:var(--v2-sidebar); color:#fff; border-radius:0 0 14px 14px; }
.ui-v2 .rewo-tp-tabs a.on,
.ui-v2 .rewo-tp-subtabs a.on{ border-bottom-color:var(--v2-accent); color:var(--v2-ink); }
.ui-v2 .rewo-tp-role{ background:#163B2C; color:#9fe6b0; border-radius:999px; padding:3px 10px; font-size:11px; font-weight:700; }
/* Talentin lomakekentät: isommat kosketuskohteet */
.ui-v2 .rewo-tp-form input:not([type=checkbox]):not([type=radio]):not([type=range]),
.ui-v2 .rewo-tp-form select,
.ui-v2 .rewo-tp-form textarea{ border-radius:var(--v2-r-ctrl); border:1px solid #D9DDD9; font-size:14px; }
/* Talentin kello-chip korostus */
.ui-v2 .rewo-tp-timerchip{ background:var(--v2-sidebar); color:#fff; border-radius:14px; }

/* ---------- RESPONSIIVISUUS (Talentti on työntekijälle mobile-first) ---------- */
@media (max-width:1024px){
  .ui-v2 .portalbody{ padding:16px; }
}
@media (max-width:680px){
  .ui-v2 .ptop{ padding:0 14px; height:54px; }
  .ui-v2 .portalbody{ padding:13px; }
  .ui-v2 .profile{ gap:12px; padding:13px; }
  .ui-v2 .meta{ gap:14px; }
  /* isot kosketuskohteet + ei iOS-zoomia (16px) */
  .ui-v2 .rewo-tp-btn{ min-height:42px; line-height:1.1; }
  .ui-v2 .rewo-tp-form input:not([type=checkbox]):not([type=radio]):not([type=range]),
  .ui-v2 .rewo-tp-form select,
  .ui-v2 .rewo-tp-form textarea{ font-size:16px; min-height:44px; }
  /* leveät taulukot vieritettäviksi */
  .ui-v2 .rewo-tp-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
  .ui-v2 .setrow{ flex-wrap:wrap; }
  .ui-v2 .bigtot .v{ font-size:24px; }
}
@media (max-width:380px){
  .ui-v2 .ptop .nm{ font-size:16px; }
  .ui-v2 .meta{ flex-direction:column; gap:6px; }
}

/* v3.021 — kontrastivarmistus Talentissa: vaalealla pohjalla tumma teksti.
   Koskee sekä sovelluksen sisäistä (.rewo-app.ui-v2) että standalonea (.ui-v2). */
.ui-v2 .rewo-tp-card{ color:#1C2024; }
.ui-v2 .rewo-tp-card p,
.ui-v2 .rewo-tp-card li,
.ui-v2 .rewo-tp-card td,
.ui-v2 .rewo-tp-card label{ color:#1C2024; }
.ui-v2 .rewo-tp-card h1,
.ui-v2 .rewo-tp-card h2,
.ui-v2 .rewo-tp-card h3{ color:#1C2024; }
.ui-v2 .rewo-tp-muted,.ui-v2 .muted{ color:#566066; }
.ui-v2 .rewo-tp-card input:not([type=checkbox]):not([type=radio]),
.ui-v2 .rewo-tp-card select,
.ui-v2 .rewo-tp-card textarea{ color:#1C2024; background:#fff; }
.ui-v2 .rewo-tp-card input::placeholder,
.ui-v2 .rewo-tp-card textarea::placeholder{ color:#9aa3a0; opacity:1; }

/* "★ Arvioi" -details: piilota natiivi kolmio (summary on nappi) */
.rewo-tp-rate > summary{ list-style:none; }
.rewo-tp-rate > summary::-webkit-details-marker{ display:none; }
.rewo-tp-rate[open] > summary{ margin-bottom:2px; }

/* ════════════════════════════════════════════════════════════
   VELO LIGHT OVERRIDE (era 10) — Talentin tummanvihreä sivupalkki/topbar vaaleaksi.
   ════════════════════════════════════════════════════════════ */
.ui-velo .ptop{ background:#FFFFFF !important; color:#1B1F23 !important; border-bottom:1px solid #E3E6E9 !important; }
.ui-velo .rewo-tp-top{ background:#FFFFFF !important; color:#1B1F23 !important; border:1px solid #E3E6E9 !important; }
.ui-velo .rewo-tp-timerchip{ background:#2B3036 !important; color:#fff !important; }