/* ============================================================
 *  cleaning.css — modul-spesifikk styling for renhold
 *  ------------------------------------------------------------
 *  Forutsetter at shared/brand.css og shared/styles.css er
 *  lastet først. Overstyrer --brand-aliaser så hele modulen
 *  trekker navy-paletten.
 * ============================================================ */

:root {
  /* Trekk --brand-aliaser fra renhold-paletten (navy) */
  --brand:        var(--sr-renhold);
  --brand-2:      var(--sr-renhold-2);
  --brand-soft:   var(--sr-renhold-soft);
  --brand-ink:    var(--sr-renhold-ink);

  /* Mykere modul-spesifikke nyanser */
  --cln-bg:       #f3f5f8;
  --cln-card:     #ffffff;
  --cln-line:     #d8dee8;
  --cln-line-2:   #b6c0cf;
  --cln-ink:      var(--sr-ink);
  --cln-ink-soft: var(--sr-ink-2);
  --cln-ink-mute: var(--sr-ink-3);

  /* GPS / sjekk-inn-farger */
  --cln-gps-ok:   #15803d;
  --cln-gps-warn: #b45309;
  --cln-gps-err:  #b91c1c;
}

body {
  background: var(--cln-bg);
}

/* ============ Topp-stripe — navy ============ */
.cln-top {
  background: linear-gradient(135deg, var(--sr-renhold) 0%, var(--sr-renhold-2) 100%);
  color: #fff;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--sr-shadow-md);
}
.cln-top .brand-mark {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; letter-spacing: -.02em;
  border: 1px solid rgba(255,255,255,.25);
}
.cln-top .brand-name {
  font-size: 17px; font-weight: 700; letter-spacing: -.01em;
}
.cln-top .brand-sub {
  font-size: 12px; opacity: .8; margin-top: 2px;
}
.cln-top .spacer { flex: 1; }
.cln-top a.home-btn {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  transition: background var(--sr-transition);
}
.cln-top a.home-btn:hover { background: rgba(255,255,255,.28); }

/* ============ Breadcrumb ============ */
.cln-breadcrumb {
  font-size: 12.5px;
  color: var(--cln-ink-soft);
  margin: 0 0 16px;
}
.cln-breadcrumb a {
  color: var(--cln-ink-soft);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}
.cln-breadcrumb a:hover {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* ============ Wrap ============ */
.cln-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 28px 60px;
}

/* ============ Hello / heading ============ */
.cln-hello h1 {
  margin: 0 0 6px;
  font-size: clamp(22px, 4vw, 30px);
  letter-spacing: -0.01em;
  color: var(--cln-ink);
}
.cln-hello p {
  margin: 0;
  color: var(--cln-ink-soft);
  font-size: 14px;
}

/* ============ Quick stats ============ */
.cln-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 6px;
}
@media (max-width: 720px) {
  .cln-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cln-quick-card {
  background: #fff;
  border: 1px solid var(--cln-line);
  border-radius: 12px;
  padding: 12px 14px;
}
.cln-quick-card .l {
  font-size: 11px;
  color: var(--cln-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.cln-quick-card .v {
  font-size: 22px;
  font-weight: 800;
  color: var(--brand);
  line-height: 1;
}
.cln-quick-card.warn .v { color: #b45309; }
.cln-quick-card.err  .v { color: var(--sr-err); }
.cln-quick-card.ok   .v { color: var(--cln-gps-ok); }

/* ============ Tile-grid (landing) ============ */
.cln-section { margin: 22px 0 0; }
.cln-section > h2 {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cln-ink-soft);
  padding-left: 2px;
}
.cln-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 920px) { .cln-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cln-grid { grid-template-columns: 1fr; gap: 10px; } }
.cln-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--cln-line);
  border-radius: 14px;
  padding: 18px 18px 16px;
  transition: all 120ms ease;
  position: relative;
  overflow: hidden;
}
.cln-tile::after {
  content: "→";
  position: absolute;
  top: 14px;
  right: 16px;
  color: var(--cln-line-2);
  font-size: 16px;
  transition: all 120ms ease;
}
.cln-tile:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -12px rgba(30, 58, 95, 0.30);
}
.cln-tile:hover::after { color: var(--brand); transform: translateX(3px); }
.cln-tile.featured {
  background: var(--brand-soft);
  border-color: var(--brand);
}
.cln-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 10px;
}
.cln-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--cln-ink);
}
.cln-desc {
  font-size: 12.8px;
  color: var(--cln-ink-soft);
  line-height: 1.4;
  margin: 0;
}

/* ============ Generelle kort / lister ============ */
.cln-card {
  background: var(--cln-card);
  border: 1px solid var(--cln-line);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--sr-shadow-sm);
}
.cln-card + .cln-card { margin-top: 12px; }
.cln-card h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cln-ink);
}

