/* Anställd-portal — layout-shell.
 *
 * Token-källan ÄR tokens.css (etapp 3.0 #437). Alla hex/spacing-värden
 * läses via var(--*). Innehåll inom portalen ska använda standard-
 * klasserna från components.css (.card, .btn-*, .status-tag, etc) —
 * inte anstalld-parallellklasser. Modifierare som .card--anstalld får
 * göra små layoutavvikelser, men huvudstilen kommer alltid från .card.
 *
 * Se docs/ui-react-mappning.md för hela återanvändnings-konventionen.
 */

.anstalld-layout {
  min-height: 100vh;
  background: var(--surface-inset);
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  /* utrymme för bottom-nav på mobil */
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .anstalld-layout {
    padding-bottom: 0;
  }
}

.anstalld-main {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
}

@media (min-width: 768px) {
  .anstalld-main {
    padding: var(--space-8) var(--space-6);
  }
}

/* Top-nav (synlig på desktop, slimmad på mobil) */
.anstalld-topnav {
  background: var(--brand);
  color: var(--paper);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.anstalld-topnav-brand {
  font-weight: 600;
  font-size: var(--fs-md);
}
.anstalld-topnav-user {
  font-size: var(--fs-sm);
  opacity: 0.85;
}

/* Bottom-nav (mobil only) */
.anstalld-bottomnav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface-card);
  border-top: 1px solid var(--line);
  z-index: 100;
}

@media (min-width: 768px) {
  .anstalld-bottomnav {
    display: none;
  }
}

.anstalld-bottomnav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) 6px;
  min-height: 56px;
  color: var(--text-secondary);
  font-size: 11px;
  text-decoration: none;
  gap: 4px;
}
.anstalld-bottomnav a.active {
  color: var(--brand);
  font-weight: 600;
}

.anstalld-bottomnav-icon {
  width: 22px;
  height: 22px;
}

/* Card-modifier — bygger på .card från components.css.
 * Behåll bara små avvikelser här (tätare padding på mobil osv).
 * För full card-stil använd className="card card--anstalld" så att
 * components.css:.card bär huvudstilen. Den gamla .anstalld-card-
 * klassen (utan .card-prefix) lever kvar TILLFÄLLIGT som alias —
 * markerat för borttagning i etapp 4a när alla anstalld-sidor är
 * omskinnade. */
.card--anstalld,
.anstalld-card {
  background: var(--surface-card);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-4);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

.anstalld-card-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 6px;
}

.anstalld-card-body {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

.anstalld-greeting {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
}
.anstalld-greeting-sub {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  margin: 0 0 var(--space-5);
}

/* PDF-iframe i kvitto-detaljvy: mobil = 400px, desktop = 600px */
.anstalld-pdf-frame {
  height: 400px;
}
@media (min-width: 768px) {
  .anstalld-pdf-frame {
    height: 600px;
  }
}

/* ─────────────────────────────────────────────────────────────────
 * Etapp 4 PR 1 — portal-*-klasser
 *
 * Mekanisk omskinning av 17 React-filer: alla inline-style som
 * tidigare bar hex-färger eller px-spacing flyttas hit och går via
 * tokens.css. Klasserna är prefixerade portal-* för att skilja dem
 * från äldre .anstalld-* aliaser och från SPA:ns components.css.
 *
 * Konvention:
 *   • Layout-helpers (rader, gaps, flex-mönster) → portal-row-*, portal-stack-*
 *   • Färgade tints (success-soft, warning-soft etc) → portal-tint-*
 *   • Knapp-varianter unika för portalen → portal-btn-*
 *   • Form-element (input/textarea/select) → portal-input
 *   • Micro-typografi → portal-eyebrow, portal-text-*, portal-row-label
 * ───────────────────────────────────────────────────────────────── */

/* — Generella layout-rader — */
.portal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}
.portal-row-baseline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}
.portal-row-start {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}
.portal-row-tight {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) 0;
  font-size: var(--fs-sm);
}
.portal-row-tight-bold {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) 0;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.portal-row-divider {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 6px;
}
.portal-stack-gap-3 {
  display: flex;
  gap: var(--space-3);
}
.portal-stack-gap-3-wrap {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.portal-stack-gap-2 {
  display: flex;
  gap: var(--space-2);
}
.portal-stack-gap-2-wrap {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.portal-stack-gap-3-center {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

/* — Toolbar (titel + action-knapp i rad) — */
.portal-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}
.portal-toolbar-baseline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-4);
}

