/* ==========================================================================
   Reitti-Reiska visual design system
   Load AFTER Bootstrap 5. Reference variables everywhere; no raw hex values
   in component rules below this file.
   ========================================================================== */

:root {
  /* Brändi */
  --rr-green:        #6CC24A;  /* Lime Tree Green, Pantone 360C -- pääaksentti, toiminnot */
  --rr-green-hover:  #57A93A;  /* napin hover/active */
  --rr-green-text:   #3B7D27;  /* vihreä TEKSTI/linkki valkoisella (AA-kontrasti) */
  --rr-green-tint:   #ECF6E3;  /* vaalea vihreä tausta (badge, ghost-hover) */
  --rr-green-line:   #CBE6B7;  /* vihreän tint-elementin reuna */

  /* Neutraalit (lämmin harmaa) */
  --rr-ink:          #262626;  /* Black Matt -- navi, otsikot, tummat pinnat */
  --rr-ink-2:        #3E3E3F;  /* Komatsu Grey -- leipäteksti */
  --rr-muted:        #6C6F6A;  /* toissijainen teksti */
  --rr-hint:         #9C9F99;  /* vihjeet, placeholder, ei-aktiivinen */
  --rr-line:         #E6E8E2;  /* viivat, kortin reuna */
  --rr-line-2:       #E1E4DD;  /* hieman vahvempi reuna / input-reuna */
  --rr-zone:         #EBEDE8;  /* progress-taustat, kevyt vyöhyke */
  --rr-surface:      #F4F5F2;  /* sovelluksen taustaväri */
  --rr-white:        #FFFFFF;  /* kortit, sisältöpinnat */

  /* Tilat / liikennevalot */
  --rr-done:         #2E9E33;  --rr-done-tint:  #E4F3E0;  --rr-done-text:  #217026;
  --rr-progress:     #E6930E;  --rr-prog-tint:  #FBEFD8;  --rr-prog-text:  #8A5A00;
  --rr-idle:         #9C9F99;
  --rr-late:         #D6402F;  --rr-late-tint:  #FBE6E2;  --rr-late-text:  #A5342A;

  /* Info (esim. Noutopiste-badge) */
  --rr-info:         #345C86;  --rr-info-tint:  #EEF3FA;  --rr-info-line:  #D3E0EE;

  /* Muotoilu */
  --rr-radius-card:  16px;
  --rr-radius-inner: 12px;
  --rr-radius-btn:   10px;
  --rr-radius-pill:  99px;
  --rr-shadow-hero:  0 20px 40px rgba(0,0,0,.4);

  /* Väliasteikko */
  --rr-sp-1:4px;  --rr-sp-2:6px;  --rr-sp-3:8px;  --rr-sp-4:10px; --rr-sp-5:12px;
  --rr-sp-6:14px; --rr-sp-7:16px; --rr-sp-8:18px; --rr-sp-9:20px; --rr-sp-10:22px;
  --rr-sp-11:24px; --rr-sp-12:26px; --rr-sp-13:28px; --rr-sp-14:32px; --rr-sp-15:40px;
}

/* --------------------------------------------------------------------------
   Perusta
   -------------------------------------------------------------------------- */