/* ============ Badges ============ */
.cln-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  border: 1px solid rgba(30, 58, 95, .18);
}
.cln-badge.fast    { background: var(--brand-soft); color: var(--brand-ink); }
.cln-badge.engang  { background: #fef3c7; color: #854d0e; border-color: #fcd34d; }
.cln-badge.spesial { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.cln-badge.ok      { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.cln-badge.warn    { background: #fef3c7; color: #854d0e; border-color: #fcd34d; }
.cln-badge.err     { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

/* ============ Knapper ============ */
.cln-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--sr-transition);
}
.cln-btn:hover { background: var(--brand-2); }
.cln-btn.secondary {
  background: #fff;
  color: var(--cln-ink);
  border-color: var(--cln-line);
}
.cln-btn.secondary:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.cln-btn.danger {
  background: var(--sr-err);
}
.cln-btn.danger:hover { background: #a93c3c; }

/* ============ Tabell ============ */
.cln-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cln-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cln-ink-soft);
  padding: 8px 10px;
  border-bottom: 1px solid var(--cln-line);
  background: #f8fafc;
}
.cln-table tbody td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--cln-line);
  vertical-align: middle;
}
.cln-table tbody tr:hover { background: #f8fafc; }

/* ============ GPS sjekk-inn-indikator ============ */
.cln-gps {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}
.cln-gps.ok   { background: #d1fae5; color: var(--cln-gps-ok); }
.cln-gps.warn { background: #fef3c7; color: var(--cln-gps-warn); }
.cln-gps.err  { background: #fee2e2; color: var(--cln-gps-err); }

/* ============ Data-status banner (debug) ============ */
.cln-status {
  background: #fff;
  border: 1px solid var(--cln-line);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cln-status-text {
  font-size: 13.5px;
  color: var(--cln-ink-soft);
  flex: 1;
  min-width: 240px;
}
.cln-status.ok    { background: #f0fdf4; border-color: #bbf7d0; }
.cln-status.err   { background: #fee2e2; border-color: #fca5a5; }
.cln-status .row-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.cln-status .row-btns button {
  background: #fff;
  border: 1px solid var(--cln-line);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12.5px;
  cursor: pointer;
  color: var(--cln-ink);
}
.cln-status .row-btns button.danger {
  background: var(--sr-err);
  border-color: var(--sr-err);
  color: #fff;
  font-weight: 600;
}

/* ============================================================
   Responsive modaler — gjelder ALLE .modal-bg/.modal i admin
   På mobil: bottom-sheet, full bredde, sticky knapper
   ============================================================ */

/* Desktop-base — gjør modalen scrollbar internt og knapper sticky */
.modal-bg {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1000;
  background: rgba(15, 36, 64, .55);
  padding: 16px;
  overflow-y: auto;
}
.modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  /* shared/styles.css setter `align-items: center` på .modal globalt (for
     gamle vending/matter-modaler). Det får head + foot til å SHRINKE
     til content-bredde og bli sentrert som pile-pills istedet for å
     fylle hele modal-bredden. Vi MÅ tvinge stretch her. */
  align-items: stretch;
  box-shadow: 0 24px 60px -12px rgba(15, 36, 64, .35);
  overflow: hidden;
}
.modal-head {
  padding: 16px 22px;
  border-bottom: 1px solid var(--cln-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: #fff;
}
.modal-head h2 {
  font-size: 17px;
  margin: 0;
  letter-spacing: -.01em;
}
.modal-close {
  background: var(--cln-bg);
  border: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  color: var(--cln-ink-soft);
  flex-shrink: 0;
}
.modal-close:hover { background: var(--cln-line); color: var(--cln-ink); }
.modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
.modal-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--cln-line);
  background: #fafbfd;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* MOBIL: bottom-sheet — slide up from bottom */
@media (max-width: 720px) {
  .modal-bg {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal {
    border-radius: 16px 16px 0 0 !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    width: 100% !important;
    animation: cln-slide-up .25s cubic-bezier(.22,.61,.36,1);
  }
  @keyframes cln-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .modal-head { padding: 16px 18px; }
  .modal-body { padding: 16px 18px; }
  .modal-foot {
    padding: 14px 18px env(safe-area-inset-bottom, 14px);
    position: sticky;
    bottom: 0;
  }
  .modal-foot .cln-btn,
  .modal-foot button {
    flex: 1;
    min-height: 46px;
    font-size: 15px;
  }
  .modal-foot button.cln-btn.secondary { flex: 0 1 auto; min-width: 90px; }
}

/* Større input-felter overalt i admin-modaler */
.modal-body input[type=text],
.modal-body input[type=number],
.modal-body input[type=tel],
.modal-body input[type=email],
.modal-body input[type=date],
.modal-body input[type=time],
.modal-body input[type=search],
.modal-body select,
.modal-body textarea {
  font-size: 14.5px !important;
  min-height: 40px;
}

@media (max-width: 720px) {
  /* Catch ALLE inputs (også de uten eksplisitt type="text" — som de fleste
     <input>-elementer i kunder.html / oppdrag.html / etc).
     Unntak: checkbox + radio skal IKKE få min-height 44px. */
  .modal-body input,
  .modal-body select,
  .modal-body textarea,
  .form-row input,
  .form-row select,
  .form-row textarea {
    font-size: 16px !important;  /* 16+ hindrer iOS zoom */
    min-height: 44px;
  }
  .modal-body input[type=checkbox],
  .modal-body input[type=radio],
  .form-row input[type=checkbox],
  .form-row input[type=radio] {
    min-height: auto;
    width: auto;
  }

  /* iOS auto-zoom-fiks for FILTER- og TOOLBAR-felter (utenfor modal).
     Disse brukes daglig på admin-sidene: tek-velger, måned-velger,
     søkefelt osv. Uten 16px+ zoomer iOS hver gang man tapper på dem
     og må manuelt zoome ut igjen. min-height 44px = iOS HIG touch-target. */
  .toolbar input,
  .toolbar select,
  .toolbar textarea,
  .filter input,
  .filter select,
  .filter-bar input,
  .filter-bar select,
  .cln-top input,
  .cln-top select,
  .kal-top input,
  .kal-top select,
  .tb-felt input,
  .tb-felt select,
  .toolbar-leder input,
  .toolbar-leder select {
    font-size: 16px !important;
    min-height: 44px;
  }

  /* Touch-targets på filter-chips og små actions */
  .filter-chip,
  .chip {
    min-height: 36px;
    padding: 8px 14px !important;
  }
}