/* — Mikrotypografi — */
.portal-eyebrow {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);
}
.portal-eyebrow-danger {
  font-size: 11px;
  font-weight: 600;
  color: var(--danger-deep);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);
}
.portal-text-muted {
  color: var(--text-secondary);
}
.portal-text-muted-sm {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}
.portal-text-muted-xs {
  color: var(--text-secondary);
  font-size: 12px;
}
.portal-text-muted-xxs {
  color: var(--text-secondary);
  font-size: 11px;
}
.portal-text-primary {
  color: var(--text-primary);
}
.portal-text-primary-md {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 500;
}
.portal-text-body {
  color: var(--text-body);
}
.portal-text-link {
  color: var(--brand);
  font-size: 13px;
  text-decoration: none;
}
.portal-text-link-sm {
  color: var(--brand);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.portal-text-danger {
  color: var(--danger);
}
.portal-text-warning {
  color: var(--warning-deep);
}

/* — Tillbaka-länk — */
.portal-back-link {
  color: var(--brand);
  font-size: var(--fs-sm);
  text-decoration: none;
  display: inline-block;
  margin-bottom: var(--space-3);
}

/* — Card-modifierare för status-tints (success/warning/danger/info) — */
.portal-card-success {
  background: var(--success-soft);
  border-color: var(--success);
}
.portal-card-success-text {
  color: var(--success-deep);
}
.portal-card-warning {
  background: var(--warning-soft);
  border-color: var(--warning);
}
.portal-card-warning-text {
  color: var(--warning-deep);
}
.portal-card-danger {
  background: var(--danger-soft);
  border-color: var(--danger);
}
.portal-card-info {
  background: var(--info-soft);
  border-color: var(--info);
}
.portal-card-info-text {
  color: var(--info-deep);
}
.portal-card-brand {
  background: var(--brand);
  color: var(--paper);
}

/* — Knapp-varianter — */
.portal-btn-primary {
  background: var(--brand);
  color: var(--paper);
  padding: var(--space-2) var(--space-4);
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.portal-btn-primary:disabled,
.portal-btn-primary[disabled] {
  background: var(--text-secondary);
  cursor: not-allowed;
}
.portal-btn-primary-block {
  width: 100%;
  padding: var(--space-3);
  background: var(--brand);
  color: var(--paper);
  border: none;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  margin-top: var(--space-3);
}
.portal-btn-primary-block:disabled,
.portal-btn-primary-block[disabled] {
  background: var(--text-secondary);
  cursor: not-allowed;
}
.portal-btn-primary-large {
  width: 100%;
  padding: 14px;
  background: var(--brand);
  color: var(--paper);
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.portal-btn-primary-large:disabled,
.portal-btn-primary-large[disabled] {
  background: var(--text-secondary);
  cursor: not-allowed;
}
.portal-btn-outline {
  background: var(--surface-card);
  color: var(--brand);
  border: 1px solid var(--brand);
  padding: var(--space-2) var(--space-4);
  border-radius: 6px;
  font-size: var(--fs-sm);
  cursor: pointer;
  font-family: inherit;
}
.portal-btn-outline:disabled,
.portal-btn-outline[disabled] {
  cursor: not-allowed;
}
.portal-btn-outline-block {
  background: var(--surface-card);
  color: var(--brand);
  border: 1px solid var(--brand);
  padding: var(--space-3) var(--space-4);
  border-radius: 6px;
  font-size: var(--fs-sm);
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  margin-top: var(--space-2);
}
.portal-btn-dashed {
  width: 100%;
  margin-top: var(--space-2);
  padding: 14px;
  background: var(--surface-card);
  color: var(--brand);
  border: 1px dashed var(--brand);
  border-radius: 6px;
  font-size: var(--fs-sm);
  cursor: pointer;
  font-family: inherit;
}
.portal-btn-cancel {
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
}
.portal-btn-cancel-half {
  flex: 1;
  background: var(--surface-card);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: var(--space-3);
  border-radius: 6px;
  font-size: var(--fs-sm);
  cursor: pointer;
  font-family: inherit;
}
.portal-btn-cancel-half:disabled,
.portal-btn-cancel-half[disabled] {
  cursor: not-allowed;
}
.portal-btn-save-half {
  flex: 1;
  background: var(--brand);
  color: var(--paper);
  border: none;
  padding: var(--space-3);
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.portal-btn-save-half:disabled,
.portal-btn-save-half[disabled] {
  background: var(--text-secondary);
  cursor: not-allowed;
}
.portal-btn-link {
  background: none;
  border: none;
  color: var(--brand);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.portal-btn-link-quiet {
  background: transparent;
  border: none;
  color: var(--brand);
  font-size: 13px;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  font-family: inherit;
}
.portal-btn-link-quiet:disabled,
.portal-btn-link-quiet[disabled] {
  cursor: not-allowed;
}
.portal-btn-remove {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 13px;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  font-family: inherit;
}
.portal-btn-remove:disabled,
.portal-btn-remove[disabled] {
  cursor: not-allowed;
}
.portal-btn-unlink {
  font-size: 12px;
  color: var(--danger-deep);
  background: var(--surface-card);
  border: 1px solid var(--danger);
  border-radius: 4px;
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  font-family: inherit;
}
.portal-btn-unlink:disabled,
.portal-btn-unlink[disabled] {
  cursor: not-allowed;
}

/* — Form-input/select/textarea (unifierad) — */
.portal-input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  background: var(--surface-card);
}
.portal-input-textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  background: var(--surface-card);
  resize: vertical;
}
.portal-input-small {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: var(--fs-sm);
  background: var(--surface-card);
  color: var(--text-primary);
  text-align: right;
  font-family: inherit;
}
.portal-input-small[disabled] {
  background: var(--surface-inset);
  color: var(--text-secondary);
}
.portal-field-label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}
.portal-field-label-strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-body);
  margin-bottom: 6px;
}
.portal-field {
  margin-bottom: var(--space-3);
}
.portal-field-wide {
  margin-bottom: 14px;
}
.portal-field-flex {
  margin-bottom: 14px;
  flex: 1;
}

