/*
 * JOBBS UI Component Library
 * Enterprise-grade styling for JOBBS platform
 *
 * Contents:
 * 1. Typography & Font Overrides
 * 2. Badges
 * 3. Buttons
 * 4. (Future: Tables, Cards, Forms, etc.)
 */


/* ==========================================================================
   1. TYPOGRAPHY & FONT OVERRIDES
   ========================================================================== */

/* Font smoothing for crisp text rendering */
.k-grid,
.k-button,
.k-window,
.k-dialog,
.k-drawer,
.k-notification,
.jb-badge,
.jb-btn {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Apply Inter font to all Telerik components */
.k-widget,
.k-grid,
.k-grid-header,
.k-grid-content,
.k-grid-footer,
.k-grid-pager,
.k-button,
.k-input,
.k-textbox,
.k-textarea,
.k-numerictextbox,
.k-dropdown,
.k-dropdownlist,
.k-combobox,
.k-autocomplete,
.k-multiselect,
.k-datepicker,
.k-datetimepicker,
.k-timepicker,
.k-daterangepicker,
.k-calendar,
.k-scheduler,
.k-window,
.k-window-title,
.k-dialog,
.k-notification,
.k-toolbar,
.k-pager,
.k-pager-info,
.k-tabstrip,
.k-tabstrip-items,
.k-panelbar,
.k-menu,
.k-menu-item,
.k-treeview,
.k-listview,
.k-listbox,
.k-upload,
.k-progressbar,
.k-tooltip,
.k-popup,
.k-animation-container,
.k-chip,
.k-badge,
.k-card,
.k-drawer,
.k-drawer-content,
.k-searchbox,
.k-form,
.k-form-field,
.k-label,
.k-checkbox-label,
.k-radio-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}


/* ==========================================================================
   2. BADGES
   ========================================================================== */

/* Base badge style — iOS-style tinted badges
   Designprincip: mjuk tonad bakgrund + mörk läsbar text + tunn matchande kant.
   Radius 6px matchar .jb-btn-override så badges och tabell-knappar bildar en
   visuellt enhetlig rytm i samma rad. Ingen min-width — badgen hugger texten
   så enradskolumner inte ser uppblåsta ut. */
.jb-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.005em;
    text-align: center;
    border-radius: 6px;
    border: 1px solid transparent;
    background-clip: padding-box;
    white-space: nowrap;
}

/* Size variants */
.jb-badge-wide {
    min-width: 95px;
}

.jb-badge-sm {
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 600;
}

/* Color variants — iOS tinted: bg ≈ 12% tint, text = djup hue, border ≈ 25% tint.
   Texten är alltid mörk så badges känns som etiketter snarare än knappar.
   Saturationen hålls låg medvetet — dessa lever bredvid varandra i tabeller
   och får inte konkurrera om uppmärksamheten med viktigare CTA. */
