/*
 * 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: 11.5px;
    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: 10.5px;
    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: 11.5px !important;
    font-weight: 500 !important;
    gap: 4px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}
.k-button.jb-btn-override .k-icon,
.k-button.jb-btn-override .k-svg-icon {
    font-size: 11px !important;
    width: 11px !important;
    height: 11px !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: #0071e3; }

/* 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;
}

.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: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: 12px 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: #1d4ed8 !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: #1d4ed8;
    opacity: 0.85;
}

/* ---------- DATA-RADER ---------- */
.jb-buttons .k-grid td {
    padding: 13px 14px !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
    font-size: 13.5px;
    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(29, 78, 216, 0.04) !important;
}

.jb-buttons .k-grid tbody tr.k-selected,
.jb-buttons .k-grid tbody tr.k-state-selected {
    background-color: rgba(29, 78, 216, 0.08) !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: 12.5px;
}

.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(29, 78, 216, 0.06);
    color: #1d4ed8;
}

.jb-buttons .k-pager-numbers .k-button.k-selected,
.jb-buttons .k-pager-numbers .k-button.k-state-selected {
    background: #1d4ed8 !important;
    color: #ffffff !important;
    border-color: #1d4ed8 !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(29, 78, 216, 0.06);
    color: #1d4ed8;
}

.jb-buttons .k-pager-info {
    color: #6b7280;
    font-size: 12.5px;
    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: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

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

.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 #007aff;
    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 #0a84ff;
    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: #0a84ff !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
   (#0a84ff) 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: #0a84ff !important;
    box-shadow: 0 0 0 3px rgba(10, 132, 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 {
    --jb-btn-bg:            #f5f5f7;
    --jb-btn-bg-hover:      #e8e8ed;
    --jb-btn-bg-active:     #dcdce1;
    --jb-btn-border:        #d2d2d7;   /* lite synligare (var #e0e0e5) */
    --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(0, 122, 255, 0.35);
    --jb-btn-radius:        8px;
    --jb-btn-radius-sm:     6px;
    --jb-btn-radius-lg:     10px;
    /* Skuggorna har två lager: tunn inner "ring" (matchar border-färgen) +
       mjuk drop-shadow nedanför. Detta är Telerik:s default-look. */
    --jb-btn-shadow:        0 1px 0 rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
    --jb-btn-shadow-hover:  0 1px 0 rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.08);
    --jb-btn-trans:         all 120ms cubic-bezier(0.2, 0, 0.2, 1);

    /* ------------------------------------------------------------------
       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.
       ------------------------------------------------------------------ */
    --bs-primary:           var(--jb-btn-bg);
    --bs-primary-active:    var(--jb-btn-bg-hover);
    --bs-primary-light:     var(--jb-btn-bg);
    --bs-primary-inverse:   var(--jb-btn-text);
}

/* --- 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(: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(.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: 32px;
    min-height: 32px;
    min-width: 0;
    padding: 0 14px;
    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(.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(.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: inset 0 1px 2px rgba(0,0,0,0.06);
}

/* 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: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: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-primary,
.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-primary,
.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);
    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);
    border-color: var(--jb-btn-border);
}

/* --- 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-) */
.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;
    width: 14px;
    height: 14px;
    line-height: 1;
}

.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;
}
.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: 12.5px;
    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: 12.5px;
    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: 12.5px;
    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: #0071e3;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 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: 13.5px;
    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: 12.5px;
}

/* ==========================================================================
   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: 12.5px;
    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: 10.5px;
    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: #0a84ff;
}

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: #0a84ff !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;
}

/* 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: #0a84ff !important;
    box-shadow: 0 0 0 3px rgba(10, 132, 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.
   Bumpades 2026-05-16 från 0.85rem/500 till 0.95rem/600 — när drawers nu använder
   helper-texter (text-muted fs-7) under labels förlorade de tidigare värdena
   sin visuella tyngd. Större + halv-bold gör att fältnamn fortfarande sticker
   ut tydligt även när hjälptext finns under. Färgen mörkare för bättre kontrast.
   Gäller alla 63+ drawers globalt. */