/* — Felmeddelande-banner — */
.portal-error {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  color: var(--danger-deep);
  padding: 10px;
  border-radius: 4px;
  margin-bottom: var(--space-3);
  font-size: 13px;
}
.portal-error-inline {
  background: var(--danger-soft);
  color: var(--danger-deep);
  padding: var(--space-2);
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: var(--space-2);
}
.portal-warning-text {
  font-size: 13px;
  color: var(--warning-deep);
  margin-bottom: var(--space-2);
}

/* — Modal/overlay — */
.portal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
}
.portal-overlay-light {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 200;
}
.portal-sheet {
  background: var(--surface-card);
  border-radius: 12px 12px 0 0;
  padding: var(--space-5);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}
.portal-sheet-sm {
  background: var(--surface-card);
  border-radius: 12px 12px 0 0;
  width: 100%;
  max-width: 480px;
  padding: var(--space-5) var(--space-4) 28px;
}
.portal-sheet-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}
.portal-sheet-title-sm {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

/* — Chooser-option (action-sheet item) — */
.portal-chooser-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.portal-chooser-option[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
.portal-chooser-emoji {
  font-size: 26px;
}
.portal-chooser-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.portal-chooser-title-disabled {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
}
.portal-chooser-desc {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* — Upload-zon (kvitto-uppladdning) — */
.portal-upload-dropzone {
  background: var(--surface-card);
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  margin-bottom: var(--space-4);
}
.portal-upload-emoji {
  font-size: 40px;
  margin-bottom: var(--space-3);
}
.portal-upload-emoji-small {
  font-size: 32px;
  margin-bottom: var(--space-2);
}
.portal-upload-preview {
  max-width: 100%;
  max-height: 300px;
  border-radius: 4px;
}
.portal-upload-progress-track {
  height: 6px;
  background: var(--surface-inset);
  border-radius: 3px;
  overflow: hidden;
}
.portal-upload-progress-fill {
  height: 100%;
  background: var(--brand);
  transition: width 0.2s ease;
}

/* — TopNav-element — */
.portal-bell-link {
  position: relative;
  display: inline-flex;
  color: var(--paper);
  text-decoration: none;
}
.portal-bell-icon {
  width: 20px;
  height: 20px;
}
.portal-bell-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  background: var(--danger);
  color: var(--paper);
  border-radius: 10px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 600;
  min-width: 16px;
  text-align: center;
  line-height: 14px;
}
.portal-topnav-user-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* — Kvitto-detalj specifika — */
.portal-card-no-pad {
  padding: 0;
  overflow: hidden;
}
.portal-receipt-image {
  width: 100%;
  display: block;
}
.portal-pdf-footer {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border);
  background: var(--surface-inset);
}

/* — Tid/Närvaro-specifika — */
.portal-navbutton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--brand);
  text-decoration: none;
  font-size: 18px;
}
.portal-status-line {
  font-size: 13px;
  margin-bottom: var(--space-4);
  text-align: center;
}
.portal-status-utkast        { color: var(--text-secondary); }
.portal-status-inskickad     { color: var(--brand); }
.portal-status-godkand       { color: var(--success-deep); }
.portal-status-avvisad       { color: var(--danger-deep); }
.portal-tabswitch {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-4);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.portal-tabswitch-btn {
  flex: 1;
  padding: 10px;
  background: var(--surface-card);
  color: var(--brand);
  border: none;
  font-size: var(--fs-sm);
  cursor: pointer;
  font-family: inherit;
}
.portal-tabswitch-btn.active {
  background: var(--brand);
  color: var(--paper);
}
.portal-tabswitch-btn + .portal-tabswitch-btn {
  border-left: 1px solid var(--border);
}
.portal-day-row {
  display: flex;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--surface-inset);
  gap: var(--space-2);
}
.portal-day-row-locked {
  opacity: 0.6;
}
.portal-day-label {
  width: 60px;
  font-size: 13px;
  color: var(--text-primary);
}
.portal-day-info {
  flex: 1;
  font-size: 12px;
  color: var(--text-secondary);
}
.portal-day-hours-cell {
  width: 90px;
}
.portal-day-hours-unit {
  width: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}