.jb-badge-slate    { background: #eef1f6; color: #3b4554; border-color: #d9deea; }
.jb-badge-indigo   { background: #e9ebfc; color: #3f44a4; border-color: #d2d6f7; }
.jb-badge-gray     { background: #eef0f3; color: #4b5563; border-color: #d8dde4; }
.jb-badge-amber    { background: #fcefd6; color: #8a5a13; border-color: #f4dfae; }
.jb-badge-green    { background: #d6f0df; color: #1f6b40; border-color: #b3e1c4; }
.jb-badge-yellow   { background: #fdf2c7; color: #856300; border-color: #f4e094; }
.jb-badge-red      { background: #fde0dd; color: #a82318; border-color: #f8c1bb; }
.jb-badge-blue     { background: #dde9fc; color: #1d4f8c; border-color: #b8d2f5; }

/* Light variants — bevaras som alias för bakåtkompatibilitet. Eftersom hela
   palett-uppdateringen är "soft" är "light" och default nu visuellt likvärdiga;
   skillnaden var historiskt att färgvarianter var solid med vit text. Behåll
   namnen så befintliga konsumenter inte behöver klassbytas. */
.jb-badge-light          { background: #eef1f5; color: #4a5568; border-color: #dde2eb; }
.jb-badge-light-green    { background: #d6f0df; color: #276749; border-color: #b3e1c4; }
.jb-badge-light-red      { background: #fde0dd; color: #a82318; border-color: #f8c1bb; }
.jb-badge-light-amber    { background: #fdf2c7; color: #856300; border-color: #f4e094; }
.jb-badge-light-blue     { background: #dde9fc; color: #2c5282; border-color: #b8d2f5; }


/* ==========================================================================
   3. BUTTONS
   ========================================================================== */

/* Custom button base */
.jb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}

.jb-btn:hover {
    opacity: 0.85;
}

/* Button color variants */
.jb-btn-green   { background-color: #38a169; }
.jb-btn-red     { background-color: #c53030; }
.jb-btn-slate   { background-color: #4a5568; }
.jb-btn-indigo  { background-color: #5a67d8; }
.jb-btn-blue    { background-color: #3182ce; }

/* In-tabell-knappar (Lås upp, Radera på Sites/Lösningar-listor m.fl.) — KOMPAKT
   Telerik renderar standalone-knapparna med 32px höjd och rejäl padding även
   med Size="Small", vilket gör att en tabellrad domineras av två stora
   knappar. Vår iOS-bas-regel arvar de proportionerna också. Här force-
   override:ar vi till verkligt kompakt: 24px höjd, smal padding, mindre text.
   Klassen `.jb-btn-override` appliceras explicit på button-elementen som ska
   krympa (se Sites.razor + Portals.razor) — den är opt-in och rör inte
   knappar utanför tabellerna. */
.k-button.jb-btn-override {
    border-radius: 6px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 9px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    gap: 4px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}
/* Grid-knappar ska vara text-only (UX-beslut 2026-07-12) — ikonerna tar plats
   och gör tabell-raderna stökiga. Göm ikonen på alla jb-btn-override-knappar. */
.k-button.jb-btn-override .k-icon,
.k-button.jb-btn-override .k-svg-icon {
    display: none !important;
}
/* Behåll ThemeColor-spec på Success/Error: dessa har egen färgkanal via Telerik
   som inte ska överrules av iOS-grå-mappningen. */
.k-button.jb-btn-override.k-button-solid-success {
    background: #2d8048 !important;
    border-color: #2d8048 !important;
    color: #fff !important;
}
.k-button.jb-btn-override.k-button-solid-success:hover {
    background: #266d3d !important;
    border-color: #266d3d !important;
}
.k-button.jb-btn-override.k-button-solid-error {
    background: #fff !important;
    border-color: #ffd1cc !important;
    color: #ff3b30 !important;
}
.k-button.jb-btn-override.k-button-solid-error:hover {
    background: #fff0ef !important;
    border-color: #ffb8b0 !important;
}


/* ==========================================================================
   4. UTILITY CLASSES
   ========================================================================== */

/* Text utilities */
.jb-text-muted  { color: #718096; }
.jb-text-small  { font-size: 11px; }
.jb-nowrap      { white-space: nowrap; }

/* Spacing */
.jb-mt-1 { margin-top: 4px; }
.jb-mt-2 { margin-top: 8px; }
.jb-mb-1 { margin-bottom: 4px; }
.jb-mb-2 { margin-bottom: 8px; }


/* ==========================================================================
   5. GRID / TABLE ENHANCEMENTS
   ========================================================================== */

/* Prevent text wrapping in grid cells */
.k-grid td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ==========================================================================
   6. TYPOGRAPHY - iOS Inspired Color Palette
   ========================================================================== */

/* Text colors */
.jb-text-primary   { color: #1d1d1f; }
.jb-text-secondary { color: #86868b; }
.jb-text-tertiary  { color: #636366; }
.jb-text-link      { color: #5b1fd9; }

/* Font weights */
.jb-fw-regular  { font-weight: 400; }
.jb-fw-medium   { font-weight: 500; }
.jb-fw-semibold { font-weight: 600; }
.jb-fw-bold     { font-weight: 700; }

/* Font sizes */
.jb-fs-xs  { font-size: 11px; }
.jb-fs-sm  { font-size: 12px; }
.jb-fs-md  { font-size: 13px; }
.jb-fs-base { font-size: 14px; }
.jb-fs-lg  { font-size: 15px; }
.jb-fs-xl  { font-size: 17px; }

/* Monospace for IDs, codes, etc */
.jb-mono { font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace; }


/* ==========================================================================
   7. DETAIL CARDS & INFO DISPLAY
   ========================================================================== */

/* Label above value pattern */
.jb-label {
    display: block;
    color: #86868b;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 4px;
}

.jb-value {
    color: #1d1d1f;
    font-size: 14px;
    font-weight: 600;
}

.jb-value-sm {
    color: #1d1d1f;
    font-size: 13px;
    font-weight: 500;
}

.jb-subtext {
    display: block;
    color: #86868b;
    font-size: 12px;
    margin-top: 2px;
}

/* Icon circle (for user avatars, etc) */
.jb-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #e8e8ed;
    border-radius: 10px;
    color: #636366;
}

.jb-icon-circle-sm {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

/* Key-value row (for detail lists) */
.jb-kv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.jb-kv-row:not(:last-child) {
    border-bottom: 1px solid #e5e5e7;
}

.jb-kv-key {
    color: #636366;
    font-size: 13px;
}

.jb-kv-value {
    color: #1d1d1f;
    font-size: 13px;
    font-weight: 500;
    text-align: end;
    max-width: 60%;
    word-break: break-all;
}

/* Section title (for drawer headers) */
.jb-section-title {
    color: #1d1d1f;
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}

.jb-section-subtitle {
    color: #86868b;
    font-size: 13px;
}

/* ==========================================================================
   iOS-polish for booking screens
   Soft cards, rounded corners, springy buttons, smooth transitions.
   Scoped via .jb-ios to avoid bleeding into other parts of the app.
   ========================================================================== */
/* ==========================================================================
   TELERIK GRID — Enterprise polish
   --------------------------------------------------------------------------
   Designprinciper:
     • Header: större typografi, semibold, subtle uppercase eyebrow-känsla
     • Cell: större padding (14px vertikalt) för bättre läsbarhet
     • Row hover: soft blå tint istället för plain grå
     • Borders: hairline (0.5px equivalent) i mycket ljus färg
     • Sortable column: tydlig caret + hover state på rubrik
     • Pager: refined macOS-stil längst ner
   Scope: .jb-ios .k-grid (smittar inte resten av appen).
   ========================================================================== */

.jb-buttons .k-grid {
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background-color: #ffffff;
    overflow: visible !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.03),
        0 1px 3px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   DRAWER-TABELLER — horisontell scroll på mobil
   --------------------------------------------------------------------------
   LÖSES INTE med CSS. Telerik ger native horisontell scroll när TelerikGrid
   har `Height` satt — då renderas `.k-grid-content` med egen overflow:auto
   (samma mekanism som de fungerande sid-griderna, t.ex. Receipts/Transaktioner).
   En tidigare CSS-hack (overflow/width:max-content på .k-grid-content) förstörde
   just den containern → kolumner blev breda men gick inte att skrolla.
   RÄTT FIX: sätt `Height` på TelerikGrid i varje drawer-vy. Ingen CSS behövs.
   ========================================================================== */

.jb-buttons .k-grid-toolbar {
    border-radius: 14px 14px 0 0;
    background-color: #fafbfc;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 10px 14px;
    gap: 8px;
    overflow: visible !important;
}

/* ---------- HEADER ---------- */
.jb-buttons .k-grid-header {
    background-color: #fafbfc;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.jb-buttons .k-grid-header th.k-header,
.jb-buttons .k-grid-header .k-header {
    background-color: transparent !important;
    color: #6b7280 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: 8px 14px !important;
    border-color: transparent !important;
    line-height: 1.4;
    transition: color 0.15s ease;
}

.jb-buttons .k-grid-header th.k-header:hover {
    color: #6d27ff !important;
}

.jb-buttons .k-grid-header .k-i-sort-asc-sm,
.jb-buttons .k-grid-header .k-i-sort-desc-sm,
.jb-buttons .k-grid-header .k-grid-filter {
    color: #6d27ff;
    opacity: 0.85;
}

/* ---------- DATA-RADER ---------- */
.jb-buttons .k-grid td {
    padding: 7px 14px !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
    font-size: 13px;
    color: #1c1e22;
    letter-spacing: -0.005em;
    line-height: 1.4;
    vertical-align: middle;
}

/* Celler som innehåller knappar/badges ska INTE få text-overflow:ellipsis —
   det skapar fula ".."-tecken efter knappen om kolumnen är smal. Detekterar via
   :has(.k-button, .jb-badge) och tvingar bort overflow-ellipsis där. */
.jb-buttons .k-grid td:has(.k-button),
.jb-buttons .k-grid td:has(.jb-badge),
.jb-buttons .k-grid td:has(button),
.jb-buttons .k-grid td.has-action {
    text-overflow: clip !important;
    overflow: visible !important;
}

.jb-buttons .k-grid tbody tr {
    transition: background-color 0.12s ease;
}

.jb-buttons .k-grid tbody tr:hover {
    background-color: rgba(109, 39, 255, 0.06) !important;
}

.jb-buttons .k-grid tbody tr.k-selected,
.jb-buttons .k-grid tbody tr.k-state-selected {
    background-color: rgba(109, 39, 255, 0.10) !important;
}

.jb-buttons .k-grid tbody tr.k-alt {
    background-color: transparent;
}

.jb-buttons .k-grid td.text-muted,
.jb-buttons .k-grid td .text-muted {
    color: #6b7280;
}

/* ---------- PAGER ---------- */
.jb-buttons .k-grid-pager,
.jb-buttons .k-pager-wrap {
    background-color: #fafbfc;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0 0 14px 14px;
    padding: 10px 14px;
    color: #6b7280;
    font-size: 13px;
}

.jb-buttons .k-pager-numbers .k-button {
    min-width: 28px;
    height: 28px;
    border-radius: 8px;
    color: #4b5563;
    font-weight: 500;
    border: 1px solid transparent;
    background: transparent;
}

.jb-buttons .k-pager-numbers .k-button:hover {
    background: rgba(109, 39, 255, 0.08);
    color: #6d27ff;
}

.jb-buttons .k-pager-numbers .k-button.k-selected,
.jb-buttons .k-pager-numbers .k-button.k-state-selected {
    background: #6d27ff !important;
    color: #ffffff !important;
    border-color: #6d27ff !important;
    font-weight: 600;
}

.jb-buttons .k-pager-nav .k-button {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #4b5563;
    border-radius: 8px;
}

.jb-buttons .k-pager-nav .k-button:hover:not(:disabled) {
    background: rgba(109, 39, 255, 0.08);
    color: #6d27ff;
}

.jb-buttons .k-pager-info {
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
}

/* ---------- SEARCH BOX I TOOLBAR ---------- */
.jb-buttons .k-grid-toolbar .k-textbox,
.jb-buttons .k-grid-toolbar .k-input {
    border-radius: 8px;
    border: 1px solid #dde2eb;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.jb-buttons .k-grid-toolbar .k-textbox:hover,
.jb-buttons .k-grid-toolbar .k-input:hover {
    border-color: #c5cbd6;
}

.jb-buttons .k-grid-toolbar .k-textbox:focus-within,
.jb-buttons .k-grid-toolbar .k-input.k-focus {
    border-color: #6d27ff;
    box-shadow: 0 0 0 3px rgba(109, 39, 255, 0.15);
}

/* ---------- TOM-LIST-VY ("Inga poster") ---------- */
.jb-buttons .k-grid .k-grid-norecords {
    padding: 48px 16px;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
}

.jb-ios .k-button,
.jb-ios .btn {
    border-radius: 10px;
    transition: transform 120ms cubic-bezier(0.2, 0, 0.2, 1),
                box-shadow 120ms ease,
                background-color 120ms ease,
                color 120ms ease;
}

.jb-ios .k-button:active,
.jb-ios .btn:active {
    transform: scale(0.97);
}

.jb-ios .k-button:focus-visible,
.jb-ios .btn:focus-visible {
    outline: 2px solid #6d27ff;
    outline-offset: 2px;
}

.jb-ios .card {
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
    border: none;
}

.jb-ios .alert {
    border-radius: 14px;
}

.jb-ios .k-window,
.jb-ios .k-dialog {
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   TabControl — macOS-style segmented control
   --------------------------------------------------------------------------
   Mönstret matchar macOS Big Sur+/iPadOS-segmented: tonad bakgrundskapsel +
   vit pill för aktiv flik med mjuk skugga. Användaren såg tidigare bara en
   tunn Metronic-underline som knappt syntes; den nya stylingen ger tydlig
   aktiv-state utan färgbrus.

   Kritiska overrides (Metronic ärver kraftigt):
     - Döda `nav-line-tabs-2x`-understräcket (border-bottom på <a>)
     - Ta bort default-borders på .nav-link så pillen får ren form
     - Behåll dropdown (.nav-item.dropdown = "Åtgärder") som visuellt
       SEPARAT från segmented-controlen — det är en menyåtgärd, inte en
       navigationsflik, så macOS-mönstret kräver särbehandling.
   ========================================================================== */
.jb-ios .nav-tabs.nav-line-tabs,
.jb-ios .nav-tabs {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 3px;
    background: #ececef;
    border-radius: 9px;
    padding: 2px;
    gap: 0;
    border: none !important;
    box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

.jb-ios .nav-tabs .nav-item {
    margin: 0 !important;
    border: none !important;
}

.jb-ios .nav-tabs .nav-link {
    margin: 0 !important;  /* Metronic sätter margin: 0 13px på .nav-link — dödas här för segmented-rytm */
    padding: 4px 11px !important;
    border-radius: 6px !important;
    color: #3b4554 !important;
    font-size: 13px;
    font-weight: 500;
    border: none !important;
    background: transparent !important;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    line-height: 1.45;
    letter-spacing: -0.005em;
    /* Döda Metronic-line-understräcket */
    border-bottom: none !important;
}

.jb-ios .nav-tabs .nav-link:hover {
    background: rgba(255, 255, 255, 0.55) !important;
    color: #1c1e22 !important;
}

.jb-ios .nav-tabs .nav-link.active,
.jb-ios .nav-tabs .nav-item.show .nav-link {
    background: #ffffff !important;
    color: #1c1e22 !important;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08),
                0 0 0 0.5px rgba(0, 0, 0, 0.05) !important;
    border: none !important;
}

.jb-ios .nav-tabs .nav-link:focus-visible {
    outline: 2px solid #6d27ff;
    outline-offset: 1px;
}

/* Åtgärder-dropdown — visuellt SEPARAT från segmented-controlen.
   Ligger fortfarande i samma <ul> (Bootstrap-struktur), men får
   transparent bakgrund, tunn vänsterdivider och egen färg/caret. */
.jb-ios .nav-tabs .nav-item.dropdown {
    position: relative;
    margin-left: 4px !important;
    padding-left: 7px !important;
}

.jb-ios .nav-tabs .nav-item.dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 1px;
    background: rgba(0, 0, 0, 0.08);
    pointer-events: none;
}

.jb-ios .nav-tabs .nav-item.dropdown .nav-link {
    color: #4b5563 !important;
    font-weight: 500;
}

.jb-ios .nav-tabs .nav-item.dropdown .nav-link:hover {
    background: rgba(255, 255, 255, 0.55) !important;
    color: #1c1e22 !important;
}

.jb-ios .nav-tabs .nav-item.dropdown .nav-link.dropdown-toggle::after {
    margin-left: 5px;
    border-top-width: 4px;
    border-right-width: 3px;
    border-left-width: 3px;
    vertical-align: 0.16em;
    opacity: 0.55;
}

/* ==========================================================================
   Dropdown menus — macOS-stil
   --------------------------------------------------------------------------
   Default Bootstrap-dropdown är platt med tunn skugga och kantiga hörn.
   macOS-menyer har: rundade hörn (10px), multi-layer skugga, ljus border,
   och hover är en tonad färgpill INNE i menyn (med liten margin på sidorna).
   Items själva har 4px rundning så hover-tinten formar en pill. *
   ========================================================================== */
.jb-ios .dropdown-menu {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 10px !important;
    padding: 5px !important;
    min-width: 180px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.06),
        0 0 0 0.5px rgba(0, 0, 0, 0.04) !important;
    background: #ffffff !important;
    /* Lätt fade-in när menyn öppnas */
    animation: jbDropdownFadeIn 0.12s ease-out;
}

@keyframes jbDropdownFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.jb-ios .dropdown-menu .dropdown-item {
    padding: 6px 12px !important;
    border-radius: 6px !important;
    color: #1c1e22 !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.005em;
    transition: background 0.1s ease, color 0.1s ease;
    cursor: pointer;
}

.jb-ios .dropdown-menu .dropdown-item:hover,
.jb-ios .dropdown-menu .dropdown-item:focus {
    background: #6d27ff !important;
    color: #ffffff !important;
}

.jb-ios .dropdown-menu .dropdown-item:active {
    background: #0066cc !important;
    color: #ffffff !important;
}

/* Destruktiva items (Radera, Ta bort) — röd hover för tydlig signal.
   Heuristik: items vars text innehåller "Radera"/"Ta bort"/"Avbryt"-mönster
   hanteras inte automatiskt här (vi kan inte CSS-matcha text), så vi förlitar
   oss på framtida .dropdown-item-danger-klass när vi vill markera dem. För
   nu får alla items samma blå hover — likvärdigt med macOS-default. */

/* Divider mellan grupper */
.jb-ios .dropdown-menu .dropdown-divider {
    margin: 4px 0 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    opacity: 1 !important;
}

/* Header-rader (sub-section labels) */
.jb-ios .dropdown-menu .dropdown-header {
    padding: 6px 12px 2px !important;
    color: #86868b !important;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ==========================================================================
   Form inputs — soft borders + iOS focus-ring
   --------------------------------------------------------------------------
   Bootstrap default = mörkblå hard border vid focus. macOS/iOS = mjuk färgring
   som "andas" runt inputen (3-4px halo med 25% opacity). Vi matchar systemBlue
   (#6d27ff) som är samma som vi använder för fokus på segmented control.
   ========================================================================== */
.jb-ios .k-input-inner,
.jb-ios .k-textbox,
.jb-ios .form-control,
.jb-ios .form-select {
    border-radius: 8px;
    border-color: #dadee4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.jb-ios .form-control:hover,
.jb-ios .form-select:hover,
.jb-ios .k-input:hover .k-input-inner,
.jb-ios .k-textbox:hover {
    border-color: #c2c7d0;
}

.jb-ios .form-control:focus,
.jb-ios .form-select:focus,
.jb-ios .k-input.k-focus,
.jb-ios .k-input:focus-within,
.jb-ios .k-textbox:focus {
    border-color: #6d27ff !important;
    box-shadow: 0 0 0 3px rgba(109, 39, 255, 0.18) !important;
    outline: none !important;
}

/* Telerik DropDown caret behåller sin pilform men dämpas en aning */
.jb-ios .k-input .k-input-button .k-button-icon {
    opacity: 0.6;
}


/* ==========================================================================
   5. UNIFIED BUTTON SYSTEM — iOS/macOS-style
   --------------------------------------------------------------------------
   Single visual language across Bootstrap (.btn-*), Telerik (.k-button*) and
   native <button> elements. CSS-only — INGA Razor- eller onClick-ändringar.
   Aktiveras via klass `jb-buttons` på <body>. Endast destruktiva knappar får
   röd textfärg (övriga är neutralgrå).

   Storlekar:
     - Standard: 32px höjd (default)
     - Compact (.btn-sm, .k-button-sm): 26px höjd — främst i grids
     - Spacious (.btn-lg, .k-button-lg): 40px höjd — för centrala CTA

   Destruktiv-igenkänning (automatisk röd text):
     - Bootstrap: .btn-danger, .btn-outline-danger, .btn-light-danger
     - Telerik:   .k-button-solid-error, .k-button-outline-error, .k-button-flat-error
     - Custom:    .jb-btn-red, .jb-destructive (opt-in)
   ========================================================================== */

/* --- CSS-vars för centrala värden — lätt att justera ett ställe ---
   Shadow + border-värdena är kalibrerade att matcha Telerik:s default
   "subtle elevation": en svag mörk ring runt knappen + en pyttelitet drop-shadow
   nedanför. Värdena replikerar exakt det iOS/macOS-Big-Sur-buttons har. */
.jb-buttons {
    /* NEUTRAL: VIT fyllning (var #f5f5f7). Admin-ytor (kort/toolbars/chips/drawers)
       ligger i #f4f6fa–#fafbfc — en ljusgrå knapp försvann på dem. Vit fyllning + en
       lastbärande kant + riktig skugga syns på vitt OCH grått. Kollapsar de 3–4 lokala
       "gör-den-vit-på-grått"-patcharna (jb-action-bar, jb-tabcontrol-toolbar, jb-clipcard-*). */
    /* macOS-borderless: tonad grå fyllning (en aning mörkare än alla admin-ytor
       #fff–#fafbfc) → syns UTAN kant. Kanten är transparent (behålls i box-modellen
       för konsekvent storlek, men osynlig). */
    --jb-btn-bg:            #e9eaee;
    --jb-btn-bg-hover:      #e1e2e8;
    --jb-btn-bg-active:     #d6d8df;
    --jb-btn-border:        transparent;
    --jb-btn-text:          #1d1d1f;
    --jb-btn-text-muted:    #6e6e73;
    --jb-btn-text-danger:   #ff3b30;
    --jb-btn-bg-danger-h:   #fff0ef;
    --jb-btn-focus-ring:    rgba(109, 39, 255, 0.35);
    --jb-btn-radius:        8px;
    --jb-btn-radius-sm:     6px;
    --jb-btn-radius-lg:     10px;
    /* MER PLATT (modern iOS/macOS): ingen drop-shadow — fyllning + kant bär looken.
       Hover-feedback kommer från bakgrundsbytet, inte en lyft-skugga. */
    --jb-btn-shadow:        none;
    --jb-btn-shadow-hover:  none;
    --jb-btn-trans:         all 120ms cubic-bezier(0.2, 0, 0.2, 1);

    /* PRIMÄR: iOS-blå accent. Utpekad ur grå-mappningen — se blå-regeln längre ned. */
    --jb-btn-primary-bg:        #6d27ff;
    --jb-btn-primary-bg-hover:  #5b1fd9;
    --jb-btn-primary-bg-active: #4d18b8;
    --jb-btn-primary-text:      #ffffff;
    --jb-btn-primary-border:    #6d27ff;
    --jb-btn-primary-shadow:    none;   /* platt blå fyllning */

    /* ------------------------------------------------------------------
       METRONIC PRIMARY-OVERRIDE — rotorsak till lila hover
       ------------------------------------------------------------------
       Metronic-temat omdefinierar btn-primary till lila (`#6D27FF`) och
       hardcodar `background-color: var(--bs-primary-active) !important`
       i sina hover/active/focus-regler. Vår tidigare `--bs-btn-hover-bg`-
       override blev helt ignorerad eftersom Metronic INTE läser den
       variabeln — den läser `--bs-primary-active`.

       Lösning: ta över via samma kanal Metronic använder. Genom att
       sätta `--bs-primary*` här på .jb-buttons ärvs värdena ner till
       alla `.btn-primary` i admin-UI — och Metronics `!important`
       arbetar nu FÖR oss istället för emot. Hela trädet får grå hover
       i ett enda ställe.

       Påverkar bara primary-knappar inuti <body class="jb-buttons">.
       `.bg-primary`/`.text-primary` på element som använder var(--bs-primary)
       direkt blir också grå — om vi behöver återställa primary-färg
       någonstans i admin gör vi det med en explicit klass där.
       ------------------------------------------------------------------ */
    /* Icke-knapp primary-element (.bg-primary/.text-primary/.badge etc.) hålls neutralt grå
       (dödar Metronic-lila) — frikopplat från knapp-fyllningen ovan (nu vit). .btn-primary
       självt tas över av den blå PRIMÄR-regeln längre ned, inte av dessa. */
    --bs-primary:           #f5f5f7;
    --bs-primary-active:    #e8e8ed;
    --bs-primary-light:     #f5f5f7;
    --bs-primary-inverse:   var(--jb-btn-text);
}

/* KONSEKVENSEN AV ATT --bs-primary ÄR GRÅ, rättad.
   ------------------------------------------------------------------
   Metronics `.btn-active-light-primary:hover` sätter bakgrunden till
   var(--bs-primary-light) OCH textfärgen till var(--bs-primary). Sedan båda
   pekar på #f5f5f7 blir de identiska — och eftersom knappikoner ärver
   textfärgen (regeln "IKONFÄRG" längre ned) försvann ikonen helt in i sin egen
   hover-platta. Stängkrysset i varje drawer blev en tom grå ruta så fort man
   förde muspekaren dit.

   Klassen används på 33 ställen, så det gällde inte bara krysset.

   Bakgrunden behålls grå — det är den avsedda dämpningen. Bara förgrunden
   återställs till läsbar text. #ececf1 på hover ger dessutom en aning mer
   kontrast mot kortets vita botten än #f5f5f7, så knappen syns som klickbar. */
.jb-buttons:not(:has(.jb-portal)) .btn.btn-active-light-primary:hover:not(.btn-active),
.jb-buttons:not(:has(.jb-portal)) .btn.btn-active-light-primary:focus:not(.btn-active) {
    background-color: #ececf1;
    color: #1d1d1f;
}

/* --- BAS: alla buttons (Bootstrap, Telerik, native) ---
   Undantag: .btn-custom (Metronic-stora flexbox-knappar i sidebar-header som
   company/product-switchers), .btn-flex, och buttons inom .app-sidebar-header.
   Dessa har egen layout med logga + text + chevron och får ha sin storlek.

   OBS: scope:at till BARA button/a-element med .btn. Tidigare matchade `.btn`
   även andra Metronic-komponenter (accordion-headers, badges, dropdown-toggles
   som råkade ha .btn-klass) → spridda borders. Nu bara faktiska klickbara
   buttons + Telerik-komponenter.

   KRITISKT — :not(.k-input-button):not(.k-spinner-increase):not(.k-spinner-decrease):
   Telerik renderar dropdown-caret (.k-input-button) och numeric up/down
   (.k-spinner-increase/decrease) som .k-button — utan exclude här skulle
   de få vår iOS-stil med 32px höjd + 14px padding och bli "stora knappar"
   som sticker ut ur inputs. Vi vill att de visuellt stannar som SMÅ pilar
   styrda av Section 18 (TELERIK INPUTS) — inte som CTAs.
   Samma princip för :not(.k-grid-edit-row .k-button) — inline-edit i grid
   kan vara små också. */
/* `:not(:where(.ai-assist *))` — Jobbs AI-chatten har egna knappar (ikonknappar, följdfrågor,
   förslagskort). Regeln nedan har högre specificitet än deras enda klass och gjorde dem till grå
   30px-knappar utan luft. :where() håller specificiteten oförändrad för allt annat. */
/* `:not(:has(.jb-portal))` — Portal-sidor (SystemLayout: /qr/{guid}, /signin, /guest/*)
   wrappar @Body i <div class="jb-portal">. När body innehåller .jb-portal SKIPPAS hela
   detta block + alla generiska variant-regler nedan. Då tar Portal-egna styles över
   (.method-card, .numpad-btn, Bootstrap-default .btn-primary etc.) utan kollision.
   Admin (DefaultLayout, ingen .jb-portal) påverkas inte. */
.jb-buttons:not(:has(.jb-portal)) button.btn:not(.btn-custom):not(.btn-flex),
.jb-buttons:not(:has(.jb-portal)) a.btn:not(.btn-custom):not(.btn-flex),
.jb-buttons:not(:has(.jb-portal)) .k-button:not(.k-input-button):not(.k-spinner-increase):not(.k-spinner-decrease):not(.k-i-arrow-s):not(.k-i-arrow-n),
.jb-buttons:not(:has(.jb-portal)) button:not(:where(.ai-assist *)):not(.btn):not(.k-button):not([class^="k-"]):not(.btn-custom):not(.btn-flex) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    min-height: 30px;
    min-width: 0;
    padding: 0 11px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: var(--jb-btn-text);
    background: var(--jb-btn-bg);
    background-image: none;            /* Reset Telerik-gradienter */
    border: 1px solid var(--jb-btn-border);
    border-radius: var(--jb-btn-radius);
    box-shadow: var(--jb-btn-shadow);
    text-decoration: none;
    cursor: pointer;
    transition: var(--jb-btn-trans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
}

/* Buttons inom sidebar-header behåller sin Metronic-styling helt (company/product
   switchers, logout, etc.) — vi vill inte krympa dem. */
.jb-buttons .app-sidebar-header .btn,
.jb-buttons .app-sidebar-header button {
    height: auto;
    min-height: 0;
}

/* Hover (skip btn-custom/flex + Telerik spinner/dropdown-pilar) */
.jb-buttons:not(:has(.jb-portal)) button.btn:not(.btn-custom):not(.btn-flex):not(:disabled):not(.disabled):hover,
.jb-buttons:not(:has(.jb-portal)) a.btn:not(.btn-custom):not(.btn-flex):not(:disabled):not(.disabled):hover,
.jb-buttons:not(:has(.jb-portal)) .k-button:not(.k-input-button):not(.k-spinner-increase):not(.k-spinner-decrease):not(:disabled):not(.k-disabled):hover,
.jb-buttons:not(:has(.jb-portal)) button:not(:where(.ai-assist *)):not(.btn):not(.k-button):not([class^="k-"]):not(.btn-custom):not(.btn-flex):not(:disabled):hover {
    background: var(--jb-btn-bg-hover);
    background-image: none;
    color: var(--jb-btn-text);
    border-color: var(--jb-btn-border);
    box-shadow: var(--jb-btn-shadow-hover);
}

/* Active (pressed) — iOS-springy */
.jb-buttons:not(:has(.jb-portal)) button.btn:not(.btn-custom):not(.btn-flex):not(:disabled):not(.disabled):active,
.jb-buttons:not(:has(.jb-portal)) a.btn:not(.btn-custom):not(.btn-flex):not(:disabled):not(.disabled):active,
.jb-buttons:not(:has(.jb-portal)) .k-button:not(.k-input-button):not(.k-spinner-increase):not(.k-spinner-decrease):not(:disabled):not(.k-disabled):active,
.jb-buttons:not(:has(.jb-portal)) button:not(:where(.ai-assist *)):not(.btn):not(.k-button):not([class^="k-"]):not(.btn-custom):not(.btn-flex):not(:disabled):active {
    background: var(--jb-btn-bg-active);
    transform: scale(0.97);
    box-shadow: none;
}

/* Focus-visible — subtil iOS-ring (för tangentbordsnavigation) */
.jb-buttons:not(:has(.jb-portal)) .btn:focus-visible,
.jb-buttons:not(:has(.jb-portal)) .k-button:focus-visible,
.jb-buttons:not(:has(.jb-portal)) button:not(:where(.ai-assist *)):focus-visible {
    outline: 2px solid var(--jb-btn-focus-ring);
    outline-offset: 2px;
    box-shadow: var(--jb-btn-shadow-hover);
}

/* Reset Telerik's egen focus-shadow så vår tar över rent */
.jb-buttons .k-button:focus,
.jb-buttons .k-button.k-focus {
    box-shadow: var(--jb-btn-shadow);
}
.jb-buttons .k-button:focus-visible {
    box-shadow: var(--jb-btn-shadow-hover);
}

/* Disabled */
.jb-buttons:not(:has(.jb-portal)) .btn:disabled,
.jb-buttons:not(:has(.jb-portal)) .btn.disabled,
.jb-buttons:not(:has(.jb-portal)) .k-button:disabled,
.jb-buttons:not(:has(.jb-portal)) .k-button.k-disabled,
.jb-buttons:not(:has(.jb-portal)) button:not(:where(.ai-assist *)):disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: var(--jb-btn-shadow);
}

/* --- VARIANTER: alla färgvarianter blir grå default ---
   Bootstrap 5 använder CSS-variabler (--bs-btn-*) för sina färger. Vår CSS
   sätter `background: ...` direkt vilket override:ar default-state, MEN
   Bootstrap's `.btn:hover { background-color: var(--bs-btn-hover-bg) }`-regel
   vinner vid hover om vi inte också override:ar variablerna. Vi tilldelar
   därför våra grå-tokens till Bootstrap-variablerna för varje variant. */
.jb-buttons:not(:has(.jb-portal)) .btn-secondary,
.jb-buttons:not(:has(.jb-portal)) .btn-light,
.jb-buttons:not(:has(.jb-portal)) .btn-success,
.jb-buttons:not(:has(.jb-portal)) .btn-warning,
.jb-buttons:not(:has(.jb-portal)) .btn-info,
.jb-buttons:not(:has(.jb-portal)) .btn-dark,
.jb-buttons:not(:has(.jb-portal)) .btn-outline-primary,
.jb-buttons:not(:has(.jb-portal)) .btn-outline-secondary,
.jb-buttons:not(:has(.jb-portal)) .btn-outline-success,
.jb-buttons:not(:has(.jb-portal)) .btn-outline-warning,
.jb-buttons:not(:has(.jb-portal)) .btn-outline-info,
.jb-buttons:not(:has(.jb-portal)) .btn-light-primary,
.jb-buttons:not(:has(.jb-portal)) .btn-light-success,
.jb-buttons:not(:has(.jb-portal)) .btn-light-warning,
.jb-buttons:not(:has(.jb-portal)) .btn-light-info {
    /* Direkt-stylning (default-state) */
    background: var(--jb-btn-bg);
    background-image: none;
    color: var(--jb-btn-text);
    border-color: var(--jb-btn-border);
    /* Bootstrap CSS-vars för default/hover/active/disabled — gör hover grå inte lila */
    --bs-btn-bg: var(--jb-btn-bg);
    --bs-btn-color: var(--jb-btn-text);
    --bs-btn-border-color: var(--jb-btn-border);
    --bs-btn-hover-bg: var(--jb-btn-bg-hover);
    --bs-btn-hover-color: var(--jb-btn-text);
    --bs-btn-hover-border-color: var(--jb-btn-border);
    --bs-btn-active-bg: var(--jb-btn-bg-active);
    --bs-btn-active-color: var(--jb-btn-text);
    --bs-btn-active-border-color: var(--jb-btn-border);
    --bs-btn-disabled-bg: var(--jb-btn-bg);
    --bs-btn-disabled-color: var(--jb-btn-text);
    --bs-btn-disabled-border-color: var(--jb-btn-border);
    --bs-btn-focus-shadow-rgb: 0, 122, 255;
}

/* Telerik solid/outline/flat variants — alla utom error blir grå */
.jb-buttons .k-button.k-button-solid-secondary,
.jb-buttons .k-button.k-button-solid-base,
.jb-buttons .k-button.k-button-solid-tertiary,
.jb-buttons .k-button.k-button-solid-success,
.jb-buttons .k-button.k-button-solid-warning,
.jb-buttons .k-button.k-button-solid-info,
.jb-buttons .k-button.k-button-solid-dark,
.jb-buttons .k-button.k-button-outline-primary,
.jb-buttons .k-button.k-button-outline-secondary,
.jb-buttons .k-button.k-button-outline-base,
.jb-buttons .k-button.k-button-outline-success,
.jb-buttons .k-button.k-button-outline-warning,
.jb-buttons .k-button.k-button-outline-info,
.jb-buttons .k-button.k-button-flat-primary,
.jb-buttons .k-button.k-button-flat-secondary,
.jb-buttons .k-button.k-button-flat-base,
.jb-buttons .k-button.k-button-flat-success,
.jb-buttons .k-button.k-button-flat-warning,
.jb-buttons .k-button.k-button-flat-info {
    background: var(--jb-btn-bg);
    background-image: none;
    color: var(--jb-btn-text);
    border-color: var(--jb-btn-border);
}

/* Telerik inner text-span behöver också ärva färgen (annars tar Telerik över) */
.jb-buttons .k-button .k-button-text,
.jb-buttons .k-button .k-icon {
    color: inherit;
}

/* --- DESTRUKTIV: grå BG, röd text ---
   Override:ar både direkt-styling OCH Bootstrap CSS-vars så hover/active behåller
   röd text + grå bakgrund (varken Bootstrap eller Telerik trycker tillbaka).
   Portal-undantag via :not(:has(.jb-portal)). */
.jb-buttons:not(:has(.jb-portal)) .btn-danger,
.jb-buttons:not(:has(.jb-portal)) .btn-outline-danger,
.jb-buttons:not(:has(.jb-portal)) .btn-light-danger,
.jb-buttons:not(:has(.jb-portal)) .k-button.k-button-solid-error,
.jb-buttons:not(:has(.jb-portal)) .k-button.k-button-outline-error,
.jb-buttons:not(:has(.jb-portal)) .k-button.k-button-flat-error,
.jb-buttons:not(:has(.jb-portal)) .jb-btn-red,
.jb-buttons:not(:has(.jb-portal)) .jb-destructive {
    background: var(--jb-btn-bg);
    background-image: none;
    color: var(--jb-btn-text-danger) !important;
    border-color: var(--jb-btn-border);
    --bs-btn-bg: var(--jb-btn-bg);
    --bs-btn-color: var(--jb-btn-text-danger);
    --bs-btn-border-color: var(--jb-btn-border);
    --bs-btn-hover-bg: var(--jb-btn-bg-danger-h);
    --bs-btn-hover-color: var(--jb-btn-text-danger);
    --bs-btn-hover-border-color: var(--jb-btn-border);
    --bs-btn-active-bg: var(--jb-btn-bg-danger-h);
    --bs-btn-active-color: var(--jb-btn-text-danger);
    --bs-btn-active-border-color: var(--jb-btn-border);
    --bs-btn-disabled-bg: var(--jb-btn-bg);
    --bs-btn-disabled-color: var(--jb-btn-text-danger);
}

.jb-buttons:not(:has(.jb-portal)) .btn-danger:not(:disabled):hover,
.jb-buttons:not(:has(.jb-portal)) .btn-outline-danger:not(:disabled):hover,
.jb-buttons:not(:has(.jb-portal)) .btn-light-danger:not(:disabled):hover,
.jb-buttons:not(:has(.jb-portal)) .k-button.k-button-solid-error:not(:disabled):hover,
.jb-buttons:not(:has(.jb-portal)) .k-button.k-button-outline-error:not(:disabled):hover,
.jb-buttons:not(:has(.jb-portal)) .k-button.k-button-flat-error:not(:disabled):hover,
.jb-buttons:not(:has(.jb-portal)) .jb-btn-red:not(:disabled):hover,
.jb-buttons:not(:has(.jb-portal)) .jb-destructive:hover {
    background: var(--jb-btn-bg-danger-h);
    background-image: none;
    color: var(--jb-btn-text-danger) !important;
    border-color: var(--jb-btn-border);
}

/* --- PRIMÄR: iOS-blå CTA (utpekad ur grå-mappningen ovan) ---
   Bas-regeln + generisk hover/active sätter `background`/`color` DIREKT med hög specificitet,
   så primär använder !important för att garanterat vinna som blå i alla states. Scoped
   --bs-primary* här gör att Metronics egen !important-hover också läser blått. */
.jb-buttons:not(:has(.jb-portal)) .btn-primary,
.jb-buttons:not(:has(.jb-portal)) .k-button.k-button-solid-primary {
    background: var(--jb-btn-primary-bg) !important;
    background-image: none !important;
    color: var(--jb-btn-primary-text) !important;
    border-color: var(--jb-btn-primary-border) !important;
    box-shadow: var(--jb-btn-primary-shadow);
    --bs-primary: var(--jb-btn-primary-bg);
    --bs-primary-active: var(--jb-btn-primary-bg-hover);
    --bs-btn-bg: var(--jb-btn-primary-bg);
    --bs-btn-color: var(--jb-btn-primary-text);
    --bs-btn-border-color: var(--jb-btn-primary-border);
    --bs-btn-hover-bg: var(--jb-btn-primary-bg-hover);
    --bs-btn-hover-color: var(--jb-btn-primary-text);
    --bs-btn-hover-border-color: var(--jb-btn-primary-bg-hover);
    --bs-btn-active-bg: var(--jb-btn-primary-bg-active);
    --bs-btn-active-color: var(--jb-btn-primary-text);
    --bs-btn-active-border-color: var(--jb-btn-primary-bg-active);
    --bs-btn-disabled-bg: var(--jb-btn-primary-bg);
    --bs-btn-disabled-color: var(--jb-btn-primary-text);
    --bs-btn-disabled-border-color: var(--jb-btn-primary-border);
}
.jb-buttons:not(:has(.jb-portal)) .btn-primary:not(:disabled):not(.disabled):hover,
.jb-buttons:not(:has(.jb-portal)) .k-button.k-button-solid-primary:not(:disabled):not(.k-disabled):hover {
    background: var(--jb-btn-primary-bg-hover) !important;
    color: var(--jb-btn-primary-text) !important;
    border-color: var(--jb-btn-primary-bg-hover) !important;
    box-shadow: var(--jb-btn-shadow-hover);
}
.jb-buttons:not(:has(.jb-portal)) .btn-primary:not(:disabled):not(.disabled):active,
.jb-buttons:not(:has(.jb-portal)) .k-button.k-button-solid-primary:not(:disabled):active {
    background: var(--jb-btn-primary-bg-active) !important;
    border-color: var(--jb-btn-primary-bg-active) !important;
}

/* --- STORLEKAR --- */
/* Compact (grid commands, små buttons) */
.jb-buttons:not(:has(.jb-portal)) .btn-sm,
.jb-buttons:not(:has(.jb-portal)) .k-button-sm,
.jb-buttons:not(:has(.jb-portal)) .k-button.k-button-sm {
    height: 26px;
    min-height: 26px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: var(--jb-btn-radius-sm);
}

/* Spacious (huvud-CTA — sällsynt) */
.jb-buttons:not(:has(.jb-portal)) .btn-lg,
.jb-buttons:not(:has(.jb-portal)) .k-button-lg,
.jb-buttons:not(:has(.jb-portal)) .k-button.k-button-lg {
    height: 40px;
    min-height: 40px;
    padding: 0 20px;
    font-size: 14px;
    border-radius: var(--jb-btn-radius-lg);
}

/* Icon-only buttons (typ grid Pencil/Trash utan text) — kvadratiska */
.jb-buttons:not(:has(.jb-portal)) .btn.btn-icon,
.jb-buttons:not(:has(.jb-portal)) .k-button.k-icon-button,
.jb-buttons:not(:has(.jb-portal)) .k-button:not(.k-button-text-only):where(
    .k-grid-edit-command,
    .k-grid-remove-command,
    .k-grid-save-command,
    .k-grid-cancel-command
) {
    width: 32px;
    padding: 0;
}
.jb-buttons:not(:has(.jb-portal)) .btn-sm.btn-icon,
.jb-buttons:not(:has(.jb-portal)) .k-button-sm.k-icon-button {
    width: 26px;
}

/* --- IKONER inuti buttons --- */
/* Standardisera ikon-storlek över Bootstrap (.bi-), Telerik (.k-icon) och Phosphor (.ph-) */
/*
   !important på font-size, och det är inte kosmetik.

   Metronics storleksklasser (.fs-1 … .fs-9) bär själva !important. En knapp med
   `<i class="ph-duotone ph-x fs-2">` fick därför font-size 19,92px medan width/height
   låstes till 14px av regeln här — glyfen blev 40 % större än sin ruta.

   För en duotone-ikon blir det värre än en klippt kant. Fonten ritar TVÅ lager: ::before
   (opacity 0.2) och ::after (opacity 1) som läggs ovanpå varandra med
   `margin-left: -1em`. Ligger em-värdet på 19,92px men rutan på 14px hamnar lagren isär,
   och man ser två halva kryss i stället för ett. Det syntes mest på hover, när knappens
   platta bakgrund tänds bakom.

   Uppmätt på stage 2026-08-18: samtliga knappikoner på sidan låg på 19,92px i en
   14px-ruta. Med !important vinner den här regeln (högre specificitet bland
   !important-deklarationer) och alla tre gick till 14px med lagren exakt i linje.

   Alternativet var att ta bort fs-* från 169 ställen i markupen. Storleken hör hemma i
   designsystemet, inte på varje knapp.
*/
.jb-buttons:not(:has(.jb-portal)) .btn .bi,
.jb-buttons:not(:has(.jb-portal)) .btn i[class*="ph-"],
.jb-buttons:not(:has(.jb-portal)) .k-button .k-icon,
.jb-buttons:not(:has(.jb-portal)) .k-button .k-svg-icon,
.jb-buttons:not(:has(.jb-portal)) .k-button .k-button-icon {
    font-size: 14px !important;
    width: 14px;
    height: 14px;
    line-height: 1;
}

/* IKONFÄRG: ärv knappens textfärg. En ph-duotone-ikon fick annars en fast mörk färg
   (#1d1d1f) oavsett knapp, så på en fylld knapp — btn-primary är lila — blev ikonen
   nästan svart på lila och syntes knappt, medan texten var vit. Mätt på stage:
   knapptext rgb(255,255,255), ikon rgb(29,29,31). inherit gör att ikonen följer texten
   på ALLA fyllda varianter (primary/danger/success/dark), och lämnar ljusa knappar
   oförändrade (mörk text → mörk ikon, som förut). Telerik lämnas utanför med flit —
   .k-button styr egna ikonfärger. Bara Bootstrap (.bi) och Phosphor (.ph-). */
.jb-buttons:not(:has(.jb-portal)) .btn .bi,
.jb-buttons:not(:has(.jb-portal)) .btn i[class*="ph-"] {
    color: inherit;
}

.jb-buttons .k-button .k-svg-icon svg {
    width: 14px;
    height: 14px;
}

/* --- TabControl/Drawer-footer-knapparna ---
   Använder `.jb-footer-btn`-klassen i TabControl.razor + bas-regeln för `.btn`
   ovan. Den gamla `.card-footer .btn-primary { background: linear-gradient(...) }`
   i global.css är BORTTAGEN — ingen override behövs längre. */

/* --- FORCE-border-regel BORTTAGEN ---
   Tidigare hade vi `.jb-buttons .btn.btn { border: 1px solid; box-shadow: ... }`
   för att tvinga shadow+border på Bootstrap-knappar. Men `.btn` används i Metronic
   och andra Bootstrap-baserade komponenter på element som INTE är primära buttons
   (accordion-headers, badges-i-knappform, dropdown-toggles m.m.) — och alla fick
   border. Numera använder vi TelerikButton i drawer-footer (se TabControl.razor)
   och övriga Bootstrap-`.btn` får skugga via bas-regeln längre upp, utan den
   spridande force-bordern. */

/* --- GridCommandButton — Telerik renderar utan size-class default = k-button-md --- */
.jb-buttons .k-grid-toolbar .k-button,
.jb-buttons .k-toolbar .k-button {
    height: 28px;
    min-height: 28px;
    padding: 0 12px;
    font-size: 12px;
}
.jb-buttons .k-grid-toolbar .k-button .k-svg-icon,
.jb-buttons .k-grid-toolbar .k-button .k-icon {
    font-size: 13px;
    width: 13px;
    height: 13px;
}

/* --- Telerik-specifik cleanup --- */
/* Telerik lägger ibland en gradient via ::before — neutralisera */
.jb-buttons .k-button::before {
    display: none;
}

/* --- IKON-ONLY DESTRUKTIVA knappar i grids ---
   Telerik renderar ofta Command="Delete" som en ikon-only knapp med
   `k-button-solid-base` (neutral theme) + trash-svg. Min standard-CSS gör
   den då grå/svart. Men trash-ikonen ska sticka ut visuellt som destruktiv —
   lös genom att färga själva ikonen röd. Knapp-bakgrunden förblir grå (matchar
   resten), bara ikonen blir röd. */
.jb-buttons .k-button .k-svg-i-trash,
.jb-buttons .k-button .k-i-trash,
.jb-buttons .k-button .k-svg-i-x,
.jb-buttons .k-button:has(.k-svg-i-trash),
.jb-buttons .k-button:has(.k-i-trash) {
    color: var(--jb-btn-text-danger);
}

/* OBS: tidigare fanns en `.jb-buttons .k-button.k-icon-button { 28×28 }`-regel
   här som krockade med 32×32-reglerna i sektion 5 (slutet av filen). Den
   gjorde knappen rektangulär (32×28) eftersom width kunde tryckas ut av
   cellen men height var fast 28 → ikonen blev visuellt off-center.
   Nu hanteras icon-button-storlek ENDAST i sektion 5 ("ICON-BUTTON CENTRERING").
   Lämnar tom block här som markör så ingen återinför den. */

/* Drawer-footer knappar (Stäng/Spara via TabControl) — matchande min-width
   så båda är exakt lika breda oavsett text-längd. Bootstrap Icons aligning. */
.jb-buttons .jb-footer-btn {
    min-width: 110px;
    justify-content: center;
}

/* Höjd-cap på Telerik-CTA-knappar i drawer-TOOLBAR + FOOTER — systemet kapar inte
   generella .k-button-höjder, så Size Medium gav Telerik-default (~36-38px) =
   "för höga" mot övriga 30-34px-knappar (t.ex. "Återbetala" i kvitto-drawern).
   Scopat hit så grid-/pager-/input-knappar (annan kontext) INTE påverkas. */
.jb-buttons .jb-tabcontrol-toolbar .k-button,
.jb-buttons .jb-footer-btn {
    height: 34px;
    min-height: 34px;
}

/* Sekundär-knapp i publicerings-bannern ("Öppna i Pay") — vit fyllning + subtil
   kant så den ALLTID syns mot kortets ton (grå utkast / amber / grön) i stället
   för att smälta in som en grå knapp mot ett grått kort. Tydlig sekundär bredvid
   den lila primär-knappen (Publicera). */
.jb-buttons .jb-pub-secondary.k-button {
    background: #ffffff !important;
    color: #1d1d1f !important;
    border: 1px solid rgba(0, 0, 0, 0.14) !important;
}
.jb-buttons .jb-pub-secondary.k-button:hover {
    background: #f5f5f7 !important;
    border-color: rgba(0, 0, 0, 0.22) !important;
}
.jb-buttons .jb-footer-btn i.bi {
    font-size: 14px;
    line-height: 1;
    vertical-align: -0.1em;
}


/* ==========================================================================
   6. KOMPAKTA DRAWER-GRIDS
   --------------------------------------------------------------------------
   Telerik-grids inom drawers (Artiklar, Resurser, Komponenter, Perioder etc.)
   har default desktop-padding och 14px-font som tar för mycket vertikal yta.
   Drawer-höjden är begränsad — vi vill kunna se 6–8 rader utan att scrolla.
   Aktiveras automatiskt på alla grids inom .jb-ios-scope (Drawer-rooten).
   ========================================================================== */

.jb-ios .k-grid {
    font-size: 13px;
    border-radius: 8px;
}

/* Header — mer kompakt + lättare typografi */
.jb-ios .k-grid .k-grid-header,
.jb-ios .k-grid .k-grid-header-wrap {
    background: #fafafb;
}
.jb-ios .k-grid .k-grid-header th.k-table-th,
.jb-ios .k-grid .k-grid-header .k-header,
.jb-ios .k-grid thead .k-table-th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--jb-btn-text-muted, #6e6e73);
    padding: 8px 10px;
    line-height: 1.2;
}

/* Cell-padding — kompakt men inte trångt */
.jb-ios .k-grid .k-table-td,
.jb-ios .k-grid td.k-table-td,
.jb-ios .k-grid tbody td {
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.4;
    vertical-align: middle;
}

/* Förhindra orimliga radbrytningar — låt text klippas med ellipsis när
   kolumnen är smal istället för att radbrytas till 2-3 rader.
   Ellipsis-handling sker på TD-nivå (inte på inner span/div) av två skäl:
   1) Template-kolumner wrappar i <span> medan Field-bundna kolumner inte gör
      det → om vi sätter display:inline-block på span:en hamnar texten på en
      annan baseline → kolumnen "Längd" och "Artikel" hamnade en pixel snett.
   2) Command-kolumnen innehåller GridCommandButton som renderas som inline
      element — om text-overflow appliceras på dess wrapper-span klipps
      knapparna till "..." istället för att visas. */
.jb-ios .k-grid .k-table-td:not(.k-command-cell):not(.k-grid-edit-row):not(.k-detail-cell) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* OBS: Tidigare fanns här två `.jb-ios .k-grid .k-table-td.k-command-cell`-regler
   som satte `display: flex !important` på <td>. Det fick cellen att sluta växa
   med rad-höjden — den fick content-height (32px) medan andra celler i raden var
   49px → ikonen hamnade ovanför textens center.
   Command-cellen hanteras nu ENDAST i sektion 5 av denna fil
   ("ICON-BUTTON CENTRERING") med native `vertical-align: middle` för table-cell. */

/* Toolbar-buttons i grid (t.ex. "+" för Lägg till på period-grid utan
   text-label). Telerik renderar dem som .k-button utan ngn padding-rule
   för icon-only-läge, och vår exclude-regel för spinner/dropdown gör att
   de inte ärver iOS-knappstilen heller. Resultat: liten ikon-only knapp
   med vänster-padding. Centrera ikonen och ge knappen rimlig storlek. */
.jb-ios .k-grid .k-grid-toolbar .k-button,
.jb-ios .k-grid .k-toolbar .k-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
}
/* Icon-only toolbar-button (inget text-content) — gör fyrkantig */
.jb-ios .k-grid .k-grid-toolbar .k-button:not(:has(.k-button-text)),
.jb-ios .k-grid .k-toolbar .k-button:not(:has(.k-button-text)) {
    width: 32px;
    padding: 0;
}

/* OBS: Icon-button-storlek hanteras nu i sektion 5 av denna fil
   ("ICON-BUTTON CENTRERING") med högre specificitet `body.jb-buttons ...`. */

/* In-tabell TelerikButton med text+ikon (t.ex. "Lås upp", "Radera" på
   Sites-listan) — Telerik:s Size.Small + vår iOS-bas ger 32px höjd vilket
   är OK, men padding 14px gör knappen för bred för en tabellcell. Krymp
   padding till 10px + minska font-size något så de inte dominerar raden. */
.jb-ios .k-grid .k-table-td .k-button.k-button-md,
.jb-ios .k-grid .k-table-td .k-button.k-button-sm {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    gap: 4px !important;
}
.jb-ios .k-grid .k-table-td .k-button .k-icon,
.jb-ios .k-grid .k-table-td .k-button .k-svg-icon {
    font-size: 12px !important;
    width: 12px !important;
    height: 12px !important;
}

/* Toolbar i grid (där Lägg till sitter) — mindre höjd */
.jb-ios .k-grid .k-grid-toolbar,
.jb-ios .k-grid .k-toolbar {
    padding: 6px 8px;
    min-height: 40px;
    background: transparent;
    border: none;
}

/* Rad-hover — subtil grå (matchar våra knapp-tokens) */
.jb-ios .k-grid tbody tr.k-table-row:hover,
.jb-ios .k-grid tbody tr:hover {
    background: var(--jb-btn-bg, #f5f5f7);
}

/* Selected row — något starkare */
.jb-ios .k-grid tbody tr.k-selected,
.jb-ios .k-grid tbody tr.k-state-selected {
    background: var(--jb-btn-bg-hover, #e8e8ed);
}

/* Pager — mindre höjd */
.jb-ios .k-grid .k-grid-pager,
.jb-ios .k-grid .k-pager {
    padding: 4px 8px;
    font-size: 12px;
    min-height: 36px;
}

/* Empty-state info inom grid (när inga rader) */
.jb-ios .k-grid .k-grid-norecords {
    font-size: 13px;
    padding: 16px;
    color: var(--jb-btn-text-muted, #6e6e73);
}

/* ==========================================================================
   18. TELERIK INPUTS — iOS-stylade pilar/spinners
   --------------------------------------------------------------------------
   Telerik renderar default-spinners (NumericTextBox up/down + DropDownList
   chevron) som klumpiga rutor med tjock kontur. Vi normaliserar dem mot
   resten av iOS-temat: subtil grå bakgrund, mjuk border, hover-feedback,
   och samma 32-pixels-radhöjd som övriga inputs. Scope:ad till .jb-buttons
   så vi inte påverkar Telerik-komponenter i andra delar av appen.
   ========================================================================== */

/* Wrapper-look — gemensam för ALLA input-typer (numeric, dropdown, time, date,
   datetime, textbox, textarea, masked). Höjden låses till 36px så raden i
   en popup-editor ser balanserad ut oavsett input-typ. Förr varierade höjd
   mellan typer (time-picker var högre än dropdown) vilket gav "stege"-känsla. */
.jb-buttons .k-numerictextbox,
.jb-buttons .k-dropdownlist,
.jb-buttons .k-timepicker,
.jb-buttons .k-datepicker,
.jb-buttons .k-datetimepicker,
.jb-buttons .k-textbox,
.jb-buttons .k-maskedtextbox,
.jb-buttons .k-combobox,
.jb-buttons .k-autocomplete,
.jb-buttons .k-multiselect {
    border-radius: 6px;
    border-color: var(--jb-btn-border, #d2d2d7);
    background: #fff;
    box-shadow: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
    min-height: 36px;
    height: 36px;
}
.jb-buttons .k-numerictextbox:hover,
.jb-buttons .k-dropdownlist:hover,
.jb-buttons .k-timepicker:hover,
.jb-buttons .k-datepicker:hover,
.jb-buttons .k-datetimepicker:hover,
.jb-buttons .k-textbox:hover,
.jb-buttons .k-maskedtextbox:hover,
.jb-buttons .k-combobox:hover,
.jb-buttons .k-autocomplete:hover {
    border-color: #b5b5bd;
}
.jb-buttons .k-numerictextbox.k-focus,
.jb-buttons .k-dropdownlist.k-focus,
.jb-buttons .k-timepicker.k-focus,
.jb-buttons .k-datepicker.k-focus,
.jb-buttons .k-datetimepicker.k-focus,
.jb-buttons .k-textbox.k-focus,
.jb-buttons .k-maskedtextbox.k-focus,
.jb-buttons .k-combobox.k-focus,
.jb-buttons .k-autocomplete.k-focus,
.jb-buttons .k-numerictextbox:focus-within,
.jb-buttons .k-dropdownlist:focus-within,
.jb-buttons .k-timepicker:focus-within,
.jb-buttons .k-datepicker:focus-within,
.jb-buttons .k-datetimepicker:focus-within,
.jb-buttons .k-textbox:focus-within,
.jb-buttons .k-maskedtextbox:focus-within,
.jb-buttons .k-combobox:focus-within,
.jb-buttons .k-autocomplete:focus-within {
    border-color: #5b1fd9;
    box-shadow: 0 0 0 3px rgba(109, 39, 255, 0.15);
}

/* Inre input-fält — ta bort dubbla borders och inre skugga, enhetlig padding */
.jb-buttons .k-numerictextbox .k-input-inner,
.jb-buttons .k-dropdownlist .k-input-inner,
.jb-buttons .k-timepicker .k-input-inner,
.jb-buttons .k-datepicker .k-input-inner,
.jb-buttons .k-datetimepicker .k-input-inner,
.jb-buttons .k-textbox .k-input-inner,
.jb-buttons .k-maskedtextbox .k-input-inner,
.jb-buttons .k-combobox .k-input-inner,
.jb-buttons .k-autocomplete .k-input-inner {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 6px 10px;
    font-size: 13px;
    height: auto;
}

/* --- NumericTextBox spinner (up/down) ---
   Force-override (!important + max-specificity) eftersom BAS k-button-regeln
   tidigare slog mot dessa och gjorde dem 32px höga. Vi har nu excluderat dem
   där, men håller !important här för defense-in-depth om någon framtida
   regel skulle försöka påverka dem. */
.jb-buttons .k-numerictextbox .k-input-spinner {
    background: #fafafb !important;
    border-left: 1px solid var(--jb-btn-border, #d2d2d7) !important;
    width: 22px !important;
    min-width: 22px !important;
    flex: 0 0 22px !important;
    padding: 0 !important;
}
.jb-buttons .k-numerictextbox .k-spinner-increase,
.jb-buttons .k-numerictextbox .k-spinner-decrease {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    color: #6e6e73 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 22px !important;
    width: 22px !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transform: none !important;
    transition: background 100ms ease, color 100ms ease;
}
.jb-buttons .k-numerictextbox .k-spinner-decrease {
    border-top: 1px solid var(--jb-btn-border, #d2d2d7) !important;
}
.jb-buttons .k-numerictextbox .k-spinner-increase:hover,
.jb-buttons .k-numerictextbox .k-spinner-decrease:hover {
    background: #eeeef1 !important;
    color: #1d1d1f !important;
    box-shadow: none !important;
    transform: none !important;
}
.jb-buttons .k-numerictextbox .k-spinner-increase:active,
.jb-buttons .k-numerictextbox .k-spinner-decrease:active {
    background: #e3e3e8 !important;
    transform: none !important;
}
/* Pil-ikoner: mindre och tunnare */
.jb-buttons .k-numerictextbox .k-input-spinner .k-icon,
.jb-buttons .k-numerictextbox .k-input-spinner .k-svg-icon {
    font-size: 10px !important;
    width: 10px !important;
    height: 10px !important;
}

/* --- DropDownList caret-knapp + Time/Date-picker icon-knapp ---
   Samma look för alla — caret-down, klocka, kalender. Smal kolumn med subtil
   bakgrund och tunn border-left. Hover ljusare grå. Defense-in-depth med
   !important eftersom BAS k-button-regeln annars skulle göra dem 32px-stora
   CTA-knappar. */
.jb-buttons .k-dropdownlist .k-input-button,
.jb-buttons .k-timepicker .k-input-button,
.jb-buttons .k-datepicker .k-input-button,
.jb-buttons .k-datetimepicker .k-input-button,
.jb-buttons .k-combobox .k-input-button,
.jb-buttons .k-autocomplete .k-input-button {
    background: #fafafb !important;
    background-image: none !important;
    border: none !important;
    border-left: 1px solid var(--jb-btn-border, #d2d2d7) !important;
    border-radius: 0 6px 6px 0 !important;
    color: #6e6e73 !important;
    box-shadow: none !important;
    width: 28px !important;
    min-width: 28px !important;
    flex: 0 0 28px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    transition: background 100ms ease, color 100ms ease;
}
.jb-buttons .k-dropdownlist:hover .k-input-button,
.jb-buttons .k-dropdownlist .k-input-button:hover,
.jb-buttons .k-timepicker:hover .k-input-button,
.jb-buttons .k-timepicker .k-input-button:hover,
.jb-buttons .k-datepicker:hover .k-input-button,
.jb-buttons .k-datepicker .k-input-button:hover,
.jb-buttons .k-datetimepicker:hover .k-input-button,
.jb-buttons .k-datetimepicker .k-input-button:hover {
    background: #eeeef1 !important;
    color: #1d1d1f !important;
    box-shadow: none !important;
    transform: none !important;
}
.jb-buttons .k-dropdownlist.k-focus .k-input-button,
.jb-buttons .k-timepicker.k-focus .k-input-button,
.jb-buttons .k-datepicker.k-focus .k-input-button,
.jb-buttons .k-datetimepicker.k-focus .k-input-button {
    background: #eeeef1 !important;
}
.jb-buttons .k-dropdownlist .k-input-button .k-icon,
.jb-buttons .k-dropdownlist .k-input-button .k-svg-icon,
.jb-buttons .k-timepicker .k-input-button .k-icon,
.jb-buttons .k-timepicker .k-input-button .k-svg-icon,
.jb-buttons .k-datepicker .k-input-button .k-icon,
.jb-buttons .k-datepicker .k-input-button .k-svg-icon,
.jb-buttons .k-datetimepicker .k-input-button .k-icon,
.jb-buttons .k-datetimepicker .k-input-button .k-svg-icon {
    font-size: 11px !important;
    width: 11px !important;
    height: 11px !important;
}

/* Disabled-state — håll dämpat utseende */
.jb-buttons .k-numerictextbox.k-disabled,
.jb-buttons .k-dropdownlist.k-disabled,
.jb-buttons .k-timepicker.k-disabled,
.jb-buttons .k-datepicker.k-disabled,
.jb-buttons .k-datetimepicker.k-disabled,
.jb-buttons .k-textbox.k-disabled {
    background: #f5f5f7;
    opacity: 0.6;
}

/* --- TelerikSwitch (toggles) — iOS-grön när ON ---
   Default-Metronic renderar on-state med lila (--bs-primary). Vår
   `--bs-primary`-cascade på .jb-buttons hjälpte inte här eftersom Telerik
   Switch också använder egna kendo-vars. iOS-konvention: grön när på,
   grå när av. Force-override med !important för att slå Telerik defaults. */
.jb-buttons .k-switch-on .k-switch-track {
    background-color: #34c759 !important;
    border-color: #34c759 !important;
}
.jb-buttons .k-switch-on:hover .k-switch-track {
    background-color: #2db84f !important;
    border-color: #2db84f !important;
}
.jb-buttons .k-switch-off .k-switch-track {
    background-color: #e5e5ea !important;
    border-color: #d2d2d7 !important;
}
.jb-buttons .k-switch-off:hover .k-switch-track {
    background-color: #d2d2d7 !important;
}
.jb-buttons .k-switch .k-switch-thumb {
    background-color: #fff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 1px 1px rgba(0, 0, 0, 0.08) !important;
}
.jb-buttons .k-switch.k-disabled {
    opacity: 0.5;
}

/* ==========================================================================
   KOPIERA-PERIODER-LAYOUT (_ResourcePeriodGrid.razor)
   --------------------------------------------------------------------------
   Horizontal form-row med 3 dropdowns + arrow-separator + action-knapp.
   Tre fält + → + en till + knapp läses naturligt vänster-till-höger som
   "Kopiera FRÅN x FRÅN dag X TILL dag Y → [Kopiera]". Wrappar vertikalt på
   mobil/smala drawers via flex-wrap.
   ========================================================================== */

.jb-copy-periods-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-top: 4px;
}
.jb-copy-periods-field {
    flex: 1 1 140px;
    min-width: 140px;
}
.jb-copy-periods-field .form-label {
    font-size: 12px;
    font-weight: 500;
    color: #6e6e73;
    margin-bottom: 4px;
}
.jb-copy-periods-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;             /* matchar input-höjd */
    color: #b5b5bd;
    font-size: 14px;
    padding-bottom: 0;
    align-self: flex-end;
    flex-shrink: 0;
}
.jb-copy-periods-action {
    align-self: flex-end;
    flex-shrink: 0;
}

/* drawer-section--utility — variant av drawer-section för "verktygskort"
   som ligger som komplement under en huvudsektion. Lite mindre, lite
   svalare än default. */
.drawer-section.drawer-section--utility {
    background: #fafafb;
    border: 1px solid #efeff2;
    border-radius: 12px;
    padding: 16px;
}
.drawer-section.drawer-section--utility .drawer-section-header {
    margin-bottom: 14px;
}
.drawer-section.drawer-section--utility .drawer-section-title {
    font-size: 14px;
    font-weight: 600;
}
.drawer-section.drawer-section--utility .drawer-section-subtitle {
    font-size: 13px;
}

/* ==========================================================================
   19. TELERIK POPUP-EDITOR (Grid edit-popup, dialoger)
   --------------------------------------------------------------------------
   GridPopupEditSettings + TelerikDialog renderas som .k-window. Default-
   placeringen av Update/Cancel är vänster och knapparna har Telerik-grön
   primary-färg — inkonsekvent med vårt iOS-tema. Vi:
   - Höger-justerar actions-raden
   - Stylar Update + Cancel med samma grå-look som .jb-footer-btn
   - Trimmer header och form-padding för en kompaktare popup
   ========================================================================== */

/* Window-base */
.jb-buttons .k-window,
.jb-buttons .k-dialog {
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    border: 1px solid var(--jb-btn-border, #d2d2d7);
    overflow: hidden;
}

/* Titelrad — tunn, ren, ingen tjock botten-border */
.jb-buttons .k-window-titlebar,
.jb-buttons .k-dialog-titlebar {
    padding: 14px 18px;
    background: #fff;
    border-bottom: 1px solid #efeff2;
}
.jb-buttons .k-window-title,
.jb-buttons .k-dialog-title {
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
}

/* Content-padding — luftigare än Telerik default */
.jb-buttons .k-window-content,
.jb-buttons .k-dialog-content {
    padding: 18px;
    background: #fff;
}

/* Form inuti popup — kompakt label-stack */
.jb-buttons .k-window-content .k-form-field,
.jb-buttons .k-dialog-content .k-form-field {
    margin-bottom: 12px;
}
.jb-buttons .k-window-content .k-form-field > .k-label,
.jb-buttons .k-dialog-content .k-form-field > .k-label {
    font-size: 12px;
    font-weight: 500;
    color: #6e6e73;
    margin-bottom: 4px;
}

/* Actions-rad (Update/Cancel) — högerställd med kompakt iOS-look */
.jb-buttons .k-window .k-actions,
.jb-buttons .k-window .k-edit-buttons,
.jb-buttons .k-dialog .k-actions,
.jb-buttons .k-dialog-buttongroup {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    background: #fafafb;
    border-top: 1px solid #efeff2;
    margin: 0;
}

/* Knapparna i actions-raden — samma stil som .jb-footer-btn */
.jb-buttons .k-window .k-actions .k-button,
.jb-buttons .k-window .k-edit-buttons .k-button,
.jb-buttons .k-dialog .k-actions .k-button,
.jb-buttons .k-dialog-buttongroup .k-button {
    min-width: 96px;
    height: 32px;
    padding: 0 14px;
    border-radius: 6px;
    border: 1px solid var(--jb-btn-border, #d2d2d7);
    background: var(--jb-btn-bg, #f5f5f7);
    color: #1d1d1f;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.jb-buttons .k-window .k-actions .k-button:hover,
.jb-buttons .k-window .k-edit-buttons .k-button:hover,
.jb-buttons .k-dialog .k-actions .k-button:hover,
.jb-buttons .k-dialog-buttongroup .k-button:hover {
    background: #e8e8ed;
    border-color: #b5b5bd;
}
.jb-buttons .k-window .k-actions .k-button:active,
.jb-buttons .k-window .k-edit-buttons .k-button:active,
.jb-buttons .k-dialog .k-actions .k-button:active,
.jb-buttons .k-dialog-buttongroup .k-button:active {
    transform: translateY(1px);
    background: #dcdce2;
}

/* Cancel-knappens text — röd för att signalera "discard" (iOS-convention) */
.jb-buttons .k-window .k-actions .k-button.k-button-solid-base,
.jb-buttons .k-window .k-edit-buttons .k-button.k-button-solid-base,
.jb-buttons .k-dialog .k-actions .k-button.k-button-solid-base,
.jb-buttons .k-dialog-buttongroup .k-button.k-button-solid-base {
    /* Default base = Cancel — håll grå */
    color: #1d1d1f;
}

/* ==========================================================================
   20. PUBLIKATIONS-BANNER (_SiteStoreUpdate.razor)
   --------------------------------------------------------------------------
   Bootstrap's .alert-secondary sätter en faded färgvariabel (--bs-alert-color
   = #41464b) som mot den ljusgrå bakgrunden ger usel kontrast. Vi forcerar
   tydliga färger per state istället, och ger ikonen distinkt färg så hela
   bannern är läsbar.
   ========================================================================== */

/* Utkast — neutral grå med tydligt mörk text */
.jb-publication-banner.alert-secondary {
    background-color: #f5f5f7;
    border: 1px solid #d2d2d7;
    color: #1d1d1f;
}
.jb-publication-banner.alert-secondary .jb-publication-icon {
    color: #6e6e73;
}
.jb-publication-banner.alert-secondary .jb-publication-title {
    color: #1d1d1f;
}
.jb-publication-banner.alert-secondary .jb-publication-subtitle {
    color: #515158;
}

/* Publicerad — grön success-state */
.jb-publication-banner.alert-success {
    background-color: #e8f5ea;
    border: 1px solid #b6dcc0;
    color: #14532d;
}
.jb-publication-banner.alert-success .jb-publication-icon {
    color: #2d8048;
}
.jb-publication-banner.alert-success .jb-publication-title {
    color: #14532d;
}
.jb-publication-banner.alert-success .jb-publication-subtitle {
    color: #2d5538;
}

/* Publicerad med varningar — gul warning-state */
.jb-publication-banner.alert-warning {
    background-color: #fef4e3;
    border: 1px solid #f5d294;
    color: #6a3e00;
}
.jb-publication-banner.alert-warning .jb-publication-icon {
    color: #b86e00;
}
.jb-publication-banner.alert-warning .jb-publication-title {
    color: #6a3e00;
}
.jb-publication-banner.alert-warning .jb-publication-subtitle {
    color: #7a4e0a;
}

/* ==========================================================================
   ALERT-WARNING — GLOBAL KONTRAST-FIX
   --------------------------------------------------------------------------
   Bootstrap-default + Metronic-overrides ger ofta `--bs-warning-text-emphasis`
   ≈ #997404 mot `--bs-alert-bg` ≈ #fff3cd. Kontrast ~5.3:1 — borderline
   WCAG AA på liten text. Höjer text-färgen till en mörkare amber (#6a3e00 →
   ~9.8:1) som speglar `.jb-publication-banner.alert-warning` ovan, så ALLA
   `.alert-warning` i admin (inkl. _QrCodePreview's "Gammal QR-kod-format"-
   banner för produkt-QRs) blir tydligt läsbara. Påverkar inte bakgrund/border.
   ========================================================================== */
.alert.alert-warning {
    --bs-alert-color: #6a3e00;
    --bs-alert-link-color: #5a3300;
    color: #6a3e00;
}

.alert.alert-warning strong,
.alert.alert-warning b {
    color: #5a3300;
}

.alert.alert-warning a:not(.btn) {
    color: #5a3300;
    text-decoration: underline;
}

.alert.alert-warning > i,
.alert.alert-warning > .ph-duotone,
.alert.alert-warning > .ph-bold,
.alert.alert-warning > .ph,
.alert.alert-warning > .bi {
    color: #b86e00;
}

/* ==========================================================================
   21. TOASTR — close-knapp + iOS-look
   --------------------------------------------------------------------------
   Toastr renderar default sin close-knapp som ett stort fett "×" som tar
   över hela toast-rutan. Vi krymper den, placerar den i hörnet och
   matchar transparens/hover med iOS-temat. Scope:ar på .toast-success/
   warning/error så vi inte påverkar ev. andra "toast"-klasser i appen.
   ========================================================================== */

#toast-container > .toast {
    border-radius: 10px;
    padding: 14px 18px 14px 50px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    opacity: 1;
    background-image: none;
    background-position: 14px center;
    background-repeat: no-repeat;
    background-size: 24px;
    position: relative;
}

#toast-container > .toast > .toast-close-button {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    width: 20px;
    height: 20px;
    padding: 0;
    text-shadow: none;
    color: rgba(255, 255, 255, 0.85);
    opacity: 1;
    background: transparent;
    border: none;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 100ms ease, color 100ms ease;
}

#toast-container > .toast > .toast-close-button:hover,
#toast-container > .toast > .toast-close-button:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    text-decoration: none;
}

#toast-container > .toast > .toast-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

#toast-container > .toast > .toast-message {
    font-size: 13px;
    line-height: 1.4;
}

/* Ge plats för close-knappen så titeln inte hamnar under den */
#toast-container > .toast > .toast-title,
#toast-container > .toast > .toast-message {
    padding-right: 24px;
}

/* ==========================================================================
   SIDEBAR CONTEXT SWITCHER — Företag + Arbetsläge
   --------------------------------------------------------------------------
   Tidigare hade båda switchers en generisk gul "folder-document"-ikon.
   Det kommunicerar inget om vad som byts. Nu använder vi:
   - Företagsväljaren: initial-avatar i blå-tinted bg (premium-feel)
   - Arbetslägesväljaren: dynamisk Phosphor-ikon (cart/door/calendar) i
     färgkodad bg (slate/indigo/purple) så användaren OMEDELBART ser
     vilket läge hen är i.
   ========================================================================== */

body.jb-buttons .jb-context-switcher {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100%;
    padding: 8px 12px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px dashed rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    color: inherit !important;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    text-align: left;
    box-shadow: none !important;
    min-height: auto !important;
    height: auto !important;
}

body.jb-buttons .jb-context-switcher:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

body.jb-buttons .jb-context-switcher:active {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Avatar — företagets initialer eller dynamisk ikon */
body.jb-buttons .jb-context-avatar {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: linear-gradient(135deg, #2b3754 0%, #1c2438 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
    transition: transform 0.15s ease;
}

body.jb-buttons .jb-context-switcher:hover .jb-context-avatar {
    transform: scale(1.04);
}

/* Mode-avatar — ikon istället för initialer + färgvarianter per mode */
body.jb-buttons .jb-context-avatar--mode {
    background: linear-gradient(135deg, #3a4a6f 0%, #25304e 100%);
}

body.jb-buttons .jb-context-avatar--mode i {
    font-size: 18px;
    line-height: 1;
}

body.jb-buttons .jb-context-avatar--pay {
    background: linear-gradient(135deg, #2b3a5c 0%, #1a2440 100%);
    color: #93b4ff;
}

body.jb-buttons .jb-context-avatar--passage {
    background: linear-gradient(135deg, #3d2b5c 0%, #281a40 100%);
    color: #c4a8ff;
}

body.jb-buttons .jb-context-avatar--booking {
    background: linear-gradient(135deg, #2b5c4a 0%, #1a4030 100%);
    color: #93eec0;
}

/* Text-kolumn — titel + meta-rad */
body.jb-buttons .jb-context-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.jb-buttons .jb-context-title {
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.jb-buttons .jb-context-meta {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0;
}

/* Chevron — singel dubbel-pil (caret-up-down) istället för två separata pilar */
body.jb-buttons .jb-context-chevron {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.15s ease;
}

body.jb-buttons .jb-context-chevron i {
    font-size: 14px;
    line-height: 1;
}

body.jb-buttons .jb-context-switcher:hover .jb-context-chevron {
    color: rgba(255, 255, 255, 0.7);
}


/* ==========================================================================
   SIDEBAR MENU — Active-state accent band
   --------------------------------------------------------------------------
   Tidigare hade aktivt menyval bara en mörkare bakgrund — knappt urskiljbar
   för användaren. Vi lägger till ett 3px vänster-accentstreck i iOS-blå för
   att aktivt menyval omedelbart ska stå ut, samma mönster som Finder/Notion.
   Animeras smidigt så valet känns "klickigt".
   ========================================================================== */

body.jb-buttons .menu-link {
    position: relative;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.jb-buttons .menu-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: transparent;
    border-radius: 0 2px 2px 0;
    transition: background-color 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.jb-buttons .menu-link.active::before,
body.jb-buttons .menu-item.here > .menu-link::before,
body.jb-buttons .menu-item.show > .menu-link::before {
    background: #6d27ff;
}

body.jb-buttons .menu-link.active {
    color: #ffffff !important;
}

body.jb-buttons .menu-link.active .menu-icon,
body.jb-buttons .menu-link.active .menu-icon i {
    color: #6d27ff !important;
}


/* ==========================================================================
   FORMULÄR — Globalt premium-stil för alla inputs/dropdowns
   --------------------------------------------------------------------------
   Före: Telerik-default Apple-grey 0.8px border, 6px radius — kände sig
   blandat och nedslimmad. Inputs i drawer-sections fick samma stil som
   inputs på en sida vilket gjorde det rörigt.
   Efter: 8px radius (matchar action-buttons), 1px tonad #dde2eb border som
   smälter in mot vit kort-bg, blå halo-ring vid focus. Konsistent över ALLA
   form-fält oavsett om de är Bootstrap eller Telerik.
   ========================================================================== */

body.jb-buttons .form-control,
body.jb-buttons .form-select,
body.jb-buttons .k-input-inner,
body.jb-buttons .k-textbox,
body.jb-buttons .k-textbox > .k-input-inner,
body.jb-buttons .k-input-solid,
body.jb-buttons .k-dropdownlist,
body.jb-buttons .k-combobox,
body.jb-buttons .k-numerictextbox,
body.jb-buttons .k-datepicker,
body.jb-buttons .k-datetimepicker,
body.jb-buttons .k-timepicker,
body.jb-buttons .k-multiselect,
body.jb-buttons .k-textarea {
    border-radius: 8px !important;
    background-color: #ffffff !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Border på själva wrapper-elementen (Telerik wraps inputs i flera lager) */
body.jb-buttons .k-input-solid,
body.jb-buttons .k-dropdownlist,
body.jb-buttons .k-combobox,
body.jb-buttons .k-numerictextbox,
body.jb-buttons .k-datepicker,
body.jb-buttons .k-datetimepicker,
body.jb-buttons .k-timepicker,
body.jb-buttons .k-multiselect,
body.jb-buttons .k-textarea {
    border: 1px solid #dde2eb !important;
}

body.jb-buttons .form-control,
body.jb-buttons .form-select {
    border: 1px solid #dde2eb !important;
}

/* ==========================================================================
   DENSITY — enterprise ERP-kompaktering (2026-07-12)
   --------------------------------------------------------------------------
   Metronic-defaults lämnade formulär luftiga: .form-control hade ett
   min-height-golv på ~46-53px (tidigare skars bara padding, aldrig golvet)
   och .card .card-body körde 2rem/2.25rem. Det gjorde fält-tunga vyer svåra
   att överblicka. Här dras golven ner till en tät men läsbar ERP-densitet
   (fält ~34px, macOS-känsla). Scope: body.jb-buttons (hela admin; portalen
   är redan exkluderad högre upp). Grids hanteras separat i §5.
   ========================================================================== */

/* Bootstrap-fält: sänk min-height-golvet + tightare padding (~36px, "lite
   luftigare" per ägarbeslut 2026-07-12 — tätt men med andrum). */
body.jb-buttons .form-control,
body.jb-buttons .form-select {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1.4;
}
body.jb-buttons .form-select {
    padding-right: 30px;
}
body.jb-buttons textarea.form-control {
    min-height: 64px;
    height: auto;
}
body.jb-buttons .form-control-sm,
body.jb-buttons .form-select-sm {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 13px;
}

/* Kort-body: bort med Metronics 2rem/2.25rem → kompakt ERP-padding.
   Träffar drawer-body + alla sid-kort (grid-kort får mer plats åt datan). */
body.jb-buttons .card > .card-body {
    padding: 1.45rem 1.6rem;
}

/* Drawer-chrome (header/footer) — tightare, bara i drawers (.jb-ios) */
body.jb-buttons .jb-ios .card-header {
    min-height: 0;
}
body.jb-buttons .jb-ios .card-footer {
    padding: 0.9rem 1.4rem;
}

/* ==========================================================================
   RÅ HTML-TABELLER (.table) — samma kompakta täthet som Telerik-griderna
   --------------------------------------------------------------------------
   Vissa drawers använder Bootstrap <table class="table"> i stället för
   TelerikGrid. Ge dem samma kompakta cell-padding + muted versal-header så
   tabeller ser enhetliga ut oavsett komponent (HTML5 vs Telerik). `.table` är
   data-konvention (ej layout-tabell) → säkert att scopa. `.k-table` (Telerik)
   exkluderas så griderna inte dubbelträffas.
   ========================================================================== */
body.jb-buttons .table:not(.k-table) {
    font-size: 13px;
    --bs-table-cell-padding-y: 6px;
    --bs-table-cell-padding-x: 12px;
}
body.jb-buttons .table:not(.k-table) > :not(caption) > * > * {
    padding: 6px 12px;
}
body.jb-buttons .table:not(.k-table) > thead > tr > th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6e6e73;
    padding: 8px 12px;
    border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.jb-buttons .table.table-sm:not(.k-table) > :not(caption) > * > * {
    padding: 4px 10px;
}

/* ==========================================================================
   GRID-TOOLBAR — enhetlig kontroll-höjd (2026-07-12)
   --------------------------------------------------------------------------
   Toolbaren blandade 30px-knappar med 36px inputs/dropdown/sök → ojämn
   topp-rad. Lås alla kontroller till samma 34px och centrera dem.
   ========================================================================== */
body.jb-buttons .k-grid-toolbar {
    align-items: center;
    row-gap: 8px;
}
body.jb-buttons .k-grid-toolbar .k-button,
body.jb-buttons .k-grid-toolbar .k-picker,
body.jb-buttons .k-grid-toolbar .k-dropdownlist,
body.jb-buttons .k-grid-toolbar .k-combobox,
body.jb-buttons .k-grid-toolbar .k-searchbox,
body.jb-buttons .k-grid-toolbar .k-input {
    height: 34px !important;
    min-height: 34px !important;
}

/* ==========================================================================
   SID-HEADER BREADCRUMB — aligned, symmetrisk (2026-07-12)
   --------------------------------------------------------------------------
   Sista segmentet (sidan) hade fs-3 mot fs-7-trailen → för stort hopp, texten
   låg osnett. Nu: nära samma storlek på allt (→ samma baslinje/aligned), sidan
   urskiljs med vikt + mörk färg, inte ett storlekshopp. Alla items centreras.
   ========================================================================== */
body.jb-buttons .page-title .breadcrumb {
    align-items: center;
}
body.jb-buttons .page-title .breadcrumb .breadcrumb-item {
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
body.jb-buttons .page-title .breadcrumb .breadcrumb-item[aria-current="page"] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1d1d1f;
}

/* Content-topp: Metronics 30px padding-top var onödigt luftigt nu när
   sid-headern är kompakt (en breadcrumb-rad) → strama åt så griderna kan börja
   högre och bli högre. */
body.jb-buttons .app-content {
    padding-top: 14px;
    padding-bottom: 16px;
}

/* ==========================================================================
   GRID-CELL-KNAPPAR — text-only, enhetligt över ALLA grids (2026-07-12)
   --------------------------------------------------------------------------
   Rad-åtgärdsknappar (Ändra/Ta bort/Lås upp/Lagersaldo m.fl.) ska vara utan
   ikon — ikonerna stökar till tabellraderna. Gäller både Telerik command-cell
   och template-kolumn-knappar (TelerikButton i <Template>). Icon-only-knappar
   (utan text) behåller ikonen. Toolbar-knappar (utanför td) påverkas ej. */
body.jb-buttons .k-grid td .k-button:not(.k-icon-button) .k-button-icon,
body.jb-buttons .k-grid td .k-button:not(.k-icon-button) .k-svg-icon,
body.jb-buttons .k-grid td .k-button:not(.k-icon-button) .k-icon {
    display: none !important;
}
body.jb-buttons .k-grid td .k-button:not(.k-icon-button) {
    gap: 0 !important;
}

/* Badge-radius enhetlig (iOS) även för Bootstrap/Telerik-badges — jb-badge är
   redan 6px; fånga övriga så inget hamnar med annan radie. */
body.jb-buttons .badge,
body.jb-buttons .k-badge {
    border-radius: 6px;
}

/* ==========================================================================
   ENHETLIG RADHÖJD — ellipsis på main-grid-text-celler (2026-07-12)
   --------------------------------------------------------------------------
   Lång text (t.ex. "Zoo Göteborg (Demo)") wrappade till 2 rader → ojämn
   radhöjd. Kapa i stället rent på EN rad med "…" (drawer-grids gör redan så).
   Celler med knappar/badges/checkbox/status-ikon lämnas orörda (får ej klippas).
   ========================================================================== */
body.jb-buttons .k-grid td:not(.k-command-cell):not(.k-hierarchy-cell):not(.k-detail-cell):not(.k-group-cell) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.jb-buttons .k-grid td:has(.k-button),
body.jb-buttons .k-grid td:has(button),
body.jb-buttons .k-grid td:has(.jb-badge),
body.jb-buttons .k-grid td:has(.k-checkbox) {
    overflow: visible;
    text-overflow: clip;
}

/* k-input-inner ärver border från sin wrapper — bort med dubbel border */
body.jb-buttons .k-input-solid > .k-input-inner,
body.jb-buttons .k-dropdownlist > .k-input-inner,
body.jb-buttons .k-numerictextbox > .k-input-inner,
body.jb-buttons .k-datepicker > .k-input-inner,
body.jb-buttons .k-datetimepicker > .k-input-inner,
body.jb-buttons .k-timepicker > .k-input-inner {
    border: none !important;
    background-color: transparent !important;
}

/* Hover state — mörkare border, ingen halo (sparas till focus) */
body.jb-buttons .form-control:hover,
body.jb-buttons .form-select:hover,
body.jb-buttons .k-input-solid:hover,
body.jb-buttons .k-dropdownlist:hover,
body.jb-buttons .k-combobox:hover,
body.jb-buttons .k-numerictextbox:hover,
body.jb-buttons .k-datepicker:hover,
body.jb-buttons .k-datetimepicker:hover,
body.jb-buttons .k-textarea:hover,
body.jb-buttons .k-multiselect:hover {
    border-color: #c5cbd6 !important;
}

/* Focus state — iOS-blå halo (premium tactile feedback) */
body.jb-buttons .form-control:focus,
body.jb-buttons .form-select:focus,
body.jb-buttons .k-input-solid:focus-within,
body.jb-buttons .k-input-solid.k-focus,
body.jb-buttons .k-dropdownlist:focus-within,
body.jb-buttons .k-dropdownlist.k-focus,
body.jb-buttons .k-combobox:focus-within,
body.jb-buttons .k-combobox.k-focus,
body.jb-buttons .k-numerictextbox:focus-within,
body.jb-buttons .k-numerictextbox.k-focus,
body.jb-buttons .k-datepicker:focus-within,
body.jb-buttons .k-datepicker.k-focus,
body.jb-buttons .k-datetimepicker:focus-within,
body.jb-buttons .k-datetimepicker.k-focus,
body.jb-buttons .k-textarea:focus-within,
body.jb-buttons .k-textarea.k-focus,
body.jb-buttons .k-multiselect:focus-within,
body.jb-buttons .k-multiselect.k-focus {
    border-color: #6d27ff !important;
    box-shadow: 0 0 0 3px rgba(109, 39, 255, 0.16) !important;
    outline: none !important;
}

/* Disabled state — mjukgrå, ingen interaktion-feedback */
body.jb-buttons .form-control:disabled,
body.jb-buttons .form-select:disabled,
body.jb-buttons .k-input-solid.k-disabled,
body.jb-buttons .k-dropdownlist.k-disabled,
body.jb-buttons .k-numerictextbox.k-disabled,
body.jb-buttons .k-datepicker.k-disabled,
body.jb-buttons .k-textarea.k-disabled {
    background-color: #f6f7f9 !important;
    border-color: #e8ebf0 !important;
    color: #9ca3af !important;
    opacity: 1 !important;
}

/* Placeholder — refined grå */
body.jb-buttons .form-control::placeholder,
body.jb-buttons .form-select::placeholder,
body.jb-buttons .k-input-inner::placeholder {
    color: #9ca3af !important;
    font-weight: 400;
}

/* Caret-knapp i Telerik dropdowns — soft tonad, hover blir mörk */
body.jb-buttons .k-input-button,
body.jb-buttons .k-select {
    background-color: transparent !important;
    border: none !important;
    color: #6b7280 !important;
    transition: color 0.15s ease;
}

body.jb-buttons .k-input-button:hover,
body.jb-buttons .k-select:hover {
    color: #1c1e22 !important;
    background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Labels — refined typo med tydlig hierarki.
   Fältnamnet måste väga tyngre än sin egen hjälptext (text-muted fs-7 = 0.95rem).

   HISTORIK, för att halvrestaureringen inte ska upprepas: värdet var 0.95rem/600,
   sänktes till 0.8rem/500 i 3.0.353 (täthetsändringen), och 3.0.362 skulle ta
   tillbaka det. Vikten kom tillbaka till 600 — storleken stannade på 0.85rem.
   Kommentaren härifrån beskrev 0.95rem som målet i två år medan koden låg kvar
   på 0.85rem.

   Följden var en OMVÄND hierarki i hela admin: etiketten 11,05px, hjälptexten
   under den 12,35px. Uppmätt på stage 2026-08-18.

   Radbrytningskontroll före ändring: de tio längsta etiketterna i Jobbs.Server
   mätta i fyra kolumnbredder. Vid 560px och 380px bryter ingen. Två bryter vid
   272px respektive 200px — båda ligger i mb-3-block över full drawerbredd och
   når aldrig de bredderna.

   Gäller alla 767 .form-label i admin. */
body.jb-buttons label.form-label {
    color: #1f2937;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    margin-bottom: 4px;
    line-height: 1.35;
}

/* Drawer-formulär: strama det vertikala glappet mellan fält något
   (Metronics .mb-3 = 12px !important → 8px inne i drawers). */
body.jb-buttons .jb-ios .mb-3 {
    margin-bottom: 0.5rem !important;
}

body.jb-buttons label.form-label.required::after {
    content: " *";
    color: #dc2626;
    font-weight: 600;
}


/* ==========================================================================
   TELERIK POPUP / DROPDOWN MENU — macOS-stil
   --------------------------------------------------------------------------
   `TelerikDropDownButton`-popup:en (Skriv ut → Etiketter standard, etc) såg
   väldigt bar ut — platt vit bakgrund utan radius, shadow eller hover-styling.
   Här ger vi den samma look som vår Bootstrap `.dropdown-menu` så hela appen
   har konsekvent dropdown-känsla.
   ========================================================================== */

body.jb-buttons .k-popup,
body.jb-buttons .k-menu-popup,
body.jb-buttons .k-actions-popup {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 10px !important;
    padding: 5px !important;
    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.12),
        0 2px 6px rgba(15, 23, 42, 0.06),
        0 0 0 0.5px rgba(0, 0, 0, 0.04) !important;
    animation: jbDropdownFadeIn 0.12s ease-out;
    overflow: hidden;
}

/* Lista-items i dropdown */
body.jb-buttons .k-menu-popup .k-menu-item,
body.jb-buttons .k-actions-popup > .k-button,
body.jb-buttons .k-popup .k-menu-item {
    padding: 7px 12px !important;
    border-radius: 6px !important;
    color: #1c1e22 !important;
    background: transparent !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4;
    letter-spacing: -0.005em;
    transition: background 0.1s ease, color 0.1s ease;
    cursor: pointer;
    text-align: left;
    justify-content: flex-start !important;
    min-height: auto !important;
    height: auto !important;
    margin: 1px 0 !important;
    box-shadow: none !important;
}

body.jb-buttons .k-menu-popup .k-menu-item:hover,
body.jb-buttons .k-menu-popup .k-menu-item.k-hover,
body.jb-buttons .k-menu-popup .k-menu-item.k-focus,
body.jb-buttons .k-actions-popup > .k-button:hover,
body.jb-buttons .k-popup .k-menu-item:hover {
    background: #6d27ff !important;
    color: #ffffff !important;
}

body.jb-buttons .k-menu-popup .k-menu-link {
    color: inherit !important;
    padding: 0 !important;
}

body.jb-buttons .k-menu-popup .k-menu-item:hover .k-menu-link {
    color: #ffffff !important;
}

/* ==========================================================================
   JB ACTION BAR — Universell action-knappsrad för cards (QR, sektioner m.m.)
   --------------------------------------------------------------------------
   Bootstrap `.btn-outline-secondary` blandar in i bakgrunden när vår
   `.jb-buttons`-override neutraliserar färgerna. Detta var problemet i
   QR-koden-vyn där knapparna nästan inte syntes. Den här klassen ger
   tydliga, taktila iOS-toolbar-knappar med soft tinted bg + tunn kant.

   Användning:
   <div class="jb-action-bar">
       <button class="jb-action-btn">...</button>
       <button class="jb-action-btn jb-action-btn--primary">Primär</button>
   </div>

   Varianter:
   - default: soft grå
   - --primary: filled blå (för main CTA)
   - --warning: amber-tinted (test/dev-knappar)
   - --info: blå-tinted
   - --dark: mörk-tinted
   ========================================================================== */

.jb-action-bar {
    display: flex !important;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

/* Höjd specificitet med body.jb-buttons för att vinna mot globala overrides */
body.jb-buttons .jb-action-btn,
.jb-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: #f1f3f7 !important;
    color: #3b4554 !important;
    border: 1px solid #e2e6ee !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em !important;
    cursor: pointer !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease !important;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 36px !important;
    box-shadow: none !important;
}

body.jb-buttons .jb-action-btn:hover,
.jb-action-btn:hover {
    background: #e7eaf1 !important;
    border-color: #d4d9e3 !important;
    color: #1c1e22 !important;
}

.jb-action-btn:active {
    transform: scale(0.97) !important;
}

.jb-action-btn:focus-visible {
    outline: 2px solid #6d27ff;
    outline-offset: 1px;
}

.jb-action-btn i,
body.jb-buttons .jb-action-btn i {
    font-size: 15px !important;
    line-height: 1 !important;
}

/* Primary — main CTA */
body.jb-buttons .jb-action-btn--primary,
.jb-action-btn--primary {
    background: #6d27ff !important;
    color: #ffffff !important;
    border-color: #6d27ff !important;
    box-shadow: 0 1px 2px rgba(109, 39, 255, 0.15) !important;
}

body.jb-buttons .jb-action-btn--primary:hover,
.jb-action-btn--primary:hover {
    background: #1e40af !important;
    border-color: #1e40af !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(109, 39, 255, 0.22) !important;
}

body.jb-buttons .jb-action-btn--primary i,
.jb-action-btn--primary i { color: #ffffff !important; }

/* Warning — amber-tinted (stage-knappar etc) */
body.jb-buttons .jb-action-btn--warning,
.jb-action-btn--warning {
    background: #fcefd6 !important;
    color: #8a5a13 !important;
    border-color: #f4dfae !important;
}

body.jb-buttons .jb-action-btn--warning:hover,
.jb-action-btn--warning:hover {
    background: #f8e3b8 !important;
    border-color: #ecd194 !important;
    color: #6e4710 !important;
}

body.jb-buttons .jb-action-btn--warning i,
.jb-action-btn--warning i { color: #b45309 !important; }

/* Info — blå-tinted */
body.jb-buttons .jb-action-btn--info,
.jb-action-btn--info {
    background: #dde9fc !important;
    color: #1d4f8c !important;
    border-color: #b8d2f5 !important;
}

body.jb-buttons .jb-action-btn--info:hover,
.jb-action-btn--info:hover {
    background: #c8dbf8 !important;
    border-color: #a0c2f0 !important;
    color: #163f72 !important;
}

body.jb-buttons .jb-action-btn--info i,
.jb-action-btn--info i { color: #1d4f8c !important; }

/* Dark — mörk-tinted */
body.jb-buttons .jb-action-btn--dark,
.jb-action-btn--dark {
    background: #eef0f3 !important;
    color: #1c1e22 !important;
    border-color: #d4d9e3 !important;
}

body.jb-buttons .jb-action-btn--dark:hover,
.jb-action-btn--dark:hover {
    background: #e2e6ee !important;
    border-color: #c0c6d2 !important;
}

body.jb-buttons .jb-action-btn--dark i,
.jb-action-btn--dark i { color: #4b5563 !important; }

/* Action section — wrapper för Super-only Stage/Dev/Lokal med label ovanför */
.jb-action-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.jb-action-section-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #9ca3af;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 10px;
}

.jb-action-section-label i { font-size: 13px; }

.jb-action-section .jb-action-bar {
    margin-top: 0;
}


/* ==========================================================================
   JB LIST ROW — Universellt iOS-pattern för klickbara listrader i drawers
   --------------------------------------------------------------------------
   Ersätter `btn btn-outline-primary`-knappar i tabeller och listor som
   blandade in i bakgrunden. Hela raden blir klickbar med tydlig hover-state
   och en högerpil (chevron) som signalerar "klicka för att öppna".
   Mönstret är samma som iOS Inställningar och macOS System Preferences.

   När en .drawer-section innehåller jb-list-rows tar wrapper-padding bort
   så raderna kan ligga direkt under varandra utan inre marginal. Använd
   `.drawer-section--list` för att aktivera.
   ========================================================================== */
.drawer-section.drawer-section--list {
    padding: 0;
    overflow: hidden;
}

.jb-list-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: background-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.jb-list-row:last-child { border-bottom: none; }

.jb-list-row:hover {
    background-color: rgba(109, 39, 255, 0.04);
}

.jb-list-row:active {
    background-color: rgba(109, 39, 255, 0.08);
}

.jb-list-row-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #e0eaff 0%, #d2ddfc 100%);
    color: #6d27ff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 0.5px rgba(109, 39, 255, 0.08);
}

.jb-list-row-icon i {
    font-size: 20px;
    line-height: 1;
}

.jb-list-row-content {
    flex: 1;
    min-width: 0;
}

.jb-list-row-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1c1e22;
    letter-spacing: -0.005em;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jb-list-row-meta {
    margin-top: 2px;
    font-size: 0.82rem;
    color: #6b7280;
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.jb-list-row-dot {
    color: #cbd5e1;
    flex-shrink: 0;
}

.jb-list-row-status {
    font-weight: 500;
}

.jb-list-row-status--ok { color: #1f6b40; }
.jb-list-row-status--warn { color: #b45309; }
.jb-list-row-status--err { color: #b42318; }

.jb-list-row-chevron {
    flex-shrink: 0;
    color: #9ca3af;
    display: flex;
    align-items: center;
    transition: transform 0.15s ease, color 0.15s ease;
}

.jb-list-row-chevron i { font-size: 14px; }

.jb-list-row:hover .jb-list-row-chevron {
    color: #6d27ff;
    transform: translateX(2px);
}


/* ==========================================================================
   SIGN-IN PAGE — Split brand-card layout (PollySec/Linear/Notion-mönstret)
   --------------------------------------------------------------------------
   Inloggningssidan är admin-appens första intryck. Layout:
     • Vänster (50%): mörk gradient med varumärkesbudskap, citat och logo.
     • Höger (50%): ljus #f5f6f8 bakgrund med en vit card som innehåller
       formuläret. Card-en har soft shadow, runda hörn (16px) och en ikon-
       badge i mjuk blå tonad bakgrund överst.
   Hela layouten kollapsar till stack på <960px.

   Scope: .signin-page (klass på outer-wrapper i SignIn.razor).
   ========================================================================== */

/* 2026-07-07: Kontrollrum-doftande omdesign — riktig JOBBS navy→violett→teal + levande
   aurora + on-brand-knapp. CSS-först (ingen Three.js). Tokens scopade på .signin-page. */
.signin-page {
    --si-navy-top: #0c1a37;
    --si-navy-mid: #070f22;
    --si-navy-deep: #04070f;
    --si-teal: #31cdcf;
    --si-teal-lt: #7fe3e4;
    --si-violet: #8a5cff;
    --si-violet-deep: #6d27ff;
    --si-violet-ink: #5a34cf;
    --si-bg: #f4f6f9;
    --si-ease: cubic-bezier(.2, .6, .2, 1);
}

.signin-page--split {
    display: flex;
    min-height: 100vh;
    background: var(--si-bg);
    /* Avbryt default-padding från Metronic-systemlayouten */
    margin: 0;
    padding: 0;
}

/* ---------- VÄNSTER: Mörk varumärkessida ---------- */
.signin-brand {
    flex: 0 0 50%;
    /* Riktig JOBBS-navy med hörn-vinjett för djup */
    background:
        radial-gradient(130% 120% at 15% 0%, var(--si-navy-top) 0%, transparent 55%),
        radial-gradient(120% 120% at 100% 100%, var(--si-navy-deep) 0%, transparent 60%),
        linear-gradient(150deg, var(--si-navy-mid) 0%, #060c1c 55%, var(--si-navy-deep) 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 64px;
    position: relative;
    overflow: hidden;
}

/* Aurora 1 — violett, driver mjukt. mix-blend screen = additiv glöd på navy. */
.signin-brand::before {
    content: "";
    position: absolute;
    top: -14%;
    left: -10%;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--si-violet) 0%, transparent 62%);
    opacity: .55;
    mix-blend-mode: screen;
    pointer-events: none;
    filter: blur(70px);
    will-change: transform;
    animation: signin-drift-a 34s ease-in-out infinite alternate;
}

/* Aurora 2 — teal, egen osynkad bana (teal saknades helt i gamla designen). */
.signin-brand::after {
    content: "";
    position: absolute;
    bottom: -18%;
    right: -12%;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--si-teal) 0%, transparent 60%);
    opacity: .42;
    mix-blend-mode: screen;
    pointer-events: none;
    filter: blur(70px);
    will-change: transform;
    animation: signin-drift-b 26s ease-in-out infinite alternate;
}

@keyframes signin-drift-a {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(6%, 4%, 0) scale(1.08); }
    100% { transform: translate3d(-4%, 8%, 0) scale(1.03); }
}
@keyframes signin-drift-b {
    0%   { transform: translate3d(0, 0, 0) scale(1.05); }
    50%  { transform: translate3d(-7%, -5%, 0) scale(1); }
    100% { transform: translate3d(3%, -9%, 0) scale(1.1); }
}

.signin-brand-inner {
    max-width: 480px;
    width: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.signin-brand-logo {
    margin-bottom: 36px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.signin-brand-logo img {
    height: 36px;
    width: auto;
}

/* Hero-headline — den dominanta texten */
.signin-brand-headline {
    font-size: 2.1rem;
    line-height: 1.15;
    letter-spacing: -0.025em;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 22px 0;
}

.signin-brand-lead {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 400;
    letter-spacing: -0.005em;
    margin: 0 0 40px 0;
    max-width: 460px;
}

/* Feature-lista — 3 horisontella punkter med ikon + titel + text */
.signin-brand-features {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.signin-brand-features li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.signin-brand-feature-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(49, 205, 207, 0.10);
    color: var(--si-teal-lt);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 0.5px rgba(49, 205, 207, 0.20);
}

.signin-brand-feature-icon i {
    font-size: 20px;
    line-height: 1;
}

.signin-brand-feature-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.005em;
    line-height: 1.3;
    margin-bottom: 4px;
}

.signin-brand-feature-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
    letter-spacing: 0;
}

/* Quote längst ner — separator + citat */
.signin-brand-quote {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    letter-spacing: -0.005em;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Bakåtkompatibilitet — eyebrow + divider behåller stilar om någon använder dem */
.signin-brand-divider {
    width: 64px;
    height: 1px;
    background: rgba(255, 255, 255, 0.18);
    margin: 0 0 24px 0;
}

.signin-brand-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    margin-bottom: 14px;
}

/* ---------- HÖGER: Ljus formulärsida ---------- */
.signin-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    position: relative;
    flex-direction: column;
    /* Svag ljus-lyft så kortet känns "seated" */
    background: radial-gradient(120% 80% at 50% -10%, #ffffff 0%, var(--si-bg) 60%);
}

.signin-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border: 1px solid #e2e6ee;
    border-radius: 18px;
    padding: 36px 36px 28px;
    /* Lång, mjuk, violett-tonad skugga = "tänd från den mörka sidan" */
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 10px 30px rgba(24, 12, 64, 0.10),
        0 2px 10px rgba(109, 39, 255, 0.06);
}

/* Kantljus: teal→violett hårlinje längs kortets topp — knyter det till aurora-världen */
.signin-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(90deg, transparent, var(--si-teal) 30%, var(--si-violet) 70%, transparent);
    opacity: .6;
    pointer-events: none;
}

/* Ikon-badge överst — duotone (violett glyph) i st.f. generisk blå */
.signin-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ece4ff 0%, #dff4f4 100%);
    color: var(--si-violet-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: inset 0 0 0 0.5px rgba(109, 39, 255, 0.14);
}

.signin-card-icon i {
    font-size: 28px;
    line-height: 1;
}

.signin-card-title {
    text-align: center;
    font-size: 1.45rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin: 0 0 8px 0;
}

.signin-card-subtitle {
    text-align: center;
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 400;
    line-height: 1.45;
    margin: 0 0 28px 0;
}

/* Fält */
.signin-field {
    margin-bottom: 16px;
}

.signin-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

.signin-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    letter-spacing: -0.005em;
    margin-bottom: 6px;
}

.signin-label-row .signin-label {
    margin-bottom: 0;
}

.signin-link-small {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--si-violet-ink);
    text-decoration: none;
    transition: color 0.15s ease;
}

.signin-link-small:hover {
    color: #4a2ba8;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Visa/dölj-lösenord: input-wrapper + öga-knapp (2026-best practice) */
.signin-inpwrap {
    position: relative;
}

.signin-inpwrap .form-control {
    padding-right: 44px;
}

.signin-eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 0;
    background: none;
    cursor: pointer;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0;
    transition: color 0.12s ease, background 0.12s ease;
}

.signin-eye:hover {
    color: #475569;
    background: #f1f3f8;
}

.signin-eye i {
    font-size: 18px;
    line-height: 1;
}

.signin-field:focus-within .signin-label {
    color: var(--si-violet-ink);
}

/* Inputs — soft iOS-borders + blå focus halo */
.signin-page .form-control {
    border-radius: 10px;
    border: 1px solid #dde2eb;
    background-color: #ffffff !important;
    padding: 12px 14px;
    font-size: 0.95rem;
    color: #0f172a;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    box-shadow: none;
}

.signin-page .form-control::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.signin-page .form-control:hover {
    border-color: #c5cbd6;
}

.signin-page .form-control:focus {
    border-color: var(--si-violet-deep);
    box-shadow: 0 0 0 3px rgba(109, 39, 255, 0.18);
    outline: none;
}

/* Primär CTA — Logga in: on-brand navy→violett med teal-kant + hover-svep.
   !important för att vinna mot globala .jb-buttons-overrides + iOS-stilen. */
.signin-page .btn.btn-primary.signin-submit {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: linear-gradient(135deg, #241a52 0%, var(--si-violet-deep) 100%) !important;
    border: 0 !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.005em;
    border-radius: 12px;
    padding: 12px 18px;
    height: auto;
    min-height: 48px;
    margin-top: 8px;
    box-shadow:
        0 1px 2px rgba(16, 10, 40, 0.35),
        0 6px 18px rgba(109, 39, 255, 0.28),
        inset 0 0 0 1px rgba(49, 205, 207, 0.18);
    transition: box-shadow 0.2s ease, transform 0.12s ease;
}

/* Långsam teal-sheen som sveper över vid hover */
.signin-page .btn.btn-primary.signin-submit::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-120%);
    transition: transform 0.6s ease;
    background: linear-gradient(115deg, transparent 30%, rgba(49, 205, 207, 0.25) 50%, transparent 70%);
    pointer-events: none;
}

.signin-page .btn.btn-primary.signin-submit:hover,
.signin-page .btn.btn-primary.signin-submit:focus-visible {
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow:
        0 2px 4px rgba(16, 10, 40, 0.4),
        0 12px 30px rgba(109, 39, 255, 0.42),
        inset 0 0 0 1px rgba(49, 205, 207, 0.34);
}

.signin-page .btn.btn-primary.signin-submit:hover::after {
    transform: translateX(120%);
}

.signin-page .btn.btn-primary.signin-submit:focus-visible {
    outline: 2px solid var(--si-teal);
    outline-offset: 2px;
}

.signin-page .btn.btn-primary.signin-submit:active {
    transform: scale(0.985);
}

.signin-page .btn.btn-primary.signin-submit:disabled,
.signin-page .btn.btn-primary.signin-submit[disabled] {
    background: #a99fd6 !important;
    color: #ffffff !important;
    opacity: 1;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Card-footer: "Behöver ditt företag konto? Kontakta oss" */
.signin-card-footer {
    text-align: center;
    margin-top: 22px;
    font-size: 0.85rem;
    color: #64748b;
}

.signin-card-footer a {
    color: var(--si-violet-ink);
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
    transition: color 0.15s ease;
}

.signin-card-footer a:hover {
    color: #4a2ba8;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Stora footer-länkar längst ned (Hemsida / Villkor / Integritet) */
.signin-main-footer {
    position: absolute;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    color: #94a3b8;
}

.signin-main-footer a {
    color: #64748b;
    text-decoration: none;
    font-weight: 500;
    padding: 4px 8px;
    transition: color 0.15s ease;
}

.signin-main-footer a:hover {
    color: var(--si-violet-ink);
}

.signin-footer-sep {
    color: #cbd5e1;
}

/* Entré — lugn, engångs. Bara varumärkes-copyn; formuläret är interaktivt vid t=0. */
.signin-brand-logo,
.signin-brand-headline,
.signin-brand-lead,
.signin-brand-features li,
.signin-brand-quote {
    animation: signin-rise .6s var(--si-ease) both;
}
.signin-brand-headline { animation-delay: .06s; }
.signin-brand-lead { animation-delay: .12s; }
.signin-brand-features li:nth-child(1) { animation-delay: .18s; }
.signin-brand-features li:nth-child(2) { animation-delay: .24s; }
.signin-brand-features li:nth-child(3) { animation-delay: .30s; }
.signin-brand-quote { animation-delay: .40s; }
.signin-card { animation: signin-card-in .55s var(--si-ease) .10s both; }

@keyframes signin-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@keyframes signin-card-in {
    from { opacity: 0; transform: translateY(10px) scale(.99); }
    to   { opacity: 1; transform: none; }
}

/* Respektera reduced-motion: frys aurora + entré, behåll fokus/hover-states. */
@media (prefers-reduced-motion: reduce) {
    .signin-brand::before,
    .signin-brand::after,
    .signin-brand-logo,
    .signin-brand-headline,
    .signin-brand-lead,
    .signin-brand-features li,
    .signin-brand-quote,
    .signin-card {
        animation: none !important;
    }
    .signin-page .btn.btn-primary.signin-submit::after {
        transition: none !important;
    }
}

/* ==========================================================================
   RESPONSIV: Mobil/tablet — iOS/macOS-formspråk
   --------------------------------------------------------------------------
   Två brytpunkter:
     • <960px (tablet/landscape): split kollapsar till stack, brand-features
       döljs. Card behåller "kort"-form med marginaler.
     • <640px (iPhone): brand blir kompakt header (bara logo + 1-rads tagline),
       card blir hjärtat med fokus. Safe-area-insets för notch/home-bar.
       Touch-targets ≥48px. Inputs får 16px font för att blockera iOS-zoom
       vid focus.
   ========================================================================== */

@media (max-width: 960px) {
    /* IMMERSIV mobil: hela skärmen blir den mörka aurora-världen (ingen ljus header).
       Brand-panelen blir ett helskärms bakgrundslager med bara loggan uppe i mitten;
       formuläret svävar i ett upphöjt vitt kort. */
    .signin-page--split {
        display: block;
        position: relative;
        min-height: 100vh;
        min-height: 100dvh;
        padding-top: 0;
        background:
            radial-gradient(130% 70% at 25% 0%, var(--si-navy-top) 0%, transparent 55%),
            radial-gradient(120% 80% at 90% 100%, var(--si-navy-deep) 0%, transparent 60%),
            linear-gradient(160deg, var(--si-navy-mid) 0%, #060c1c 55%, var(--si-navy-deep) 100%);
    }

    .signin-brand {
        position: absolute;
        inset: 0;
        z-index: 0;
        padding: 0;
        background: transparent;
        align-items: flex-start;
        justify-content: center;
    }

    .signin-brand-inner {
        max-width: none;
        width: auto;
        min-height: 0;
        display: block;
        text-align: center;
        padding-top: calc(env(safe-area-inset-top, 0px) + 42px);
    }

    .signin-brand-logo {
        margin: 0;
        justify-content: center;
    }

    /* Allt utom loggan göms på mobil — värdet visas i kortet, inte i en header. */
    .signin-brand-headline,
    .signin-brand-lead,
    .signin-brand-features,
    .signin-brand-divider,
    .signin-brand-eyebrow,
    .signin-brand-quote {
        display: none;
    }

    .signin-main {
        position: relative;
        z-index: 1;
        background: transparent;
        min-height: 100vh;
        min-height: 100dvh;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 104px 14px calc(env(safe-area-inset-bottom, 0px) + 24px);
    }

    .signin-card {
        margin: 0 auto;
        width: 100%;
        max-width: 420px;
        padding: 30px 20px 24px;
        /* Kraftig skugga så kortet lyfter tydligt mot den mörka bakgrunden. */
        box-shadow:
            0 2px 6px rgba(0, 0, 0, 0.22),
            0 24px 50px -12px rgba(0, 0, 0, 0.5);
    }

    /* Footer under kortet — ljus text på mörk botten. */
    .signin-main-footer {
        position: static;
        margin-top: 22px;
        justify-content: center;
        color: rgba(255, 255, 255, 0.5);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .signin-main-footer a { color: rgba(255, 255, 255, 0.62); }
    .signin-main-footer a:hover { color: #ffffff; }
    .signin-footer-sep { color: rgba(255, 255, 255, 0.25); }
}

/* ---------- iPhone-specifika justeringar (≤640px) ----------
   Här går vi från "tablet stack" till "äkta mobil-onboarding-sheet"-känsla.
   Brand-sektionen krymper till en kompakt header (logo + 1-rads tagline),
   card blir hjärtat med fokus och Apple-aktiga touch-targets.
*/
@media (max-width: 640px) {
    /* KRITISK iOS-fix: input font-size ≥16px (annars auto-zoomar Safari vid focus)
       + touch-target 48px (Apple HIG). Behålls från gamla designen. */
    .signin-page .form-control {
        font-size: 16px;
        padding: 14px 16px;
        min-height: 48px;
        border-radius: 12px;
    }

    .signin-page .btn.btn-primary.signin-submit {
        font-size: 1rem;
        min-height: 52px;
        border-radius: 12px;
        margin-top: 6px;
    }

    /* Något mindre topp-luft ovanför kortet på riktiga telefoner. */
    .signin-main {
        padding: 92px 14px calc(env(safe-area-inset-bottom, 0px) + 20px);
    }

    /* Smalare sido-padding → fälten får mer bredd (inget krampigt). */
    .signin-card {
        padding: 28px 18px 22px;
    }

    .signin-card-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 18px;
    }
    .signin-card-icon i { font-size: 30px; }

    .signin-card-title {
        font-size: 1.34rem;
        margin-bottom: 6px;
    }

    .signin-card-subtitle {
        font-size: 0.92rem;
        margin-bottom: 24px;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }

    .signin-field { margin-bottom: 14px; }
    .signin-label { font-size: 0.85rem; margin-bottom: 8px; }
    .signin-card-footer { margin-top: 20px; font-size: 0.88rem; }

    .signin-main-footer {
        margin-top: 24px;
        font-size: 0.82rem;
        gap: 2px;
        flex-wrap: wrap;
    }
    .signin-main-footer a { padding: 8px 10px; }
}

/* ---------- Mycket små skärmar (iPhone SE etc, ≤375px) ----------
   Maxa tillgänglig yta. Mindre padding så card inte trycks ihop. */
@media (max-width: 375px) {
    .signin-main {
        padding: 84px 12px calc(env(safe-area-inset-bottom, 0px) + 16px);
    }

    /* Ännu smalare sido-padding → maximal fält-bredd på riktigt små skärmar. */
    .signin-card {
        padding: 26px 16px 20px;
    }
}


/* ==========================================================================
   4. GRID — Standardiserad tabell-design för admin
   ==========================================================================

   Designprincip: alla TelerikGrids över hela admin ska följa samma rytm för
   att kännas som EN produkt, inte 80 olika skärmar.

   Tre kolumn-storleks-tokens (px-baserade så Telerik kan beräkna fast layout):
     - jb-col-xs   = 70px   (Antal, kort kod, ikoner)
     - jb-col-sm   = 100px  (Pris, %, lager, datum kort)
     - jb-col-md   = 140px  (Status, typ, datum med tid, kategori)
     - jb-col-lg   = 200px  (Titel, namn, beskrivning)
     - jb-col-xl   = 280px  (Lång adress, fri text)

   Använd som CSS-class via Telerik's HeaderClass/Class-attribut.

   Cell-typer:
     - jb-cell-amount   = höger-alignerad + tabular-nums (priser, summor)
     - jb-cell-mono     = monospace-ish för IDs / EANs / serial-numbers
     - jb-cell-muted    = mindre vikt för sekundär info
   */

.jb-col-xs th, .jb-col-xs td { width: 70px; }
.jb-col-sm th, .jb-col-sm td { width: 100px; }
.jb-col-md th, .jb-col-md td { width: 140px; }
.jb-col-lg th, .jb-col-lg td { width: 200px; }
.jb-col-xl th, .jb-col-xl td { width: 280px; }

/* Cell-typografi-utilities — applicera via column.Class.
   font-variant-numeric: tabular-nums = siffror linjerar perfekt i kolumner. */
.jb-cell-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
}

.jb-cell-mono {
    font-family: "SF Mono", "Menlo", "Consolas", monospace;
    font-size: 12px;
    letter-spacing: 0;
    color: #4a5568;
}

.jb-cell-muted {
    color: #6b7280;
    font-size: 13px;
}

/* Status-pill — gemensam pill för alla status-kolumner.
   Använder color-blind-vänlig palett som matchar jb-badge. Punkten signalerar
   live-state (online/aktiv). Inaktiv punkt är fylld men gråad. */
.jb-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    border-radius: 999px;
    border: 1px solid transparent;
    background-clip: padding-box;
    white-space: nowrap;
}

.jb-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
    flex-shrink: 0;
}

.jb-status-success { background: #d6f0df; color: #1f6b40; border-color: #b3e1c4; }
.jb-status-warn    { background: #fdf2c7; color: #856300; border-color: #f4e094; }
.jb-status-error   { background: #fde0dd; color: #a82318; border-color: #f8c1bb; }

/* Kundlogg (customer/logs): tona misslyckade rader svagt rött via OnRowRender så fel
   sticker ut pre-attentivt vid snabb scanning av en lang kronologisk strom. */
.jb-grid .jb-row-error > td,
.jb-row-error > td { background: #fdf1ef; }
.jb-grid .jb-row-warning > td,
.jb-row-warning > td { background: #fefaf0; }
.jb-status-info    { background: #dde9fc; color: #1d4f8c; border-color: #b8d2f5; }
.jb-status-neutral { background: #eef0f3; color: #4b5563; border-color: #d8dde4; }
.jb-status-dark    { background: #d8dde4; color: #1f2937; border-color: #b8c0cb; }


/* ==========================================================================
   5. GRID ICON-ONLY BUTTONS — symmetri
   ==========================================================================

   Telerik markerar icon-only-knappar med klassen .k-icon-button automatiskt
   när Icon="..." är satt utan text. Cellen heter .k-command-cell (inte
   .k-grid-command-cell). Standardrender skapar ändå asymmetri:
     - Telerik's flex justify-content är center, men padding och ikon-span
       width kan göra att ikonen ser left-skjuten ut beroende på SVG-storlek

   Fix: tvinga exakt kvadratisk 32×32px med ikon-spanen utan margin och
   SVG-storlek = 16px så ikonen sitter exakt mitt i den 32px-celln.
   */

/* ----------------------------------------------------------
   ICON-BUTTON CENTRERING — kvadratisk 32×32 med 16×16 ikon
   ----------------------------------------------------------
   Problem som tidigare iterationer missade:
   1. Telerik gör knappen rektangulär (32×28 på md) → ikonen
      hamnar OK på X men inte centralt på Y.
   2. Ikon-spannet ärver `font-size` från `.k-icon` (1.4rem ≈ 22.4px)
      → svg blir 22×22 och spränger ut. Måste tvinga 16px.
   3. En äldre `.jb-buttons .k-button.k-icon-button`-regel med
      28×28 !important slogs mot vår 32×32 !important — samma
      specificitet, ordningen avgör. Vi täcker NU `.jb-buttons`
      explicit för att alltid vinna oavsett ordning.
   4. Pseudo-element från Telerik kan injicera mellanrum — vi
      sätter `before/after { display: none }` för säkerhets skull.
   ---------------------------------------------------------- */

/* Knappen — kvadrat med samma höjd som bredd, ingen padding/border-radie-överraskning.
   body.jb-buttons-prefix ger högsta specificitet (0,5,1) → vinner över
   alla andra regler i drawer/grid utan att vara beroende av filordning. */
body.jb-buttons .k-grid .k-command-cell .k-button.k-icon-button,
body.jb-buttons .k-grid .k-grid-toolbar .k-button.k-icon-button,
body.jb-buttons .drawer-section .k-grid .k-command-cell .k-button.k-icon-button,
body.jb-buttons .drawer-section .k-grid .k-grid-toolbar .k-button.k-icon-button,
body.jb-buttons .k-command-cell .k-button.k-icon-button,
body.jb-buttons .k-grid-toolbar .k-button.k-icon-button {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    line-height: 1 !important;
    font-size: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    gap: 0 !important;
}

/* Eliminera Telerik's pseudo-element-utfyllnad som kan skjuta ikonen åt sidan. */
body.jb-buttons .k-grid .k-command-cell .k-button.k-icon-button::before,
body.jb-buttons .k-grid .k-grid-toolbar .k-button.k-icon-button::before,
body.jb-buttons .drawer-section .k-grid .k-command-cell .k-button.k-icon-button::before,
body.jb-buttons .k-command-cell .k-button.k-icon-button::before,
body.jb-buttons .k-grid-toolbar .k-button.k-icon-button::before,
body.jb-buttons .k-grid .k-command-cell .k-button.k-icon-button::after,
body.jb-buttons .k-grid .k-grid-toolbar .k-button.k-icon-button::after,
body.jb-buttons .drawer-section .k-grid .k-command-cell .k-button.k-icon-button::after,
body.jb-buttons .k-command-cell .k-button.k-icon-button::after,
body.jb-buttons .k-grid-toolbar .k-button.k-icon-button::after {
    display: none !important;
    content: none !important;
}

/* Ikon-spannet — exakt 16×16, ingen text-baseline-offset, ingen font-size-spillover. */
body.jb-buttons .k-grid .k-command-cell .k-button.k-icon-button > .k-button-icon,
body.jb-buttons .k-grid .k-grid-toolbar .k-button.k-icon-button > .k-button-icon,
body.jb-buttons .drawer-section .k-grid .k-command-cell .k-button.k-icon-button > .k-button-icon,
body.jb-buttons .k-command-cell .k-button.k-icon-button > .k-button-icon,
body.jb-buttons .k-grid-toolbar .k-button.k-icon-button > .k-button-icon {
    margin: 0 !important;
    padding: 0 !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    font-size: 16px !important;
    line-height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 16px !important;
    box-sizing: border-box !important;
}

/* SVG inuti ikon-spannet — 16×16 block, ingen baseline-offset. */
body.jb-buttons .k-grid .k-command-cell .k-button.k-icon-button svg,
body.jb-buttons .k-grid .k-grid-toolbar .k-button.k-icon-button svg,
body.jb-buttons .drawer-section .k-grid .k-command-cell .k-button.k-icon-button svg,
body.jb-buttons .k-command-cell .k-button.k-icon-button svg,
body.jb-buttons .k-grid-toolbar .k-button.k-icon-button svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    display: block !important;
    vertical-align: middle !important;
    flex: 0 0 16px !important;
}

/* Command-cellen själv — använd `vertical-align: middle` (native table-cell-egenskap)
   istället för `display: flex`. Anledning: när vi satte `display: flex` på <td>
   slutade cellen växa med rad-höjden — den fick content-height (32px) medan andra
   celler i raden var 49px. Resultat: ikonen hamnade i toppen av raden.
   Native table-cell-vertical-align fixar detta utan att förstöra row-höjd-fördelningen.
   `text-align: center` centrerar ikon-knappen i kolumnens bredd (känns mer symmetriskt
   än högerjusterad — high-traffic UI där admin gärna ser knappen vid en blink). */
body.jb-buttons .k-grid .k-command-cell,
body.jb-buttons .k-table-td.k-command-cell {
    vertical-align: middle !important;
    text-align: center !important;
    padding: 3px 6px !important;
    white-space: nowrap !important;
}

/* GridCommandButton-wrapping span (Telerik wrap:ar i en tom span — den får inte
   påverka layouten). inline-flex för att knapparna ska ligga sida vid sida. */
body.jb-buttons .k-command-cell > span,
body.jb-buttons .k-grid-toolbar > span {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
}

/* KOMPAKT text-rad-knapp: dölj den inledande ikonen + tighta bredden, så
   "Lagersaldo"/"Ta bort"/"Ändra" tar mycket mindre plats i tabellraden. Höjden
   lämnas (32px, som ikon-knapparna). :not(.k-icon-button) garanterar att de
   ikon-BARA-knapparna (32×32 ovan) inte rörs — Telerik sätter den klassen
   automatiskt när Icon= är satt UTAN text. */
body.jb-buttons .k-grid .k-command-cell .k-button:not(.k-icon-button) .k-button-icon,
body.jb-buttons .drawer-section .k-grid .k-command-cell .k-button:not(.k-icon-button) .k-button-icon {
    display: none !important;
}
body.jb-buttons .k-grid .k-command-cell .k-button:not(.k-icon-button),
body.jb-buttons .drawer-section .k-grid .k-command-cell .k-button:not(.k-icon-button) {
    min-width: 0 !important;
    padding: 0 10px !important;
    gap: 0 !important;
}

/* Konsekvent gap mellan command-knappar i samma cell (Edit + Delete). */
body.jb-buttons .k-command-cell .k-button + .k-button {
    margin-left: 4px !important;
}

/* ============================================================
   6. BOKNING - ÖVERSIKT (KPI hero + per-resurs cards + timeline)
   ============================================================
   Designprinciper:
   - KPI-hero överst: 4 stora cards med ikon + label + värde + meta
   - Per-resurs-block: header (ikon + titel + status-pill), live-info-rad,
     mini-timeline för dagen, 4 perioduppdelade mini-stats
   - Allt följer samma color tokens som resten av admin (jb-status, neutrals)
   ============================================================ */

.booking-overview {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 4px 2px 32px;
}

/* ===== KPI HERO ===== */
.booking-overview-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.booking-overview-kpi-card {
    background: #ffffff;
    border: 1px solid #e6e8ec;
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.booking-overview-kpi-card:hover {
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
    transform: translateY(-1px);
}

.booking-overview-kpi-icon {
    flex: 0 0 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.booking-overview-kpi-icon--info {
    background: #f1ecff;
    color: #6d27ff;
}

.booking-overview-kpi-icon--success {
    background: #e8f6ee;
    color: #198754;
}

.booking-overview-kpi-icon--warn {
    background: #fff4e0;
    color: #b6701a;
}

.booking-overview-kpi-icon--neutral {
    background: #f1f3f7;
    color: #475569;
}

.booking-overview-kpi-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.booking-overview-kpi-label {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.booking-overview-kpi-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: #111827;
}

.booking-overview-kpi-meta {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}

/* ===== PER-RESURS CARD ===== */
.booking-overview-resource {
    background: #ffffff;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.booking-overview-resource-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #f1f3f7;
}

.booking-overview-resource-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.booking-overview-resource-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f1f3f7;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.booking-overview-resource-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booking-overview-resource-subtitle {
    font-size: 13px;
    color: #6b7280;
    padding-left: 48px;
    margin-top: 2px;
    padding-bottom: 6px;
}

/* ===== LIVE-RAD (Just nu + Nästa) ===== */
.booking-overview-live-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 720px) {
    .booking-overview-live-row {
        grid-template-columns: 1fr;
    }
}

.booking-overview-live-item {
    background: #f8fafc;
    border: 1px solid #eef0f4;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.booking-overview-live-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.booking-overview-live-label i {
    font-size: 14px;
}

.booking-overview-live-value {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.booking-overview-live-meta {
    font-size: 12px;
    color: #6b7280;
    font-weight: 400;
}

.booking-overview-live-empty {
    color: #94a3b8;
    font-weight: 400;
    font-style: italic;
}

/* ===== MINI-TIMELINE ===== */
.booking-overview-timeline {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.booking-overview-timeline-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.booking-overview-timeline-bar {
    position: relative;
    height: 14px;
    background: #f1f3f7;
    border-radius: 7px;
    overflow: hidden;
}

.booking-overview-timeline-slot {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 4px;
}

.booking-overview-timeline-slot.booked {
    background: linear-gradient(180deg, #8b5cff 0%, #6d27ff 100%);
    box-shadow: 0 0 0 1px rgba(109, 39, 255, 0.2);
}

.booking-overview-timeline-slot.free {
    background: transparent;
}

.booking-overview-timeline-axis {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #94a3b8;
    padding: 0 2px;
    font-variant-numeric: tabular-nums;
}

/* ===== PERIODER (Igår/Idag/Imorgon/Kommande) ===== */
.booking-overview-periods {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

@media (max-width: 720px) {
    .booking-overview-periods {
        grid-template-columns: repeat(2, 1fr);
    }
}

.booking-overview-period {
    background: #f8fafc;
    border: 1px solid #eef0f4;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: center;
}

.booking-overview-period:hover {
    background: #eff2f7;
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.booking-overview-period--current {
    background: #f1ecff;
    border-color: #b9d2ff;
}

.booking-overview-period--current:hover {
    background: #dde9ff;
    border-color: #93b8ff;
}

.booking-overview-period-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.booking-overview-period--current .booking-overview-period-label {
    color: #6d27ff;
}

.booking-overview-period-value {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

/* ===== DRAWER SUMMARY (i _OverviewDetails) ===== */
.booking-overview-drawer-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

@media (max-width: 720px) {
    .booking-overview-drawer-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

.booking-overview-drawer-summary-item {
    background: #f8fafc;
    border: 1px solid #eef0f4;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.booking-overview-drawer-summary-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.booking-overview-drawer-summary-value {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

/* ===== EMPTY STATE ===== */
.booking-overview-empty {
    background: #ffffff;
    border: 1px dashed #d6dae1;
    border-radius: 14px;
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.booking-overview-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f1f3f7;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}

.booking-overview-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.booking-overview-empty-text {
    font-size: 14px;
    color: #6b7280;
    max-width: 360px;
}

/* ============================================================
   7. JB-SEGMENT (modern segmented control)
   ============================================================
   Ersätter Bootstrap btn-primary/btn-secondary-grupper i
   bokningsskapande och liknande val. Pillar i flex-row,
   primary-fyll på aktiv, hover-tint på inaktiv.
   Stöd både ikon + text i samma knapp.
   ============================================================ */
.jb-segment {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px;
    background: #f1f3f7;
    border: 1px solid #e2e6ee;
    border-radius: 10px;
}

.jb-segment-item {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 88px;
    justify-content: center;
}

.jb-segment-item i {
    font-size: 15px;
}

.jb-segment-item:hover:not(.jb-segment-item--active):not(:disabled) {
    background: #ffffff;
    color: #6d27ff;
}

/* VALD = fylld iOS-blå (segment-kontroll: 3 val bredvid varandra → den valda blir blå). Flat. */
.jb-segment-item.jb-segment-item--active {
    background: #6d27ff;
    color: #ffffff;
    border-color: #6d27ff;
}

.jb-segment-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Helper-rad för en switch + label + subtitle (används av Kör automatik etc.) */
.jb-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #eef0f4;
    border-radius: 10px;
}

.jb-toggle-row-text {
    flex: 1;
    min-width: 0;
}

.jb-toggle-row-title {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 2px;
}

.jb-toggle-row-subtitle {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

/* ============================================================
   8. JB-COMPANY-SWITCHER (Växla bolag-overlay)
   ============================================================
   Den dropdown som öppnas när admin klickar på bolags-knappen
   längst upp till vänster. Layoutas på mörk sidebar-bakgrund.
   Mål: tydlig hierarki, modern avatar, sök som funkar,
   aktiv-markering som syns på första blick.
   ============================================================ */

/* Header — minimal, label-style som en sektion-rubrik */
.jb-company-switcher-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
}

.jb-company-switcher-back {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    flex-shrink: 0;
    margin-left: -4px;
}

.jb-company-switcher-back:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.jb-company-switcher-back i {
    font-size: 14px;
}

.jb-company-switcher-title {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    flex: 1;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.jb-company-switcher-count {
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* Sökfält — minimal, blendar med bakgrunden */
.jb-company-switcher-search {
    position: relative;
    padding: 0 12px 10px;
}

.jb-company-switcher-search input {
    width: 100%;
    height: 30px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    padding: 0 10px 0 28px;
    outline: none;
    transition: all 0.15s ease;
}

.jb-company-switcher-search input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.jb-company-switcher-search input:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

.jb-company-switcher-search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    pointer-events: none;
    margin-top: -5px;
}

/* Lista-container — scrollbar och flex */
.jb-company-switcher-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 8px 16px;
}

/* Custom scrollbar för dark panel */
.jb-company-switcher-list::-webkit-scrollbar {
    width: 6px;
}
.jb-company-switcher-list::-webkit-scrollbar-track {
    background: transparent;
}
.jb-company-switcher-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}
.jb-company-switcher-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* En rad i listan — minimal: rund avatar + namn + ev. check-ikon på aktiv.
   Avatar ger visuell rytm utan att bli plottrigt (kvadrat-avatars var för
   "kort-liknande"; rund 22px är mer som en chip/badge). */
.jb-company-switcher-row {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 10px;
    border-radius: 6px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    position: relative;
    transition: background 0.1s ease, color 0.1s ease;
    text-decoration: none;
}

.jb-company-switcher-row:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

/* Aktiv bolag — subtil bg-tint, bold text, check-ikon till höger.
   Inspirerat av macOS-sidebar och Linear-workspace-switcher. */
.jb-company-switcher-row.jb-company-switcher-row--active {
    background: rgba(96, 165, 250, 0.12);
    color: #fff;
}

.jb-company-switcher-row.jb-company-switcher-row--active .jb-company-switcher-name {
    font-weight: 600;
}

/* Rund avatar med 1-2 bokstavs initialer. Mörk-glas-look som blender med
   sidebar-bakgrunden. Aktiv rad får blå-tonad avatar för subtil markering. */
.jb-company-switcher-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
    letter-spacing: 0.02em;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-transform: uppercase;
}

.jb-company-switcher-row:hover .jb-company-switcher-avatar {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.jb-company-switcher-row--active .jb-company-switcher-avatar {
    background: rgba(96, 165, 250, 0.25);
    border-color: rgba(96, 165, 250, 0.4);
    color: #fff;
}

/* Namn-text — enskild rad, ellipsis vid overflow. Tabular för säker layout. */
.jb-company-switcher-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
}

/* Org-nummer visas bara på aktiva raden — som diskret tail-text efter namnet.
   Hide-by-default för att hålla listan ren när admin scrollar genom 86 bolag. */
.jb-company-switcher-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.jb-company-switcher-row:not(.jb-company-switcher-row--active) .jb-company-switcher-meta {
    display: none;
}

/* Check-ikon för aktiv rad — ersätter "AKTUELL"-pill. Renare typografi. */
.jb-company-switcher-check {
    color: #a78bfa;
    font-size: 14px;
    flex-shrink: 0;
    margin-left: 2px;
}

.jb-company-switcher-row:not(.jb-company-switcher-row--active) .jb-company-switcher-check {
    display: none;
}

/* Indrag per nivå — 12px-steg via padding-left. Inga tree-lines.
   Hierarkin syns enbart via indent — avatarens vänsterkant förskjuts.

   Räknas ur --jb-level som komponenten sätter, i stället för en uppräkning per nivå.
   Uppräkningen slutade vid 5: ett bolag på nivå 6 (Tråvadbadet under Assemblin Vara)
   fick basindraget och hamnade längst till vänster, vilket fick syskonen på nivå 5
   under den att se ut som dess barn. Formeln har ingen sådan gräns.

   Taket på 130px hindrar att mycket djupa träd trycker ut namnet ur panelen —
   djupet syns då inte längre, men raden förblir läsbar. */
.jb-company-switcher-row {
    --jb-level: 1;
    padding-left: min(calc(10px + (var(--jb-level) - 1) * 12px), 130px);
}

/* Tomstate vid sök utan träffar */
.jb-company-switcher-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    gap: 8px;
}

.jb-company-switcher-empty i {
    font-size: 36px;
    color: rgba(255, 255, 255, 0.3);
}

.jb-company-switcher-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

.jb-company-switcher-empty-text {
    font-size: 12px;
    line-height: 1.4;
    max-width: 240px;
}


/* ============================================================
   FÖRKLARINGSRUTA — Bokningar > Att åtgärda

   Vyn genererade supportfrågor: admin såg obetalda bokningar ligga kvar
   och visste inte om de blockerade tider eller skulle rensas för hand.
   Rutan svarar på båda direkt i vyn, i stället för bakom en hover-ikon
   som den frågande inte vet finns.
   ============================================================ */

.jb-tohandle-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid #ffe69c;
    border-left: 4px solid #f0ad4e;
    border-radius: 8px;
    background: #fffbf0;
    color: #4a3c1a;
}

.jb-tohandle-note__icon {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1.3;
    color: #c77700;
}

.jb-tohandle-note__title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.jb-tohandle-note__body {
    font-size: 0.875rem;
    line-height: 1.55;
}

.jb-tohandle-note__list {
    margin: 8px 0 0;
    padding-left: 18px;
}

.jb-tohandle-note__list li + li {
    margin-top: 5px;
}

/* =========================================================================
   SweetAlert2: frågetecken-ikonen (icon: "question", bekräftelsedialogerna)
   =========================================================================
   Ikonen renderades i #f5f5f7 — nästan vit — på dialogens vita bakgrund och
   syntes därför knappt (mätt på stage 2026-07-21: color och border-color
   rgb(245,245,247)). De andra swal-ikonerna är oskadda: error röd, warning
   gul, success grön, info lila. Bara question var fel.

   Sätts till appens highlight-lila (#6d27ff), samma som bekräftelseknappen i
   dialogen, så ikonen både syns och hänger ihop med knappen under. !important
   för att vinna mot swal-bundlens egen regel/variabel som laddas som plugin. */
.swal2-icon.swal2-question,
.swal2-icon.swal2-question .swal2-icon-content {
    border-color: #6d27ff !important;
    color: #6d27ff !important;
}

/* ==========================================================================
   LAGERTRANSAKTION-DRAWER (_StockTransactionCreate.razor) — 3.0.753
   --------------------------------------------------------------------------
   Lokal typskala + färgreduktion. Scope: .jb-stocktx på kort-roten.

   INGET här läcker ut. Särskilt inte .jb-segment, som är global och delas med
   _TimePickerComp, _CustomerTypeComp, _AgreementCreate och _AgreementUpdate.
   Varje selektor bär .jb-stocktx → specificitet (0,3,x) mot globalens (0,2,x),
   alltså vinner de utan !important och rör inte de andra vyerna.

   px, inte rem: root font-size växlar 12↔13px mellan breakpoints, så en
   rem-baserad skala ger två olika resultat beroende på fönsterbredd.

   BAKGRUNDSREGELN, som är hela poängen med ändringen:
     grått = vad systemet säger    vitt = vad du fyller i
     lila  = en enda knapp          gult = en enda risk
   Drawern hade sex bakgrundsfärger plus grönt och rött. Lila låg på både
   segmentets aktiva läge och Spara-knappen, vilket gjorde att accentfärgen
   slutade betyda "detta är åtgärden".
   ========================================================================== */

/* --- Typskala ------------------------------------------------------------ */
body.jb-buttons .jb-stocktx .jb-stocktx-title {
    font-size: 16px; font-weight: 600; line-height: 1.2;
    color: #1d1d1f; letter-spacing: -0.01em;
}
body.jb-buttons .jb-stocktx .jb-stocktx-subtitle {
    font-size: 12px; font-weight: 400; line-height: 1.35; color: #6e6e73;
}
/* Etiketten ett helt steg över hjälptexten — storlek OCH vikt åt samma håll. */
body.jb-buttons .jb-stocktx label.form-label {
    font-size: 13px; font-weight: 600; line-height: 1.3;
    color: #1f2937; letter-spacing: -0.005em; margin-bottom: 4px;
}
body.jb-buttons .jb-stocktx .jb-stocktx-hint {
    font-size: 12px; font-weight: 400; line-height: 1.4;
    color: #6e6e73; margin: 0 0 6px;
}
/* Samma behandling som grid-headern i drawern redan har — sektionsrubriken
   slutar konkurrera med drawer-rubriken och börjar rimma med tabellen under. */
body.jb-buttons .jb-stocktx .jb-stocktx-section {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: #6e6e73; margin: 0 0 8px;
}
body.jb-buttons .jb-stocktx .jb-stocktx-key   { font-size: 12px; font-weight: 400; color: #6e6e73; }
body.jb-buttons .jb-stocktx .jb-stocktx-value { font-size: 13px; font-weight: 500; color: #1d1d1f; }
body.jb-buttons .jb-stocktx .jb-stocktx-figure {
    font-size: 15px; font-weight: 600; line-height: 1.2;
    color: #1d1d1f; font-variant-numeric: tabular-nums;
}

/* --- Datablock: enda fyllda ytan. Grått = systemägd, ej redigerbar data. -- */
body.jb-buttons .jb-stocktx .jb-stocktx-panel {
    background: #fafafb; border: 1px solid #efeff2;
    border-radius: 10px; padding: 10px 14px;
}
body.jb-buttons .jb-stocktx .jb-stocktx-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; padding: 6px 0;
}
body.jb-buttons .jb-stocktx .jb-stocktx-row + .jb-stocktx-row { border-top: 1px solid #efeff2; }

/* --- Skillnadssiffran: rött bara på minus. ---------------------------------
   Plus bär redan sitt +-tecken och tabular-nums; grönt-för-positivt är en
   konsumentkonvention, och bokföring färgar bara negativa tal. --bs-success
   är dessutom #50cd89 (mint) och --bs-danger #FF736B (lax) — det var de två
   som gjorde formuläret barnsligt. #a82318 är husets röda ur .jb-badge-red. */
body.jb-buttons .jb-stocktx .jb-stocktx-delta {
    font-size: 13px; font-weight: 600;
    font-variant-numeric: tabular-nums; color: #1d1d1f;
}
body.jb-buttons .jb-stocktx .jb-stocktx-delta--negative { color: #a82318; }
body.jb-buttons .jb-stocktx .jb-stocktx-delta--zero     { color: #86868b; }

/* --- Notis. Amber används EN gång: risk för dataskada. ------------------- */
body.jb-buttons .jb-stocktx .jb-stocktx-note {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 10px; border-radius: 8px;
    font-size: 12px; line-height: 1.45;
    background: #fdf2c7; border: 1px solid #f4e094; color: #856300;
}
body.jb-buttons .jb-stocktx .jb-stocktx-note i { font-size: 14px; line-height: 1.45; }
/* Saknade orsakskoder är en konfigurationslucka, inte en risk → neutral.
   Beskedet bär i stället den avstängda Spara-knappen. */
body.jb-buttons .jb-stocktx .jb-stocktx-note--neutral {
    background: #fafafb; border-color: #e4e5ea; color: #5b616e;
}

/* --- Segmentkontroll: spårhöjd 34px = Telerik-inputens höjd ---------------
   Kontrollen ska ligga på inputens höjd, inte på knappens. Den var ~41,6px
   bredvid en 11px etikett, vilket är osymmetrin ägaren reagerade på.
   Aktivt läge blir vit pill: det är iOS/macOS UISegmentedControl bokstavligen,
   och drawerns egen kodkommentar sa redan att det var intentionen. */
body.jb-buttons .jb-stocktx .jb-segment {
    display: flex; width: 100%; flex-wrap: nowrap;
    gap: 2px; padding: 2px; border-radius: 8px;
    background: #f1f3f7; border: 1px solid #e2e6ee;
}
body.jb-buttons .jb-stocktx .jb-segment-item {
    flex: 1 1 0; min-width: 0; gap: 0;
    height: 28px; padding: 0 12px;
    font-size: 13px; font-weight: 500; line-height: 1;
    border-radius: 6px; border-color: transparent;
    color: #4b5563; white-space: nowrap;
}
body.jb-buttons .jb-stocktx .jb-segment-item:hover:not(.jb-segment-item--active):not(:disabled) {
    background: rgba(255, 255, 255, 0.65); color: #1d1d1f;
}
body.jb-buttons .jb-stocktx .jb-segment-item.jb-segment-item--active {
    background: #ffffff; color: #1d1d1f; font-weight: 600;
    border-color: rgba(15, 23, 42, 0.06);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10);
}

/* --- Densitet: fyra steg som betyder något, i stället för fem som inte gör det -- */
body.jb-buttons .jb-stocktx .jb-stocktx-block   { margin-bottom: 14px; }
body.jb-buttons .jb-stocktx .jb-stocktx-block-l { margin-bottom: 20px; }
body.jb-buttons .jb-stocktx .jb-stocktx-rule {
    height: 0; border: 0; border-top: 1px solid #ececf1;
    margin: 20px 0 16px; opacity: 1;
}
body.jb-buttons .jb-stocktx .jb-stocktx-empty {
    padding: 18px 0; font-size: 12px; color: #6e6e73; text-align: center;
}

/* --- Chrome i linje med card-body (1.6rem) ------------------------------- */
body.jb-buttons .jb-stocktx.card > .card-header { padding: 1rem 1.6rem; min-height: 0; }
body.jb-buttons .jb-stocktx.card > .card-footer { padding: 0.85rem 1.6rem; }