body {
  background: var(--rr-surface);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  color: var(--rr-ink);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .rr-head { font-family: 'Archivo', sans-serif; font-weight: 700; letter-spacing: -.01em; }
a { color: var(--rr-green-text); text-decoration: none; }
a:hover { color: #2F6320; }
.tnum { font-variant-numeric: tabular-nums; }
::selection { background: var(--rr-green-line); }
.rr-page { padding: 28px 28px 48px; }
@media (max-width: 576px) { .rr-page { padding: 18px 16px 32px; } }
body.rr-login-page .rr-page {
  padding: 0; max-width: none; --bs-gutter-x: 0;
  display: flex; flex-direction: column; min-height: 100vh;
}
body.rr-login-page .rr-page > .alert { margin: 16px 16px 0; }
body.rr-login-page .rr-login { flex: 1 1 auto; min-height: 0; }

/* --------------------------------------------------------------------------
   Bootstrap 5 -ylikirjoitukset
   -------------------------------------------------------------------------- */
.btn { border-radius: var(--rr-radius-btn); font-weight: 600; }
.btn-primary {
  --bs-btn-bg: var(--rr-green);
  --bs-btn-border-color: var(--rr-green);
  --bs-btn-hover-bg: var(--rr-green-hover);
  --bs-btn-hover-border-color: var(--rr-green-hover);
  --bs-btn-active-bg: var(--rr-green-hover);
  --bs-btn-active-border-color: var(--rr-green-hover);
  --bs-btn-disabled-bg: var(--rr-green);
  --bs-btn-disabled-border-color: var(--rr-green);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  font-weight: 600; border-radius: var(--rr-radius-btn);
  padding: 11px 18px;
}
.btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(108,194,74,.35); }
.form-control:focus, .form-select:focus {
  border-color: var(--rr-green);
  box-shadow: 0 0 0 3px var(--rr-green-tint);
}
:root { --bs-link-color-rgb: 59,125,39; --bs-link-hover-color-rgb: 47,99,32; }

.alert {
  border-radius: var(--rr-radius-inner); border: 1px solid transparent; font-size: 14px;
}
.alert-primary, .alert-info {
  background: #fff; border-color: var(--rr-line); color: var(--rr-ink-2);
  border-left-width: 4px; border-left-color: var(--rr-green);
}
.alert-success { background: var(--rr-done-tint); color: var(--rr-done-text); border-color: var(--rr-green-line); }
.alert-warning { background: var(--rr-prog-tint); color: var(--rr-prog-text); border-color: #F0D9A8; }
.alert-danger { background: var(--rr-late-tint); color: var(--rr-late-text); border-color: #F0C4BC; }

/* --------------------------------------------------------------------------
   4.1 Napit
   -------------------------------------------------------------------------- */
.rr-btn-secondary {
  color: var(--rr-ink-2); background: var(--rr-white); border: 1.5px solid var(--rr-line-2);
  border-radius: var(--rr-radius-btn); font-weight: 600; padding: 10px 16px;
}
.rr-btn-secondary:hover { border-color: var(--rr-hint); }

.rr-btn-ghost {
  color: var(--rr-green-text); background: transparent; border: 0;
  border-radius: var(--rr-radius-btn); font-weight: 600; padding: 10px 14px;
}
.rr-btn-ghost:hover { background: var(--rr-green-tint); }

.rr-btn-soft {
  color: var(--rr-green-text); background: var(--rr-green-tint); border: 0;
  border-radius: var(--rr-radius-btn); font-weight: 600; padding: 9px 16px;
}
.rr-btn-soft:hover { background: #DCEFCE; }

.rr-btn-danger { color: #fff; background: var(--rr-late); border: 0; border-radius: var(--rr-radius-btn); font-weight: 600; }
.rr-btn-danger:hover { background: #B9372A; }

.rr-btn-done { color: #fff; background: var(--rr-done); border: 0; border-radius: var(--rr-radius-btn); font-weight: 600; }
.rr-btn-done:hover { background: #257A29; }

.rr-btn-dark { color: #fff; background: var(--rr-ink); border: 0; border-radius: var(--rr-radius-btn); font-weight: 700; }

.rr-btn-lg-touch {
  width: 100%; font-weight: 700; font-size: 18px; padding: 18px; border: 0;
  border-radius: 14px;
}
.rr-btn-deliver { background: var(--rr-done); color: #fff; box-shadow: 0 8px 18px rgba(46,158,51,.32); padding: 21px; font-size: 19px; }
.rr-btn-nav { background: var(--rr-ink); color: #fff; padding: 19px; }

/* --------------------------------------------------------------------------
   4.2 Badget
   -------------------------------------------------------------------------- */
.rr-badge {
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 12px; border-radius: 7px;
  padding: 4px 10px; display: inline-flex; align-items: center; gap: 5px;
}
.rr-badge-carrier { background: var(--rr-zone); color: var(--rr-ink-2); }

.rr-badge-opt { background: var(--rr-green-tint); color: var(--rr-done-text); border: 1px solid var(--rr-green-line); }
.rr-badge-opt::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rr-done); }
.rr-badge-noopt { background: var(--rr-prog-tint); color: var(--rr-prog-text); border: 1px solid #F0D9A8; }

.rr-badge-pickup { background: var(--rr-info-tint); color: var(--rr-info); border: 1px solid var(--rr-info-line); }

.rr-status {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14px;
  border-radius: 9px; padding: 8px 13px; width: fit-content;
}
.rr-status .dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.rr-status-idle { background: var(--rr-surface); color: #5A5D58; } .rr-status-idle .dot { background: var(--rr-idle); }
.rr-status-progress { background: var(--rr-prog-tint); color: var(--rr-prog-text); } .rr-status-progress .dot { background: var(--rr-progress); }
.rr-status-done { background: var(--rr-done-tint); color: var(--rr-done-text); } .rr-status-done .dot { background: var(--rr-done); }
.rr-status-late { background: var(--rr-late-tint); color: var(--rr-late-text); } .rr-status-late .dot { background: var(--rr-late); }

/* --------------------------------------------------------------------------
   4.3 Kortit
   -------------------------------------------------------------------------- */
.rr-card { background: #fff; border: 1px solid var(--rr-line); border-radius: var(--rr-radius-card); }
.rr-card-pad { padding: 20px 22px; }
.rr-card-empty { opacity: .55; filter: grayscale(40%); }

.rr-stat .num { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 38px; line-height: 1; }
.rr-stat .label { font-size: 14px; color: var(--rr-muted); margin-top: 6px; }
.rr-stat-warn { background: #FEFBF4; border-color: #F0D9A8; }
.rr-stat-warn .num { color: #B4780A; } .rr-stat-warn .label { color: var(--rr-prog-text); }

/* Live-tilanne hero */
.rr-hero {
  background: var(--rr-ink); color: #fff; border-radius: 18px; padding: 26px 30px;
  position: relative; overflow: hidden;
}
.rr-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(108,194,74,.18), transparent 70%);
  pointer-events: none;
}
.rr-hero .eyebrow { color: var(--rr-hint); font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rr-hero .rr-hero-cols { display: flex; gap: 56px; margin-top: 18px; flex-wrap: wrap; position: relative; }
.rr-hero .rr-hero-num { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 32px; }
.rr-hero .rr-hero-label { font-size: 14px; color: var(--rr-hint); margin-top: 5px; }

/* --------------------------------------------------------------------------
   4.4 Lomakekentät
   -------------------------------------------------------------------------- */
.form-control, .form-select {
  border: 1.5px solid #D9DCD5; border-radius: var(--rr-radius-inner);
  font-size: 15px; color: var(--rr-ink); padding: 11px 14px;
}
.form-label {
  font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--rr-muted);
}

/* --------------------------------------------------------------------------
   4.5 Edistymispalkki
   -------------------------------------------------------------------------- */
.rr-progress { height: 9px; border-radius: var(--rr-radius-pill); background: var(--rr-zone); overflow: hidden; }
.rr-progress > span { display: block; height: 100%; border-radius: var(--rr-radius-pill); background: var(--rr-green); }
.rr-progress.is-done > span { background: var(--rr-done); }

/* --------------------------------------------------------------------------
   4.6 Taulukot
   -------------------------------------------------------------------------- */
.rr-table { border: 1px solid var(--rr-line); border-radius: var(--rr-radius-inner); overflow: hidden; }
.rr-table thead th, .rr-table .rr-thead {
  background: var(--rr-surface); font-family: 'Archivo', sans-serif; font-size: 11px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rr-hint);
  padding: 10px 16px;
}
.rr-table td, .rr-table .rr-row > * { padding: 13px 16px; font-size: 14px; border-top: 1px solid #EFF0ED; }
.rr-row-special { background: #FEFBF4; }

.rr-stop-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; font-weight: 700; font-size: 12px;
  border: 1.5px solid var(--rr-line-2); color: var(--rr-muted); background: #fff; flex-shrink: 0;
}
.rr-stop-num.done { background: var(--rr-done); border-color: var(--rr-done); color: #fff; }
.rr-stop-num.rejected { background: var(--rr-late); border-color: var(--rr-late); color: #fff; }
.rr-stop-num.next { border-color: var(--rr-green); box-shadow: 0 0 0 4px rgba(108,194,74,.22); color: var(--rr-green-text); }

.rr-route-stat-box {
  background: var(--rr-surface); border-radius: var(--rr-radius-inner); padding: 8px 14px;
  display: inline-flex; flex-direction: column; margin-right: 8px;
}
.rr-route-stat-box .label {
  font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--rr-hint);
}
.rr-route-stat-box .value { font-weight: 700; white-space: nowrap; }

/* --------------------------------------------------------------------------
   4.7 Navigaatiopalkki
   -------------------------------------------------------------------------- */
.rr-navbar { background: var(--rr-ink); min-height: 60px; display: flex; align-items: center; gap: 30px; padding: 0 28px; flex-wrap: wrap; }
.rr-navbar .brand img { height: 24px; display: block; }
.rr-navbar a { color: var(--rr-hint); font-size: 15px; height: 60px; display: flex; align-items: center; padding: 0 6px; }
.rr-navbar a.active { color: #fff; font-weight: 600; border-bottom: 2.5px solid var(--rr-green); }

/* --------------------------------------------------------------------------
   4.8 Välilehdet
   -------------------------------------------------------------------------- */
.rr-tab { font-weight: 600; font-size: 14px; border-radius: var(--rr-radius-btn); padding: 9px 16px; border: 1.5px solid var(--rr-line-2); background: #fff; color: var(--rr-muted); }
.rr-tab.active { background: var(--rr-ink); color: #fff; border-color: var(--rr-ink); }

/* --------------------------------------------------------------------------
   Dashboard: reittiruudukko, lähde-lista, kuljettajavalinta
   -------------------------------------------------------------------------- */
.rr-route-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--rr-sp-7); }
.rr-driver-select {
  display: flex; align-items: center; gap: var(--rr-sp-3);
  border: 1.5px solid var(--rr-line-2); border-radius: 9px; padding: var(--rr-sp-3) var(--rr-sp-5);
  background: #FBFCFA;
}
.rr-driver-select .dot { width: 11px; height: 11px; border-radius: 50%; }
.rr-driver-select input { border: 0; background: transparent; padding: 0; font-size: 14px; flex: 1 1 auto; min-width: 0; }
.rr-driver-select input:focus { outline: none; box-shadow: none; }
.rr-source-row + .rr-source-row { margin-top: var(--rr-sp-7); }

/* --------------------------------------------------------------------------
   Asetukset: sivunavi + osiot
   -------------------------------------------------------------------------- */
.rr-settings { display: grid; grid-template-columns: 230px 1fr; gap: var(--rr-sp-11); align-items: start; }
.rr-settings-nav { position: sticky; top: 20px; padding: var(--rr-sp-4); }
.rr-settings-nav a { display: block; padding: 11px 13px; border-radius: 10px; color: var(--rr-ink-2); font-weight: 500; font-size: 14px; }
.rr-settings-nav a:hover { background: var(--rr-surface); }
.rr-settings-nav a.active { background: var(--rr-green-tint); color: var(--rr-green-text); font-weight: 600; }
.rr-settings-body { display: flex; flex-direction: column; gap: var(--rr-sp-9); min-width: 0; }
.rr-settings-section { padding: var(--rr-sp-12); }

@media (max-width: 900px) {
  .rr-settings { grid-template-columns: 1fr; }
  .rr-settings-nav { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
}

/* --------------------------------------------------------------------------
   Kirjautuminen
   -------------------------------------------------------------------------- */
.rr-login { display: grid; grid-template-columns: 1.05fr 1fr; }
.rr-login-hero {
  background: var(--rr-ink); color: #fff; position: relative; overflow: hidden;
  padding: 48px 56px; display: flex; flex-direction: column;
}
.rr-login-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(108,194,74,.22), transparent 55%),
              radial-gradient(circle at 80% 80%, rgba(108,194,74,.14), transparent 50%);
  pointer-events: none;
}
.rr-login-hero .brand { position: relative; }
.rr-login-hero .brand img { height: 26px; }
.rr-login-hero .eyebrow {
  position: relative; margin-top: 56px; color: var(--rr-hint); font-family: 'Archivo', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.rr-login-hero h1 {
  position: relative; font-family: 'Archivo', sans-serif; font-style: italic; font-weight: 800;
  font-size: 42px; margin: 16px 0 0; color: #fff;
}
.rr-login-hero p { position: relative; color: var(--rr-hint); font-size: 15px; margin-top: 18px; max-width: 34ch; }
.rr-login-hero .reiska {
  position: absolute; bottom: 0; right: 34px; height: 560px; max-height: 80%;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.4));
}
.rr-login-form-wrap { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--rr-surface); }
.rr-login-form { width: 100%; max-width: 400px; }
.rr-login-form .eyebrow {
  color: var(--rr-hint); font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.rr-login-form h2 { font-size: 26px; margin: 8px 0 0; }
.rr-login-form .field + .field { margin-top: 18px; }
.rr-login-form .rr-login-submit { margin-top: 24px; }
.rr-login-divider { margin: 28px 0; border: 0; border-top: 1px solid var(--rr-line); }
.rr-login-note { font-size: 13px; color: var(--rr-muted); text-align: center; }

@media (max-width: 860px) {
  .rr-login { grid-template-columns: 1fr; }
  .rr-login-hero { min-height: 260px; padding: 32px 24px; }
  .rr-login-hero .reiska { display: none; }
}

/* --------------------------------------------------------------------------
   Kuljettajan mobiili
   -------------------------------------------------------------------------- */
.rr-driver-header { text-align: center; padding: 8px 20px 14px; }
.rr-driver-toggle {
  display: inline-flex; align-items: center; gap: 6px; border-radius: var(--rr-radius-pill);
  padding: 6px 14px; font-size: 13px; font-weight: 600; border: 1.5px solid var(--rr-line-2);
  background: #fff; color: var(--rr-muted);
}
.rr-driver-toggle.active { background: var(--rr-ink); color: #fff; border-color: var(--rr-ink); }

.rr-theme-toggle {
  position: fixed; top: 10px; right: 10px; z-index: 1000;
  border-radius: var(--rr-radius-pill); border: 1.5px solid var(--rr-line-2);
  background: var(--rr-white); color: var(--rr-muted); font-size: 12px; font-weight: 600;
  padding: 6px 12px;
}

.rr-stop-card {
  display: block; background: var(--rr-white); border-radius: var(--rr-radius-card);
  border: 1.5px solid var(--rr-line); padding: 15px 16px; margin-bottom: 10px;
}
.rr-stop-card.next { border-color: var(--rr-green); background: var(--rr-green-tint); }
.rr-stop-card.completed { opacity: .65; }
.rr-stop-card-link { display: block; text-decoration: none; color: inherit; }
.rr-stop-card .stop-index { font-weight: 700; color: var(--rr-muted); margin-right: 6px; }
.rr-stop-card .meta { font-size: 14px; color: var(--rr-muted); margin-top: 4px; }
.rr-multi-carrier-banner {
  margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--rr-info);
  background: var(--rr-info-tint); border: 1px solid var(--rr-info-line);
  border-radius: 7px; padding: 4px 10px; display: inline-block;
}

.rr-ohje-block { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rr-line); }
.rr-ohje-toggle {
  background: none; border: none; color: var(--rr-info); font-size: 13px; font-weight: 600;
  padding: 4px 0; cursor: pointer;
}
.rr-ohje-panel { background: var(--rr-surface); border-radius: 10px; padding: 10px; margin-top: 4px; }
.rr-ohje-vastaus { font-size: 13px; color: var(--rr-ink); white-space: pre-wrap; }
.rr-ohje-vastaus:empty { display: none; }

.rr-break-card {
  border-radius: var(--rr-radius-card); background: var(--rr-prog-tint);
  padding: 15px 16px; margin-bottom: 10px; display: flex; gap: 13px; align-items: flex-start;
}
.rr-break-card .avatar { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.rr-break-card .body { flex: 1 1 auto; min-width: 0; }
.rr-break-active {
  border-radius: var(--rr-radius-card); background: var(--rr-green-tint);
  padding: 15px 16px; margin-bottom: 10px; text-align: center;
}

.rr-stop-detail-field { margin-bottom: var(--rr-sp-9); }
.rr-stop-detail-field .label {
  font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--rr-hint);
}
.rr-stop-detail-field .value { font-size: 16px; margin-top: 2px; }
.rr-stop-detail-field .value.rr-head { font-size: 20px; font-weight: 800; }

/* --------------------------------------------------------------------------
   Tumman tilan CSS-muuttujat (kuljettajan mobiili)
   -------------------------------------------------------------------------- */
.rr-driver[data-rr-theme="dark"] {
  --rr-surface:  #141414;
  --rr-white:    #1F1F1F;
  --rr-zone:     #2C2C2C;
  --rr-line:     #333333;
  --rr-line-2:   #3A3A3A;

  --rr-ink:      #F5F5F3;
  --rr-ink-2:    #E6E7E3;
  --rr-muted:    #B4B6B1;
  --rr-hint:     #8C8E89;

  --rr-green:      #7ACE58;
  --rr-green-hover:#8BD86A;
  --rr-green-text: #8FD46E;
  --rr-green-tint: #21331A;
  --rr-green-line: #3C5A2D;

  --rr-done:#57C55B; --rr-done-tint:#17331A; --rr-done-text:#8FE092;
  --rr-progress:#F0A93A; --rr-prog-tint:#3A2C12; --rr-prog-text:#F3C889;
  --rr-idle:#9A9C97;
  --rr-late:#F0594A; --rr-late-tint:#3A1B17; --rr-late-text:#F6A79D;
  --rr-info:#8FB4E0; --rr-info-tint:#1B2838; --rr-info-line:#31485F;
}

.rr-driver[data-rr-theme="dark"] body,
.rr-driver[data-rr-theme="dark"] { background: var(--rr-surface); }
.rr-driver[data-rr-theme="dark"] .rr-card,
.rr-driver[data-rr-theme="dark"] .rr-stop-card,
.rr-driver[data-rr-theme="dark"] .rr-break-active { background: var(--rr-white); border-color: var(--rr-line); }
.rr-driver[data-rr-theme="dark"] .rr-btn-nav { background: #000; }
.rr-driver[data-rr-theme="dark"] .rr-btn-deliver { background: var(--rr-done); color: #08210A; }
.rr-driver[data-rr-theme="dark"] .form-control { background: #1A1A1A; color: var(--rr-ink); }
.rr-driver[data-rr-theme="dark"] .rr-status-idle { background: #262626; color: #C9CBC6; }
/* Bootstrap utility classes carry their own hardcoded (light-mode) colors
   that don't respond to our variables -- reroute the ones this app actually
   uses in the driver view to the theme-aware palette instead. */
.rr-driver[data-rr-theme="dark"] .text-muted { color: var(--rr-muted) !important; }

/* --------------------------------------------------------------------------
   Tuloste
   -------------------------------------------------------------------------- */
.rr-print td, .rr-print th { border: 1px solid #C8C8C8; padding: 8px 10px; text-align: left; }
.rr-print thead th {
  background: #EDEDED; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em;
}
.rr-zebra { background: #F7F7F7; }
.rr-nouto {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 10px; border: 1px solid #999;
  border-radius: 3px; padding: 1px 5px; margin-left: 6px; color: #333;
}
.rr-tick { display: inline-block; width: 17px; height: 17px; border: 1.5px solid #555; border-radius: 3px; }

@media print {
  .rr-navbar, .rr-no-print { display: none !important; }
  body { background: #fff; color: #1A1A1A; }
  .rr-print table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
  .rr-print th, .rr-print td { border: 1px solid #C8C8C8; padding: 8px 10px; }
  .rr-print thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rr-print tr { break-inside: avoid; }
  .rr-row-special, .rr-zebra { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rr-print thead { display: table-header-group; }
  @page { size: A4; margin: 13mm; }
}