.portal-week-total {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-2) 0 0;
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 600;
  border-top: 1px solid var(--border);
  margin-top: 6px;
}
.portal-month-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.portal-month-total-label {
  font-size: 13px;
  opacity: 0.8;
}
.portal-month-total-value {
  font-size: 22px;
  font-weight: 700;
}
.portal-month-total-sub {
  font-size: 12px;
  opacity: 0.8;
  margin-top: var(--space-1);
}

/* — Kvitto-amount-display (mil/resa-form) — */
.portal-amount-display {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

/* — KvittoLista-specifika — */
.portal-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.portal-card-kind-badge {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.portal-card-meta-row {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.portal-card-meta-row-processing {
  margin-top: 6px;
  font-size: 12px;
  color: var(--brand);
}

/* — Notiser-specifika — */
.portal-notis-button {
  width: 100%;
  text-align: left;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  cursor: pointer;
  font-family: inherit;
  display: block;
}
.portal-notis-button-unread {
  background: var(--info-soft);
}
.portal-notis-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  display: inline-block;
}
.portal-notis-title {
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.portal-notis-title-unread {
  font-weight: 600;
}
.portal-notis-message {
  font-size: 13px;
  color: var(--text-body);
  margin-bottom: var(--space-1);
}
.portal-notis-time {
  font-size: 11px;
  color: var(--text-secondary);
}

/* — Bifogade-kvitton specifika — */
.portal-attached-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border);
}
.portal-attached-link {
  flex: 1;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.portal-attached-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--fs-sm);
}
.portal-attached-meta {
  font-size: 13px;
  color: var(--text-body);
  margin-top: 2px;
}
.portal-attached-status {
  margin-top: var(--space-1);
  font-size: 12px;
  color: var(--text-secondary);
}
.portal-attached-status-processing {
  margin-top: var(--space-1);
  font-size: 12px;
  color: var(--brand);
}

/* — Picker (välj-befintligt-kvitto) — */
.portal-picker-scroll {
  max-height: 360px;
  overflow-y: auto;
  margin-bottom: var(--space-3);
}
.portal-picker-item {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  cursor: pointer;
  font-family: inherit;
}
.portal-picker-item:disabled,
.portal-picker-item[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* — Meal-checkbox (resa-form) — */
.portal-meal-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
}
.portal-meal-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-primary);
  cursor: pointer;
}
.portal-meal-label-disabled {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary);
  opacity: 0.5;
  cursor: not-allowed;
}

/* — Övriga små klasser — */
.portal-greeting-small {
  font-size: 20px;
}
.portal-mb-3  { margin-bottom: var(--space-3); }
.portal-mb-4  { margin-bottom: var(--space-4); }
.portal-mt-2  { margin-top: var(--space-2); }
.portal-mt-3  { margin-top: var(--space-3); }
.portal-mt-4  { margin-top: var(--space-4); }
.portal-card-tight {
  padding: var(--space-3) 14px;
}
.portal-card-tight-12 {
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}
.portal-card-no-margin {
  margin-bottom: 0;
}
.portal-overnight-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 14px;
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.portal-section-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-body);
  margin-bottom: var(--space-2);
}
.portal-week-eyebrow {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);
}
.portal-holiday-name {
  color: var(--danger-deep);
}
.portal-status-row {
  margin-bottom: var(--space-1);
}

