/* RoboService-appen: mobil forst, samma grona som varumarket. */
:root {
  --rs-green: #006241;
  --rs-green-dark: #00402b;
  --rs-orange: #FF9E18;
  --rs-yellow: #FFC629;
  --rs-bg: #F4F7F5;
  --rs-card: #ffffff;
  --rs-text: #1b1f1d;
  --rs-muted: #667069;
  --rs-line: #dfe5e1;
  --rs-red: #b3261e;
  --rs-radius: 14px;
  --rs-tab-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--rs-bg); color: var(--rs-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
body.rs-app { min-height: 100vh; }
a { color: var(--rs-green); }
button { font: inherit; }
img { max-width: 100%; }

.rs-root { max-width: 720px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.rs-splash { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--rs-muted); gap: 12px; }
.rs-noscript { padding: 24px; text-align: center; }

/* Sidhuvud */
.rs-head { position: sticky; top: 0; z-index: 20; background: var(--rs-green); color: #fff;
  padding: calc(10px + var(--safe-t)) 16px 10px; display: flex; align-items: center; gap: 12px; min-height: 56px; }
.rs-head .rs-back { background: none; border: 0; color: #fff; font-size: 22px; padding: 4px 8px 4px 0; cursor: pointer; line-height: 1; }
.rs-head h1 { font-size: 1.1rem; margin: 0; font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-head .rs-sub { font-size: .78rem; opacity: .85; display: block; font-weight: 500; }
.rs-head img { width: 34px; height: 34px; border-radius: 8px; }

/* Innehall */
.rs-main { flex: 1; padding: 16px 16px calc(var(--rs-tab-h) + 24px + var(--safe-b)); }
.rs-section { margin: 0 0 22px; }
.rs-section h2 { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rs-muted); margin: 0 0 10px; font-weight: 700; }
.rs-card { background: var(--rs-card); border: 1px solid var(--rs-line); border-radius: var(--rs-radius); padding: 14px 16px; margin-bottom: 10px; }
.rs-card.rs-link { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; cursor: pointer; }
.rs-card.rs-link:active { background: #eef3f0; }
.rs-thumb { width: 64px; height: 64px; border-radius: 10px; background: #fff url() center/contain no-repeat; border: 1px solid var(--rs-line); flex: none; object-fit: contain; }
.rs-card .rs-title { font-weight: 700; margin: 0; }
.rs-card .rs-meta { color: var(--rs-muted); font-size: .88rem; margin: 2px 0 0; }
.rs-grow { flex: 1; min-width: 0; }
.rs-chev { color: var(--rs-muted); font-size: 22px; }
.rs-empty { color: var(--rs-muted); text-align: center; padding: 28px 12px; }
.rs-badge { display: inline-block; font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; background: #e6efea; color: var(--rs-green); vertical-align: middle; }
.rs-badge.warn { background: #fff1d6; color: #8a5200; }
.rs-badge.bad { background: #fde7e5; color: var(--rs-red); }
.rs-badge.muted { background: #eceeed; color: var(--rs-muted); }
.rs-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0; }
.rs-kv div { min-width: 0; }
.rs-kv dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rs-muted); margin: 0; }
.rs-kv dd { margin: 0; font-weight: 600; word-break: break-word; }
.rs-hero { display: flex; gap: 16px; align-items: center; }
.rs-hero img { width: 110px; height: 110px; border-radius: 12px; border: 1px solid var(--rs-line); background: #fff; object-fit: contain; }
.rs-hero h2 { font-size: 1.25rem; margin: 0 0 4px; text-transform: none; letter-spacing: 0; color: var(--rs-text); }

/* Knappar */
.rs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px;
  padding: 12px 20px; font-weight: 700; cursor: pointer; text-decoration: none; background: var(--rs-green); color: #fff; width: 100%; }
.rs-btn.secondary { background: #fff; color: var(--rs-green); border: 2px solid var(--rs-green); }
.rs-btn.orange { background: var(--rs-orange); color: #3A2400; }
.rs-btn.wa { background: #25D366; color: #08301a; }
.rs-btn:disabled { opacity: .55; cursor: default; }
.rs-btn + .rs-btn { margin-top: 10px; }
.rs-fab { position: fixed; right: 16px; bottom: calc(var(--rs-tab-h) + 16px + var(--safe-b)); z-index: 15; width: auto;
  box-shadow: 0 6px 18px rgba(0,0,0,.22); padding: 14px 20px; }

/* Formular */
.rs-form label { display: block; font-weight: 600; margin: 14px 0 6px; font-size: .92rem; }
.rs-form input[type=text], .rs-form input[type=email], .rs-form input[type=tel], .rs-form input[type=password], .rs-form select, .rs-form textarea {
  width: 100%; border: 1px solid var(--rs-line); border-radius: 10px; padding: 12px; font: inherit; background: #fff; }
.rs-form textarea { min-height: 120px; resize: vertical; }
.rs-form input:focus, .rs-form select:focus, .rs-form textarea:focus { outline: 2px solid var(--rs-green); border-color: var(--rs-green); }
.rs-form .rs-file { border: 2px dashed var(--rs-line); border-radius: 10px; padding: 14px; text-align: center; color: var(--rs-muted); background: #fff; }
.rs-form .rs-file input { width: 100%; }
.rs-msg { padding: 12px 14px; border-radius: 10px; margin: 12px 0; font-size: .95rem; }
.rs-msg.ok { background: #e6efea; color: var(--rs-green-dark); }
.rs-msg.err { background: #fde7e5; color: var(--rs-red); }
.rs-help { color: var(--rs-muted); font-size: .88rem; margin: 6px 0 0; }

/* Meddelandetrad */
.rs-thread { display: flex; flex-direction: column; gap: 10px; }
.rs-bubble { max-width: 88%; padding: 10px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--rs-line); }
.rs-bubble.mine { align-self: flex-end; background: #e6efea; border-color: #cfe0d7; }
.rs-bubble .rs-who { font-size: .74rem; color: var(--rs-muted); margin: 0 0 3px; }
.rs-bubble p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.rs-bubble .rs-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rs-bubble .rs-atts img { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--rs-line); }
.rs-bubble .rs-atts a.file { font-size: .85rem; }
.rs-reply { position: sticky; bottom: calc(var(--rs-tab-h) + var(--safe-b)); background: var(--rs-bg); padding: 10px 0 0; }
.rs-reply textarea { min-height: 70px; }
.rs-reply .rs-row { display: flex; gap: 10px; margin-top: 8px; align-items: center; }
.rs-reply .rs-row .rs-btn { width: auto; }
.rs-reply .rs-row input[type=file] { flex: 1; min-width: 0; font-size: .85rem; }

/* Flikrad. Den aktiva fliken ska synas pa en armslangds avstand: fylld pill
   bakom ikonen, morkare text, tjockare streck i ikonen. Bara farg racker inte
   pa en telefon i solljus. */
.rs-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #fff; border-top: 1px solid var(--rs-line);
  display: flex; justify-content: space-around; padding-bottom: var(--safe-b); height: calc(var(--rs-tab-h) + var(--safe-b));
  box-shadow: 0 -2px 10px rgba(0,0,0,.05); }
.rs-tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; color: #6b7671; font-size: .7rem; font-weight: 600; padding-top: 4px; min-width: 0; }
.rs-ikon { display: flex; align-items: center; justify-content: center; width: 58px; max-width: 100%; height: 30px;
  border-radius: 999px; background: transparent; transition: background .15s ease; }
.rs-tabs a.active { color: var(--rs-green); font-weight: 800; }
.rs-tabs a.active .rs-ikon { background: #cfe3d8; }
.rs-tabs a.active svg { stroke-width: 2.4; }
.rs-tabs a:active .rs-ikon { background: #e4efe9; }
.rs-tabs svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rs-etikett { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 720px) { .rs-tabs { max-width: 720px; margin: 0 auto; border-left: 1px solid var(--rs-line); border-right: 1px solid var(--rs-line); } }
@media (max-width: 359px) { .rs-tabs a { font-size: .64rem; } .rs-ikon { width: 46px; } }

/* Login */
.rs-login { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 32px 22px calc(32px + var(--safe-b)); }
.rs-login .rs-logo { width: 84px; height: 84px; border-radius: 18px; margin: 0 auto 14px; display: block; }
.rs-login h1 { text-align: center; font-size: 1.4rem; margin: 0 0 4px; }
.rs-login .rs-lead { text-align: center; color: var(--rs-muted); margin: 0 0 18px; }
.rs-login .rs-links { text-align: center; margin-top: 18px; font-size: .92rem; }
.rs-banner { background: var(--rs-yellow); color: #3A2400; padding: 10px 16px; font-size: .9rem; text-align: center; }
.rs-install { background: #fff; border: 1px solid var(--rs-line); border-radius: var(--rs-radius); padding: 12px 14px; margin-bottom: 16px; font-size: .9rem; display: flex; gap: 12px; align-items: center; }
.rs-install .rs-btn { width: auto; padding: 8px 14px; }

/* Underrubrik inuti en sektion (dokumenttyperna) */
.rs-subhead { font-size: .95rem; font-weight: 800; color: var(--rs-text); margin: 16px 0 8px; }
.rs-section .rs-subhead:first-child { margin-top: 0; }

/* RTK-kartan */
.rs-karta { height: 320px; border-radius: var(--rs-radius); border: 1px solid var(--rs-line); overflow: hidden; background: #e9eeeb; margin-bottom: 10px; }
.rs-karta .leaflet-control-attribution { font-size: 9px; }

/* Kundvyn: personalen ska aldrig kunna tro att de tittar pa sitt eget konto.
   Orange, inte gron - gront ar appens vanliga tillstand. */
.rs-preview { background: #FFE9C2; color: #4A2F00; padding: 9px 16px; font-size: .88rem;
  text-align: center; border-bottom: 2px solid var(--rs-orange); position: sticky; top: 56px; z-index: 19; }
.rs-preview a { color: #4A2F00; font-weight: 800; text-decoration: underline; margin-left: 4px; }
.rs-form input[type=search] { width: 100%; border: 1px solid var(--rs-line); border-radius: 10px;
  padding: 12px; font: inherit; background: #fff; -webkit-appearance: none; }
.rs-form input[type=search]:focus { outline: 2px solid var(--rs-green); border-color: var(--rs-green); }

/* Visaren: dokumentet fyller skärmen mellan sidhuvud och flikrad, men appens
   egen bakåtpil sitter kvar överst. Marginalerna är negativa för att gå ut i
   kanten trots rs-main:s padding. */
.rs-visa-topp { display: flex; gap: 10px; margin-bottom: 14px; }
.rs-visa-topp .rs-btn { margin-top: 0; }
/* Ramen far aldrig bli sa hog att knappraden trycks ur bild: 56vh lamnar
   sidhuvud, bakatknapp och flikrad synliga pa varje telefon vi provat. */
.rs-visa-ram { margin: 0 -16px 12px; height: 56vh; min-height: 260px; background: #e9eeeb; }
.rs-visa-ram iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.rs-visa-bild { margin: 0 -16px 12px; background: #0b0b0b; text-align: center; }
.rs-visa-bild img { max-width: 100%; max-height: 70vh; object-fit: contain; }
.rs-visa-knappar { display: flex; gap: 10px; }
.rs-visa-knappar .rs-btn { margin-top: 0; }

/* Kundens eget foto pa maskinen far ta plats - det ar den har maskinen,
   inte modellen. Mork botten sa ett hastigt taget foto ramar in sig sjalvt. */
.rs-maskinfoto { margin: -16px -16px 12px; background: #0b0b0b; text-align: center; }
.rs-maskinfoto img { width: 100%; max-height: 46vh; object-fit: cover; display: block; }
.rs-form input[type=file] { width: 100%; font-size: .9rem; }

/* Antalsrutan i dellistan ska ga att traffa med tummen */
.rs-card input[type=number] { font: inherit; -moz-appearance: textfield; }
.rs-card input[type=number]::-webkit-outer-spin-button,
.rs-card input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rs-form select { -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667069' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 38px; }

/* Filterrad: chips som ryms pa en rad och far rullas i sidled pa smal skarm */
.rs-filter { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 14px; margin: 0 -16px 0; padding-left: 16px; padding-right: 16px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.rs-filter::-webkit-scrollbar { display: none; }
.rs-chip { flex: none; border: 1px solid var(--rs-line); background: #fff; color: var(--rs-text);
  border-radius: 999px; padding: 8px 16px; font-size: .88rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.rs-chip.vald { background: var(--rs-green); border-color: var(--rs-green); color: #fff; }
.rs-lista { margin: 10px 0 0; padding-left: 20px; }
.rs-lista li { margin-bottom: 8px; line-height: 1.5; }