body.jb-buttons label.form-label {
    color: #1f2937;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    margin-bottom: 6px;
    line-height: 1.4;
}

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: #1d4ed8 !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 #1d4ed8;
    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: #1d4ed8 !important;
    color: #ffffff !important;
    border-color: #1d4ed8 !important;
    box-shadow: 0 1px 2px rgba(29, 78, 216, 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(29, 78, 216, 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: 11.5px;
    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(0, 122, 255, 0.04);
}

.jb-list-row:active {
    background-color: rgba(0, 122, 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: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 0.5px rgba(29, 78, 216, 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: #1d4ed8;
    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).
   ========================================================================== */

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

/* ---------- VÄNSTER: Mörk varumärkessida ---------- */
.signin-brand {
    flex: 0 0 50%;
    background: linear-gradient(135deg, #0a1a33 0%, #050d1f 50%, #020716 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 64px;
    position: relative;
    overflow: hidden;
}

/* Subtle radial highlight för djup på den mörka sidan */
.signin-brand::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -10%;
    width: 60%;
    height: 70%;
    background: radial-gradient(circle, rgba(56, 119, 255, 0.18) 0%, transparent 60%);
    pointer-events: none;
    filter: blur(60px);
}

/* Andra subtle glow längst ner för depth */
.signin-brand::after {
    content: "";
    position: absolute;
    bottom: -20%;
    right: -10%;
    width: 50%;
    height: 60%;
    background: radial-gradient(circle, rgba(120, 80, 220, 0.12) 0%, transparent 60%);
    pointer-events: none;
    filter: blur(60px);
}

.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(56, 119, 255, 0.12);
    color: #93b4ff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 0.5px rgba(56, 119, 255, 0.16);
}

.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;
}

.signin-card {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 16px;
    padding: 36px 36px 28px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 24px rgba(15, 23, 42, 0.08);
}

/* Ikon-badge överst — soft blue tinted square med tunn border */
.signin-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e0eaff 0%, #cad7ff 100%);
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: inset 0 0 0 0.5px rgba(29, 78, 216, 0.1);
}

.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: #1d4ed8;
    text-decoration: none;
    transition: color 0.15s ease;
}

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

/* 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: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
    outline: none;
}

/* Primär CTA — Logga in: filled premium-blå.
   Använder !important för att vinna mot globala .jb-buttons-overrides
   och iOS-stilen i resten av appen. */
.signin-page .btn.btn-primary.signin-submit {
    width: 100%;
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.005em;
    border-radius: 10px;
    padding: 12px 18px;
    height: auto;
    min-height: 46px;
    margin-top: 8px;
    box-shadow:
        0 1px 2px rgba(29, 78, 216, 0.2),
        0 0 0 0.5px rgba(29, 78, 216, 0.08);
    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.signin-page .btn.btn-primary.signin-submit:hover,
.signin-page .btn.btn-primary.signin-submit:focus {
    background: #1e40af !important;
    border-color: #1e40af !important;
    color: #ffffff !important;
    box-shadow:
        0 2px 6px rgba(29, 78, 216, 0.28),
        0 0 0 0.5px rgba(29, 78, 216, 0.12);
}

.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: #93c5fd !important;
    border-color: #93c5fd !important;
    color: #ffffff !important;
    opacity: 1;
    cursor: not-allowed;
    box-shadow: 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: #1d4ed8;
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
    transition: color 0.15s ease;
}

.signin-card-footer a:hover {
    color: #1e40af;
    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: #1d4ed8;
}

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