/* Dashboard — semester-kort */
.portal-semester-intjanande {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.portal-semester-grid {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
}
.portal-semester-extra {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: var(--space-1);
}
.portal-semester-warning {
  font-size: 12px;
  color: var(--danger-deep);
  margin-top: var(--space-1);
}

/* Kvitto-detalj */
.portal-linked-report {
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.portal-linked-report-dates {
  color: var(--text-secondary);
  margin-left: var(--space-2);
  font-size: 13px;
}
.portal-linked-report-arrow {
  float: right;
  color: var(--brand);
  font-size: 13px;
}
.portal-bokfort-at {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: var(--space-1);
}
.portal-rejected-comment {
  font-size: var(--fs-sm);
  margin-bottom: var(--space-3);
}
.portal-link-btn-primary {
  display: inline-block;
  margin-top: var(--space-2);
  background: var(--brand);
  color: var(--paper);
  padding: var(--space-2) var(--space-4);
  border-radius: 6px;
  font-size: var(--fs-sm);
  text-decoration: none;
}

/* KvittoActions — AI-fel-kort */
.portal-aifail-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--warning-deep);
  margin-bottom: var(--space-2);
}
.portal-aifail-desc {
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}
.portal-aifail-msg {
  font-size: 13px;
  color: var(--warning-deep);
  margin-bottom: var(--space-2);
}
.portal-btn-outline-block-extra {
  width: 100%;
  padding: 10px var(--space-4);
  margin-top: var(--space-2);
}

/* UploadForm */
.portal-info-banner {
  background: var(--info-soft);
  border: 1px solid var(--info);
  color: var(--info-deep);
  padding: 10px;
  border-radius: 6px;
  margin-bottom: var(--space-4);
  font-size: 13px;
}
.portal-upload-filechip {
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.portal-upload-prompt {
  font-size: var(--fs-sm);
}
.portal-upload-hint {
  font-size: 12px;
  margin-top: 6px;
}
.portal-upload-progress-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.portal-hidden-input {
  display: none;
}

/* MilForm + ResaForm */
.portal-amount-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}
.portal-error-mb-3 {
  margin: var(--space-3) 0;
}
.portal-rejected-comment-tight {
  font-size: var(--fs-sm);
}

/* ResaForm */
.portal-info-text {
  font-size: 13px;
  color: var(--info-deep);
}
.portal-warning-text-inline {
  font-size: 13px;
  color: var(--warning-deep);
}
.portal-card-mb-14 {
  margin-bottom: 14px;
}
.portal-row-gap-10 {
  display: flex;
  gap: 10px;
}
.portal-day-meal-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.portal-day-meal-date {
  font-size: var(--fs-sm);
}
.portal-day-meal-info {
  font-size: 12px;
  color: var(--text-secondary);
}
.portal-row-divider-success {
  border-top-color: var(--success);
}
.portal-sumrow {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-body);
  padding: 2px 0;
}
.portal-sumrow-bold {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-primary);
  padding: 2px 0;
}
.portal-mt-0 {
  margin-top: 0;
}
.portal-link-btn-dark {
  display: inline-block;
  background: var(--surface-card);
  color: var(--text-primary);
  padding: var(--space-2) var(--space-4);
  border-radius: 6px;
  font-size: var(--fs-sm);
  text-decoration: none;
  border: 1px solid var(--text-primary);
}
.portal-mb-1 {
  margin-bottom: var(--space-1);
}
.portal-mb-0 {
  margin-bottom: 0;
}
.portal-attach-help {
  margin-top: 0;
  margin-bottom: var(--space-2);
}
.portal-no-margin {
  margin: 0;
}
.portal-notis-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