/* ==========================================================================
   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) {
    .signin-page--split {
        flex-direction: column;
        /* Safe-area för iPhone notch så brand-sektion inte hamnar under */
        padding-top: env(safe-area-inset-top);
    }

    .signin-brand {
        flex: 0 0 auto;
        padding: 40px 28px 36px;
        min-height: auto;
    }

    .signin-brand-inner {
        max-width: none;
        align-items: flex-start;
    }

    .signin-brand-logo {
        margin-bottom: 20px;
    }

    .signin-brand-headline {
        font-size: 1.65rem;
        line-height: 1.2;
        margin-bottom: 12px;
    }

    .signin-brand-lead {
        font-size: 0.92rem;
        line-height: 1.55;
        margin-bottom: 0;
    }

    /* Kollapsa feature-list + citat så header + lead ryms ovanför formuläret */
    .signin-brand-features,
    .signin-brand-divider,
    .signin-brand-eyebrow,
    .signin-brand-quote {
        display: none;
    }

    .signin-main {
        padding: 36px 20px 28px;
        flex: 1;
        align-items: stretch;
        /* 2026-05-28: Centrera card vertikalt på återstoden av skärmen efter
           brand-headern. Tidigare flex-start tryckte upp kortet direkt under
           gradient-sektionen vilket lämnade tomt utrymme nedanför footer på
           höga skärmar. */
        justify-content: center;
    }

    .signin-card {
        padding: 32px 26px 24px;
        margin: 0 auto;
        width: 100%;
        max-width: 440px;
        /* Lite mjukare shadow på mobil — vit bakgrund + grov shadow kan kännas "hård" */
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.04),
            0 12px 32px rgba(15, 23, 42, 0.07);
    }

    .signin-main-footer {
        position: static;
        margin-top: 24px;
        justify-content: center;
        /* Safe-area för iPhone home-bar */
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ---------- 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) {
    /* Brand blir kompakt header — bara logo + en kort headline.
       Lead-paragrafen göms eftersom den tar för mycket vertikal plats. */
    .signin-brand {
        padding: 28px 24px 24px;
        text-align: center;
    }

    .signin-brand-inner {
        align-items: center;
        text-align: center;
    }

    .signin-brand-logo {
        margin-bottom: 18px;
        justify-content: center;
    }

    .signin-brand-logo img {
        height: 32px;
    }

    .signin-brand-headline {
        font-size: 1.35rem;
        line-height: 1.25;
        margin-bottom: 8px;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Lead på iPhone-bredd kostar 2-3 rader scroll — bättre att dölja och
       låta fokus ligga på formuläret. Användaren ser värdet via headline. */
    .signin-brand-lead {
        display: none;
    }

    /* Formulär-yta — full width minus 16px marginal för "andande" feel.
       Background är samma f5f6f8 så card "flyter" på ljus bakgrund. */
    .signin-main {
        padding: 24px 16px 20px;
    }

    /* Card blir hjärtat. 20px hörnradius matchar iOS-sheets.
       Större padding-top för att ge ikonen luft. */
    .signin-card {
        padding: 32px 22px 22px;
        border-radius: 20px;
        /* Premium shadow med två lager — ger djup utan att kännas "hård" */
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.03),
            0 8px 24px rgba(15, 23, 42, 0.06),
            0 16px 48px rgba(15, 23, 42, 0.04);
    }

    /* Ikon-badgen får lite mer presens på mobil — den ankar visuellt */
    .signin-card-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 18px;
    }

    .signin-card-icon i {
        font-size: 30px;
    }

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

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

    /* Fält-spacing — luftigare för touch */
    .signin-field {
        margin-bottom: 14px;
    }

    .signin-label {
        font-size: 0.85rem;
        margin-bottom: 8px;
    }

    /* KRITISK iOS-fix: input font-size MÅSTE vara ≥16px annars zoomar
       Safari automatiskt in vid focus, vilket bryter layouten. Plus
       touch-target 48px höjd (Apple HIG-rekommendation). */
    .signin-page .form-control {
        font-size: 16px;
        padding: 14px 16px;
        min-height: 48px;
        border-radius: 12px;
    }

    /* Primär CTA — större touch-target + tydligare premium-shadow på mobil */
    .signin-page .btn.btn-primary.signin-submit {
        font-size: 1rem;
        min-height: 52px;
        border-radius: 12px;
        margin-top: 6px;
        box-shadow:
            0 1px 2px rgba(29, 78, 216, 0.25),
            0 4px 12px rgba(29, 78, 216, 0.18),
            0 0 0 0.5px rgba(29, 78, 216, 0.1);
    }

    .signin-card-footer {
        margin-top: 20px;
        font-size: 0.88rem;
    }

    /* Footer-länkar — bättre kontrast på ljus bakgrund + touch-vänligt spacing */
    .signin-main-footer {
        margin-top: 28px;
        font-size: 0.82rem;
        gap: 2px;
        flex-wrap: wrap;
    }

    .signin-main-footer a {
        padding: 8px 10px;
        color: #475569;
    }
}

/* ---------- Mycket små skärmar (iPhone SE etc, ≤375px) ----------
   Maxa tillgänglig yta. Mindre padding så card inte trycks ihop. */
@media (max-width: 375px) {
    .signin-brand {
        padding: 24px 20px 20px;
    }

    .signin-brand-headline {
        font-size: 1.2rem;
    }

    .signin-main {
        padding: 20px 12px 16px;
    }

    .signin-card {
        padding: 28px 18px 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: 12.5px;
}

/* 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: 11.5px;
    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; }
.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: 4px 8px !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;
}

/* Konsekvent 6px gap mellan command-knappar i samma cell (Edit + Delete). */
body.jb-buttons .k-command-cell .k-button + .k-button {
    margin-left: 6px !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: #eaf2ff;
    color: #2563eb;
}

.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, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 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: #eaf2ff;
    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: #2563eb;
}

.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: #1d4ed8;
}

.jb-segment-item.jb-segment-item--active {
    background: #ffffff;
    color: #1d4ed8;
    border-color: #b9d2ff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.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: 12.5px;
    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: #60a5fa;
    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å — 14px-steg via padding-left. Inga tree-lines.
   Hierarkin syns enbart via indent — avatarens vänsterkant förskjuts. */
.jb-company-switcher-row[data-level="1"] { padding-left: 10px; }
.jb-company-switcher-row[data-level="2"] { padding-left: 22px; }
.jb-company-switcher-row[data-level="3"] { padding-left: 34px; }
.jb-company-switcher-row[data-level="4"] { padding-left: 46px; }
.jb-company-switcher-row[data-level="5"] { padding-left: 58px; }

/* 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;
}