/* TidVy — månadsnav */
.portal-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  gap: var(--space-3);
}
.portal-month-center {
  text-align: center;
  flex: 1;
}
.portal-month-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}
.portal-month-current-eyebrow {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Klickbar månads-rubrik som button (PR: tid-månadsväljare).
 * Tar bort default-button-styling och behåller .portal-month-title-
 * typografin. Tydlig affordans: chevron + understruken vid hover. */
.portal-month-title--button {
  background: none;
  border: none;
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: inherit;
  border-radius: var(--radius);
  min-height: var(--tap-target);
}
.portal-month-title--button:hover {
  background: var(--surface-inset);
}
.portal-month-title--button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.portal-month-chevron {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1;
}

/* Månad/år-väljare popover. Mobil-först: absolut-positionerad under
 * .portal-month-center, full-bredd-ish, 16 px borderradius, drop-shadow.
 * Två native <select> staplade ovanpå varandra (tumvänligt på telefon,
 * native picker öppnas), Avbryt/Gå-knappar längst ner. */
.portal-month-picker {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--space-2);
  z-index: 50;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 260px;
  max-width: calc(100vw - 32px);
}
.portal-month-center {
  position: relative;
}
.portal-month-picker__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: left;
}
.portal-month-picker__label {
  font-size: var(--fs-eyebrow);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.portal-month-picker__select {
  font-size: var(--fs-md);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-card);
  color: var(--text-primary);
  min-height: var(--tap-target);
  width: 100%;
}
.portal-month-picker__select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.portal-month-picker__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.portal-month-picker__cancel,
.portal-month-picker__go {
  font-size: var(--fs-md);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  cursor: pointer;
  min-height: var(--tap-target);
}
.portal-month-picker__cancel {
  background: var(--surface-card);
  color: var(--text-primary);
}
.portal-month-picker__go {
  background: var(--info);
  color: var(--surface-card);
  border-color: var(--info);
  font-weight: 600;
}
.portal-month-picker__cancel:focus-visible,
.portal-month-picker__go:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.portal-info-text-md {
  font-size: var(--fs-sm);
  color: var(--info-deep);
}

/* FranvaroVy */
.portal-franvaro-info {
  flex: 1;
}
.portal-franvaro-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.portal-franvaro-dates {
  font-size: var(--fs-sm);
  color: var(--text-body);
}
.portal-franvaro-count {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.portal-franvaro-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: var(--space-1);
  font-style: italic;
}

/* FranvaroModal — preview-banner */
.portal-preview-info {
  padding: 10px;
  background: var(--info-soft);
  border: 1px solid var(--info);
  border-radius: 6px;
  font-size: 13px;
  color: var(--info-deep);
  margin-bottom: var(--space-3);
}
.portal-preview-warning {
  padding: 10px;
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  border-radius: 6px;
  font-size: 13px;
  color: var(--warning-deep);
  margin-bottom: var(--space-3);
}

/* TopNav vy-byta-knapp (subtil knapp på mörk topbar). */
.portal-byt-vy-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--paper);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.portal-byt-vy-btn:disabled { cursor: not-allowed; }

/* Logga-ut-knapp på mer-sidan. Danger-tints från tokens. */
.portal-logout-btn {
  width: 100%;
  padding: 12px;
  background: var(--paper);
  color: var(--danger-deep);
  border: 1px solid var(--danger);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.portal-logout-btn:disabled { cursor: not-allowed; }

/* ── Profil-vy: läs-bara nyckel/värde-rader (PR anställdportal synliga delar) ── */
.portal-profil-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.portal-profil-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--line);
}
.portal-profil-row:last-child { border-bottom: none; }
.portal-profil-row__label {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}
.portal-profil-row__value {
  color: var(--text-primary);
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

/* Postnr + ort sida vid sida i profil-formuläret. */
.portal-input-row {
  display: flex;
  gap: var(--space-2);
}
.portal-input-row .portal-input { flex: 1; min-width: 0; }

/* Knapprad i ett åtkomstbesked. Ritas bara för verkliga fel — kända
   tillstånd har ingenting att försöka igen. Se app/components/AtkomstBesked.tsx. */
.portal-besked-knappar {
  margin-top: var(--space-2);
}

/* ── Tidrapport: timmar som INTE sparades ────────────────────────────────────
 * ⚠️⚠️ Fältet behåller sitt värde men märks. Tidigare fanns ingen markering
 * alls: en misslyckad sparning såg exakt ut som en lyckad, och den anställde
 * upptäckte det när lönen var fel.
 *
 * ⚠️ SKILLNADEN BÄRS AV MER ÄN FÄRGEN. Ramen ändras OCH ett besked med en
 * knapp ritas under dagen — en färgblind läsare ser inte den röda kanten. */
.portal-input-small--ejsparad {
  border-color: var(--danger-deep);
  background: var(--danger-soft);
}
.portal-day-sparfel {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--danger-deep);
}
/* ⚠️ Tumstor knapp — portalen används på telefon. */
.portal-day-sparfel .btn {
  min-height: var(--tap-target);
}