/**
 * Kontaktregister Frontend App
 * Clean, professional design for internal business use
 */

/* ==========================================
   CSS VARIABLES
   ========================================== */
:root {
    --kr-primary: #2563eb;
    --kr-primary-dark: #1d4ed8;
    --kr-primary-light: #3b82f6;

    /* Semantic colors */
    --kr-success: #16a34a;
    --kr-success-light: #dcfce7;
    --kr-success-dark: #166534;
    --kr-success-border: #86efac;

    --kr-warning: #ca8a04;
    --kr-warning-light: #fef9c3;
    --kr-warning-dark: #854d0e;
    --kr-warning-border: #fde047;

    --kr-error: #dc2626;
    --kr-error-light: #fee2e2;
    --kr-error-dark: #991b1b;
    --kr-error-border: #fca5a5;

    --kr-info: #0891b2;
    --kr-info-light: #cffafe;
    --kr-info-dark: #155e75;
    --kr-info-border: #67e8f9;

    --kr-gray-50: #f9fafb;
    --kr-gray-100: #f3f4f6;
    --kr-gray-200: #e5e7eb;
    --kr-gray-300: #d1d5db;
    --kr-gray-400: #9ca3af;
    --kr-gray-500: #6b7280;
    --kr-gray-600: #4b5563;
    --kr-gray-700: #374151;
    --kr-gray-800: #1f2937;
    --kr-gray-900: #111827;

    --kr-radius: 8px;
    --kr-radius-lg: 12px;
    --kr-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --kr-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --kr-focus-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
    --kr-focus-shadow-light: 0 0 0 3px rgba(37, 99, 235, 0.1);

    /* Spacing scale (4px base) */
    --kr-space-1: 4px;
    --kr-space-2: 8px;
    --kr-space-3: 12px;
    --kr-space-4: 16px;
    --kr-space-5: 20px;
    --kr-space-6: 24px;
    --kr-space-8: 32px;
    --kr-space-10: 40px;

    /* Typography scale */
    --kr-text-xs: 11px;
    --kr-text-sm: 13px;
    --kr-text-base: 14px;
    --kr-text-lg: 16px;
    --kr-text-xl: 18px;
    --kr-text-2xl: 24px;

    /* Theme-specific (light) - mjukare, gråare */
    --kr-bg: #f1f5f9;           /* Grå bakgrund */
    --kr-bg-alt: #e2e8f0;       /* Mörkare grå för kontrast */
    --kr-bg-card: #ffffff;      /* Kort lite ljusare för att sticka ut */
    --kr-text: #1e293b;         /* Något mjukare svart */
    --kr-text-muted: #64748b;   /* Lite mörkare för bättre läsbarhet */
    --kr-border: #e2e8f0;       /* Mjuk border */
    --kr-input-bg: #ffffff;
    --kr-input-border: #cbd5e1; /* Tydligare input-borders */
}

/* Dark theme - aktiveras via body-klass för att undvika blink */
body.kr-body-dark .kr-app,
.kr-app.kr-theme-dark {
    --kr-primary: #3b82f6;
    --kr-primary-dark: #2563eb;
    --kr-primary-light: #60a5fa;

    --kr-gray-50: #1f2937;
    --kr-gray-100: #1f2937;
    --kr-gray-200: #374151;
    --kr-gray-300: #4b5563;
    --kr-gray-400: #6b7280;
    --kr-gray-500: #9ca3af;
    --kr-gray-600: #d1d5db;
    --kr-gray-700: #e5e7eb;
    --kr-gray-800: #f3f4f6;
    --kr-gray-900: #f9fafb;

    --kr-bg: #111827;
    --kr-bg-alt: #1f2937;
    --kr-bg-card: #1f2937;
    --kr-card-bg: #1f2937;
    --kr-text: #f9fafb;
    --kr-text-muted: #9ca3af;
    --kr-border: #374151;
    --kr-input-bg: #374151;
    --kr-input-border: #4b5563;

    --kr-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --kr-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.3), 0 4px 6px -2px rgba(0,0,0,0.2);

    /* Dark mode semantic colors */
    --kr-success-light: #052e16;
    --kr-success-dark: #86efac;
    --kr-success-border: #166534;

    --kr-warning-light: #422006;
    --kr-warning-dark: #fde047;
    --kr-warning-border: #854d0e;

    --kr-error-light: #450a0a;
    --kr-error-dark: #fca5a5;
    --kr-error-border: #991b1b;

    --kr-info-light: #083344;
    --kr-info-dark: #67e8f9;
    --kr-info-border: #155e75;

    background: var(--kr-bg);
    color: var(--kr-text);
}

/* ==========================================
   BASE / RESET
   ========================================== */
html {
    scrollbar-gutter: stable;
}

/* Light theme - bakgrund matchar appen */
body:not(.kr-body-dark) {
    background-color: #f1f5f9;
}

/* Dark theme for entire page */
body.kr-body-dark {
    background-color: #111827 !important;
}

/* Dark theme for page elements outside .kr-app */
body.kr-body-dark .entry-title,
body.kr-body-dark .page-title,
body.kr-body-dark article .entry-header,
body.kr-body-dark .site-content h1,
body.kr-body-dark .site-content h2,
body.kr-body-dark .content-area h1,
body.kr-body-dark .hentry h1,
body.kr-body-dark .wp-block-post-title,
body.kr-body-dark main h1 {
    color: #f9fafb !important;
}

body.kr-body-dark .entry-content > *:not(.kr-app),
body.kr-body-dark article > *:not(.kr-app) {
    color: #e5e7eb;
}

/* Override WordPress theme containers för full-width app */
.entry-content:has(.kr-app),
.site-content:has(.kr-app),
.content-area:has(.kr-app),
article:has(.kr-app),
.hentry:has(.kr-app) {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Dölj WordPress page title när appen visas */
.page:has(.kr-app) .entry-title,
.page:has(.kr-app) .page-title,
article:has(.kr-app) .entry-header {
    display: none;
}

.kr-app {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    color: var(--kr-text);
    background: var(--kr-bg);
    line-height: 1.5;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    padding: 16px 24px;
    min-height: 100vh;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: block !important;
    flex-grow: 1;
    flex-shrink: 0;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

.kr-app.kr-theme-dark {
    background: var(--kr-bg);
}

.kr-app * {
    box-sizing: border-box;
}

.kr-app a {
    color: var(--kr-primary);
    text-decoration: none;
}

/* Hover underline ONLY on inline text links — never on cards, buttons, icons, badges */
.kr-app a:hover {
    text-decoration: none;
}
/* Inline text links in content areas — underline on hover is OK here */
.kr-view-value a:hover,
.kr-detail-value a:hover,
.kr-phone-link:hover,
.kr-clickable-link:hover {
    text-decoration: underline;
}
/* Elements that must NEVER get underlined even inside links */
.kr-app a:hover .kr-badge,
.kr-app a:hover .kr-economy-badge,
.kr-app a:hover .kr-status-badge,
.kr-app a:hover svg,
.kr-app a:hover .kr-icon,
.kr-app a:hover .kr-settings-card-icon,
.kr-app a:hover .kr-stat-count {
    text-decoration: none;
}

/* ==========================================
   TOP NAVIGATION
   ========================================== */
.kr-top-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 12px 0;
    border-bottom: 1px solid var(--kr-border);
    background: var(--kr-bg);
    position: sticky;
    top: 0;
    z-index: 100;
}

.kr-nav-spacer {
    flex: 1;
}

/* Theme toggle button */
.kr-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--kr-border);
    background: var(--kr-bg-card);
    border-radius: var(--kr-radius);
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s ease;
}

.kr-theme-toggle:hover {
    background: var(--kr-gray-100);
    border-color: var(--kr-gray-300);
}

.kr-theme-icon {
    display: none;
}

/* Light theme - show sun */
.kr-app:not(.kr-theme-dark) .kr-theme-light {
    display: block;
    color: #f59e0b;
}

/* Dark theme - show moon */
.kr-app.kr-theme-dark .kr-theme-dark {
    display: block;
    color: #fbbf24;
}

.kr-app.kr-theme-dark .kr-theme-toggle {
    background: var(--kr-gray-200, #374151);
    border-color: var(--kr-border);
}

.kr-app.kr-theme-dark .kr-theme-toggle:hover {
    background: var(--kr-gray-200);
}

.kr-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--kr-gray-600);
    text-decoration: none;
    border-radius: var(--kr-radius);
    transition: all 0.15s ease;
}

.kr-nav-link:hover {
    background: var(--kr-gray-100);
    color: var(--kr-gray-800);
    text-decoration: none;
}

.kr-nav-link.kr-nav-active {
    background: var(--kr-primary);
    color: #fff;
}

.kr-nav-link.kr-nav-active:hover {
    background: var(--kr-primary-dark);
    color: #fff;
}

/* Primary nav link (Operativa ERP) */
.kr-nav-link.kr-nav-primary {
    font-weight: 600;
    color: var(--kr-primary);
    border: 1px solid transparent;
}

.kr-nav-link.kr-nav-primary:hover {
    background: rgba(37, 99, 235, 0.08);
    color: var(--kr-primary-dark);
}

.kr-nav-link.kr-nav-primary.kr-nav-active {
    background: var(--kr-primary);
    color: #fff;
    border-color: var(--kr-primary);
}

.kr-nav-icon {
    font-size: 16px;
}

/* ==========================================
   HEADER
   ========================================== */
.kr-header {
    margin-bottom: 24px;
    width: 100%;
}

.kr-header-form {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.kr-header-view {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.kr-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.kr-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--kr-gray-900);
    margin: 0;
}

.kr-back-link {
    display: block;
    font-size: 14px;
    color: var(--kr-gray-500);
    margin-bottom: 8px;
}

.kr-back-link:hover {
    color: var(--kr-primary);
}

.kr-page-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--kr-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

/* ==========================================
   BUTTONS
   ========================================== */
.kr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--kr-radius);
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.kr-btn:hover {
    text-decoration: none;
}

.kr-btn-primary,
.kr-app a.kr-btn-primary,
a.kr-btn-primary {
    background: var(--kr-primary);
    color: #fff !important;
}

.kr-btn-primary:hover,
.kr-app a.kr-btn-primary:hover,
a.kr-btn-primary:hover {
    background: var(--kr-primary-dark);
    color: #fff !important;
    text-decoration: none;
}

.kr-btn-secondary {
    background: var(--kr-gray-100);
    color: var(--kr-gray-700);
}

.kr-btn-secondary:hover {
    background: var(--kr-gray-200);
}

.kr-btn-outline {
    background: transparent;
    color: var(--kr-gray-600);
    border: 1px solid var(--kr-gray-300);
}

.kr-btn-outline:hover {
    background: var(--kr-gray-50);
    color: var(--kr-gray-800);
}

.kr-btn-danger-outline,
.kr-app a.kr-btn-danger-outline,
.kr-app button.kr-btn-danger-outline {
    background: transparent;
    color: var(--kr-error);
    border: 1px solid var(--kr-gray-300);
}

.kr-btn-danger-outline:hover,
.kr-app a.kr-btn-danger-outline:hover,
.kr-app button.kr-btn-danger-outline:hover {
    background: var(--kr-error-light);
    color: var(--kr-error-dark);
    border-color: var(--kr-error);
}

.kr-btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.kr-btn-lg {
    padding: 14px 28px;
    font-size: 16px;
}

.kr-btn-xs {
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.4;
}

.kr-btn-add {
    gap: 6px;
}

.kr-btn-danger,
.kr-app button.kr-btn-danger {
    background: var(--kr-error);
    color: #fff !important;
    border: none;
}

.kr-btn-danger:hover,
.kr-app button.kr-btn-danger:hover {
    background: #b91c1c;
    color: #fff !important;
}

.kr-btn-success,
.kr-app a.kr-btn-success,
.kr-app button.kr-btn-success {
    background: var(--kr-success);
    color: #fff !important;
    border: none;
}

.kr-btn-success:hover,
.kr-app a.kr-btn-success:hover,
.kr-app button.kr-btn-success:hover {
    background: #059669;
    color: #fff !important;
}

/* Focus states for accessibility */
.kr-btn:focus-visible {
    outline: 2px solid var(--kr-primary);
    outline-offset: 2px;
    box-shadow: var(--kr-focus-shadow);
}

.kr-btn-primary:focus-visible {
    outline-color: var(--kr-primary-dark);
}

.kr-btn-secondary:focus-visible {
    outline-color: var(--kr-gray-500);
}

.kr-btn-outline:focus-visible {
    outline-color: var(--kr-gray-500);
}

.kr-btn-success:focus-visible {
    outline-color: #059669;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
}

.kr-btn-danger:focus-visible,
.kr-btn-danger-outline:focus-visible {
    outline-color: var(--kr-error);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3);
}

/* Delete section */
.kr-delete-section {
    margin-top: var(--kr-space-10);
    padding-top: var(--kr-space-6);
    border-top: 1px solid var(--kr-gray-200);
}

.kr-delete-form {
    margin: 0;
}

/* ==========================================
   CARDS
   ========================================== */
.kr-card {
    background: var(--kr-bg-card);
    border-radius: var(--kr-radius-lg);
    box-shadow: var(--kr-shadow);
    padding: var(--kr-space-6);
    margin-bottom: var(--kr-space-5);
    border: 1px solid var(--kr-border);
    width: 100%;
}

.kr-card h2 {
    font-size: var(--kr-text-xl);
    font-weight: 600;
    color: var(--kr-text);
    margin: 0 0 var(--kr-space-4) 0;
}

/* ==========================================
   MESSAGES
   ========================================== */
.kr-message {
    padding: var(--kr-space-3) var(--kr-space-5);
    border-radius: var(--kr-radius);
    margin-bottom: var(--kr-space-5);
    font-weight: 500;
}

.kr-message-success {
    background: var(--kr-success-light);
    color: var(--kr-success-dark);
    border: 1px solid var(--kr-success-border);
}

.kr-message-error {
    background: var(--kr-error-light);
    color: var(--kr-error-dark);
    border: 1px solid var(--kr-error-border);
}

.kr-message-warning {
    background: var(--kr-warning-light);
    color: var(--kr-warning-dark);
    border: 1px solid var(--kr-warning-border);
}

.kr-message-info {
    background: var(--kr-info-light);
    color: var(--kr-info-dark);
    border: 1px solid var(--kr-info-border);
}

/* ==========================================
   PUBLIC ORDER CONFIRMATION PAGE
   ========================================== */
.kr-public-header {
    text-align: center;
    padding: var(--kr-space-6) 0 var(--kr-space-4);
}

.kr-public-title {
    font-size: var(--kr-text-2xl);
    color: var(--kr-text);
    margin: 0 0 var(--kr-space-1);
}

.kr-public-subtitle {
    color: var(--kr-text-muted);
    margin: 0;
}

.kr-public-meta {
    color: var(--kr-text-muted);
    font-size: var(--kr-text-sm);
}

.kr-public-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--kr-space-4) 0;
}

.kr-public-table thead tr {
    background: var(--kr-bg-alt);
}

.kr-public-table th {
    padding: var(--kr-space-2);
    text-align: left;
    font-size: var(--kr-text-xs);
    color: var(--kr-text-muted);
    border-bottom: 2px solid var(--kr-border);
}

.kr-public-table th.text-right,
.kr-public-table td.text-right {
    text-align: right;
}

.kr-public-table td {
    padding: var(--kr-space-2);
    border-bottom: 1px solid var(--kr-border);
    color: var(--kr-text);
}

.kr-public-totals {
    text-align: right;
    margin: var(--kr-space-4) 0;
}

.kr-public-totals-row {
    font-size: var(--kr-text-sm);
    color: var(--kr-text-muted);
}

.kr-public-totals-grand {
    font-size: var(--kr-text-lg);
    font-weight: 700;
    border-top: 2px solid var(--kr-text);
    padding-top: var(--kr-space-2);
    margin-top: var(--kr-space-2);
    color: var(--kr-text);
}

.kr-public-form {
    text-align: center;
    margin: var(--kr-space-6) 0 var(--kr-space-2);
}

.kr-public-confirm-icon {
    font-size: 48px;
    text-align: center;
    color: var(--kr-success);
}

.kr-public-confirm-title {
    text-align: center;
    color: var(--kr-text);
}

.kr-public-confirm-text {
    text-align: center;
    color: var(--kr-text-muted);
}

/* Public offer response — single-page form */
.kr-public-doc-meta {
    display: flex;
    gap: var(--kr-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--kr-space-4);
    padding-bottom: var(--kr-space-3);
    border-bottom: 1px solid var(--kr-border);
}
.kr-public-doc-meta-item {
    font-size: var(--kr-text-sm);
    color: var(--kr-text);
}
.kr-public-doc-meta-label {
    color: var(--kr-text-muted);
    margin-right: var(--kr-space-1);
}
.kr-public-response-form {
    margin-top: var(--kr-space-4);
}
.kr-public-accept-section {
    text-align: left;
}
.kr-public-section-title {
    font-size: var(--kr-text-lg);
    color: var(--kr-text);
    margin: 0 0 var(--kr-space-1);
}
.kr-public-section-desc {
    color: var(--kr-text-muted);
    font-size: var(--kr-text-sm);
    margin: 0 0 var(--kr-space-4);
}
.kr-public-field {
    margin-bottom: var(--kr-space-5);
}
.kr-public-field-label {
    display: block;
    font-weight: 600;
    font-size: var(--kr-text-sm);
    color: var(--kr-text);
    margin-bottom: var(--kr-space-1);
}
.kr-public-field-help {
    color: var(--kr-text-muted);
    font-size: var(--kr-text-xs);
    margin: 0 0 var(--kr-space-2);
}
.kr-public-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius);
    font-size: var(--kr-text-sm);
    background: var(--kr-bg);
    color: var(--kr-text);
}
.kr-public-input:focus,
.kr-public-textarea:focus {
    outline: none;
    border-color: var(--kr-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.kr-public-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius);
    font-size: var(--kr-text-sm);
    background: var(--kr-bg);
    color: var(--kr-text);
    resize: vertical;
}
.kr-public-address-card {
    background: var(--kr-bg-alt);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius);
    padding: var(--kr-space-3) var(--kr-space-4);
    margin-bottom: var(--kr-space-4);
}
.kr-public-address-header {
    display: flex;
    align-items: center;
    gap: var(--kr-space-2);
    margin-bottom: var(--kr-space-2);
    font-size: var(--kr-text-sm);
}
.kr-public-address-icon {
    font-size: 16px;
}
.kr-public-address-text {
    font-size: var(--kr-text-sm);
    color: var(--kr-text);
    margin: 0 0 var(--kr-space-3);
    line-height: 1.5;
}
.kr-public-address-empty {
    color: var(--kr-text-muted);
    font-style: italic;
}
.kr-public-toggle-label {
    display: flex;
    align-items: center;
    gap: var(--kr-space-2);
    font-size: var(--kr-text-sm);
    color: var(--kr-text);
    cursor: pointer;
}
.kr-public-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--kr-primary);
    flex-shrink: 0;
}
.kr-public-address-display {
    font-size: var(--kr-text-sm);
    color: var(--kr-text);
    line-height: 1.6;
    margin-bottom: var(--kr-space-3);
    padding: var(--kr-space-2) var(--kr-space-3);
    background: var(--kr-bg);
    border-radius: var(--kr-radius);
    border: 1px solid var(--kr-border);
}
.kr-public-address-fields {
    margin-top: var(--kr-space-3);
}
.kr-public-field-row {
    display: flex;
    gap: var(--kr-space-3);
    margin-bottom: var(--kr-space-3);
}
.kr-public-field-col-full {
    flex: 1;
}
.kr-public-field-col-zip {
    flex: 0 0 120px;
}
.kr-public-field-col-city {
    flex: 1;
}
.kr-public-address-change {
    display: none;
    margin-top: var(--kr-space-3);
}
.kr-public-actions {
    margin-top: var(--kr-space-4);
}
.kr-public-btn-accept {
    width: 100%;
    padding: 14px 24px;
    font-size: var(--kr-text-base);
}
.kr-public-decline-section {
    text-align: center;
    margin-top: var(--kr-space-4);
    padding-bottom: var(--kr-space-6);
}
.kr-public-decline-toggle {
    background: none;
    border: none;
    color: var(--kr-text-muted);
    font-size: var(--kr-text-sm);
    cursor: pointer;
    text-decoration: underline;
    padding: var(--kr-space-2);
}
.kr-public-decline-toggle:hover {
    color: var(--kr-error);
}
.kr-public-decline-form {
    display: none;
    text-align: left;
    background: var(--kr-bg);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius);
    padding: var(--kr-space-4);
    margin-top: var(--kr-space-3);
}
.kr-public-btn-decline {
    color: var(--kr-error);
    border-color: var(--kr-error);
}
.kr-public-btn-decline:hover {
    background: var(--kr-error);
    color: #fff;
}
@media (max-width: 480px) {
    .kr-public-field-row {
        flex-direction: column;
        gap: var(--kr-space-2);
    }
    .kr-public-field-col-zip {
        flex: 1;
    }
}

/* Utility classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--kr-text-muted); }
.text-success { color: var(--kr-success); }
.text-error { color: var(--kr-error); }

/* ==========================================
   HELP INFO BOX
   ========================================== */
/* Info tooltip icon */
.kr-info-tip {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1;
}

.kr-info-tip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 13px;
    font-weight: 700;
    font-style: normal;
    color: var(--kr-text-muted, #94a3b8);
    border: 1.5px solid var(--kr-text-muted, #94a3b8);
    border-radius: 50%;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    user-select: none;
}

.kr-info-tip:hover .kr-info-tip-icon,
.kr-info-tip.open .kr-info-tip-icon {
    color: var(--kr-primary, #3b82f6);
    border-color: var(--kr-primary, #3b82f6);
    background: rgba(59, 130, 246, 0.06);
}

.kr-info-tip-content {
    display: none;
    position: fixed;
    padding: 12px 16px;
    background: var(--kr-card-bg, #ffffff);
    color: var(--kr-text, #1e293b);
    border: 1px solid var(--kr-border, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    font-size: 13px;
    line-height: 1.6;
    width: 300px;
    max-width: 90vw;
    z-index: 99999;
    white-space: normal;
    font-weight: 400;
}

.kr-info-tip.open .kr-info-tip-content {
    display: block;
}

/* ==========================================
   SUCCESS POPUP
   ========================================== */
.kr-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: kr-fade-in 0.2s ease;
}

@keyframes kr-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.kr-popup {
    background: var(--kr-bg-card);
    border-radius: var(--kr-radius-lg);
    padding: 32px 40px;
    text-align: center;
    max-width: 360px;
    width: 90%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    animation: kr-popup-in 0.25s ease;
}

@keyframes kr-popup-in {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.kr-popup-icon {
    width: 64px;
    height: 64px;
    background: #dcfce7;
    color: #16a34a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 20px;
}

.kr-popup-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--kr-gray-800);
    margin: 0 0 8px 0;
}

.kr-popup-text {
    font-size: 14px;
    color: var(--kr-gray-600);
    margin: 0 0 24px 0;
}

.kr-popup-close {
    min-width: 120px;
}

/* ==========================================
   FILTERS
   ========================================== */
.kr-filters-card {
    background: var(--kr-gray-50);
}

.kr-filter-indicator {
    font-size: 14px;
    color: var(--kr-gray-600);
    margin-bottom: 16px;
    padding: 8px 12px;
    background: var(--kr-gray-100);
    border-radius: var(--kr-radius);
}

.kr-filter-clear {
    color: var(--kr-primary);
    margin-left: 8px;
}

.kr-filters-form {
    margin: 0;
}

.kr-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.kr-filter-group {
    flex: 0 0 auto;
}

.kr-filter-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
}

.kr-filter-hint {
    font-weight: 400;
    font-size: 11px;
    color: var(--kr-gray-400);
}

.kr-filter-search {
    flex: 1;
    min-width: 250px;
}

.kr-filter-group input[type="text"],
.kr-filter-group input[type="date"],
.kr-filter-group select {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid var(--kr-input-border);
    border-radius: var(--kr-radius);
    background: var(--kr-input-bg);
    color: var(--kr-text);
    min-width: 160px;
}

.kr-filter-group input[type="text"]:focus,
.kr-filter-group input[type="date"]:focus,
.kr-filter-group select:focus {
    outline: none;
    border-color: var(--kr-primary);
    box-shadow: var(--kr-focus-shadow-light);
}

.kr-filter-buttons {
    display: flex;
    gap: 8px;
}

/* ==========================================
   RESULTS INFO
   ========================================== */
.kr-results-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.kr-count {
    font-size: 14px;
    color: var(--kr-gray-500);
}

/* ==========================================
   VIEW TOGGLE & RESULTS HEADER
   ========================================== */
.kr-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 4px;
}

.kr-results-header .kr-count {
    font-size: 14px;
    color: var(--kr-gray-500);
}

.kr-results-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kr-view-toggle {
    display: flex;
    gap: 4px;
    background: var(--kr-gray-100);
    padding: 4px;
    border-radius: var(--kr-radius);
}

.kr-view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--kr-gray-500);
    transition: all 0.15s ease;
}

.kr-view-toggle-btn:hover {
    color: var(--kr-gray-700);
    background: var(--kr-gray-200);
}

.kr-view-toggle-btn.active {
    background: var(--kr-bg-card);
    color: var(--kr-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ==========================================
   LIST VIEW TABLE
   ========================================== */
.kr-contacts-list {
    background: var(--kr-bg-card);
    border-radius: var(--kr-radius-lg);
    box-shadow: var(--kr-shadow);
    border: 1px solid var(--kr-border);
    overflow: hidden;
}

.kr-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.kr-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.kr-list-table thead {
    background: var(--kr-bg-alt);
    border-bottom: 1px solid var(--kr-border);
}

.kr-list-table th {
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--kr-gray-600);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.kr-list-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--kr-border);
    color: var(--kr-text);
}

.kr-list-table tbody tr:nth-child(even) {
    background: var(--kr-gray-50);
}

.kr-list-table tbody tr:last-child td {
    border-bottom: none;
}

.kr-list-table tbody tr:hover {
    background: rgba(37, 99, 235, 0.06);
}

.kr-list-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--kr-bg-alt);
}

.kr-list-name a {
    font-weight: 500;
    color: var(--kr-text);
    text-decoration: none;
}

.kr-list-name a:hover {
    color: var(--kr-primary);
}

.kr-list-typ {
    color: var(--kr-gray-500);
    font-size: 13px;
}

.kr-list-kp {
    text-align: center;
    color: var(--kr-gray-500);
}

.kr-list-casenr a,
.kr-list-title a {
    font-weight: 500;
    color: var(--kr-gray-900);
    text-decoration: none;
}

.kr-list-casenr a:hover,
.kr-list-title a:hover {
    color: var(--kr-primary);
}

.kr-list-casenr {
    white-space: nowrap;
    font-family: monospace;
    font-size: 13px;
}

.kr-list-date {
    white-space: nowrap;
    color: var(--kr-gray-500);
    font-size: 13px;
}

.kr-list-status .kr-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.kr-list-company a {
    color: var(--kr-gray-700);
    text-decoration: none;
}

.kr-list-company a:hover {
    color: var(--kr-primary);
}

/* ==========================================
   CONTACT CARDS GRID
   ========================================== */
.kr-contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.kr-contact-card {
    background: var(--kr-bg-card);
    border-radius: var(--kr-radius-lg);
    box-shadow: var(--kr-shadow);
    border: 1px solid var(--kr-border);
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    height: 340px;
    display: flex;
    flex-direction: column;
}

.kr-contact-card:hover {
    box-shadow: var(--kr-shadow-lg);
    border-color: var(--kr-primary);
}

/* Add card - empty card with plus sign */
.kr-contact-card-add,
.kr-kp-card.kr-contact-card-add {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px dashed var(--kr-gray-300);
    box-shadow: none;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.kr-contact-card-add:hover {
    border-color: var(--kr-primary);
    background: rgba(37, 99, 235, 0.03);
    box-shadow: none;
    text-decoration: none;
}

.kr-add-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--kr-gray-400);
    transition: color 0.15s ease;
}

.kr-contact-card-add:hover .kr-add-card-content {
    color: var(--kr-primary);
}

.kr-add-card-content svg {
    stroke: currentColor;
}

.kr-add-card-content span {
    font-size: 14px;
    font-weight: 500;
}

/* Clickable card link */
a.kr-contact-card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.kr-contact-card-link:hover {
    text-decoration: none;
    transform: translateY(-2px);
}

a.kr-contact-card-link .kr-contact-name {
    color: var(--kr-gray-900);
}

a.kr-contact-card-link:hover .kr-contact-name {
    color: var(--kr-primary);
}

.kr-contact-header {
    display: flex;
    flex-direction: column;
    padding: 20px 20px 12px;
    gap: 6px;
}

.kr-contact-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--kr-gray-900);
    margin: 0;
    line-height: 1.3;
}

.kr-economy-row {
    display: flex;
}

.kr-contact-header .kr-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.kr-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 20px;
    white-space: nowrap;
}

.kr-badge-kund {
    background: #dbeafe;
    color: #1e40af;
}

.kr-badge-leverantor {
    background: #fef3c7;
    color: #92400e;
}

.kr-badge-transportor {
    background: #d1fae5;
    color: #065f46;
}

.kr-contact-body {
    padding: 0 20px 16px;
}

.kr-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 14px;
    color: var(--kr-gray-600);
}

.kr-contact-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.kr-contact-row a {
    color: var(--kr-gray-600);
}

.kr-contact-row a:hover {
    color: var(--kr-primary);
}

.kr-clickable-link {
    cursor: pointer;
    color: var(--kr-primary);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.15s ease;
}

.kr-clickable-link:hover {
    text-decoration-color: var(--kr-primary);
}

.kr-contact-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.kr-tag {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    background: var(--kr-gray-100);
    color: var(--kr-gray-600);
    border-radius: 4px;
}

.kr-tag-more {
    background: var(--kr-gray-200);
    color: var(--kr-gray-500);
    font-weight: 500;
}

.kr-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.kr-notes {
    white-space: pre-wrap;
    line-height: 1.6;
    color: var(--kr-gray-700);
}

.kr-contact-footer {
    padding: 12px 20px;
    background: var(--kr-gray-50);
    border-top: 1px solid var(--kr-gray-100);
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
}

/* ==========================================
   NO RESULTS
   ========================================== */
.kr-no-results {
    text-align: center;
    padding: 48px 24px;
}

.kr-no-results p {
    color: var(--kr-gray-500);
    margin-bottom: 20px;
}

/* ==========================================
   LOGIN REQUIRED / ERROR
   ========================================== */
.kr-login-required,
.kr-error {
    text-align: center;
    max-width: 400px;
    margin: 40px auto;
}

.kr-login-required h2,
.kr-error h2 {
    color: var(--kr-gray-800);
}

.kr-login-required p,
.kr-error p {
    color: var(--kr-gray-500);
    margin-bottom: 20px;
}

/* ==========================================
   VIEW PAGE (READ-ONLY)
   ========================================== */
.kr-view-section {
    margin-bottom: 20px;
    width: 100%;
}

.kr-view-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.kr-view-grid-3 {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 20px;
}

.kr-view-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.kr-view-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kr-view-item-full {
    grid-column: 1 / -1;
}

.kr-view-item-center {
    text-align: center;
}

.kr-view-item-right {
    text-align: right;
}

.kr-view-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--kr-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.kr-view-value {
    font-size: 15px;
    color: var(--kr-gray-800);
}

.kr-view-value a {
    color: var(--kr-primary);
}

.kr-view-value a:hover {
    color: var(--kr-primary-dark);
}

.kr-external-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.kr-external-link svg {
    opacity: 0.6;
    transition: opacity 0.2s;
}

.kr-external-link:hover svg {
    opacity: 1;
}

.kr-view-value-text {
    line-height: 1.6;
    white-space: pre-wrap;
}

@media screen and (max-width: 768px) {
    .kr-view-grid,
    .kr-view-grid-3,
    .kr-view-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   FORMS
   ========================================== */
.kr-form {
    margin: 0;
}

.kr-form-section {
    margin-bottom: 24px;
}

/* Add Address Mode - disable other sections */
.kr-form-add-address-mode .kr-form-section:not(#adresser) {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

.kr-form-add-address-mode .kr-form-section:not(#adresser)::after {
    content: 'Endast visning';
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 11px;
    font-weight: 600;
    color: var(--kr-gray-500);
    background: var(--kr-gray-200);
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kr-form-add-address-mode #adresser {
    border: 2px solid var(--kr-primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

/* Disable primary address in add-address mode */
.kr-form-add-address-mode .kr-address-block[data-address-index="0"] {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

.kr-form-add-address-mode .kr-address-block[data-address-index="0"]::after {
    content: 'Låst';
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--kr-gray-500);
    background: var(--kr-gray-200);
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Also disable existing extra addresses in add-address mode */
.kr-form-add-address-mode .kr-extra-address:not(.kr-new-address) {
    opacity: 0.5;
    pointer-events: none;
}

.kr-form-add-address-mode .kr-form-actions {
    pointer-events: auto;
    opacity: 1;
}

.kr-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--kr-gray-700);
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--kr-gray-200);
}

.kr-section-description {
    font-size: 14px;
    color: var(--kr-gray-600);
    margin: -12px 0 20px 0;
    line-height: 1.5;
}

.kr-form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.kr-form-row:last-child {
    margin-bottom: 0;
}

.kr-form-row-3 .kr-form-group {
    flex: 1;
}

.kr-form-row-4 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 16px;
    margin-bottom: 12px;
}

.kr-form-row-4 .kr-form-group {
    flex: none;
}

/* Leverantörsrader */
.kr-leverantor-row {
    padding: 16px;
    margin-bottom: 12px;
    background: var(--kr-gray-50);
    border: 1px solid var(--kr-gray-200);
    border-radius: var(--kr-radius);
}

.kr-leverantor-row:last-child {
    margin-bottom: 0;
}

.kr-leverantor-row .kr-form-row-4 {
    margin-bottom: 0;
}

.kr-leverantor-row .kr-form-group label {
    font-size: 12px;
    color: var(--kr-gray-600);
}

.kr-remove-leverantor {
    padding: 4px 10px !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

.kr-add-leverantor-wrap {
    padding-top: 8px;
}

/* Tabell primär rad */
.kr-row-primary {
    background-color: rgba(59, 130, 246, 0.05);
}

@media (max-width: 768px) {
    .kr-form-row-4 {
        grid-template-columns: 1fr;
    }

    .kr-leverantor-row {
        padding: 12px;
    }
}

.kr-form-group {
    flex: 1;
}

.kr-form-group-wide {
    flex: 2;
}

.kr-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--kr-gray-700);
    margin-bottom: 6px;
}

.kr-optional {
    font-weight: 400;
    color: var(--kr-gray-500);
    font-size: 12px;
}

.kr-form-group input[type="text"],
.kr-form-group input[type="email"],
.kr-form-group input[type="url"],
.kr-form-group input[type="number"],
.kr-form-group input[type="date"],
.kr-form-group input[type="file"],
.kr-form-group input[type="password"],
.kr-form-group select,
.kr-form-group textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid var(--kr-input-border);
    border-radius: var(--kr-radius);
    background: var(--kr-input-bg);
    color: var(--kr-text);
    font-family: inherit;
}

.kr-form-group input:focus,
.kr-form-group select:focus,
.kr-form-group textarea:focus {
    outline: none;
    border-color: var(--kr-primary);
    box-shadow: var(--kr-focus-shadow-light);
}

.kr-form-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* Form hints */
.kr-form-hint {
    display: block;
    font-size: 12px;
    color: var(--kr-gray-500);
    margin-top: 4px;
}

.kr-field-hint {
    font-size: 12px;
    color: var(--kr-gray-500);
    margin-top: 4px;
    margin-bottom: 0;
}

/* Org number search */
.kr-orgnr-search {
    display: flex;
    gap: 8px;
    align-items: center;
}

.kr-orgnr-search input {
    flex: 1;
}

.kr-fetch-success {
    color: var(--kr-success);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    padding: 0 8px;
    animation: kr-fade-in 0.3s ease;
}

@keyframes kr-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.kr-btn-icon {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kr-btn-icon svg {
    width: 16px;
    height: 16px;
}

.kr-btn-icon.kr-loading svg {
    animation: kr-spin 1s linear infinite;
}

@keyframes kr-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Checkboxes */
.kr-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.kr-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.kr-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--kr-gray-700);
}

.kr-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Inline checkboxes for type selection */
.kr-checkbox-group-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 6px;
}

.kr-checkbox-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    color: var(--kr-gray-700);
}

.kr-checkbox-inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Multiple badges container */
.kr-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Form actions */
.kr-form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.kr-view-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 32px;
}

/* Wrapper för att placera radera-knapp och spara/avbryt på samma rad */
.kr-form-actions-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 32px;
    gap: 16px;
}

.kr-form-actions-wrapper .kr-delete-form-inline {
    margin-right: auto; /* Trycker radera-knappen till vänster */
}

.kr-form-actions-wrapper .kr-form-actions {
    margin-top: 0;
}

/* Delete form inline med andra knappar */
.kr-delete-form-inline {
    display: inline-flex;
}

/* ==========================================
   IMPORT PAGE
   ========================================== */
.kr-import-info ul {
    margin: 0;
    padding-left: 20px;
    color: var(--kr-gray-600);
}

.kr-import-info li {
    margin-bottom: 8px;
}

.kr-import-template {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--kr-gray-200);
}

.kr-import-form {
    margin: 0;
}

.kr-import-columns .kr-table {
    width: 100%;
    border-collapse: collapse;
}

.kr-import-columns .kr-table th,
.kr-import-columns .kr-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--kr-gray-200);
    font-size: 14px;
}

.kr-import-columns .kr-table th {
    background: var(--kr-gray-50);
    font-weight: 600;
    color: var(--kr-gray-700);
}

/* Import results */
.kr-import-result {
    background: #f0fdf4;
    border: 1px solid #86efac;
}

.kr-import-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
}

.kr-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 24px;
    border-radius: var(--kr-radius);
    min-width: 100px;
}

.kr-stat-num {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}

.kr-stat .kr-stat-label {
    font-size: 13px;
    margin-top: 4px;
    text-transform: none;
    letter-spacing: normal;
}

.kr-stat-success {
    background: #dcfce7;
    color: #166534;
}

.kr-stat-info {
    background: #dbeafe;
    color: #1e40af;
}

.kr-stat-warning {
    background: #fef3c7;
    color: #92400e;
}

.kr-stat-error {
    background: #fee2e2;
    color: #991b1b;
}

.kr-import-errors {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #86efac;
}

.kr-import-errors h3 {
    font-size: 14px;
    font-weight: 600;
    color: #991b1b;
    margin: 0 0 10px 0;
}

.kr-import-errors ul {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: #991b1b;
}

.kr-import-note {
    margin-top: 16px;
    padding: 12px;
    background: var(--kr-gray-50);
    border-radius: var(--kr-radius);
    font-size: 13px;
    color: var(--kr-gray-600);
}

.kr-import-actions {
    margin-top: 20px;
}

.kr-import-info-inline {
    margin-bottom: 16px;
    padding: 12px;
    background: var(--kr-gray-50);
    border-radius: var(--kr-radius);
    font-size: 14px;
    color: var(--kr-gray-600);
}

.kr-import-info-inline p {
    margin: 0;
}

.kr-import-details {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--kr-gray-200);
}

.kr-import-details summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--kr-primary);
    padding: 8px 0;
    user-select: none;
}

.kr-import-details summary:hover {
    color: var(--kr-primary-dark);
}

.kr-import-details[open] summary {
    margin-bottom: 12px;
}

.kr-table-compact {
    font-size: 13px;
}

table.kr-table-compact th,
table.kr-table-compact td {
    padding: 8px 12px;
}

/* Import progress */
.kr-import-progress {
    margin-top: 20px;
    padding: 16px;
    background: var(--kr-gray-50);
    border-radius: var(--kr-radius);
}

.kr-progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}

.kr-progress-text {
    color: var(--kr-gray-700);
}

.kr-progress-count {
    color: var(--kr-gray-500);
    font-family: monospace;
}

.kr-progress-bar {
    height: 8px;
    background: var(--kr-gray-200);
    border-radius: 4px;
    overflow: hidden;
}

.kr-progress-fill {
    height: 100%;
    background: var(--kr-primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.kr-progress-log {
    font-family: monospace;
    font-size: 12px;
    line-height: 1.6;
}

.kr-progress-log .success {
    color: var(--kr-success);
}

.kr-progress-log .error {
    color: var(--kr-error);
}

.kr-progress-log .skip {
    color: var(--kr-gray-500);
}

/* ==========================================
   HORIZONTAL TABS (Import, etc.)
   ========================================== */
.kr-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--kr-gray-200);
}

.kr-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--kr-gray-600);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s ease;
}

.kr-tab:hover {
    color: var(--kr-primary);
    text-decoration: none;
}

.kr-tab-active {
    color: var(--kr-primary);
    border-bottom-color: var(--kr-primary);
}

.kr-tab-icon {
    font-size: 16px;
}

.kr-tab-content {
    /* Container for tab content */
}

@media (max-width: 768px) {
    .kr-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .kr-tabs::-webkit-scrollbar {
        display: none;
    }

    .kr-tab {
        padding: 10px 16px;
        font-size: 13px;
        white-space: nowrap;
    }

    .kr-tab-icon {
        font-size: 14px;
    }
}

/* ==========================================
   DYNAMIC ADDRESSES
   ========================================== */
.kr-address-block {
    padding: 16px;
    margin-bottom: 16px;
    background: var(--kr-gray-50);
    border: 1px solid var(--kr-gray-200);
    border-radius: var(--kr-radius);
}

.kr-address-block:first-child {
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
}

.kr-address-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.kr-address-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--kr-gray-700);
}

.kr-extra-address {
    background: var(--kr-gray-50);
    border: 1px dashed var(--kr-gray-300);
}

/* Address row grid with columns */
.kr-address-row-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 16px;
    align-items: end;
}

@media (max-width: 768px) {
    .kr-address-row-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
}

.kr-address-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kr-address-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--kr-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kr-address-value {
    font-size: 14px;
    color: var(--kr-gray-800);
}

.kr-address-actions {
    margin-top: 12px;
}

.kr-maps-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.kr-maps-btn svg {
    flex-shrink: 0;
}

.kr-extra-address-actions {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--kr-gray-200);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.kr-btn-save-address {
    min-width: 140px;
}

.kr-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.kr-section-header .kr-section-title {
    margin: 0;
}

/* Address view blocks */
.kr-address-view-block {
    padding: 16px;
    margin-bottom: 16px;
    background: var(--kr-gray-50);
    border-radius: var(--kr-radius);
}

.kr-address-view-block:first-child {
    background: transparent;
    padding: 0;
    margin-bottom: 20px;
}

.kr-address-view-block:last-child {
    margin-bottom: 0;
}

.kr-address-type-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--kr-primary);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--kr-gray-200);
}

.kr-address-view-block:first-child .kr-address-type-label {
    border-bottom: none;
    padding-bottom: 0;
}

/* Form row with 2 columns */
.kr-form-row-2 {
    display: flex;
    gap: 16px;
}

.kr-form-row-2 > .kr-form-group:first-child {
    flex: 0 0 200px;
}

.kr-form-row-2 > .kr-form-group.kr-form-group-wide {
    flex: 1;
}

/* ==========================================
   5-COLUMN GRID
   ========================================== */
.kr-view-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

/* ==========================================
   FINANCIALS TABLE
   ========================================== */
.kr-financials-history {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--kr-gray-200);
}

.kr-subsection-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--kr-gray-700);
    margin: 0 0 12px 0;
}

/* Verifierad-badge */
.kr-verified-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: #059669;
    background: #d1fae5;
    padding: 2px 8px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 8px;
}

/* Ärenden på företagsdetalj */
.kr-cases-summary {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--kr-gray-600);
}

.kr-cases-group {
    margin-bottom: 20px;
}

.kr-cases-group:last-of-type {
    margin-bottom: 0;
}

.kr-cases-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kr-case-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--kr-gray-50);
    border-radius: var(--kr-radius);
    font-size: 14px;
}

.kr-case-number {
    font-weight: 600;
    color: var(--kr-gray-700);
    min-width: 100px;
}

.kr-case-title {
    flex: 1;
    color: var(--kr-gray-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kr-case-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.kr-case-status.kr-status-ny {
    background: #dbeafe;
    color: #1e40af;
}

.kr-case-status.kr-status-pagaende {
    background: #fef3c7;
    color: #92400e;
}

.kr-case-status.kr-status-vantar {
    background: #e5e7eb;
    color: #374151;
}

.kr-case-status.kr-status-avslutat {
    background: #d1fae5;
    color: #065f46;
}

.kr-case-status.kr-status-arkiverat {
    background: #f3f4f6;
    color: #6b7280;
}

.kr-case-date {
    font-size: 13px;
    color: var(--kr-gray-500);
    min-width: 80px;
}

.kr-tip {
    font-size: 13px;
    color: var(--kr-gray-500);
    font-style: italic;
    margin: 8px 0;
}

@media (max-width: 640px) {
    .kr-case-row {
        flex-wrap: wrap;
    }
    .kr-case-number {
        min-width: auto;
    }
    .kr-case-title {
        width: 100%;
        order: -1;
    }
    .kr-case-date {
        min-width: auto;
    }
}

.kr-financials-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.kr-financials-table th,
.kr-financials-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--kr-gray-200);
}

.kr-financials-table th {
    background: var(--kr-gray-50);
    font-weight: 600;
    color: var(--kr-gray-700);
}

.kr-financials-table td {
    color: var(--kr-gray-800);
}

.kr-financials-table td:nth-child(2),
.kr-financials-table td:nth-child(3),
.kr-financials-table th:nth-child(2),
.kr-financials-table th:nth-child(3) {
    text-align: right;
}

.kr-negative {
    color: var(--kr-error) !important;
}

/* Economy status badge */
.kr-economy-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    vertical-align: middle;
}

.kr-economy-row .kr-economy-badge {
    margin-left: 0;
}

.kr-economy-badge svg {
    flex-shrink: 0;
}

.kr-economy-positive {
    background: #dcfce7;
    color: #166534;
}

.kr-economy-negative {
    background: #fee2e2;
    color: #991b1b;
}

.kr-economy-empty {
    background: var(--kr-gray-100);
    color: var(--kr-gray-400);
}

.kr-badge-empty {
    background: var(--kr-gray-100);
    color: var(--kr-gray-400);
}

.kr-economy-link {
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}

.kr-economy-link:hover .kr-economy-badge {
    opacity: 0.8;
    transform: scale(1.02);
}

.kr-economy-link .kr-economy-positive {
    color: #166534;
}

.kr-economy-link .kr-economy-negative {
    color: #991b1b;
}

/* ==========================================
   META INFO (Created/Modified)
   ========================================== */
.kr-meta-info {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 16px 0;
    margin-top: 24px;
    border-top: 1px solid var(--kr-gray-200);
    font-size: 13px;
    color: var(--kr-gray-500);
}

.kr-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.kr-meta-item svg {
    opacity: 0.6;
}

.kr-meta-item strong {
    color: var(--kr-gray-700);
}

/* ==========================================
   BULK UPDATE MODAL
   ========================================== */
.kr-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.kr-modal-content {
    background: var(--kr-bg-card);
    padding: 30px 40px;
    border-radius: var(--kr-radius-lg);
    box-shadow: var(--kr-shadow-lg);
    max-width: 400px;
    width: 90%;
    text-align: center;
}

.kr-modal-content h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    color: var(--kr-gray-800);
}

.kr-progress-bar {
    height: 8px;
    background: var(--kr-gray-200);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 16px;
}

.kr-progress-fill {
    height: 100%;
    background: var(--kr-primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.kr-progress-text {
    font-size: 14px;
    color: var(--kr-gray-600);
    margin: 0 0 16px 0;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media screen and (max-width: 768px) {
    .kr-app {
        padding: 16px;
    }

    .kr-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .kr-header-form {
        flex-direction: column;
        align-items: flex-start;
    }

    .kr-title {
        font-size: 24px;
    }

    .kr-filter-row {
        flex-direction: column;
    }

    .kr-filter-group,
    .kr-filter-search {
        width: 100%;
        min-width: auto;
    }

    .kr-filter-group input[type="text"],
    .kr-filter-group input[type="date"],
    .kr-filter-group select {
        min-width: auto;
    }

    .kr-filter-buttons {
        width: 100%;
    }

    .kr-filter-buttons .kr-btn {
        flex: 1;
    }

    .kr-contacts-grid {
        grid-template-columns: 1fr;
    }

    /* Table card view handles layout — remove min-width so it doesn't force scroll */
    .kr-table-responsive .kr-list-table {
        min-width: 0;
    }

    .kr-list-table th,
    .kr-list-table td {
        padding: 6px 8px;
        font-size: 12px;
    }

    .kr-results-header {
        flex-wrap: wrap;
        gap: 12px;
    }

    .kr-results-header-right {
        flex-wrap: wrap;
        gap: 8px;
    }

    .kr-view-grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }

    .kr-form-row,
    .kr-form-row-2 {
        flex-direction: column;
        gap: 16px;
    }

    .kr-form-row-2 > .kr-form-group:first-child {
        flex: 1 1 auto;
    }

    .kr-form-row-2 > .kr-form-group.kr-form-group-wide {
        flex: 1;
    }

    .kr-form-actions {
        flex-direction: column;
    }

    .kr-form-actions .kr-btn {
        width: 100%;
    }

    .kr-import-stats {
        justify-content: center;
    }

    .kr-stat {
        flex: 1;
        min-width: 80px;
    }
}

/* ==========================================
   TOAST NOTIFICATIONS
   ========================================== */
.kr-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.kr-toast-visible {
    opacity: 1;
    transform: translateX(0);
}

.kr-toast-icon {
    font-size: 18px;
    font-weight: bold;
}

.kr-toast-message {
    font-size: 14px;
    color: var(--kr-gray-700);
}

.kr-toast-success {
    border-left: 4px solid var(--kr-success);
}

.kr-toast-success .kr-toast-icon {
    color: var(--kr-success);
}

.kr-toast-info {
    border-left: 4px solid var(--kr-info);
}

.kr-toast-info .kr-toast-icon {
    color: var(--kr-info);
}

.kr-toast-error {
    border-left: 4px solid var(--kr-error);
}

.kr-toast-error .kr-toast-icon {
    color: var(--kr-error);
}

/* ==========================================
   LEGACY SHORTCODE SUPPORT (kontakt_lista)
   ========================================== */
.kontaktregister-frontend {
    max-width: 100%;
    margin: 0 auto;
}

.kontaktregister-login-required {
    padding: 20px;
    background: var(--kr-gray-50, #f5f5f5);
    border-left: 4px solid var(--kr-primary);
    margin: 20px 0;
}

.kontaktregister-toolbar {
    margin-bottom: 15px;
}

.kontaktregister-add-button,
a.kontaktregister-add-button {
    display: inline-block;
    padding: 10px 20px;
    background: var(--kr-primary);
    color: #fff !important;
    text-decoration: none;
    border-radius: var(--kr-radius);
    font-weight: 500;
}

.kontaktregister-add-button:hover,
a.kontaktregister-add-button:hover {
    background: var(--kr-primary-dark);
    color: #fff !important;
    text-decoration: none;
}

.kontaktregister-search-form {
    margin-bottom: 20px;
}

.kontaktregister-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.kontaktregister-filter-group {
    flex: 0 0 auto;
}

.kontaktregister-search-input,
.kontaktregister-filters select {
    padding: 8px 12px;
    border: 1px solid var(--kr-gray-300);
    border-radius: var(--kr-radius);
    font-size: 14px;
}

.kontaktregister-search-button {
    padding: 8px 20px;
    background: var(--kr-primary);
    color: #fff;
    border: none;
    border-radius: var(--kr-radius);
    cursor: pointer;
}

.kontaktregister-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--kr-bg-card);
    box-shadow: var(--kr-shadow);
}

.kontaktregister-table th,
.kontaktregister-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--kr-gray-200);
}

.kontaktregister-table th {
    background: var(--kr-gray-50);
    font-weight: 600;
}

.kontaktregister-table tbody tr:hover {
    background: var(--kr-gray-50);
}

.kontaktregister-count {
    color: var(--kr-gray-500);
    font-size: 14px;
    margin-bottom: 10px;
}

.kontaktregister-no-results {
    padding: 20px;
    background: var(--kr-gray-50);
    text-align: center;
    color: var(--kr-gray-500);
}

@media screen and (max-width: 768px) {
    .kontaktregister-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .kontaktregister-table thead {
        display: none;
    }

    .kontaktregister-table tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid var(--kr-gray-200);
        border-radius: var(--kr-radius);
    }

    .kontaktregister-table td {
        display: block;
        padding: 10px 15px;
        padding-left: 50%;
        position: relative;
    }

    .kontaktregister-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        font-weight: 600;
    }
}

/* ==========================================
   CONTACT PERSONS SECTION
   ========================================== */
.kr-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.kr-section-header .kr-section-title {
    margin: 0;
}

.kr-contact-persons-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kr-contact-person-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--kr-gray-50);
    border: 1px solid var(--kr-gray-200);
    border-radius: var(--kr-radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kr-contact-person-card:hover {
    border-color: var(--kr-gray-300);
    box-shadow: var(--kr-shadow);
}

.kr-contact-person-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kr-contact-person-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--kr-gray-900);
}

.kr-contact-person-role {
    font-size: 0.875rem;
    color: var(--kr-gray-500);
    font-style: italic;
}

.kr-contact-person-details {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.kr-contact-person-email,
.kr-contact-person-phone {
    font-size: 0.875rem;
    color: var(--kr-gray-600);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.kr-contact-person-email:hover,
.kr-contact-person-phone:hover {
    color: var(--kr-primary);
}

.kr-contact-person-actions {
    flex-shrink: 0;
}

.kr-no-items {
    color: var(--kr-gray-500);
    font-style: italic;
    margin: 8px 0;
}

/* Responsive for contact persons */
@media screen and (max-width: 640px) {
    .kr-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .kr-contact-person-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .kr-contact-person-actions {
        align-self: flex-end;
    }

    .kr-contact-person-details {
        flex-direction: column;
        gap: 8px;
    }
}

/* ==========================================
   GLOBAL CONTACTS LIST (TABLE)
   ========================================== */
.kr-contacts-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--kr-bg-card);
    border-radius: var(--kr-radius-lg);
    overflow: hidden;
    box-shadow: var(--kr-shadow);
}

.kr-contacts-table th,
.kr-contacts-table td {
    text-align: left;
    padding: 14px 16px;
    border-bottom: 1px solid var(--kr-gray-100);
}

.kr-contacts-table th {
    background: var(--kr-gray-50);
    font-weight: 600;
    font-size: 13px;
    color: var(--kr-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.kr-contacts-table tbody tr:hover {
    background: var(--kr-gray-50);
}

.kr-contacts-table tbody tr:last-child td {
    border-bottom: none;
}

.kr-contact-name-cell {
    font-weight: 500;
    color: var(--kr-gray-900);
}

.kr-contact-role-cell {
    color: var(--kr-gray-500);
    font-style: italic;
}

.kr-contact-company-cell a {
    color: var(--kr-primary);
    font-weight: 500;
}

.kr-contact-company-cell a:hover {
    color: var(--kr-primary-dark);
}

.kr-contact-email-cell a,
.kr-contact-phone-cell a {
    color: var(--kr-gray-600);
}

.kr-contact-email-cell a:hover,
.kr-contact-phone-cell a:hover {
    color: var(--kr-primary);
}

.kr-contact-actions-cell {
    text-align: right;
    white-space: nowrap;
}

/* Responsive table */
@media screen and (max-width: 900px) {
    .kr-contacts-table {
        display: block;
    }

    .kr-contacts-table thead {
        display: none;
    }

    .kr-contacts-table tbody {
        display: block;
    }

    .kr-contacts-table tr {
        display: block;
        margin-bottom: 16px;
        background: var(--kr-bg-card);
        border-radius: var(--kr-radius);
        box-shadow: var(--kr-shadow);
        padding: 16px;
    }

    .kr-contacts-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid var(--kr-gray-100);
    }

    .kr-contacts-table td:last-child {
        border-bottom: none;
    }

    .kr-contacts-table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 12px;
        color: var(--kr-gray-500);
        text-transform: uppercase;
        letter-spacing: 0.025em;
    }

    .kr-contact-actions-cell {
        justify-content: flex-end;
    }

    .kr-contact-actions-cell::before {
        display: none;
    }
}

/* ==========================================
   AUTOCOMPLETE
   ========================================== */
.kr-search-wrapper {
    position: relative;
}

.kr-autocomplete {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
    border-top: none;
    border-radius: 0 0 var(--kr-radius) var(--kr-radius);
    box-shadow: var(--kr-shadow-lg);
    z-index: 1000;
    max-height: 320px;
    overflow-y: auto;
}

.kr-autocomplete-item {
    padding: 12px 14px;
    font-size: 14px;
    color: var(--kr-gray-700);
    cursor: pointer;
    border-bottom: 1px solid var(--kr-gray-100);
    transition: background 0.1s ease;
}

.kr-autocomplete-item:last-child {
    border-bottom: none;
}

.kr-autocomplete-item:hover,
.kr-autocomplete-item.selected {
    background: var(--kr-gray-50);
    color: var(--kr-gray-900);
}

.kr-autocomplete-item strong {
    color: var(--kr-primary);
    font-weight: 600;
}

/* ==========================================
   TAG AUTOCOMPLETE
   ========================================== */
.kr-tag-autocomplete {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
    border-top: none;
    border-radius: 0 0 var(--kr-radius) var(--kr-radius);
    box-shadow: var(--kr-shadow-lg);
    z-index: 1000;
    max-height: 240px;
    overflow-y: auto;
}

.kr-tag-item {
    padding: 10px 14px;
    font-size: 14px;
    color: var(--kr-gray-700);
    cursor: pointer;
    border-bottom: 1px solid var(--kr-gray-100);
    transition: background 0.1s ease;
}

.kr-tag-item:last-child {
    border-bottom: none;
}

.kr-tag-item:hover,
.kr-tag-item.selected {
    background: var(--kr-gray-50);
    color: var(--kr-gray-900);
}

.kr-tag-item strong {
    color: var(--kr-primary);
    font-weight: 600;
}

/* ==========================================
   COMPANY AUTOCOMPLETE (for contact person form)
   ========================================== */
.kr-company-autocomplete-wrapper {
    position: relative;
}

.kr-company-search {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid var(--kr-input-border);
    border-radius: var(--kr-radius);
    background: var(--kr-input-bg);
    color: var(--kr-text);
    font-family: inherit;
}

.kr-company-search:focus {
    outline: none;
    border-color: var(--kr-primary);
    box-shadow: var(--kr-focus-shadow-light);
}

.kr-company-autocomplete {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
    border-top: none;
    border-radius: 0 0 var(--kr-radius) var(--kr-radius);
    box-shadow: var(--kr-shadow-lg);
    z-index: 1000;
    max-height: 280px;
    overflow-y: auto;
}

.kr-company-item {
    padding: 12px 14px;
    font-size: 14px;
    color: var(--kr-gray-700);
    cursor: pointer;
    border-bottom: 1px solid var(--kr-gray-100);
    transition: background 0.1s ease;
}

.kr-company-item:last-child {
    border-bottom: none;
}

.kr-company-item:hover,
.kr-company-item.selected {
    background: var(--kr-gray-50);
    color: var(--kr-gray-900);
}

.kr-company-item strong {
    color: var(--kr-primary);
    font-weight: 600;
}

/* ==========================================
   CONTACT PERSON CARDS GRID
   ========================================== */
.kr-kp-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.kr-kp-card {
    display: flex;
    flex-direction: column;
    background: var(--kr-bg-card);
    border-radius: var(--kr-radius-lg);
    box-shadow: var(--kr-shadow);
    border: 1px solid var(--kr-border);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    height: 280px;
}

.kr-kp-card:hover {
    box-shadow: var(--kr-shadow-lg);
    transform: translateY(-2px);
    text-decoration: none;
    border-color: var(--kr-primary);
}

.kr-kp-card-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--kr-border);
}

.kr-kp-card-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--kr-gray-900);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.kr-kp-card:hover .kr-kp-card-name {
    color: var(--kr-primary);
}

.kr-kp-card-role {
    font-size: 13px;
    color: var(--kr-gray-500);
    font-style: italic;
}

.kr-kp-card-body {
    padding: 12px 20px 16px;
}

.kr-kp-card-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 14px;
    color: var(--kr-gray-600);
}

.kr-kp-card-row .kr-icon {
    font-size: 14px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.kr-kp-card-company {
    font-weight: 500;
    color: var(--kr-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

a.kr-kp-card-company:hover {
    color: var(--kr-primary-dark, #1d4ed8);
}

.kr-kp-card-footer {
    padding: 12px 20px;
    background: var(--kr-bg-alt);
    border-top: 1px solid var(--kr-border);
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}

/* Klickbara länkar i kontaktkort */
.kr-kp-link {
    color: var(--kr-gray-600);
    text-decoration: none;
    transition: color 0.15s ease;
}

.kr-kp-link:hover {
    color: var(--kr-primary);
}

/* Klickbart kort (div med data-href) */
.kr-kp-card[data-href] {
    cursor: pointer;
}

/* Responsive contact person cards */
@media screen and (max-width: 640px) {
    .kr-kp-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* Responsive top nav */
@media screen and (max-width: 640px) {
    .kr-top-nav {
        flex-wrap: wrap;
    }

    .kr-nav-link {
        flex: 1;
        justify-content: center;
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* ==========================================
   DÖLJ TURNKEY LINUX FOOTER PÅ PLUGIN-SIDOR
   ========================================== */
/* Dölj footer-text på sidor som innehåller kontaktregister-appen */
.kr-app-container ~ .site-info,
.kr-app-container ~ footer .site-info,
.page-template-default .site-info:has(~ .kr-app-container),
body.page .site-info {
    display: none !important;
}

/* Dölj specifikt TurnKey-texten om den finns */
.site-info a[href*="turnkeylinux"],
footer a[href*="turnkeylinux"],
.footer-info a[href*="turnkeylinux"],
#colophon a[href*="turnkeylinux"] {
    display: none !important;
}

/* Alternativ: dölj hela footern på kontakter-sidor */
body.page-kontakter .site-info,
body.page-kontakter #colophon .site-info,
body.page-kontakter footer .powered-by,
body.page-kontakter .footer-credits {
    display: none !important;
}

/* ==========================================
   INSTÄLLNINGAR / SETTINGS
   ========================================== */

.kr-settings {
    max-width: 1000px;
    margin: 0 auto;
}

.kr-settings h1 {
    margin: 0 0 25px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--kr-border);
    font-size: 28px;
    color: var(--kr-text);
}

.kr-settings-section {
    margin-bottom: 30px;
}

.kr-settings-section h2 {
    margin: 0 0 10px 0;
    font-size: 20px;
    color: var(--kr-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.kr-settings-description {
    color: var(--kr-text-muted);
    margin-bottom: 20px;
    font-size: 14px;
}

.kr-settings-note {
    color: var(--kr-text-muted);
    font-size: 12px;
    margin-top: 8px;
}

/* Case Types Settings */
.kr-case-types-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.kr-case-type-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.kr-case-type-input {
    flex: 1;
    max-width: 300px;
    padding: 8px 12px;
    border: 1px solid var(--kr-input-border);
    border-radius: var(--kr-radius);
    font-size: 14px;
    background: var(--kr-input-bg);
    color: var(--kr-text);
}

.kr-case-type-input:focus {
    outline: none;
    border-color: var(--kr-primary);
    box-shadow: var(--kr-focus-shadow-light);
}

.kr-case-type-add {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-top: 8px;
    border-top: 1px dashed var(--kr-gray-200);
}

.kr-case-type-add .kr-btn-danger {
    background: transparent;
    color: var(--kr-error);
    border: 1px solid var(--kr-error);
    padding: 4px 10px;
    font-size: 16px;
    line-height: 1;
}

.kr-case-type-add .kr-btn-danger:hover {
    background: var(--kr-error);
    color: #fff;
}

/* Closed case notice */
.kr-closed-notice {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: var(--kr-radius);
    padding: 12px 16px;
    margin-top: 12px;
    font-size: 14px;
    color: #92400e;
}

.kr-closed-notice strong {
    color: #b45309;
}

/* Closed case banner in view */
.kr-closed-case-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: var(--kr-radius-lg);
    padding: 16px 20px;
    margin-bottom: 20px;
}

.kr-closed-case-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kr-closed-icon {
    font-size: 24px;
}

.kr-closed-case-info strong {
    display: block;
    color: #92400e;
    font-size: 15px;
}

.kr-closed-case-info p {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: #a16207;
}

.kr-reopen-checkbox {
    font-size: 13px;
    color: var(--kr-gray-600);
}

/* Cron Status */
.kr-cron-status {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.kr-cron-box {
    background: var(--kr-gray-50, #f7fafc);
    border: 1px solid var(--kr-border, #e2e8f0);
    border-radius: 8px;
    padding: 15px 20px;
}

.kr-cron-box h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: var(--kr-text-muted, #718096);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kr-cron-time {
    font-size: 14px;
    color: var(--kr-text, #2d3748);
    margin: 0;
}

.kr-cron-time.kr-cron-na {
    color: #a0aec0;
    font-style: italic;
}

.kr-cron-time.kr-cron-error {
    color: #e53e3e;
    font-weight: 600;
}

.kr-cron-results {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.kr-cron-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 500;
}

.kr-cron-stat.kr-cron-success {
    background: rgba(16, 185, 129, 0.15);
    color: #16a34a;
}

.kr-cron-stat.kr-cron-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.kr-cron-stat.kr-cron-skipped {
    background: var(--kr-gray-100, #e2e8f0);
    color: var(--kr-text-muted, #4a5568);
}

.kr-cron-alert {
    margin-top: 15px;
    padding: 12px 15px;
    border-radius: 6px;
    font-size: 13px;
}

.kr-cron-alert-warning {
    background: #fffbeb;
    border: 1px solid #f59e0b;
    color: #92400e;
}

.kr-cron-stats {
    background: #edf2f7;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.kr-cron-stats p {
    margin: 5px 0;
    font-size: 14px;
    color: #4a5568;
}

.kr-cron-actions {
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
}

/* Roller info */
.kr-roles-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.kr-role-box {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px;
}

.kr-role-box h4 {
    margin: 0 0 8px 0;
    font-size: 15px;
    color: #2d3748;
}

.kr-role-box p {
    margin: 0;
    font-size: 13px;
    color: #718096;
    line-height: 1.5;
}

/* Användartabell */
.kr-users-list {
    margin-bottom: 30px;
}

.kr-users-list h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: #2d3748;
}

.kr-users-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
    border-radius: 8px;
    overflow: hidden;
}

.kr-users-table th,
.kr-users-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--kr-border);
}

.kr-users-table th {
    background: var(--kr-bg-alt);
    font-weight: 600;
    font-size: 13px;
    color: var(--kr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kr-users-table td {
    font-size: 14px;
    color: var(--kr-text);
}

.kr-users-table tr:last-child td {
    border-bottom: none;
}

.kr-users-table tr:hover td {
    background: var(--kr-bg-alt);
}

.kr-user-role-select {
    padding: 6px 10px;
    border: 1px solid var(--kr-input-border);
    border-radius: 4px;
    font-size: 13px;
    background: var(--kr-input-bg);
    color: var(--kr-text);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.kr-user-role-select:focus {
    outline: none;
    border-color: #4299e1;
    box-shadow: var(--kr-focus-shadow-light);
}

.kr-role-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.kr-role-badge.kr-role-admin {
    background: #e9d8fd;
    color: #6b46c1;
}

/* Lägg till användare */
.kr-add-user {
    border-top: 1px solid #e2e8f0;
    padding-top: 25px;
}

.kr-add-user h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: #2d3748;
}

.kr-form-row-inline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
}

/* kr-btn-small → legacy alias för kr-btn-sm */
.kr-btn-small {
    padding: 6px 12px;
    font-size: 13px;
}

/* Modal overlay */
.kr-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.kr-modal {
    background: var(--kr-bg-card);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    max-width: 450px;
    width: 90%;
    text-align: center;
}

.kr-modal h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    color: #2d3748;
}

.kr-progress {
    background: #e2e8f0;
    border-radius: 10px;
    height: 20px;
    overflow: hidden;
    margin-bottom: 15px;
}

.kr-progress-fill {
    background: linear-gradient(90deg, #4299e1, #667eea);
    height: 100%;
    width: 0;
    transition: width 0.3s ease;
    border-radius: 10px;
}

.kr-progress-text {
    font-size: 14px;
    color: #4a5568;
    margin-bottom: 20px;
}

/* Responsive settings */
@media screen and (max-width: 640px) {
    .kr-settings h1 {
        font-size: 22px;
    }

    .kr-cron-status {
        grid-template-columns: 1fr;
    }

    .kr-roles-info {
        grid-template-columns: 1fr;
    }

    .kr-form-row-inline {
        grid-template-columns: 1fr;
    }

    .kr-users-table {
        font-size: 12px;
    }

    .kr-users-table th,
    .kr-users-table td {
        padding: 8px 10px;
    }
}

/* ==========================================
   SECTION HEADERS WITH ACTIONS
   ========================================== */
.kr-section-header-with-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
}

.kr-section-header-with-actions .kr-section-title {
    margin: 0;
    flex: 1;
}

.kr-section-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* Icon buttons for section actions */
.kr-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--kr-gray-600);
    background: var(--kr-gray-100);
    border: 1px solid var(--kr-gray-200);
    border-radius: var(--kr-radius);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.kr-icon-btn:hover {
    background: var(--kr-gray-200);
    color: var(--kr-gray-800);
    text-decoration: none;
}

.kr-icon-btn-emoji {
    font-size: 12px;
    line-height: 1;
}

.kr-icon-btn-text {
    font-size: 12px;
}

.kr-icon-btn-edit:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    color: var(--kr-primary);
}

.kr-icon-btn-add:hover {
    background: #dcfce7;
    border-color: #86efac;
    color: var(--kr-success);
}

/* ==========================================
   CLICKABLE ADDRESS LINKS (GOOGLE MAPS)
   ========================================== */
.kr-address-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--kr-primary);
    text-decoration: underline;
    text-decoration-color: var(--kr-gray-300);
    text-underline-offset: 3px;
    padding: 8px 12px;
    margin: -8px -12px;
    border-radius: var(--kr-radius);
    cursor: pointer;
    transition: all 0.15s ease;
}

.kr-address-link:hover {
    color: var(--kr-primary-dark);
    background: #dbeafe;
    text-decoration-color: var(--kr-primary);
}

.kr-maps-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--kr-primary);
    border-radius: 4px;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.kr-maps-badge svg {
    flex-shrink: 0;
}

.kr-address-link:hover .kr-maps-badge {
    background: var(--kr-primary-dark);
}

.kr-address-full-row {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--kr-gray-200);
}

.kr-address-full-row .kr-view-value {
    font-size: 15px;
}

/* ==========================================
   2-COLUMN VIEW GRID
   ========================================== */
.kr-view-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* ==========================================
   SECTION NOTES
   ========================================== */
.kr-section-note {
    margin: 12px 0 0 0;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--kr-gray-500);
    background: var(--kr-gray-50);
    border-radius: var(--kr-radius);
    font-style: italic;
}

/* Muted value styling */
.kr-view-value-muted {
    color: var(--kr-gray-400);
}

/* Card footer actions - buttons at bottom right */
.kr-card-footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--kr-gray-100);
}

/* ==========================================
   ADDRESS GROUPS & BLOCKS
   ========================================== */
.kr-address-group {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--kr-gray-200);
}

.kr-address-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.kr-address-group-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--kr-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
}

.kr-address-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.kr-address-type-badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--kr-primary);
    background: #dbeafe;
    border-radius: 4px;
}

.kr-badge-muted {
    color: var(--kr-gray-500);
    background: var(--kr-gray-100);
}

.kr-icon-btn-sm {
    padding: 4px 6px;
}

.kr-icon-btn-sm .kr-icon-btn-emoji {
    font-size: 11px;
}

.kr-address-placeholder {
    background: var(--kr-gray-50);
    border: 1px dashed var(--kr-gray-300);
}

.kr-empty-text {
    margin: 0;
    font-size: 13px;
    color: var(--kr-gray-500);
    font-style: italic;
}

/* ==========================================
   LOCKED/READONLY FORM FIELDS
   ========================================== */
.kr-form-section-readonly {
    background: var(--kr-gray-50);
}

.kr-locked-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--kr-gray-500);
    background: var(--kr-gray-200);
    border-radius: 4px;
    vertical-align: middle;
}

input.kr-input-readonly,
select.kr-input-readonly,
textarea.kr-input-readonly,
.kr-form-group .kr-input-readonly {
    background: var(--kr-gray-100);
    color: var(--kr-gray-600);
    cursor: not-allowed;
    border-color: var(--kr-gray-200);
}

/* Card footer action button */
.kr-card-footer-action {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--kr-gray-200);
}

/* ==========================================
   RESPONSIVE - SECTION HEADERS
   ========================================== */
@media screen and (max-width: 640px) {
    .kr-section-header-with-actions {
        flex-wrap: wrap;
    }

    .kr-section-actions {
        width: 100%;
        justify-content: flex-start;
        margin-top: 8px;
    }

    .kr-view-grid-2 {
        grid-template-columns: 1fr;
    }

    .kr-icon-btn-text {
        display: none;
    }

    .kr-icon-btn {
        padding: 6px 8px;
    }
}

/* ==========================================
   ÄRENDEHANTERING / CASES
   ========================================== */

/* Ärende cards grid */
.kr-arende-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
}

.kr-arende-card {
    background: var(--kr-bg-card);
    border-radius: var(--kr-radius-lg);
    box-shadow: var(--kr-shadow);
    border: 1px solid var(--kr-border);
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    display: flex;
    flex-direction: column;
}

.kr-arende-card:hover {
    box-shadow: var(--kr-shadow-lg);
    transform: translateY(-2px);
    border-color: var(--kr-primary);
}

a.kr-arende-card {
    text-decoration: none;
    color: inherit;
}

a.kr-arende-card:hover {
    text-decoration: none;
}

.kr-arende-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--kr-bg-alt);
    border-bottom: 1px solid var(--kr-border);
}

.kr-arende-id {
    font-size: 13px;
    font-weight: 600;
    color: var(--kr-gray-500);
}

.kr-arende-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--kr-gray-900);
    margin: 12px 16px 8px;
    line-height: 1.3;
}

a.kr-arende-card:hover .kr-arende-title {
    color: var(--kr-primary);
}

.kr-arende-company {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    font-size: 14px;
    color: var(--kr-gray-600);
}

.kr-arende-company .kr-icon {
    font-size: 14px;
}

.kr-arende-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    margin-top: auto;
    border-top: 1px solid var(--kr-border);
    background: var(--kr-bg-alt);
}

.kr-arende-date,
.kr-arende-updated {
    font-size: 12px;
    color: var(--kr-gray-500);
}

/* Status badges */
.kr-arende-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 20px;
    white-space: nowrap;
}

.kr-status-ny {
    background: #dbeafe;
    color: #1e40af;
}

.kr-status-pagaende {
    background: #fef3c7;
    color: #92400e;
}

.kr-status-vantar {
    background: #e0e7ff;
    color: #4338ca;
}

.kr-status-avslutat {
    background: #dcfce7;
    color: #166534;
}

.kr-status-arkiverat {
    background: #f3f4f6;
    color: #6b7280;
}

/* Priority badges */
.kr-arende-prioritet {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    white-space: nowrap;
}

.kr-prioritet-lag {
    background: var(--kr-gray-100);
    color: var(--kr-gray-600);
}

.kr-prioritet-normal {
    background: #dbeafe;
    color: #1e40af;
}

.kr-prioritet-hog {
    background: #fef3c7;
    color: #92400e;
}

.kr-prioritet-kritisk {
    background: #fee2e2;
    color: #991b1b;
}

/* Ärende view page */
.kr-arende-header-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.kr-arende-description,
.kr-arende-beskrivning {
    white-space: pre-wrap;
    line-height: 1.6;
    color: var(--kr-gray-700);
}

.kr-arende-beskrivning p {
    margin: 0 0 12px 0;
}

.kr-arende-beskrivning p:last-child {
    margin-bottom: 0;
}

/* Empty state */
.kr-empty-state {
    text-align: center;
    padding: 40px 24px;
    color: var(--kr-gray-500);
}

/* Ärende filter tabs */
.kr-status-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.kr-status-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--kr-gray-600);
    background: var(--kr-gray-100);
    border: 1px solid var(--kr-gray-200);
    border-radius: var(--kr-radius);
    text-decoration: none;
    transition: all 0.15s ease;
}

.kr-status-tab:hover {
    background: var(--kr-gray-200);
    color: var(--kr-gray-800);
    text-decoration: none;
}

.kr-status-tab.kr-tab-active {
    background: var(--kr-primary);
    color: #fff;
    border-color: var(--kr-primary);
}

.kr-status-tab.kr-tab-active:hover {
    background: var(--kr-primary-dark);
}

.kr-status-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.kr-tab-active .kr-status-count {
    background: rgba(255, 255, 255, 0.2);
}

/* Kopplat företag/kontakt links */
.kr-linked-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--kr-gray-50);
    border: 1px solid var(--kr-gray-200);
    border-radius: var(--kr-radius);
    font-size: 14px;
    color: var(--kr-gray-700);
    text-decoration: none;
    transition: all 0.15s ease;
}

.kr-linked-item:hover {
    background: var(--kr-gray-100);
    border-color: var(--kr-gray-300);
    text-decoration: none;
}

.kr-linked-item .kr-icon {
    font-size: 16px;
}

.kr-linked-item-name {
    font-weight: 500;
    color: var(--kr-primary);
}

/* Ärende autocomplete */
.kr-arende-autocomplete-wrapper {
    position: relative;
}

.kr-arende-search {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid var(--kr-input-border);
    border-radius: var(--kr-radius);
    background: var(--kr-input-bg);
    color: var(--kr-text);
    font-family: inherit;
}

.kr-arende-search:focus {
    outline: none;
    border-color: var(--kr-primary);
    box-shadow: var(--kr-focus-shadow-light);
}

.kr-arende-autocomplete {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
    border-top: none;
    border-radius: 0 0 var(--kr-radius) var(--kr-radius);
    box-shadow: var(--kr-shadow-lg);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
}

.kr-arende-autocomplete-item {
    padding: 12px 14px;
    font-size: 14px;
    color: var(--kr-gray-700);
    cursor: pointer;
    border-bottom: 1px solid var(--kr-gray-100);
    transition: background 0.1s ease;
}

.kr-arende-autocomplete-item:last-child {
    border-bottom: none;
}

.kr-arende-autocomplete-item:hover,
.kr-arende-autocomplete-item.selected {
    background: var(--kr-gray-50);
    color: var(--kr-gray-900);
}

.kr-arende-autocomplete-item strong {
    color: var(--kr-gray-900);
    font-weight: 600;
}

.kr-arende-autocomplete-item small {
    display: block;
    margin-top: 2px;
}

/* Ärende detaljvy layout */
.kr-arende-detail-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
}

.kr-arende-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.kr-arende-sidebar .kr-card {
    position: sticky;
    top: 20px;
}

/* Info-lista i sidebar */
.kr-info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kr-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kr-info-item-full {
    padding-top: 12px;
    border-top: 1px solid var(--kr-gray-100);
}

.kr-info-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--kr-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kr-info-value {
    font-size: 14px;
    color: var(--kr-gray-800);
}

.kr-info-value a {
    color: var(--kr-primary);
}

/* Inline statusändring */
.kr-inline-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.kr-select-sm {
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--kr-gray-300);
    border-radius: var(--kr-radius);
}

/* Tidslinje */
.kr-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.kr-timeline-item {
    display: flex;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--kr-gray-100);
}

.kr-timeline-item:last-child {
    border-bottom: none;
}

.kr-timeline-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kr-gray-100);
    border-radius: 50%;
    font-size: 14px;
}

.kr-timeline-event .kr-timeline-icon {
    background: #dbeafe;
}

.kr-timeline-note .kr-timeline-icon {
    background: #fef3c7;
}

.kr-timeline-content {
    flex: 1;
    min-width: 0;
}

.kr-timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.kr-timeline-author {
    font-size: 13px;
    font-weight: 600;
    color: var(--kr-gray-800);
}

.kr-timeline-date {
    font-size: 12px;
    color: var(--kr-gray-500);
}

.kr-timeline-text {
    font-size: 14px;
    color: var(--kr-gray-700);
    line-height: 1.5;
}

/* Anteckningstypsbadges */
.kr-note-type-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 8px;
    vertical-align: middle;
}

.kr-note-type-anteckning {
    background: #e5e7eb;
    color: #374151;
}

.kr-note-type-samtal {
    background: #dbeafe;
    color: #1e40af;
}

.kr-note-type-mail {
    background: #fce7f3;
    color: #9d174d;
}

.kr-note-type-atgard {
    background: #d1fae5;
    color: #065f46;
}

/* Anteckningsformulär */
.kr-note-form-row {
    margin-bottom: 8px;
}

.kr-textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid var(--kr-gray-300);
    border-radius: var(--kr-radius);
    resize: vertical;
    font-family: inherit;
}

.kr-textarea:focus {
    outline: none;
    border-color: var(--kr-primary);
    box-shadow: var(--kr-focus-shadow-light);
}

/* Inline-skapande av företag/kontakt */
.kr-btn-link {
    background: none;
    border: none;
    color: var(--kr-primary);
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
}

.kr-btn-link:hover {
    color: var(--kr-primary-dark);
}

.kr-inline-create {
    margin-top: 10px;
    padding: 12px;
    background: var(--kr-gray-50);
    border: 1px solid var(--kr-gray-200);
    border-radius: var(--kr-radius);
}

.kr-inline-create-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.kr-inline-create input[type="text"] {
    flex: 1;
    min-width: 120px;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid var(--kr-gray-300);
    border-radius: var(--kr-radius);
}

/* Prenumerations-checkboxar (kontaktperson) */
.kr-app .kr-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}
.kr-app .kr-checkbox-group-inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
}
.kr-app .kr-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--kr-text);
    cursor: pointer;
    font-weight: 400;
}
.kr-app .kr-checkbox-label input[type="checkbox"] {
    width: auto;
    margin: 0;
}
.kr-app .kr-inline-subscriptions {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--kr-border);
}
.kr-app .kr-inline-subscriptions-label {
    font-size: 11px;
    color: var(--kr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.kr-app .kr-tag-subscription {
    background: rgba(37, 99, 235, 0.10);
    color: var(--kr-primary);
}

/* "Behöver företag valt"-stil för knappar som logiskt kräver företag.
   Knappen förblir klickbar — JS visar toast/highlight vid klick utan företag. */
.kr-btn-link.kr-btn-needs-company {
    opacity: 0.55;
    cursor: help;
}
.kr-btn-link.kr-btn-needs-company:hover {
    opacity: 0.8;
}

/* Kunddata-kort i EKF-formuläret */
.kr-app .kr-company-card {
    margin-top: 12px;
    padding: 14px 16px;
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius-md);
    font-size: 13px;
    line-height: 1.5;
}
.kr-app .kr-company-card-loading {
    color: var(--kr-text-muted);
    font-style: italic;
    text-align: center;
    padding: 8px 0;
}
.kr-app .kr-company-card-header {
    margin-bottom: 8px;
}
.kr-app .kr-company-card-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.kr-app .kr-company-card-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--kr-text);
}
.kr-app .kr-company-card-orgnr {
    margin-top: 2px;
    font-size: 11px;
    color: var(--kr-text-muted);
    letter-spacing: 0.02em;
}
.kr-app .kr-company-card-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
}
.kr-app .kr-company-card-status.kr-status-success {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}
.kr-app .kr-company-card-status.kr-status-warning {
    background: rgba(217, 119, 6, 0.14);
    color: #b45309;
}
.kr-app .kr-company-card-status.kr-status-danger {
    background: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
}
.kr-app .kr-company-card-status.kr-status-muted {
    background: var(--kr-bg-alt);
    color: var(--kr-text-muted);
}
.kr-app .kr-company-card-address {
    margin-top: 6px;
    color: var(--kr-text);
}
.kr-app .kr-company-card-economy {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--kr-border);
    font-size: 12px;
    color: var(--kr-text-muted);
}
.kr-app .kr-company-card-economy strong {
    color: var(--kr-text);
    font-variant-numeric: tabular-nums;
}
.kr-app .kr-company-card-freshness {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--kr-border);
    font-size: 11px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.kr-app .kr-company-card-freshness.kr-freshness-fresh {
    color: #15803d;
}
.kr-app .kr-company-card-freshness.kr-freshness-fresh::before {
    content: "✓";
    font-weight: 700;
}
.kr-app .kr-company-card-freshness.kr-freshness-stale {
    color: #b45309;
}
.kr-app .kr-company-card-freshness.kr-freshness-stale::before {
    content: "⚠";
}
.kr-app .kr-company-card-freshness.kr-freshness-failed {
    color: #b91c1c;
}
.kr-app .kr-company-card-freshness.kr-freshness-failed::before {
    content: "⚠";
}
.kr-app .kr-company-card-freshness.kr-freshness-never,
.kr-app .kr-company-card-freshness.kr-freshness-muted {
    color: var(--kr-text-muted);
}
.kr-app .kr-company-card-freshness .kr-company-card-refresh {
    margin-left: auto;
    font-size: 11px;
}
.kr-app .kr-company-card-feedback {
    margin-top: 8px;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 4px;
    border-left: 3px solid var(--kr-border);
    background: var(--kr-bg-alt);
}
.kr-app .kr-company-card-feedback.kr-company-card-feedback-ok {
    border-left-color: #16a34a;
    background: rgba(22, 163, 74, 0.06);
    color: #15803d;
}
.kr-app .kr-company-card-feedback.kr-company-card-feedback-warn {
    border-left-color: #d97706;
    background: rgba(217, 119, 6, 0.07);
    color: #b45309;
}

.kr-inline-info {
    margin-top: 8px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--kr-text, #1f2937);
    background: var(--kr-bg-alt, #f3f4f6);
    border-left: 3px solid var(--kr-border, #e5e7eb);
    border-radius: 4px;
    font-style: normal;
}
.kr-inline-info.kr-inline-info-success {
    border-left-color: #16a34a;
    background: rgba(22, 163, 74, 0.06);
}
.kr-inline-info.kr-inline-info-warn {
    border-left-color: #d97706;
    background: rgba(217, 119, 6, 0.07);
}
.kr-inline-info.kr-inline-info-error {
    border-left-color: #dc2626;
    background: rgba(220, 38, 38, 0.06);
}
.kr-inline-info .kr-allabolag-headline {
    font-weight: 500;
    margin-bottom: 4px;
}
.kr-inline-info .kr-allabolag-summary {
    font-size: 12px;
    color: var(--kr-text-muted, #6b7280);
    line-height: 1.5;
}

.kr-subsection-title {
    margin-top: 24px;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--kr-text, #1f2937);
}

/* Multi-select */
.kr-multi-select {
    width: 100%;
    min-height: 100px;
    padding: 8px;
    font-size: 14px;
    border: 1px solid var(--kr-gray-300);
    border-radius: var(--kr-radius);
}

/* Ärende typ badge */
.kr-arende-type {
    padding: 4px 0;
}

.kr-badge-type {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 500;
    background: var(--kr-gray-100);
    color: var(--kr-gray-600);
    border-radius: 4px;
}

/* Responsive ärenden */
@media screen and (max-width: 768px) {
    .kr-arende-list {
        grid-template-columns: 1fr;
    }

    .kr-arende-detail-layout {
        grid-template-columns: 1fr;
    }

    .kr-arende-sidebar {
        order: -1;
    }

    .kr-arende-sidebar .kr-card {
        position: static;
    }

    .kr-status-tabs {
        flex-direction: column;
    }

    .kr-status-tab {
        justify-content: center;
    }

    .kr-inline-create-inner {
        flex-direction: column;
    }

    .kr-inline-create input[type="text"] {
        width: 100%;
    }
}

/* ==========================================
   SMART PASTE - Klistra in kontaktuppgifter
   ========================================== */
.kr-paste-textarea {
    width: 100%;
    min-height: 120px;
    padding: 14px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    border: 1px solid var(--kr-input-border);
    border-radius: var(--kr-radius);
    background: var(--kr-input-bg);
    color: var(--kr-text);
    resize: vertical;
    transition: all 0.15s ease;
}

.kr-paste-textarea:focus {
    outline: none;
    border-color: var(--kr-primary);
    box-shadow: var(--kr-focus-shadow-light);
}

/* ==========================================
   DYNAMISKA TELEFONNUMMER
   ========================================== */
.kr-phone-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.kr-phone-row:last-of-type {
    margin-bottom: 0;
}

.kr-phone-type {
    flex: 0 0 120px;
}

.kr-phone-type select {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--kr-input-border);
    border-radius: var(--kr-radius);
    background: var(--kr-input-bg);
    color: var(--kr-text);
}

.kr-phone-type select:focus {
    outline: none;
    border-color: var(--kr-primary);
    box-shadow: var(--kr-focus-shadow-light);
}

.kr-phone-number {
    flex: 1;
}

.kr-phone-number input {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid var(--kr-input-border);
    border-radius: var(--kr-radius);
    background: var(--kr-input-bg);
    color: var(--kr-text);
}

.kr-phone-number input:focus {
    outline: none;
    border-color: var(--kr-primary);
    box-shadow: var(--kr-focus-shadow-light);
}

.kr-phone-remove {
    flex: 0 0 auto;
    padding: 8px 12px;
    font-size: 14px;
    color: var(--kr-gray-400);
    background: transparent;
    border: 1px solid var(--kr-gray-200);
    border-radius: var(--kr-radius);
    cursor: pointer;
    transition: all 0.15s ease;
}

.kr-phone-remove:hover {
    color: var(--kr-error);
    border-color: var(--kr-error);
    background: rgba(220, 38, 38, 0.05);
}


/* Telefonnummer i vy-läge */
.kr-phones-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kr-phone-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kr-phone-type-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--kr-gray-600);
    background: var(--kr-gray-100);
    border-radius: 4px;
    min-width: 60px;
    text-align: center;
}

.kr-phone-link {
    color: var(--kr-primary);
    text-decoration: none;
}

.kr-phone-link:hover {
    color: var(--kr-primary-dark);
}

/* Responsive telefonnummer */
@media screen and (max-width: 640px) {
    .kr-phone-row {
        flex-wrap: wrap;
    }

    .kr-phone-type {
        flex: 0 0 100%;
    }

    .kr-phone-number {
        flex: 1;
        min-width: 0;
    }
}

/* ==========================================
   PAGINERING
   ========================================== */
.kr-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding: 16px 0;
}

.kr-pagination-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--kr-radius);
    transition: all 0.15s ease;
}

a.kr-pagination-btn {
    background: var(--kr-bg-card);
    color: var(--kr-primary);
    border: 1px solid var(--kr-border);
}

a.kr-pagination-btn:hover {
    background: var(--kr-primary);
    color: #fff;
    border-color: var(--kr-primary);
    text-decoration: none;
}

.kr-pagination-disabled {
    background: var(--kr-bg-alt);
    color: var(--kr-text-muted);
    border: 1px solid var(--kr-border);
    cursor: not-allowed;
    opacity: 0.6;
}

.kr-pagination-info {
    font-size: 14px;
    color: var(--kr-text-muted);
    padding: 0 12px;
}

@media screen and (max-width: 640px) {
    .kr-pagination {
        flex-wrap: wrap;
        gap: 10px;
    }

    .kr-pagination-btn {
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* ==========================================
   LISTVY ACTIONS (Lägg till-knapp i listvy)
   ========================================== */
.kr-list-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.kr-list-actions .kr-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.kr-list-actions .kr-btn svg {
    flex-shrink: 0;
}

/* ==========================================
   EKONOMI SECTION
   ========================================== */

/* Summary cards */
.kr-ekonomi-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.kr-ekonomi-summary-card {
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius);
    padding: 20px;
    box-shadow: var(--kr-shadow);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kr-ekonomi-summary-card .kr-stat-num {
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kr-ekonomi-summary-card .kr-stat-label {
    font-size: 13px;
    color: var(--kr-text-muted);
}

/* Chart containers */
.kr-ekonomi-charts {
    margin-bottom: 24px;
}

.kr-ekonomi-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.kr-ekonomi-chart-container {
    padding: 8px 0;
}

.kr-ekonomi-chart-container h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: var(--kr-text);
}

/* Transaction type badges */
.kr-typ-utgift {
    background: #fee2e2;
    color: #991b1b;
}

.kr-typ-investering {
    background: #dbeafe;
    color: #1e40af;
}

.kr-typ-inkomst {
    background: #dcfce7;
    color: #166534;
}

/* Dark mode type badges */
body.kr-body-dark .kr-app .kr-typ-utgift {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

body.kr-body-dark .kr-app .kr-typ-investering {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
}

body.kr-body-dark .kr-app .kr-typ-inkomst {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

/* Amount formatting */
.kr-belopp {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.kr-belopp-positive {
    color: #16a34a;
}

.kr-belopp-negative {
    color: #dc2626;
}

.kr-belopp-neutral {
    color: #2563eb;
}

body.kr-body-dark .kr-app .kr-belopp-positive {
    color: #4ade80;
}

body.kr-body-dark .kr-app .kr-belopp-negative {
    color: #f87171;
}

body.kr-body-dark .kr-app .kr-belopp-neutral {
    color: #60a5fa;
}

/* Right-aligned column */
.kr-col-right {
    text-align: right;
}

/* Danger zone */
.kr-danger-zone {
    border: 1px solid var(--kr-error);
    margin-top: 24px;
}

.kr-danger-zone .kr-section-title {
    color: var(--kr-error);
}

/* Ekonomi categories settings */
.kr-ekonomi-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.kr-ek-cat-column h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: var(--kr-text);
}

.kr-ek-cat-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.kr-ek-cat-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--kr-input-border);
    border-radius: var(--kr-radius);
    font-size: 14px;
    background: var(--kr-input-bg);
    color: var(--kr-text);
}

.kr-ek-new-cat .kr-ek-cat-input {
    border-style: dashed;
}

@media (max-width: 768px) {
    .kr-ekonomi-categories-grid {
        grid-template-columns: 1fr;
    }
}

/* Clickable table rows */
.kr-clickable-row {
    cursor: pointer;
    transition: background-color 0.15s;
}

.kr-clickable-row:hover {
    background-color: var(--kr-gray-50);
}

body.kr-body-dark .kr-app .kr-clickable-row:hover {
    background-color: var(--kr-gray-200);
}

/* Row preview tooltip */
.kr-row-preview-tooltip {
    position: fixed;
    z-index: 9999;
    background: var(--kr-bg-card);
    color: var(--kr-text);
    padding: 16px;
    border-radius: var(--kr-radius-lg);
    font-size: 13px;
    line-height: 1.5;
    min-width: 260px;
    max-width: 360px;
    box-shadow: var(--kr-shadow);
    pointer-events: none;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    border: 1px solid var(--kr-border);
}
.kr-row-preview-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}
.kr-row-preview-tooltip .kr-preview-header {
    margin-bottom: 4px;
}
.kr-row-preview-tooltip .kr-preview-header .kr-preview-docnr {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--kr-text);
    margin-bottom: 2px;
}
.kr-row-preview-tooltip .kr-preview-header small {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: var(--kr-text-muted);
    margin-top: 4px;
}
.kr-row-preview-tooltip .kr-preview-company {
    display: block;
    margin-top: 4px;
}
.kr-row-preview-tooltip .kr-preview-body {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--kr-border);
}
.kr-row-preview-tooltip .kr-preview-lines {
    font-size: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.kr-row-preview-tooltip .kr-preview-lines li {
    padding: 4px 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: nowrap;
}
.kr-row-preview-tooltip .kr-preview-lines .kr-preview-artnr {
    font-weight: 500;
    color: var(--kr-text-muted);
    flex: 0 0 auto;
    min-width: 50px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.kr-row-preview-tooltip .kr-preview-lines .kr-preview-desc {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--kr-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kr-row-preview-tooltip .kr-preview-lines .kr-preview-qty {
    flex: 0 0 auto;
    color: var(--kr-text-muted);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.kr-row-preview-tooltip .kr-preview-total {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--kr-border);
    font-weight: 600;
    display: flex;
    justify-content: space-between;
}

/* Dokumentkopplingar i preview */
.kr-row-preview-tooltip .kr-preview-links {
    margin-top: 8px;
    padding: 8px 0;
    border-top: 1px dashed var(--kr-border);
    font-size: 11px;
}
.kr-row-preview-tooltip .kr-preview-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    color: var(--kr-text-muted);
}
.kr-row-preview-tooltip .kr-preview-link .kr-link-icon {
    font-size: 10px;
    opacity: 0.6;
}
.kr-row-preview-tooltip .kr-preview-link .kr-link-label {
    font-weight: 500;
    min-width: 70px;
}
.kr-row-preview-tooltip .kr-preview-link .kr-link-nr {
    color: var(--kr-primary);
    font-weight: 500;
}
.kr-row-preview-tooltip .kr-preview-link .kr-link-status {
    font-size: 10px;
    opacity: 0.7;
}
.kr-row-preview-tooltip .kr-preview-link-origin,
.kr-row-preview-tooltip .kr-preview-link-from {
    color: var(--kr-text-muted);
}
.kr-row-preview-tooltip .kr-preview-link-to,
.kr-row-preview-tooltip .kr-preview-link-final {
    color: var(--kr-text-muted);
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
    .kr-ekonomi-charts-grid {
        grid-template-columns: 1fr;
    }
    .kr-ekonomi-summary {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .kr-ekonomi-summary {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   EKONOMI FÖRETAG (EKF) - Fakturering
   ========================================== */

/* Document type badges */
.kr-badge-doctype-offert {
    background: #dbeafe;
    color: #1d4ed8;
}
.kr-badge-doctype-order {
    background: #fef3c7;
    color: #92400e;
}
.kr-badge-doctype-faktura {
    background: #d1fae5;
    color: #065f46;
}
.kr-badge-doctype-kreditfaktura {
    background: #fce7f3;
    color: #9d174d;
}
.kr-badge-doctype-leverantorsfaktura {
    background: #e0e7ff;
    color: #3730a3;
}

body.kr-body-dark .kr-app .kr-badge-doctype-offert {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}
body.kr-body-dark .kr-app .kr-badge-doctype-order {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}
body.kr-body-dark .kr-app .kr-badge-doctype-faktura {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}
body.kr-body-dark .kr-app .kr-badge-doctype-kreditfaktura {
    background: rgba(236, 72, 153, 0.2);
    color: #f9a8d4;
}
body.kr-body-dark .kr-app .kr-badge-doctype-leverantorsfaktura {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

/* Status badges */
.kr-badge-muted {
    background: var(--kr-gray-100, #f1f5f9);
    color: var(--kr-gray-500, #64748b);
}
.kr-badge-info {
    background: #dbeafe;
    color: #1d4ed8;
}
.kr-badge-success {
    background: #d1fae5;
    color: #065f46;
}
.kr-badge-warning {
    background: #fef3c7;
    color: #92400e;
}
.kr-badge-danger {
    background: #fee2e2;
    color: #991b1b;
}

body.kr-body-dark .kr-app .kr-badge-muted {
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
}
body.kr-body-dark .kr-app .kr-badge-info {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}
body.kr-body-dark .kr-app .kr-badge-success {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}
body.kr-body-dark .kr-app .kr-badge-warning {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}
body.kr-body-dark .kr-app .kr-badge-danger {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}
body.kr-body-dark .kr-app .kr-badge-muted {
    background: var(--kr-gray-200, #374151);
    color: var(--kr-gray-500, #9ca3af);
}

/* Ärende status badges - dark mode */
body.kr-body-dark .kr-app .kr-status-ny,
body.kr-body-dark .kr-app .kr-case-status.kr-status-ny {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}
body.kr-body-dark .kr-app .kr-status-pagaende,
body.kr-body-dark .kr-app .kr-case-status.kr-status-pagaende {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}
body.kr-body-dark .kr-app .kr-status-vantar,
body.kr-body-dark .kr-app .kr-case-status.kr-status-vantar {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}
body.kr-body-dark .kr-app .kr-status-avslutat,
body.kr-body-dark .kr-app .kr-case-status.kr-status-avslutat {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}
body.kr-body-dark .kr-app .kr-status-arkiverat,
body.kr-body-dark .kr-app .kr-case-status.kr-status-arkiverat {
    background: var(--kr-gray-200, #374151);
    color: var(--kr-gray-500, #9ca3af);
}

/* Ekonomi-ärende status badges - dark mode */
body.kr-body-dark .kr-app .kr-badge-info {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

/* Message boxes - dark mode */
body.kr-body-dark .kr-app .kr-message-error {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.3);
}
body.kr-body-dark .kr-app .kr-closed-notice {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.3);
}

/* EKF Status card */
.kr-ekf-status-card {
    padding: 12px 20px;
}

.kr-ekf-status-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.kr-ekf-status-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--kr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Kvarstående felruta i e-post-dialogen (misslyckat utskick) */
.kr-order-email-error {
    display: block;
    margin: 0 0 16px;
    padding: 12px 14px;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.30);
    border-left: 3px solid #dc2626;
    border-radius: 6px;
    text-align: left;
    font-size: 13px;
    line-height: 1.5;
}
.kr-order-email-error .kr-order-email-error-text {
    display: block;
    color: #b91c1c;
    font-weight: 600;
}
.kr-order-email-error .kr-order-email-error-hint {
    display: block;
    margin-top: 4px;
    color: var(--kr-text-muted, #64748b);
    font-weight: 400;
}
body.kr-body-dark .kr-order-email-error,
.kr-app.kr-theme-dark .kr-order-email-error {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.35);
    border-left-color: #f87171;
}
body.kr-body-dark .kr-order-email-error .kr-order-email-error-text,
.kr-app.kr-theme-dark .kr-order-email-error .kr-order-email-error-text {
    color: #f87171;
}

/* "Ändra status:"-avgränsare — skiljer nuvarande status (badge) från
   möjliga statusåtgärder så knappar inte förväxlas med statusbadges. */
.kr-ekf-status-actions-sep {
    font-size: 12px;
    font-weight: 600;
    color: var(--kr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-left: 12px;
    margin-left: 4px;
    border-left: 1px solid var(--kr-border);
}
.kr-ekf-status-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.kr-ekf-status-select {
    padding: 6px 12px;
    font-size: 14px;
    border: 1px solid var(--kr-gray-200);
    border-radius: var(--kr-radius);
    background: var(--kr-bg);
    color: var(--kr-text);
    cursor: pointer;
}

.kr-ekf-status-select:focus {
    outline: none;
    border-color: var(--kr-primary);
    box-shadow: var(--kr-focus-shadow-light);
}

.kr-ekf-status-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kr-ekf-convert-form {
    display: inline-flex;
    margin-left: auto;
}

/* EKF Artikelrader tabell */
.kr-ekf-rows-wrapper {
    overflow-x: auto;
    margin-bottom: 16px;
}

.kr-ekf-rows-table {
    width: 100%;
    border-collapse: collapse;
}

.kr-ekf-rows-table th {
    background: var(--kr-gray-50, #f8fafc);
    border-bottom: 2px solid var(--kr-border, #e2e8f0);
    padding: 8px 6px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    color: var(--kr-text-muted, #64748b);
    white-space: nowrap;
}

body.kr-body-dark .kr-app .kr-ekf-rows-table th {
    background: var(--kr-surface-hover, #334155);
}

.kr-ekf-rows-table td {
    padding: 4px 4px;
    vertical-align: middle;
}

.kr-ekf-rows-table input,
.kr-ekf-rows-table select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--kr-input-border, #d1d5db);
    border-radius: var(--kr-radius, 6px);
    font-size: 13px;
    background: var(--kr-input-bg, #fff);
    color: var(--kr-text, #1a1a1a);
    box-sizing: border-box;
}

.kr-ekf-rows-table input:focus,
.kr-ekf-rows-table select:focus {
    outline: none;
    border-color: var(--kr-primary, #2563eb);
    box-shadow: var(--kr-focus-shadow-light);
}

.kr-ekf-col-artnr { width: 80px; }
.kr-ekf-col-desc { width: 32%; }
.kr-ekf-col-qty { width: 7%; }
.kr-ekf-col-unit { width: 7%; }
.kr-ekf-col-price { width: 12%; }
.kr-ekf-col-disc { width: 7%; }
.kr-ekf-col-vat { width: 8%; }
.kr-ekf-col-sum { width: 12%; text-align: right; }
.kr-ekf-col-actions { width: 40px; text-align: center; }
.kr-ekf-input-artnr { width: 100%; }

.kr-ekf-row-sum {
    display: block;
    text-align: right;
    font-weight: 600;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--kr-text, #1a1a1a);
    /* Beräknat (ej redigerbart) värde — diskret bakgrund + tabular siffror
       så det inte förväxlas med ett tomt inmatningsfält */
    background: var(--kr-bg-alt, #f8fafc);
    border: 1px solid transparent;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}

.kr-ekf-rows-table .kr-ekf-remove-row.kr-btn {
    padding: 4px 8px;
    font-size: 16px;
    line-height: 1;
    min-width: auto;
    /* Diskret som standard — neutral grå, ingen aggressiv röd hela tiden */
    background: transparent;
    border: 1px solid transparent;
    color: var(--kr-text-muted, #94a3b8);
    box-shadow: none;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.kr-ekf-rows-table .kr-ekf-remove-row.kr-btn:hover {
    /* Röd först vid hover — tydlig avsikt utan att skrika */
    background: rgba(220, 38, 38, 0.10);
    border-color: rgba(220, 38, 38, 0.30);
    color: #dc2626;
}
body.kr-body-dark .kr-ekf-rows-table .kr-ekf-remove-row.kr-btn {
    color: #94a3b8;
}
body.kr-body-dark .kr-ekf-rows-table .kr-ekf-remove-row.kr-btn:hover {
    background: rgba(248, 113, 113, 0.15);
    border-color: rgba(248, 113, 113, 0.35);
    color: #f87171;
}

/* EKF Totaler */
.kr-ekf-totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--kr-border, #e2e8f0);
}

.kr-ekf-total-row {
    display: flex;
    justify-content: space-between;
    width: 300px;
    max-width: 100%;
    padding: 4px 0;
    font-size: 14px;
    color: var(--kr-text, #1a1a1a);
}

.kr-ekf-total-grand {
    border-top: 2px solid var(--kr-text, #1a1a1a);
    padding-top: 8px;
    margin-top: 4px;
    font-weight: 700;
    font-size: 16px;
}

/* Detail grid (2-column grid for document info) */
.kr-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.kr-detail-row {
    display: flex;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid var(--kr-border, #e5e7eb);
    gap: 12px;
}

.kr-detail-row:last-child {
    border-bottom: none;
}

.kr-detail-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kr-text-muted, #6b7280);
    min-width: 140px;
    flex-shrink: 0;
}

.kr-detail-value {
    font-size: 14px;
    color: var(--kr-text, #1f2937);
}

.kr-detail-value a {
    color: var(--kr-primary, #2563eb);
    text-decoration: none;
}

.kr-detail-value a:hover {
    color: var(--kr-primary-dark, #1d4ed8);
}

@media (max-width: 768px) {
    .kr-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* EKF Detaljvy tabell */
.kr-ekf-view-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px;
}

.kr-ekf-view-table th {
    background: var(--kr-gray-50, #f8fafc);
    border-bottom: 2px solid var(--kr-border, #e2e8f0);
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    color: var(--kr-text-muted, #64748b);
}

body.kr-body-dark .kr-app .kr-ekf-view-table th {
    background: var(--kr-surface-hover, #334155);
}

.kr-ekf-view-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--kr-border, #e2e8f0);
    font-size: 13px;
}

.kr-ekf-view-table tbody tr:last-child td {
    border-bottom: none;
}

/* Text-muted helper */
.kr-text-muted {
    color: var(--kr-text-muted, #64748b);
}

/* Small text helper */
.kr-text-sm {
    font-size: 0.8em;
}

/* Autocomplete suggestions */
.kr-suggestions-list {
    position: absolute;
    z-index: 1000;
    background: var(--kr-surface, #fff);
    border: 1px solid var(--kr-border, #e2e8f0);
    border-radius: var(--kr-radius, 6px);
    box-shadow: var(--kr-shadow-lg, 0 4px 12px rgba(0,0,0,0.15));
    max-height: 200px;
    overflow-y: auto;
    display: none;
    width: 100%;
}

.kr-suggestions-list.active {
    display: block;
}

.kr-suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--kr-border, #e2e8f0);
    color: var(--kr-text, #1a1a1a);
}

.kr-suggestion-item:last-child {
    border-bottom: none;
}

.kr-suggestion-item:hover {
    background: var(--kr-primary, #2563eb);
    color: #fff;
}

.kr-suggestion-item .kr-suggestion-sub {
    font-size: 11px;
    color: var(--kr-text-muted, #94a3b8);
}

.kr-suggestion-item:hover .kr-suggestion-sub {
    color: rgba(255,255,255,0.8);
}

/* Make form groups position: relative for suggestions */
.kr-form-group {
    position: relative;
}

/* ==========================================
   EKF: AI Invoice Scan
   ========================================== */

.kr-ekf-scan-section {
    border: 2px dashed var(--kr-border, #e2e8f0);
    background: var(--kr-bg-light, #f8fafc);
}

.kr-ekf-scan-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    border: 2px dashed var(--kr-gray-300, #cbd5e1);
    border-radius: var(--kr-radius, 8px);
    background: var(--kr-surface, #fff);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    text-align: center;
}

.kr-ekf-scan-dropzone:hover {
    border-color: var(--kr-primary, #2563eb);
    background: var(--kr-primary-light-bg, rgba(37, 99, 235, 0.04));
}

.kr-ekf-scan-dropzone.kr-ekf-scan-dragover {
    border-color: var(--kr-primary, #2563eb);
    background: var(--kr-primary-light-bg, rgba(37, 99, 235, 0.08));
    border-style: solid;
}

.kr-ekf-scan-icon {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 8px;
}

.kr-ekf-scan-dropzone p {
    margin: 4px 0;
    color: var(--kr-text-muted, #64748b);
}

.kr-ekf-scan-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--kr-surface, #fff);
    border: 1px solid var(--kr-border, #e2e8f0);
    border-radius: var(--kr-radius, 8px);
}

.kr-ekf-scan-filename {
    flex: 1;
    font-weight: 500;
    word-break: break-all;
    color: var(--kr-text, #1a1a1a);
}

.kr-ekf-scan-preview-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.kr-ekf-scan-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--kr-info-bg, rgba(59, 130, 246, 0.08));
    border-radius: var(--kr-radius, 8px);
    color: var(--kr-text, #1a1a1a);
}

.kr-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--kr-gray-300, #cbd5e1);
    border-top-color: var(--kr-primary, #2563eb);
    border-radius: 50%;
    animation: kr-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes kr-spin {
    to { transform: rotate(360deg); }
}

.kr-ekf-scan-success {
    padding: 12px 16px;
    background: var(--kr-success-bg, rgba(34, 197, 94, 0.1));
    color: var(--kr-success, #16a34a);
    border-radius: var(--kr-radius, 8px);
    font-weight: 500;
}

.kr-ekf-scan-error {
    padding: 12px 16px;
    background: var(--kr-danger-bg, rgba(239, 68, 68, 0.1));
    color: var(--kr-danger, #dc2626);
    border-radius: var(--kr-radius, 8px);
    font-weight: 500;
}

.kr-ekf-company-edit-link {
    display: inline-block;
    margin-top: 6px;
}

.kr-text-muted {
    color: var(--kr-text-muted, #64748b);
}

/* Dark mode overrides for scan section */
body.kr-body-dark .kr-ekf-scan-section,
.kr-app.kr-theme-dark .kr-ekf-scan-section {
    border-color: var(--kr-border, #374151);
    background: var(--kr-bg-light, #1e293b);
}

body.kr-body-dark .kr-ekf-scan-dropzone,
.kr-app.kr-theme-dark .kr-ekf-scan-dropzone {
    border-color: var(--kr-border-light, #4b5563);
    background: var(--kr-surface, #1e293b);
}

body.kr-body-dark .kr-ekf-scan-dropzone:hover,
.kr-app.kr-theme-dark .kr-ekf-scan-dropzone:hover {
    border-color: var(--kr-primary, #3b82f6);
    background: rgba(59, 130, 246, 0.08);
}

body.kr-body-dark .kr-ekf-scan-dropzone.kr-ekf-scan-dragover,
.kr-app.kr-theme-dark .kr-ekf-scan-dropzone.kr-ekf-scan-dragover {
    border-color: var(--kr-primary, #3b82f6);
    background: rgba(59, 130, 246, 0.12);
}

body.kr-body-dark .kr-ekf-scan-preview,
.kr-app.kr-theme-dark .kr-ekf-scan-preview {
    background: var(--kr-surface, #1e293b);
    border-color: var(--kr-border, #374151);
}

body.kr-body-dark .kr-ekf-scan-filename,
.kr-app.kr-theme-dark .kr-ekf-scan-filename {
    color: var(--kr-text, #f1f5f9);
}

body.kr-body-dark .kr-ekf-scan-progress,
.kr-app.kr-theme-dark .kr-ekf-scan-progress {
    background: var(--kr-info-bg, rgba(59, 130, 246, 0.1));
    color: var(--kr-text, #f1f5f9);
}

body.kr-body-dark .kr-spinner,
.kr-app.kr-theme-dark .kr-spinner {
    border-color: var(--kr-border-light, #4b5563);
    border-top-color: var(--kr-primary, #3b82f6);
}

/* Preview popup (original leverantörsfaktura) */
.kr-preview-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    padding: 24px;
}

.kr-preview-popup {
    display: flex;
    flex-direction: column;
    max-width: 900px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: var(--kr-bg);
    border-radius: var(--kr-radius-lg, 12px);
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

.kr-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--kr-border);
    flex-shrink: 0;
}

.kr-preview-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--kr-text);
}

.kr-preview-actions {
    display: flex;
    gap: 8px;
}

.kr-preview-body {
    flex: 1;
    overflow: auto;
    background: var(--kr-gray-100);
}

.kr-preview-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.kr-preview-img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

/* EKF Responsive */
@media (max-width: 768px) {
    .kr-preview-overlay {
        padding: 8px;
    }
    .kr-ekf-status-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .kr-ekf-convert-form {
        margin-left: 0;
    }
    .kr-ekf-total-row {
        width: 100%;
    }
    .kr-ekf-rows-table {
        min-width: 0;
    }
    .kr-ekf-scan-preview {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================
   ORDER EMAIL POPUP
   ========================================== */
.kr-popup-wide {
    max-width: 440px;
    width: 90%;
}

.kr-popup-icon-email {
    background: #dbeafe;
    color: #2563eb;
}

body.kr-body-dark .kr-app .kr-popup-icon-email {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.kr-popup-form {
    text-align: left;
    margin: 16px 0;
    width: 100%;
}

.kr-popup-form input[type="email"],
.kr-popup-form input[type="text"] {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid var(--kr-input-border);
    border-radius: var(--kr-radius);
    background: var(--kr-input-bg);
    color: var(--kr-text);
    font-family: inherit;
    margin-bottom: 12px;
}

.kr-popup-form input[type="email"]:focus,
.kr-popup-form input[type="text"]:focus {
    outline: none;
    border-color: var(--kr-primary);
    box-shadow: var(--kr-focus-shadow-light);
}

.kr-popup-form select {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid var(--kr-input-border);
    border-radius: var(--kr-radius);
    background: var(--kr-input-bg);
    color: var(--kr-text);
    font-family: inherit;
    margin-bottom: 12px;
    appearance: auto;
}

.kr-popup-form select:focus {
    outline: none;
    border-color: var(--kr-primary);
    box-shadow: var(--kr-focus-shadow-light);
}

.kr-popup-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 13px;
    color: var(--kr-text);
}

.kr-popup-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

/* ==========================================
   EMAIL LOG
   ========================================== */
.kr-email-log {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kr-email-log-entry {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--kr-border, #e5e7eb);
}

.kr-email-log-entry:last-child {
    border-bottom: none;
}

.kr-email-log-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    margin-top: 2px;
}

.kr-email-sent {
    background: #d1fae5;
    color: #065f46;
}

.kr-email-failed {
    background: #fee2e2;
    color: #991b1b;
}

body.kr-body-dark .kr-app .kr-email-sent {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

body.kr-body-dark .kr-app .kr-email-failed {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.kr-email-log-details {
    font-size: 13px;
    line-height: 1.5;
    color: var(--kr-text, #1f2937);
}

/* Resultatrapport & Momsrapport */
.kr-card.kr-card-table {
    overflow: hidden;
    padding-bottom: 0;
    border-radius: var(--kr-radius-lg);
}

.kr-card-table .kr-list-table thead th:first-child {
    border-top-left-radius: var(--kr-radius);
}

.kr-card-table .kr-list-table thead th:last-child {
    border-top-right-radius: var(--kr-radius);
}

.kr-rapport-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}

.kr-rapport-table td {
    padding: 10px 12px;
    font-size: 14px;
    color: var(--kr-text);
    border-bottom: 1px solid var(--kr-border);
}

.kr-rapport-section-header td {
    background: var(--kr-gray-100);
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    border-top: 2px solid var(--kr-gray-300);
    border-bottom: 1px solid var(--kr-gray-300);
}


.kr-rapport-group-header td {
    padding: 10px 12px 6px 12px;
    color: var(--kr-gray-600);
    font-size: 13px;
    font-style: italic;
}

.kr-rapport-table td.kr-rapport-account {
    padding-left: 24px;
}

.kr-rapport-amount {
    text-align: right;
    white-space: nowrap;
    width: 160px;
    font-variant-numeric: tabular-nums;
}

.kr-rapport-subtotal td {
    background: var(--kr-gray-50);
    border-top: 2px solid var(--kr-gray-300);
    padding: 10px 12px;
    font-weight: 600;
}


.kr-rapport-result td {
    background: var(--kr-primary);
    color: white;
    border-top: 2px solid var(--kr-primary);
    padding: 12px;
    font-size: 15px;
    font-weight: 700;
}



/* Konteringssammanfattning */
.kr-kontering-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px;
}
.kr-kontering-table th {
    background: var(--kr-gray-50, #f8fafc);
    border-bottom: 2px solid var(--kr-border, #e2e8f0);
    padding: 8px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    color: var(--kr-text-muted, #64748b);
}
.kr-kontering-table td {
    padding: 6px 8px;
    font-size: 14px;
    border-bottom: 1px solid var(--kr-border, #f1f5f9);
}
.kr-kontering-debet {
    color: #059669;
    font-weight: 600;
}
.kr-kontering-kredit {
    color: #dc2626;
    font-weight: 600;
}
.kr-kontering-sum-row td {
    border-top: 2px solid var(--kr-text, #1a1a1a);
    font-weight: 700;
    padding-top: 8px;
}

/* Dark mode kontering */
body.kr-body-dark .kr-kontering-debet {
    color: #34d399;
}
body.kr-body-dark .kr-kontering-kredit {
    color: #f87171;
}

/* BAS-kontoplan tabell */
.kr-bas-accounts-table input[type="text"] {
    padding: 4px 8px;
    font-size: 13px;
}

/* EKF persistent sub-navigation */
/* Quick-create button: hidden on desktop (subnav handles it), shown on mobile via media query */
.kr-mobile-create-btn {
    display: none;
}

.kr-ekf-subnav {
    margin-bottom: 16px;
    background: var(--kr-card-bg, #ffffff);
    border: 1px solid var(--kr-border, #e2e8f0);
    border-radius: 10px;
    position: relative;
    width: 100%;
}

.kr-ekf-subnav-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    flex-wrap: wrap;
}

/* Rapport icon */
.kr-ekf-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 16px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.15s;
    flex-shrink: 0;
    margin-right: 2px;
}
.kr-ekf-nav-icon:hover {
    background: var(--kr-gray-100, #f1f5f9);
}
.kr-ekf-nav-icon.active {
    background: var(--kr-primary, #3b82f6);
    color: #fff;
}

/* Tab groups */
.kr-ekf-nav-tabs {
    display: flex;
    align-items: center;
    gap: 1px;
}

.kr-ekf-nav-tab {
    display: inline-block;
    padding: 5px 10px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--kr-text-muted, #64748b);
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1.3;
}
.kr-ekf-nav-tab:hover {
    background: var(--kr-gray-100, #f1f5f9);
    color: var(--kr-text, #1e293b);
}
.kr-ekf-nav-tab.active {
    background: var(--kr-primary, #3b82f6);
    color: #fff;
}
.kr-ekf-nav-tab.disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* Separator between sections */
.kr-ekf-nav-sep {
    width: 1px;
    height: 18px;
    background: var(--kr-border, #e2e8f0);
    margin: 0 6px;
    flex-shrink: 0;
}

.kr-ekf-nav-spacer {
    flex: 1;
    min-width: 8px;
}

/* Create buttons */
.kr-ekf-nav-create {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.kr-ekf-create-btn {
    display: inline-block;
    padding: 4px 9px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--kr-text-muted, #64748b);
    text-decoration: none;
    border: 1px solid var(--kr-border, #e2e8f0);
    border-radius: 5px;
    background: transparent;
    transition: all 0.15s;
    white-space: nowrap;
    line-height: 1.3;
}
.kr-ekf-create-btn:hover {
    background: var(--kr-primary, #3b82f6);
    color: #fff;
    border-color: var(--kr-primary, #3b82f6);
}
.kr-ekf-create-btn.active {
    background: var(--kr-primary, #3b82f6);
    color: #fff;
    border-color: var(--kr-primary, #3b82f6);
}

.kr-ekf-subnav-create-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 10px 8px;
    border-top: 1px solid var(--kr-border, #e2e8f0);
    margin: 0 6px;
    padding-top: 6px;
}
/* Dropdown-menyer (höger nav) */
.kr-nav-dropdown {
    position: relative;
}
.kr-nav-dropdown > .kr-ekf-nav-tab {
    cursor: pointer;
}
.kr-nav-dropdown:hover > .kr-ekf-nav-tab {
    background: var(--kr-primary, #3b82f6);
    color: #fff;
}
.kr-nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    min-width: 180px;
    padding-top: 8px;
    background: var(--kr-card-bg, #ffffff);
    border: 1px solid var(--kr-border, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
.kr-nav-dropdown:hover > .kr-nav-dropdown-menu {
    display: block;
}
.kr-nav-dropdown-item {
    display: block;
    padding: 7px 14px;
    font-size: 12.5px;
    color: var(--kr-text, #1e293b);
    text-decoration: none;
    white-space: nowrap;
}
.kr-ekf-nav-right .kr-nav-dropdown-item {
    text-align: right;
}
.kr-nav-dropdown-menu.kr-nav-dropdown-left {
    right: auto;
    left: 0;
}
.kr-nav-dropdown-item:hover {
    background: var(--kr-gray-100, #f1f5f9);
    color: var(--kr-primary, #3b82f6);
}

/* ==========================================
   Designsystem v1.4 — fixed-layout, hover-preview,
   konsekvent radhöjd, harmoniserade filter-/KPI-kort.
   ========================================== */

/* Dashboard filter-kort — gör dem till samma kortfamilj som
   Försäljnings KPI-kort (mindre, men samma språk: bg, border,
   radius, shadow, hover, active-state). */
.kr-ekf-mini-dash {
    /* Container ska inte konkurrera med korten — låt korten ha bg/border */
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: var(--kr-space-4);
}
.kr-mini-dash-item {
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius-lg);
    box-shadow: var(--kr-shadow);
    padding: var(--kr-space-3) var(--kr-space-4);
    min-width: 100px;
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
button.kr-mini-dash-clickable {
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
}
button.kr-mini-dash-clickable:hover,
a.kr-mini-dash-item:hover {
    box-shadow: var(--kr-shadow-lg);
    border-color: var(--kr-primary-light);
    transform: translateY(-1px);
}
button.kr-mini-dash-clickable.kr-mini-dash-active {
    background: rgba(37, 99, 235, 0.08);
    border-color: var(--kr-primary);
    box-shadow: var(--kr-shadow), inset 0 -2px 0 var(--kr-primary);
}
button.kr-mini-dash-clickable.kr-mini-dash-active:hover {
    background: rgba(37, 99, 235, 0.12);
}
.kr-app.kr-theme-dark button.kr-mini-dash-clickable.kr-mini-dash-active {
    background: rgba(96, 165, 250, 0.16);
    border-color: var(--kr-primary-light);
    box-shadow: var(--kr-shadow), inset 0 -2px 0 var(--kr-primary-light);
}
.kr-app.kr-theme-dark button.kr-mini-dash-clickable.kr-mini-dash-active:hover {
    background: rgba(96, 165, 250, 0.22);
}

/* Tvinga deterministisk kolumnlayout via colgroup.
   Används på Dashboard Attention Stack (har eget colgroup). */
.kr-table-fixed {
    table-layout: fixed;
    width: 100%;
}
.kr-table-fixed th,
.kr-table-fixed td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kr-table-fixed td .kr-badge,
.kr-table-fixed td .kr-status-badge,
.kr-table-fixed td .kr-lager-badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Konsekvent radhöjd för alla listvyer.
   Tvinga samma vertical-align + line-height så att celler med/utan
   badges blir lika höga. Badges bör inte påverka radhöjden. */
.kr-list-table tbody td {
    vertical-align: middle;
    line-height: 1.4;
}
.kr-list-table tbody td .kr-badge,
.kr-list-table tbody td .kr-status-badge,
.kr-list-table tbody td .kr-lager-badge {
    line-height: 1.4;
    vertical-align: middle;
}
/* Synkronisera padding mellan kr-badge och kr-lager-badge så de
   inte ger olika cellhöjd mellan Artiklar och Lager */
.kr-lager-badge {
    padding: 3px 10px;
    line-height: 1.4;
}
.kr-badge {
    line-height: 1.4;
}

/* Tvinga deterministisk kolumnlayout via colgroup.
   Används på Dashboard Attention Stack (har eget colgroup). */
.kr-table-fixed {
    table-layout: fixed;
    width: 100%;
}
.kr-table-fixed th,
.kr-table-fixed td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kr-table-fixed td .kr-badge,
.kr-table-fixed td .kr-status-badge,
.kr-table-fixed td .kr-lager-badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Konsekvent radhöjd för alla listvyer.
   Tvinga samma vertical-align + line-height så att celler med/utan
   badges blir lika höga. Badges bör inte påverka radhöjden. */
.kr-list-table tbody td {
    vertical-align: middle;
    line-height: 1.4;
}
.kr-list-table tbody td .kr-badge,
.kr-list-table tbody td .kr-status-badge,
.kr-list-table tbody td .kr-lager-badge {
    line-height: 1.4;
    vertical-align: middle;
}
/* Synkronisera padding mellan kr-badge och kr-lager-badge så de
   inte ger olika cellhöjd mellan Artiklar och Lager */
.kr-lager-badge {
    padding: 3px 10px;
    line-height: 1.4;
}
.kr-badge {
    line-height: 1.4;
}

/* ==========================================
   Designsystem v1.2 — stabila tabellkolumner
   ----------------------------------------------
   Förhindrar att kolumner "hoppar" mellan filter
   genom att ge varje kolumntyp förutsägbar bredd
   och alignment. Inga affärsändringar.
   ========================================== */

/* Wrapper-klass för stabila tabeller — använder auto-layout
   med starka column-hints. Säkrare än table-layout:fixed (som
   skulle riskera att cellinnehåll förstörs vid felräkning).
   Kombineras med .kr-col-* klasser per kolumntyp. */
.kr-table-stable {
    table-layout: auto;
}
.kr-table-stable th,
.kr-table-stable td {
    vertical-align: top;
}

/* Kolumntyp-klasser. Använd på BÅDE <th> och <td> i samma kolumn. */

/* Smala numeriska/identitets-kolumner */
.kr-col-id {
    width: 48px;
    min-width: 48px;
    white-space: nowrap;
    text-align: center;
    color: var(--kr-text-muted);
    font-variant-numeric: tabular-nums;
}
.kr-col-score {
    width: 64px;
    min-width: 64px;
    text-align: center;
    white-space: nowrap;
}
.kr-col-days {
    width: 80px;
    min-width: 80px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Datum-kolumner — exakt bredd, no-wrap */
.kr-col-date {
    width: 110px;
    min-width: 110px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Dokumentnummer / SKU / artikelnummer */
.kr-col-docnr {
    width: 120px;
    min-width: 120px;
    white-space: nowrap;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.kr-col-sku {
    width: 100px;
    min-width: 100px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* "Stretch"-kolumner — ellipsis vid för långt innehåll */
.kr-col-doc {
    min-width: 160px;
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kr-col-company {
    min-width: 140px;
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kr-col-title {
    min-width: 200px;
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kr-col-next {
    min-width: 140px;
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Personkolumner */
.kr-col-user {
    width: 110px;
    min-width: 110px;
    white-space: nowrap;
    color: var(--kr-text-muted);
}

/* Status / typ — badges, fasta bredder så de inte hoppar */
.kr-col-status {
    width: 110px;
    min-width: 110px;
    white-space: nowrap;
}
.kr-col-type {
    width: 100px;
    min-width: 100px;
    white-space: nowrap;
}
.kr-col-step {
    width: 140px;
    min-width: 140px;
    white-space: nowrap;
}

/* Belopp — höger-justering + tabular-nums för kolumn-justering */
.kr-col-amount {
    width: 120px;
    min-width: 120px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.kr-col-qty {
    width: 80px;
    min-width: 80px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Actions-kolumn — knappar längst till höger */
.kr-col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* Mobile: tillåt scroll på smala skärmar — tabellrytm bevarad */
@media (max-width: 768px) {
    .kr-table-stable {
        min-width: 800px;
    }
}

/* Tom-cell — visa "—" istället för helt tomt så kolumnen inte kollapsar */
.kr-cell-empty {
    color: var(--kr-text-muted);
    font-style: italic;
}

/* ==========================================
   Designsystem v1.1 — tydlighet och kortfamilj
   ----------------------------------------------
   Höjer kontrast på topnav-active, harmoniserar
   stat-/KPI-/filter-kort, gör Funktioner-rader
   mer som settings-cards, lugnar Bokföring-rapport
   och fixar hover-popover.
   ========================================== */

/* --- Topnav active TYDLIGARE än v1 --- */
.kr-nav-link.kr-nav-active,
.kr-nav-link.kr-nav-primary.kr-nav-active {
    background: rgba(37, 99, 235, 0.16);
    color: var(--kr-primary-dark);
    font-weight: 600;
    box-shadow: inset 0 -3px 0 var(--kr-primary);
    border-radius: var(--kr-radius) var(--kr-radius) 0 0;
}
.kr-nav-link.kr-nav-active:hover,
.kr-nav-link.kr-nav-primary.kr-nav-active:hover {
    background: rgba(37, 99, 235, 0.22);
    color: var(--kr-primary-dark);
}
.kr-nav-link:hover {
    background: rgba(37, 99, 235, 0.08);
    color: var(--kr-primary-dark);
}
.kr-nav-link:focus-visible {
    outline: 2px solid var(--kr-primary);
    outline-offset: 2px;
}
body.kr-body-dark .kr-nav-link.kr-nav-active,
.kr-app.kr-theme-dark .kr-nav-link.kr-nav-active,
body.kr-body-dark .kr-nav-link.kr-nav-primary.kr-nav-active,
.kr-app.kr-theme-dark .kr-nav-link.kr-nav-primary.kr-nav-active {
    background: rgba(96, 165, 250, 0.22);
    color: #f1f5ff;
    box-shadow: inset 0 -3px 0 var(--kr-primary-light);
}
body.kr-body-dark .kr-nav-link:hover,
.kr-app.kr-theme-dark .kr-nav-link:hover {
    background: rgba(96, 165, 250, 0.14);
    color: #e5edff;
}

/* Sub-nav-tabbar (Försäljning / Bokföring) — samma tydlighet */
.kr-ekf-nav-tab.active {
    background: rgba(37, 99, 235, 0.16);
    color: var(--kr-primary-dark);
    box-shadow: inset 0 -3px 0 var(--kr-primary);
    font-weight: 600;
}
body.kr-body-dark .kr-ekf-nav-tab.active,
.kr-app.kr-theme-dark .kr-ekf-nav-tab.active {
    background: rgba(96, 165, 250, 0.22);
    color: #f1f5ff;
    box-shadow: inset 0 -3px 0 var(--kr-primary-light);
}

/* --- Gemensam stat-/KPI-kort-familj ---
   Harmoniserar .kr-mini-dash-item (Dashboard, Lager),
   .kr-stat-card (Bokföring) och .kr-ekonomi-summary-card (Försäljning).
   Samma typografi för numret + samma label-stil. */
.kr-mini-dash-num,
.kr-mini-dash-value,
.kr-stat-value,
.kr-stat-num {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--kr-text);
    font-variant-numeric: tabular-nums;
}
.kr-mini-dash-label,
.kr-stat-label,
.kr-stat-card .kr-stat-label {
    font-size: var(--kr-text-xs);
    color: var(--kr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* Försäljnings-KPI-kort (.kr-ekonomi-summary-card) — använd kort-tokens */
.kr-ekonomi-summary-card.kr-dashboard-card,
a.kr-ekonomi-summary-card {
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius-lg);
    box-shadow: var(--kr-shadow);
    padding: var(--kr-space-4);
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
a.kr-ekonomi-summary-card:hover {
    box-shadow: var(--kr-shadow-lg);
    border-color: var(--kr-primary-light);
    transform: translateY(-1px);
    text-decoration: none;
}

/* Stat-card hover för konsekvens med settings-card */
.kr-stat-card {
    transition: box-shadow 0.15s, border-color 0.15s;
}

/* --- Funktioner-rader mer "kort-aktiga" --- */
.kr-feature-row {
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius);
    padding: var(--kr-space-4);
    margin-bottom: var(--kr-space-3);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.kr-feature-row:hover {
    border-color: var(--kr-primary-light);
    box-shadow: var(--kr-shadow);
}
.kr-feature-row + .kr-feature-row {
    border-top: 1px solid var(--kr-border); /* override v1.5 dashed */
}
.kr-feature-row:has(input[type="checkbox"]:checked) {
    border-left: 3px solid var(--kr-primary);
    padding-left: calc(var(--kr-space-4) - 2px);
}
.kr-feature-help {
    margin-top: var(--kr-space-2);
    margin-bottom: var(--kr-space-1);
}
.kr-feature-tech {
    margin-top: var(--kr-space-1);
}

/* Funktioner-grupper — utan tjock bottom-border, mer luft */
.kr-feature-group {
    margin-bottom: var(--kr-space-6);
    padding-bottom: 0;
    border-bottom: none;
}
.kr-feature-group .kr-card-title {
    font-size: var(--kr-text-base);
    font-weight: 600;
    color: var(--kr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--kr-space-3);
}

/* --- Bokföring rapport-result-rad — lugnare summary --- */
.kr-rapport-section-header td {
    background: var(--kr-bg-alt);
    border-top-color: var(--kr-border);
    border-bottom-color: var(--kr-border);
    color: var(--kr-text);
}
.kr-rapport-subtotal td {
    background: var(--kr-bg-alt);
    border-top-color: var(--kr-border);
    color: var(--kr-text);
}
.kr-rapport-result td {
    background: rgba(37, 99, 235, 0.10);
    color: var(--kr-primary-dark);
    border-top: 2px solid var(--kr-primary);
    border-bottom: 2px solid var(--kr-primary);
    font-size: var(--kr-text-base);
    font-weight: 700;
}
body.kr-body-dark .kr-rapport-result td,
.kr-app.kr-theme-dark .kr-rapport-result td {
    background: rgba(96, 165, 250, 0.16);
    color: #e5edff;
    border-top-color: var(--kr-primary-light);
    border-bottom-color: var(--kr-primary-light);
}

/* --- Hover-popover (Försäljnings-radförhandsvisning) --- */
.kr-row-preview-tooltip {
    box-shadow: var(--kr-shadow-lg);
}

/* --- Settings sub-vyer: gemensam wrapper med konsekvent spacing --- */
.kr-settings-section {
    display: flex;
    flex-direction: column;
    gap: var(--kr-space-4);
}
.kr-settings-section > .kr-card {
    margin-bottom: 0;
}

/* ==========================================
   Designsystem v1 — sammanhållen visuell stil
   ----------------------------------------------
   Neutraliserar specialfall, harmoniserar tabbar,
   info-boxes och dark mode. Inga affärsändringar.
   ========================================== */

/* Topnav: neutralisera Dashboard-special om kr-nav-primary
   fortfarande används någonstans (för bakåtkompatibilitet) */
.kr-nav-link.kr-nav-primary {
    font-weight: 500;
    color: var(--kr-gray-600);
    border: none;
}
.kr-nav-link.kr-nav-primary:hover {
    background: var(--kr-gray-100);
    color: var(--kr-gray-800);
}
.kr-nav-link.kr-nav-primary.kr-nav-active {
    background: rgba(37, 99, 235, 0.10);
    color: var(--kr-primary-dark);
    border-color: transparent;
    box-shadow: inset 0 -2px 0 var(--kr-primary);
}
body.kr-body-dark .kr-nav-link.kr-nav-primary,
.kr-app.kr-theme-dark .kr-nav-link.kr-nav-primary {
    color: var(--kr-gray-600);
}

/* Tabs: harmonisera .kr-ekf-nav-tab.active till samma lugna stil
   som .kr-nav-link.kr-nav-active i toppmenyn (mjuk bakgrund + underkant) */
.kr-ekf-nav-tab.active {
    background: rgba(37, 99, 235, 0.10);
    color: var(--kr-primary-dark);
    box-shadow: inset 0 -2px 0 var(--kr-primary);
    border-radius: var(--kr-radius) var(--kr-radius) 0 0;
}
body.kr-body-dark .kr-ekf-nav-tab.active,
.kr-app.kr-theme-dark .kr-ekf-nav-tab.active {
    background: rgba(96, 165, 250, 0.18);
    color: #e5edff;
    box-shadow: inset 0 -2px 0 var(--kr-primary-light);
}

/* Cron-status: byt hardcoded ljusa färger mot tokens (dark mode-säker) */
.kr-cron-stats {
    background: var(--kr-bg-alt);
    color: var(--kr-text);
    padding: var(--kr-space-4);
    border-radius: var(--kr-radius);
    border: 1px solid var(--kr-border);
    margin-top: var(--kr-space-4);
}
.kr-cron-time.kr-cron-na {
    color: var(--kr-text-muted);
}
.kr-cron-box {
    background: var(--kr-bg-alt);
}
body.kr-body-dark .kr-cron-box,
.kr-app.kr-theme-dark .kr-cron-box {
    background: var(--kr-bg-alt);
    border-color: var(--kr-border);
}

/* Attention Stack-kort på Dashboard: rensa eventuell dubbel-kortpadding */
.kr-attention-card .kr-table-responsive {
    margin: 0;
}
.kr-attention-card > .kr-section-title {
    margin-top: 0;
}

/* Info-boxes — alias som mappar mot befintliga kr-message-stilar.
   Använd .kr-info-box-{success|warning|danger|neutral} i nya delar
   istället för hardcoded bakgrundsfärger. */
.kr-info-box {
    padding: var(--kr-space-3) var(--kr-space-5);
    border-radius: var(--kr-radius);
    margin-bottom: var(--kr-space-4);
    font-size: var(--kr-text-sm);
    line-height: 1.5;
    border: 1px solid var(--kr-border);
    background: var(--kr-bg-alt);
    color: var(--kr-text);
}
.kr-info-box-success {
    background: var(--kr-success-light);
    border-color: var(--kr-success-border);
    color: var(--kr-success-dark);
}
.kr-info-box-warning {
    background: var(--kr-warning-light);
    border-color: var(--kr-warning-border);
    color: var(--kr-warning-dark);
}
.kr-info-box-danger {
    background: var(--kr-error-light);
    border-color: var(--kr-error-border);
    color: var(--kr-error-dark);
}
.kr-info-box-neutral {
    background: var(--kr-bg-alt);
    border-color: var(--kr-border);
    color: var(--kr-text);
}

/* Settings-page wrapper: gemensam yttre layout för alla settings-sub-vyer */
.kr-settings-section {
    display: flex;
    flex-direction: column;
    gap: var(--kr-space-4);
}
.kr-settings-section .kr-card + .kr-card {
    margin-top: 0;
}

/* ==========================================
   UX Iteration 1.5 — Designkonsolidering
   Unifierar settings-cards, filter-bar, dropdowns,
   topnav-active state och CRM Pipeline tom-vy.
   Använder befintliga design tokens.
   ========================================== */

/* Settings-cards — anpassa till samma språk som .kr-card */
a.kr-settings-card {
    padding: var(--kr-space-5);
    border-radius: var(--kr-radius-lg);
    box-shadow: var(--kr-shadow);
    background: var(--kr-bg-card);
}
a.kr-settings-card:hover {
    box-shadow: var(--kr-shadow-lg);
}
.kr-settings-card strong {
    font-size: var(--kr-text-base);
    color: var(--kr-text);
}
.kr-settings-card p {
    font-size: var(--kr-text-sm);
    color: var(--kr-text-muted);
    line-height: 1.45;
}
.kr-settings-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--kr-space-4);
}

/* Filter-bar — radius matchar nu kort */
.kr-ekf-filter-bar {
    border-radius: var(--kr-radius-lg);
    box-shadow: var(--kr-shadow);
}
.kr-ekf-filter-main {
    padding: var(--kr-space-3) var(--kr-space-4);
}

/* Dropdown-menyer — matcha kort-stil */
.kr-nav-dropdown-menu {
    border-radius: var(--kr-radius-lg);
    box-shadow: var(--kr-shadow-lg);
    border-color: var(--kr-border);
    padding: var(--kr-space-2) 0;
}
.kr-nav-dropdown-divider {
    margin-top: var(--kr-space-2);
    margin-bottom: var(--kr-space-2);
}

/* Topnav active — lugnare än solid primärfärg */
.kr-nav-link.kr-nav-active {
    background: rgba(37, 99, 235, 0.10);
    color: var(--kr-primary-dark);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--kr-primary);
    border-radius: var(--kr-radius) var(--kr-radius) 0 0;
}
.kr-nav-link.kr-nav-active:hover {
    background: rgba(37, 99, 235, 0.16);
    color: var(--kr-primary-dark);
}
body.kr-body-dark .kr-nav-link.kr-nav-active,
.kr-app.kr-theme-dark .kr-nav-link.kr-nav-active {
    background: rgba(96, 165, 250, 0.18);
    color: #e5edff;
    box-shadow: inset 0 -2px 0 var(--kr-primary-light);
}

/* Score-badges — något lugnare visuell vikt på dashboard */
.kr-dashboard-score {
    font-weight: 600;
    opacity: 0.92;
}

/* CRM Pipeline tom-vy — diskret stil när allt är 0 */
.kr-crm-dashboard-empty {
    border-left-width: 1px;
    border-left-color: var(--kr-border);
    background: var(--kr-bg-alt);
}
.kr-crm-dashboard-empty .kr-section-title {
    color: var(--kr-text-muted);
    font-size: var(--kr-text-base);
    font-weight: 500;
    margin-bottom: var(--kr-space-2);
}

/* Lager-badge purple — något varmare ton (närmare orange-röd)
   så att "översålt" känns som varning snarare än premium */
.kr-lager-badge-purple {
    background: rgba(220, 38, 38, 0.10);
    color: #b91c1c;
}

/* Inställningar → Funktioner — feature-rader med risk-badge */
.kr-feature-group {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--kr-border, #e2e8f0);
}
.kr-feature-group:last-of-type {
    border-bottom: none;
}
.kr-feature-group .kr-card-title {
    margin-top: 0;
    margin-bottom: 12px;
}
.kr-feature-row {
    padding: 10px 0 12px;
    margin-bottom: 4px;
}
.kr-feature-row + .kr-feature-row {
    border-top: 1px dashed var(--kr-border, #e2e8f0);
}
.kr-feature-label {
    display: flex;
    align-items: center;
    gap: var(--kr-space-2);
    cursor: pointer;
    font-weight: 500;
}
.kr-feature-label input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}
.kr-feature-title {
    /* Inte flex:1 — låt risk-badge ligga direkt efter titeln */
    margin-right: var(--kr-space-2);
}
.kr-feature-help {
    margin: var(--kr-space-2) 0 var(--kr-space-1) 28px;
    font-size: var(--kr-text-sm);
    line-height: 1.5;
    color: var(--kr-text);
}
.kr-feature-tech {
    margin-left: 28px;
    font-size: var(--kr-text-xs);
    color: var(--kr-text-muted);
    opacity: 0.7;
}
.kr-feature-tech code {
    background: var(--kr-bg-alt);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: var(--kr-text-xs);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}

/* Risk-badges */
.kr-risk-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.5;
    flex-shrink: 0;
}
.kr-risk-low {
    background: rgba(22, 163, 74, 0.10);
    color: #15803d;
}
.kr-risk-medium {
    background: rgba(202, 138, 4, 0.12);
    color: #a16207;
}
.kr-risk-high {
    background: rgba(220, 38, 38, 0.10);
    color: #b91c1c;
}
body.kr-body-dark .kr-feature-tech code,
.kr-app.kr-theme-dark .kr-feature-tech code {
    background: var(--kr-bg-alt, #1e293b);
}

/* Bokslutscheckista */
.kr-arsbokslut-checklist {
    list-style: none;
    padding: 0;
    margin: 12px 0;
}
.kr-checklist-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    grid-template-areas: "icon label" "icon desc";
    column-gap: 12px;
    padding: 10px 14px;
    margin-bottom: 6px;
    border-radius: 6px;
    border-left: 4px solid #e2e8f0;
    background: #f8fafc;
}
.kr-checklist-icon {
    grid-area: icon;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
}
.kr-checklist-label { grid-area: label; }
.kr-checklist-desc {
    grid-area: desc;
    font-size: 12.5px;
    color: var(--kr-text-muted, #64748b);
    margin-top: 2px;
}
.kr-checklist-ok    { border-left-color: #16a34a; background: #f0fdf4; }
.kr-checklist-ok .kr-checklist-icon    { color: #16a34a; }
.kr-checklist-warn  { border-left-color: #f59e0b; background: #fffbeb; }
.kr-checklist-warn .kr-checklist-icon  { color: #b45309; }
.kr-checklist-error { border-left-color: #dc2626; background: #fef2f2; }
.kr-checklist-error .kr-checklist-icon { color: #dc2626; }
.kr-checklist-info  { border-left-color: #3b82f6; background: #eff6ff; }
.kr-checklist-info .kr-checklist-icon  { color: #3b82f6; }
body.kr-body-dark .kr-checklist-item,
.kr-app.kr-theme-dark .kr-checklist-item {
    background: var(--kr-bg-alt, #1e293b);
}
.kr-arsbokslut-preview > summary {
    cursor: pointer;
    padding: 10px 14px;
    background: var(--kr-gray-100, #f1f5f9);
    border-radius: 6px;
}
body.kr-body-dark .kr-arsbokslut-preview > summary,
.kr-app.kr-theme-dark .kr-arsbokslut-preview > summary {
    background: var(--kr-bg-alt, #1e293b);
}

/* Nestlad sub-dropdown: hover på item öppnar undermeny till höger */
.kr-nav-subdropdown {
    position: relative;
}
.kr-nav-subdropdown > .kr-nav-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.kr-nav-subdropdown > .kr-nav-dropdown-item::after {
    content: '\25B8'; /* ▸ */
    font-size: 11px;
    color: var(--kr-gray-500, #94a3b8);
}
.kr-nav-subdropdown-menu {
    position: absolute;
    top: -8px;
    left: 100%;
    background: var(--kr-card-bg, #fff);
    border: 1px solid var(--kr-border, #e2e8f0);
    border-radius: 6px;
    min-width: 180px;
    padding: 8px 0;
    display: none;
    z-index: 1100;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
.kr-nav-subdropdown:hover > .kr-nav-subdropdown-menu {
    display: block;
}
body.kr-body-dark .kr-nav-subdropdown-menu,
.kr-app.kr-theme-dark .kr-nav-subdropdown-menu {
    background: var(--kr-card-bg, #1e293b);
    border-color: var(--kr-border, #4b5563);
    box-shadow: 0 4px 16px rgba(0,0,0,0.30);
}

.kr-nav-dropdown-item-active {
    color: var(--kr-primary);
    font-weight: 600;
}
.kr-nav-dropdown-divider {
    height: 1px;
    margin: 4px 10px;
    background: var(--kr-border, #e2e8f0);
}
.kr-nav-dropdown-header {
    padding: 8px 14px 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kr-gray-500, #6b7280);
}
/* Main nav dropdown (Operativa ERP) */
.kr-nav-main-dropdown {
    display: inline-flex;
}
.kr-nav-main-dropdown > .kr-nav-link {
    cursor: pointer;
}
.kr-nav-main-dropdown > .kr-nav-dropdown-menu {
    margin-top: 0;
    padding: 8px 0;
    min-width: 200px;
}
body.kr-body-dark .kr-nav-dropdown-menu,
.kr-app.kr-theme-dark .kr-nav-dropdown-menu {
    background: var(--kr-card-bg, #1e293b);
    border-color: var(--kr-border, #4b5563);
    box-shadow: 0 4px 16px rgba(0,0,0,0.30);
}
body.kr-body-dark .kr-nav-dropdown-item,
.kr-app.kr-theme-dark .kr-nav-dropdown-item {
    color: var(--kr-text, #e2e8f0);
}
body.kr-body-dark .kr-nav-dropdown-item:hover,
.kr-app.kr-theme-dark .kr-nav-dropdown-item:hover {
    background: var(--kr-gray-200, #374151);
}
body.kr-body-dark .kr-nav-dropdown-header,
.kr-app.kr-theme-dark .kr-nav-dropdown-header {
    color: var(--kr-gray-400, #9ca3af);
}

@media (max-width: 900px) {
    .kr-ekf-subnav-row {
        gap: 3px;
        padding: 5px 8px;
    }
    .kr-ekf-nav-tab {
        font-size: 11.5px;
        padding: 4px 7px;
    }
    .kr-ekf-nav-spacer {
        flex-basis: 100%;
        height: 0;
    }
    .kr-ekf-nav-create {
        flex-wrap: wrap;
        width: 100%;
        padding-top: 4px;
        border-top: 1px solid var(--kr-border, #e2e8f0);
    }
}

/* ==========================================
   MINI-DASHBOARD (type-specific stats bar)
   ========================================== */
.kr-ekf-mini-dash {
    display: flex;
    gap: 16px;
    padding: 10px 16px;
    margin: 8px 0;
    background: var(--kr-bg-card, #fff);
    border: 1px solid var(--kr-border, #e2e8f0);
    border-radius: var(--kr-radius, 8px);
    overflow-x: auto;
}
.kr-mini-dash-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
    padding: 4px 12px;
    border-radius: 6px;
    transition: background 0.15s, transform 0.15s;
}
a.kr-mini-dash-item {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
a.kr-mini-dash-item:hover {
    background: rgba(37, 99, 235, 0.06);
    transform: scale(1.03);
}
.kr-app.kr-theme-dark a.kr-mini-dash-item:hover {
    background: rgba(96, 165, 250, 0.12);
}

/* Klickbara filter-kort på dashboarden */
button.kr-mini-dash-clickable {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
button.kr-mini-dash-clickable:hover {
    background: rgba(37, 99, 235, 0.06);
    transform: scale(1.03);
}
button.kr-mini-dash-clickable.kr-mini-dash-active {
    background: rgba(37, 99, 235, 0.10);
    border-color: rgba(37, 99, 235, 0.40);
}
.kr-app.kr-theme-dark button.kr-mini-dash-clickable:hover {
    background: rgba(96, 165, 250, 0.12);
}
.kr-app.kr-theme-dark button.kr-mini-dash-clickable.kr-mini-dash-active {
    background: rgba(96, 165, 250, 0.18);
    border-color: rgba(96, 165, 250, 0.50);
}
.kr-mini-dash-num {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--kr-text, #1f2937);
}
.kr-mini-dash-label {
    font-size: 11px;
    color: var(--kr-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 2px;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .kr-ekf-mini-dash {
        gap: 8px;
        padding: 8px 10px;
    }
    .kr-mini-dash-item {
        min-width: 56px;
        padding: 4px 6px;
    }
    .kr-mini-dash-num {
        font-size: 18px;
    }
}

/* ==========================================
   COLLAPSIBLE FILTER BAR
   ========================================== */
.kr-ekf-filter-bar {
    margin: 8px 0 12px;
    background: var(--kr-bg-card, #fff);
    border: 1px solid var(--kr-border, #e2e8f0);
    border-radius: var(--kr-radius, 8px);
    padding: 0;
}
.kr-ekf-filter-form {
    margin: 0;
}
.kr-ekf-filter-main {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
}
.kr-ekf-filter-main select,
.kr-ekf-filter-main input[type="number"] {
    padding: 7px 12px;
    border: 1px solid var(--kr-input-border, #d1d5db);
    border-radius: 6px;
    background: var(--kr-input-bg, #fff);
    color: var(--kr-text, #1f2937);
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
}
.kr-ekf-filter-main select:focus,
.kr-ekf-filter-main input[type="number"]:focus {
    border-color: var(--kr-primary, #3b82f6);
    box-shadow: var(--kr-focus-shadow-light);
}
.kr-ekf-search-input {
    flex: 1;
    min-width: 0;
    padding: 7px 12px;
    border: 1px solid var(--kr-input-border, #d1d5db);
    border-radius: 6px;
    background: var(--kr-input-bg, #fff);
    color: var(--kr-text, #1f2937);
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
}
.kr-ekf-search-input:focus {
    border-color: var(--kr-primary, #3b82f6);
    box-shadow: var(--kr-focus-shadow-light);
}
.kr-ekf-filter-toggle {
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid var(--kr-border, #e2e8f0);
    border-radius: 6px;
    background: var(--kr-bg-alt, #f9fafb);
    color: var(--kr-text-muted, #6b7280);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.kr-ekf-filter-toggle:hover {
    background: var(--kr-gray-200, #e5e7eb);
    color: var(--kr-text, #1f2937);
}
.kr-ekf-filter-toggle.open {
    background: var(--kr-primary, #3b82f6);
    color: #fff;
    border-color: var(--kr-primary, #3b82f6);
}
.kr-ekf-filter-extra {
    display: none;
    padding: 0 12px 10px;
    border-top: 1px solid var(--kr-border, #e2e8f0);
}
.kr-ekf-filter-extra.open {
    display: block;
}
.kr-ekf-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    padding-top: 10px;
}
.kr-ekf-filter-row .kr-filter-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.kr-ekf-filter-row .kr-filter-group label {
    font-size: 11px;
    font-weight: 600;
    color: var(--kr-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.kr-ekf-filter-row .kr-filter-group select,
.kr-ekf-filter-row .kr-filter-group input[type="date"] {
    padding: 6px 10px;
    border: 1px solid var(--kr-input-border, #d1d5db);
    border-radius: 6px;
    background: var(--kr-input-bg, #fff);
    color: var(--kr-text, #1f2937);
    font-size: 13px;
    min-width: 130px;
}
@media (max-width: 600px) {
    .kr-ekf-filter-main {
        flex-wrap: wrap;
    }
    .kr-ekf-search-input {
        flex-basis: 100%;
    }
    .kr-ekf-filter-row {
        flex-direction: column;
    }
    .kr-ekf-filter-row .kr-filter-group {
        width: 100%;
    }
    .kr-ekf-filter-row .kr-filter-group select,
    .kr-ekf-filter-row .kr-filter-group input[type="date"] {
        width: 100%;
    }
}

/* Dashboard clickable cards */
.kr-dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.kr-dashboard-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    border-radius: 8px;
    background: var(--kr-card-bg, #ffffff);
    border: 1px solid var(--kr-border, #e2e8f0);
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
a.kr-dashboard-card {
    cursor: pointer;
}
a.kr-dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: var(--kr-primary, #2563eb);
}
.kr-dashboard-card .kr-stat-count {
    font-size: 12px;
    color: var(--kr-text-muted, #6b7280);
    margin-top: 2px;
}
@media (max-width: 768px) {
    .kr-dashboard-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Settings grid */
.kr-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
a.kr-settings-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 20px;
    background: var(--kr-card-bg, #ffffff);
    border: 1px solid var(--kr-border, #e2e8f0);
    border-radius: 8px;
    text-decoration: none;
    color: var(--kr-text, #1f2937);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
a.kr-settings-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: var(--kr-primary, #2563eb);
}
.kr-settings-card-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}
.kr-settings-card strong {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
}
.kr-settings-card p {
    margin: 0;
    font-size: 13px;
}

/* Artikel autocomplete dropdown (placeras i body för att undvika overflow-klippning) */
.kr-artikel-dropdown {
    position: absolute;
    z-index: 10000;
    background: var(--kr-bg-card, #ffffff);
    border: 1px solid var(--kr-border, #e2e8f0);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    max-height: 280px;
    overflow-y: auto;
}
.kr-artikel-option {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--kr-border, #f1f5f9);
    font-size: 13px;
}
.kr-artikel-option:last-child {
    border-bottom: none;
}
.kr-artikel-option:hover {
    background: var(--kr-gray-50, #f8fafc);
}
.kr-artikel-option strong {
    display: block;
    font-size: 13px;
    color: var(--kr-text, #1f2937);
}
.kr-artikel-meta {
    font-size: 11px;
    color: var(--kr-text-muted, #6b7280);
}
.kr-saldo-ok {
    color: #059669;
}
.kr-saldo-low {
    color: #dc2626;
    font-weight: 600;
}

/* Artikel dropdown – dark mode (appended to body, OUTSIDE .kr-app).
   Måste använda EXPLICITA färger, inte var(--kr-bg-card, ...): dark-variablerna
   sätts bara på .kr-app.kr-theme-dark, så utanför .kr-app ärvs den ljusa
   :root-variabeln (#fff) och fallbacken slår aldrig in → annars vit bakgrund. */
body.kr-body-dark .kr-artikel-dropdown {
    background: #1f2937;
    border-color: #4b5563;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
body.kr-body-dark .kr-artikel-option {
    border-bottom-color: #374151;
    color: #e5e7eb;
}
body.kr-body-dark .kr-artikel-option:hover {
    background: #374151;
}
body.kr-body-dark .kr-artikel-option strong {
    color: #f9fafb;
}
body.kr-body-dark .kr-artikel-meta {
    color: #9ca3af;
}
/* Saldo-färger måste ljusas upp för kontrast mot mörk bakgrund */
body.kr-body-dark .kr-saldo-ok {
    color: #34d399;
}
body.kr-body-dark .kr-saldo-low {
    color: #f87171;
}

/* Inline form */
.kr-form-inline .kr-form-row {
    align-items: flex-end;
}

/* ==========================================
   ARTIKLAR / LAGER / PRISER
   ========================================== */

/* Lager badges */
.kr-lager-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}
.kr-lager-badge-green {
    background: rgba(22, 163, 74, 0.1);
    color: #16a34a;
}
.kr-lager-badge-yellow {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}
.kr-lager-badge-red {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}
.kr-lager-badge-purple {
    background: rgba(147, 51, 234, 0.15);
    color: #7e22ce;
}
.kr-mini-dash-alert {
    box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.4);
    border-radius: 6px;
}

.kr-col-center {
    text-align: center;
}
.kr-input-narrow {
    width: 80px;
}

/* Price grid inline editing */
.kr-price-table td {
    transition: background 0.15s;
}
.kr-price-editable {
    cursor: pointer;
    position: relative;
}
.kr-price-editable:hover {
    background: rgba(59, 130, 246, 0.06);
}
.kr-price-editable input,
.kr-price-editable select {
    margin: 0;
    border: 1px solid var(--kr-primary);
    border-radius: 4px;
    background: var(--kr-input-bg);
    color: var(--kr-text);
    padding: 4px 6px;
    font-size: 13px;
    width: 100%;
}
.kr-marginal-pct,
.kr-marginal-kr {
    color: var(--kr-text-muted);
    font-size: 12px;
}

/* Artikel image upload */
.kr-artikel-image-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.kr-artikel-image-preview img {
    border-radius: var(--kr-radius);
    border: 1px solid var(--kr-border);
}

/* Company health icons in search suggestions */
.kr-health-up {
    color: var(--kr-success);
    font-size: 14px;
}
.kr-health-down {
    color: var(--kr-error);
    font-size: 14px;
}

/* Autocomplete wrapper for leverantör/artikel search */
.kr-autocomplete-wrap {
    position: relative;
}
.kr-autocomplete-wrap .kr-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
    border-radius: 6px;
    box-shadow: var(--kr-shadow-lg);
    max-height: 200px;
    overflow-y: auto;
    display: none;
}
.kr-autocomplete-wrap .kr-suggestions.active {
    display: block;
}

/* Input group (select + inline button) */
.kr-input-group {
    display: flex;
    gap: 4px;
}
.kr-input-group .kr-select,
.kr-input-group select {
    flex: 1;
}

/* Utskick article tags (scoped to avoid conflict with existing .kr-tag) */
#kr-utskick-artiklar-list .kr-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 16px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--kr-primary);
    font-size: 13px;
    margin: 2px 4px 2px 0;
}
.kr-tag-remove {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    line-height: 1;
    opacity: 0.7;
}
.kr-tag-remove:hover {
    opacity: 1;
}

/* Status info box (e.g. IMAP last run) */
.kr-status-box {
    margin: 12px 0;
    padding: 12px;
    background: var(--kr-gray-50, #f9fafb);
    border-radius: 6px;
    font-size: 13px;
}

/* Bulk price adjustment controls */
.kr-bulk-price-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

/* Description block in article view */
.kr-description {
    font-size: 14px;
    line-height: 1.6;
    color: var(--kr-text);
}

/* ==========================================
   "Visa mina" toggle
   ========================================== */
.kr-mina-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: var(--kr-radius, 6px);
    border: 1px solid var(--kr-border, #e2e8f0);
    background: var(--kr-card-bg, #ffffff);
    color: var(--kr-text, #1e293b);
    white-space: nowrap;
    user-select: none;
    transition: background 0.15s, border-color 0.15s;
}
.kr-mina-toggle:hover {
    background: var(--kr-gray-100, #f1f5f9);
    border-color: var(--kr-gray-300, #cbd5e1);
}
.kr-mina-checkbox {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--kr-gray-300, #cbd5e1);
    border-radius: 4px;
    background: var(--kr-card-bg, #ffffff);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.kr-mina-checkbox:checked {
    background: var(--kr-primary, #3b82f6);
    border-color: var(--kr-primary, #3b82f6);
}
.kr-mina-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.kr-mina-checkbox:checked + .kr-mina-label {
    color: var(--kr-primary, #3b82f6);
    font-weight: 600;
}
.kr-mina-label {
    line-height: 1;
}
body.kr-body-dark .kr-mina-toggle,
.kr-app.kr-theme-dark .kr-mina-toggle {
    background: var(--kr-gray-200, #374151);
    border-color: var(--kr-border, #4b5563);
    color: var(--kr-gray-400, #9ca3af);
}
body.kr-body-dark .kr-mina-toggle:hover,
.kr-app.kr-theme-dark .kr-mina-toggle:hover {
    background: var(--kr-gray-300, #4b5563);
}
body.kr-body-dark .kr-mina-checkbox,
.kr-app.kr-theme-dark .kr-mina-checkbox {
    background: var(--kr-gray-300, #4b5563);
    border-color: var(--kr-gray-400, #6b7280);
}

/* ==========================================
   EKF List Layout with To-Do sidebar
   ========================================== */
.kr-ekf-list-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
    align-items: start;
}

.kr-ekf-list-main {
    min-width: 0;
}

/* ==========================================
   To-Do Widget
   ========================================== */
.kr-todo-widget {
    position: sticky;
    top: 20px;
    background: var(--kr-card-bg, #fff);
    border: 1px solid var(--kr-border, #e5e7eb);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.kr-todo-widget-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: var(--kr-text, #111827);
    display: flex;
    align-items: center;
    gap: 6px;
}

.kr-todo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--kr-text, #111827);
    font-size: 13px;
    line-height: 1.3;
    transition: background 0.15s;
    border-left: 3px solid transparent;
}

.kr-todo-item:hover {
    background: var(--kr-gray-100, #f3f4f6);
    text-decoration: none;
    color: var(--kr-text, #111827);
}

.kr-todo-item:last-child {
    margin-bottom: 0;
}

.kr-todo-item-danger {
    border-left-color: #ef4444;
}

.kr-todo-item-warning {
    border-left-color: #f59e0b;
}

.kr-todo-item-info {
    border-left-color: #22c55e;
}

.kr-todo-icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    font-size: 14px;
}

.kr-todo-text {
    flex: 1;
    min-width: 0;
}

.kr-todo-count {
    flex-shrink: 0;
    background: var(--kr-gray-100, #f3f4f6);
    color: var(--kr-text, #111827);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
}

.kr-todo-item-danger .kr-todo-count {
    background: #fef2f2;
    color: #dc2626;
}

.kr-todo-item-warning .kr-todo-count {
    background: #fffbeb;
    color: #d97706;
}

/* Responsive: sidebar under main on small screens */
@media (max-width: 992px) {
    .kr-ekf-list-layout {
        grid-template-columns: 1fr;
    }
    .kr-todo-widget {
        position: static;
        order: -1;
    }
    .kr-todo-items-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .kr-todo-item {
        flex: 1 1 auto;
        min-width: 180px;
        margin-bottom: 0;
    }
}

/* ==========================================
   RABATT: Discount badges, auto-indicator
   ========================================== */

/* Auto-applied discount indicator */
.kr-ekf-input-disc.kr-rabatt-auto {
    background-color: rgba(16, 185, 129, 0.08);
    border-color: #10b981;
}

/* Rabatt type badges */
.kr-rabatt-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
.kr-rabatt-badge-kund_kategori {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}
.kr-rabatt-badge-kund_artikel {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}
.kr-rabatt-badge-kampanj {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

/* Rabatt status badges */
.kr-status-badge.kr-status-active {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}
.kr-status-badge.kr-status-inactive {
    color: #6b7280;
    background: rgba(107, 114, 128, 0.1);
}
.kr-status-badge.kr-status-expired {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Rabatt form: hide fields dynamically */
.kr-rabatt-field-hidden {
    display: none;
}

/* Dark mode variants */
body.kr-body-dark .kr-ekf-input-disc.kr-rabatt-auto,
.kr-app.kr-theme-dark .kr-ekf-input-disc.kr-rabatt-auto {
    background-color: rgba(16, 185, 129, 0.15);
    border-color: #10b981;
}
body.kr-body-dark .kr-rabatt-badge-kund_kategori,
.kr-app.kr-theme-dark .kr-rabatt-badge-kund_kategori {
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.2);
}
body.kr-body-dark .kr-rabatt-badge-kund_artikel,
.kr-app.kr-theme-dark .kr-rabatt-badge-kund_artikel {
    color: #34d399;
    background: rgba(16, 185, 129, 0.2);
}
body.kr-body-dark .kr-rabatt-badge-kampanj,
.kr-app.kr-theme-dark .kr-rabatt-badge-kampanj {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.2);
}
body.kr-body-dark .kr-status-badge.kr-status-active,
.kr-app.kr-theme-dark .kr-status-badge.kr-status-active {
    color: #34d399;
    background: rgba(16, 185, 129, 0.2);
}
body.kr-body-dark .kr-status-badge.kr-status-inactive,
.kr-app.kr-theme-dark .kr-status-badge.kr-status-inactive {
    color: #9ca3af;
    background: rgba(107, 114, 128, 0.2);
}
body.kr-body-dark .kr-status-badge.kr-status-expired,
.kr-app.kr-theme-dark .kr-status-badge.kr-status-expired {
    color: #f87171;
    background: rgba(239, 68, 68, 0.2);
}

/* ERP Sub-nav: spacer and digital clock */
.kr-ekf-nav-spacer {
    flex: 1;
}
.kr-nav-clock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    font-family: var(--kr-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--kr-text, #1e293b);
    padding: 0 12px;
    border-radius: var(--kr-radius, 6px);
    background: var(--kr-gray-100, #f1f5f9);
    border: 1px solid var(--kr-border, #e2e8f0);
    white-space: nowrap;
    margin-right: 4px;
    box-sizing: border-box;
}
.kr-clock-date {
    font-weight: 500;
}
.kr-clock-time {
    font-weight: 700;
}
.kr-clock-wrap {
    position: relative;
    display: inline-flex;
    margin-right: 4px;
}
.kr-clock-wrap .kr-nav-clock {
    margin-right: 0;
}
.kr-clock-tooltip {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    padding: 8px 14px;
    background: var(--kr-bg-card, #fff);
    border: 1px solid var(--kr-border, #e2e8f0);
    border-radius: var(--kr-radius, 6px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    font-size: 13px;
    line-height: 1.5;
    color: var(--kr-text, #1e293b);
    white-space: nowrap;
    z-index: 200;
    text-align: center;
}
.kr-clock-wrap:hover .kr-clock-tooltip {
    display: block;
}
body.kr-body-dark .kr-nav-clock,
.kr-app.kr-theme-dark .kr-nav-clock {
    color: var(--kr-gray-700, #e5e7eb);
    background: var(--kr-gray-200, #374151);
    border-color: var(--kr-border, #4b5563);
}
body.kr-body-dark .kr-clock-tooltip,
.kr-app.kr-theme-dark .kr-clock-tooltip {
    background: var(--kr-gray-200, #374151);
    border-color: var(--kr-border, #4b5563);
    color: var(--kr-gray-700, #e5e7eb);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

/* App header */
.kr-app-header {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    padding: 12px 0 8px 0;
    margin-bottom: 4px;
}

.kr-app-brand {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.kr-app-logo {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--kr-primary) 0%, var(--kr-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.kr-app-version {
    font-size: 11px;
    font-weight: 500;
    color: var(--kr-gray-400);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color 0.15s;
}

.kr-app-version:hover {
    color: var(--kr-primary);
}

/* Version tooltip with changelog */
.kr-version-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.kr-version-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    width: 280px;
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius-lg);
    box-shadow: var(--kr-shadow-lg);
    z-index: 9999;
    overflow: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    padding-top: 8px;
    margin-top: 0;
}
/* Invisible bridge to maintain hover when moving to tooltip */
.kr-version-tooltip::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}

.kr-version-wrapper:hover .kr-version-tooltip {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.kr-version-info {
    font-size: 10px;
    opacity: 0.5;
    margin-left: 2px;
}

.kr-version-wrapper:hover .kr-version-info {
    opacity: 1;
}

.kr-version-tooltip-title {
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--kr-text);
    background: var(--kr-bg-alt);
    border-bottom: 1px solid var(--kr-border);
}

.kr-changelog-entry {
    padding: 12px 16px;
    border-bottom: 1px solid var(--kr-border);
}

.kr-changelog-entry:last-child {
    border-bottom: none;
}

.kr-changelog-version {
    font-size: 13px;
    font-weight: 600;
    color: var(--kr-primary);
}

.kr-changelog-date {
    font-size: 11px;
    color: var(--kr-gray-400);
    margin-left: 8px;
}

.kr-changelog-changes {
    margin-top: 8px;
}

.kr-changelog-item {
    font-size: 12px;
    color: var(--kr-text-muted);
    padding: 2px 0 2px 12px;
    position: relative;
}

.kr-changelog-item::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--kr-gray-400);
}

/* Dark mode for tooltip */
body.kr-body-dark .kr-version-tooltip,
.kr-app.kr-theme-dark .kr-version-tooltip {
    background: var(--kr-bg-card, #1f2937);
    border-color: var(--kr-border, #374151);
}

body.kr-body-dark .kr-version-tooltip-title,
.kr-app.kr-theme-dark .kr-version-tooltip-title {
    background: var(--kr-bg-alt, #111827);
}

body.kr-body-dark .kr-app-logo,
.kr-app.kr-theme-dark .kr-app-logo {
    background: linear-gradient(135deg, var(--kr-primary-light, #60a5fa) 0%, var(--kr-primary, #3b82f6) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.kr-body-dark .kr-app-version,
.kr-app.kr-theme-dark .kr-app-version {
    color: var(--kr-gray-500, #6b7280);
}

/* Changelog link in tooltip */
.kr-changelog-link {
    display: block;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--kr-primary);
    text-align: center;
    text-decoration: none;
    background: var(--kr-bg-alt);
    border-top: 1px solid var(--kr-border);
    transition: background 0.15s ease;
}
.kr-changelog-link:hover {
    background: var(--kr-gray-100);
    text-decoration: none;
}
body.kr-body-dark .kr-changelog-link,
.kr-app.kr-theme-dark .kr-changelog-link {
    background: var(--kr-bg-alt, #111827);
}
body.kr-body-dark .kr-changelog-link:hover,
.kr-app.kr-theme-dark .kr-changelog-link:hover {
    background: var(--kr-gray-800, #1f2937);
}

/* Changelog Page */
.kr-changelog-page {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    margin-top: 16px;
}
.kr-changelog-sidebar {
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius);
    padding: 8px;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
.kr-changelog-version-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kr-changelog-version-item {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--kr-text);
    transition: background 0.15s ease;
}
.kr-changelog-version-item:hover {
    background: var(--kr-gray-100);
    text-decoration: none;
}
.kr-changelog-version-item.active {
    background: var(--kr-primary);
    color: white;
}
.kr-changelog-v-number {
    font-size: 14px;
    font-weight: 600;
}
.kr-changelog-v-date {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 2px;
}
.kr-changelog-content {
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius);
    padding: 24px;
}
.kr-changelog-detail-header {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--kr-border);
}
.kr-changelog-detail-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}
.kr-changelog-detail-date {
    font-size: 14px;
    color: var(--kr-text-muted);
}
.kr-changelog-detail-list {
    margin: 0;
    padding: 0 0 0 20px;
    list-style: disc;
}
.kr-changelog-detail-list li {
    padding: 8px 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--kr-text);
}

/* Dark mode for changelog page */
body.kr-body-dark .kr-changelog-sidebar,
.kr-app.kr-theme-dark .kr-changelog-sidebar,
body.kr-body-dark .kr-changelog-content,
.kr-app.kr-theme-dark .kr-changelog-content {
    background: var(--kr-bg-card, #1f2937);
    border-color: var(--kr-border, #374151);
}
body.kr-body-dark .kr-changelog-version-item:hover,
.kr-app.kr-theme-dark .kr-changelog-version-item:hover {
    background: var(--kr-gray-800, #374151);
}

/* Responsive changelog */
@media (max-width: 768px) {
    .kr-changelog-page {
        grid-template-columns: 1fr;
    }
    .kr-changelog-sidebar {
        position: static;
        max-height: none;
    }
}

/* Handbook */
.kr-handbok-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--kr-space-4);
    align-items: start;
}
.kr-handbok-sidebar {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--kr-card-bg);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius);
    padding: var(--kr-space-2);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}
.kr-handbok-nav-item {
    display: block;
    padding: 8px 12px;
    font-size: var(--kr-text-sm);
    color: var(--kr-text-muted);
    text-decoration: none;
    border-radius: var(--kr-radius);
    transition: background 0.15s, color 0.15s;
}
.kr-handbok-nav-item:hover {
    background: var(--kr-bg-alt);
    color: var(--kr-text);
}
.kr-handbok-nav-item.active {
    background: var(--kr-primary);
    color: #fff;
    font-weight: 600;
}
.kr-handbok-content {
    background: var(--kr-card-bg);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius);
    padding: var(--kr-space-5) var(--kr-space-6);
    min-height: 400px;
}
.kr-handbok-article-title {
    font-size: var(--kr-text-xl);
    color: var(--kr-text);
    margin: 0 0 var(--kr-space-4);
    padding-bottom: var(--kr-space-3);
    border-bottom: 2px solid var(--kr-border);
}
.kr-handbok-article h3 {
    font-size: var(--kr-text-base);
    color: var(--kr-text);
    margin: var(--kr-space-5) 0 var(--kr-space-2);
}
.kr-handbok-article h3:first-of-type {
    margin-top: 0;
}
.kr-handbok-article p {
    font-size: var(--kr-text-sm);
    color: var(--kr-text);
    line-height: 1.7;
    margin: 0 0 var(--kr-space-3);
}
.kr-handbok-article ul,
.kr-handbok-article ol {
    font-size: var(--kr-text-sm);
    color: var(--kr-text);
    line-height: 1.7;
    margin: 0 0 var(--kr-space-3);
    padding-left: var(--kr-space-5);
}
.kr-handbok-article li {
    margin-bottom: var(--kr-space-1);
}
.kr-handbok-article kbd {
    display: inline-block;
    padding: 2px 6px;
    font-size: 12px;
    font-family: monospace;
    background: var(--kr-bg-alt);
    border: 1px solid var(--kr-border);
    border-radius: 3px;
    box-shadow: 0 1px 0 var(--kr-border);
}
.kr-handbok-article code {
    background: var(--kr-bg-alt);
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 13px;
}
.kr-nav-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px 0 8px;
    border-radius: 13px;
    background: var(--kr-bg-alt);
    color: var(--kr-text-muted);
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    margin-right: var(--kr-space-2);
}
.kr-nav-help-btn .kr-nav-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--kr-bg-card);
    color: var(--kr-text-muted);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
}
.kr-nav-help-btn .kr-nav-help-label {
    font-weight: 600;
    letter-spacing: 0.01em;
}
.kr-nav-help-btn:hover {
    background: var(--kr-primary);
    color: #fff;
}
.kr-nav-help-btn:hover .kr-nav-help-icon {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}
/* Vid trånga viewports: dölj texten, behåll rund ?-ikon (tillgänglig via aria-label) */
@media (max-width: 900px) {
    .kr-nav-help-btn {
        padding: 0;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        gap: 0;
    }
    .kr-nav-help-btn .kr-nav-help-icon {
        background: transparent;
        width: auto;
        height: auto;
        font-size: 13px;
    }
    .kr-nav-help-btn .kr-nav-help-label {
        display: none;
    }
}

/* Logga ut-knapp i toppbaren — diskret pill, röd-ton vid hover */
.kr-nav-logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 26px;
    padding: 0 12px;
    border-radius: 13px;
    background: var(--kr-bg-alt);
    color: var(--kr-text-muted);
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    margin-left: var(--kr-space-2);
}
.kr-nav-logout-btn .kr-nav-logout-icon {
    font-size: 14px;
    line-height: 1;
}
.kr-nav-logout-btn .kr-nav-logout-label {
    font-weight: 600;
    letter-spacing: 0.01em;
}
.kr-nav-logout-btn:hover {
    background: #dc2626;
    color: #fff;
}
body.kr-body-dark .kr-nav-logout-btn:hover,
.kr-app.kr-theme-dark .kr-nav-logout-btn:hover {
    background: #f87171;
    color: #1f2937;
}
/* Mobil: behåll ikon, dölj text (tooltip via title) */
@media (max-width: 900px) {
    .kr-nav-logout-btn {
        padding: 0;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        gap: 0;
    }
    .kr-nav-logout-btn .kr-nav-logout-label {
        display: none;
    }
}
@media (max-width: 768px) {
    .kr-handbok-layout {
        grid-template-columns: 1fr;
    }
    .kr-handbok-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        max-height: none;
        gap: var(--kr-space-1);
    }
    .kr-handbok-nav-item {
        padding: 6px 10px;
        font-size: var(--kr-text-xs);
    }
    .kr-handbok-content {
        padding: var(--kr-space-4);
    }
}

/* Version Popup (new features) */
.kr-version-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}
.kr-version-popup {
    background: var(--kr-bg-card, white);
    border-radius: var(--kr-radius-lg);
    max-width: 560px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--kr-shadow-lg);
    position: relative;
}
.kr-version-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--kr-gray-400);
    font-size: 24px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.kr-version-popup-close:hover {
    background: var(--kr-gray-100);
    color: var(--kr-gray-600);
}
.kr-version-popup-header {
    padding: 24px 24px 16px;
    text-align: center;
    border-bottom: 1px solid var(--kr-border);
}
.kr-version-popup-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 8px;
}
.kr-version-popup-header h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--kr-text);
}
.kr-version-popup-content {
    padding: 16px 24px;
    overflow-y: auto;
    flex: 1;
}
.kr-version-popup-version {
    margin-bottom: 20px;
}
.kr-version-popup-version:last-child {
    margin-bottom: 0;
}
.kr-version-popup-version h3 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--kr-primary);
}
.kr-version-popup-date {
    font-weight: 400;
    color: var(--kr-text-muted);
    font-size: 14px;
}
.kr-version-popup-version ul {
    margin: 0;
    padding: 0 0 0 20px;
    list-style: disc;
}
.kr-version-popup-version li {
    padding: 4px 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--kr-text);
}
.kr-version-popup-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--kr-border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: var(--kr-bg-alt);
}

/* Dark mode for version popup */
body.kr-body-dark .kr-version-popup,
.kr-app.kr-theme-dark .kr-version-popup {
    background: var(--kr-bg-card, #1f2937);
}
body.kr-body-dark .kr-version-popup-close:hover,
.kr-app.kr-theme-dark .kr-version-popup-close:hover {
    background: var(--kr-gray-700);
    color: var(--kr-gray-300);
}
body.kr-body-dark .kr-version-popup-footer,
.kr-app.kr-theme-dark .kr-version-popup-footer {
    background: var(--kr-bg-alt, #111827);
}

@media (max-width: 768px) {
    .kr-app-header {
        padding: 8px 0 4px 0;
    }
    .kr-app-logo {
        font-size: 18px;
    }
    .kr-app-version {
        font-size: 10px;
    }
}

/* Att göra dropdown (huvudnav) */
.kr-nav-todo-dropdown {
    position: relative;
    margin-right: 4px;
}
.kr-nav-todo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--kr-text, #1e293b);
    background: var(--kr-gray-100, #f1f5f9);
    border: 1px solid var(--kr-border, #e2e8f0);
    border-radius: var(--kr-radius, 6px);
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background 0.15s, color 0.15s;
}
.kr-nav-todo-dropdown:hover > .kr-nav-todo-btn,
.kr-nav-todo-dropdown.open > .kr-nav-todo-btn {
    background: var(--kr-primary, #3b82f6);
    color: #fff;
    border-color: var(--kr-primary, #3b82f6);
}
.kr-todo-badge {
    display: inline-block;
    min-width: 18px;
    padding: 1px 5px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    border-radius: 10px;
    color: #fff;
}
.kr-todo-badge-danger { background: #ef4444; }
.kr-todo-badge-warning { background: #f59e0b; }
.kr-nav-todo-dropdown:hover .kr-todo-badge,
.kr-nav-todo-dropdown.open .kr-todo-badge {
    background: rgba(255,255,255,0.25);
    color: #fff;
}
.kr-nav-todo-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 200;
    width: 320px;
    padding-top: 8px;
}
.kr-nav-todo-dropdown:hover > .kr-nav-todo-menu,
.kr-nav-todo-dropdown.open > .kr-nav-todo-menu {
    display: block;
}
.kr-nav-todo-header {
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kr-text-muted, #6b7280);
    background: var(--kr-card-bg, #fff);
    border: 1px solid var(--kr-border, #e2e8f0);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}
.kr-nav-todo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--kr-text, #1e293b);
    text-decoration: none;
    background: var(--kr-card-bg, #ffffff);
    border-left: 1px solid var(--kr-border, #e2e8f0);
    border-right: 1px solid var(--kr-border, #e2e8f0);
    border-bottom: 1px solid var(--kr-border, #e2e8f0);
    transition: background 0.12s;
}
.kr-nav-todo-item:last-child {
    border-radius: 0 0 8px 8px;
}
.kr-nav-todo-item:hover {
    background: var(--kr-gray-50, #f8fafc);
}
.kr-nav-todo-item .kr-todo-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}
.kr-nav-todo-item .kr-todo-text {
    flex: 1;
    font-weight: 500;
}
.kr-nav-todo-item .kr-todo-count {
    font-weight: 700;
    font-size: 13px;
    min-width: 28px;
    text-align: center;
    padding: 2px 8px;
    border-radius: 12px;
    flex-shrink: 0;
}
.kr-todo-item-danger .kr-todo-icon { color: #ef4444; }
.kr-todo-item-warning .kr-todo-icon { color: #f59e0b; }
.kr-todo-item-info .kr-todo-icon { color: #3b82f6; }
.kr-todo-item-danger .kr-todo-count { background: #fef2f2; color: #dc2626; }
.kr-todo-item-warning .kr-todo-count { background: #fffbeb; color: #d97706; }
.kr-todo-item-info .kr-todo-count { background: #eff6ff; color: #2563eb; }
/* Dark mode */
body.kr-body-dark .kr-nav-todo-btn,
.kr-app.kr-theme-dark .kr-nav-todo-btn {
    color: var(--kr-gray-700, #e5e7eb);
    background: var(--kr-gray-200, #374151);
    border-color: var(--kr-border, #4b5563);
}
body.kr-body-dark .kr-nav-todo-header,
.kr-app.kr-theme-dark .kr-nav-todo-header {
    background: var(--kr-card-bg, #1e293b);
    color: var(--kr-text-muted, #9ca3af);
    border-color: var(--kr-border, #4b5563);
}
body.kr-body-dark .kr-nav-todo-item,
.kr-app.kr-theme-dark .kr-nav-todo-item {
    background: var(--kr-card-bg, #1e293b);
    color: var(--kr-text, #e2e8f0);
    border-color: var(--kr-border, #4b5563);
}
body.kr-body-dark .kr-nav-todo-item:hover,
.kr-app.kr-theme-dark .kr-nav-todo-item:hover {
    background: var(--kr-gray-200, #374151);
}
body.kr-body-dark .kr-todo-item-danger .kr-todo-count,
.kr-app.kr-theme-dark .kr-todo-item-danger .kr-todo-count { background: rgba(239,68,68,0.2); color: #f87171; }
body.kr-body-dark .kr-todo-item-warning .kr-todo-count,
.kr-app.kr-theme-dark .kr-todo-item-warning .kr-todo-count { background: rgba(245,158,11,0.2); color: #fbbf24; }
body.kr-body-dark .kr-todo-item-info .kr-todo-count,
.kr-app.kr-theme-dark .kr-todo-item-info .kr-todo-count { background: rgba(37,99,235,0.2); color: #60a5fa; }

/* Inköpsorder status badges */
.kr-inkop-badge-utkast {
    background: #f1f5f9;
    color: #6b7280;
}
.kr-inkop-badge-bestald {
    background: #dbeafe;
    color: #1d4ed8;
}
.kr-inkop-badge-delvis {
    background: #fef3c7;
    color: #92400e;
}
.kr-inkop-badge-mottagen {
    background: #d1fae5;
    color: #065f46;
}
.kr-inkop-badge-annullerad {
    background: #fee2e2;
    color: #991b1b;
}

/* Inköpsorder status badges - dark mode */
body.kr-body-dark .kr-app .kr-inkop-badge-utkast {
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
}
body.kr-body-dark .kr-app .kr-inkop-badge-bestald {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}
body.kr-body-dark .kr-app .kr-inkop-badge-delvis {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}
body.kr-body-dark .kr-app .kr-inkop-badge-mottagen {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}
body.kr-body-dark .kr-app .kr-inkop-badge-annullerad {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

/* ==========================================
   MOBILE APP STYLES
   ========================================== */

/* Mobile hamburger menu button */
.kr-mobile-menu-btn {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--kr-radius);
    cursor: pointer;
    color: var(--kr-text);
    transition: background 0.15s;
}

.kr-hamburger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
}

.kr-mobile-menu-btn:hover {
    background: var(--kr-gray-100);
}

/* Mobile slide-out menu */
.kr-mobile-nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.kr-mobile-nav-overlay.active {
    opacity: 1;
}

.kr-mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    background: var(--kr-bg-card);
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
}

.kr-mobile-nav.active {
    transform: translateX(0);
}

.kr-mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--kr-border);
    background: var(--kr-bg-alt);
}

.kr-mobile-nav-brand {
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--kr-primary) 0%, var(--kr-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.kr-mobile-nav-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    color: var(--kr-gray-500);
    cursor: pointer;
}

.kr-mobile-nav-close:hover {
    background: var(--kr-gray-100);
}

.kr-mobile-nav-links {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
    -webkit-overflow-scrolling: touch;
}

.kr-mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 500;
    color: var(--kr-text);
    text-decoration: none;
    transition: background 0.15s;
}

.kr-mobile-nav-link:hover,
.kr-mobile-nav-link:active {
    background: var(--kr-gray-50);
    text-decoration: none;
}

.kr-mobile-nav-link.active {
    background: rgba(37, 99, 235, 0.1);
    color: var(--kr-primary);
}

.kr-mobile-nav-link .kr-nav-icon {
    font-size: 20px;
    width: 28px;
    text-align: center;
}

.kr-mobile-nav-divider {
    height: 1px;
    background: var(--kr-border);
    margin: 8px 20px;
}

.kr-mobile-nav-section {
    padding: 8px 20px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kr-gray-400);
}

/* Bottom navigation bar for mobile */
.kr-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: var(--kr-bg-card);
    border-top: 1px solid var(--kr-border);
    z-index: 9990;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.kr-bottom-nav-inner {
    display: flex;
    height: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.kr-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    font-size: 10px;
    font-weight: 500;
    color: var(--kr-gray-500);
    text-decoration: none;
    transition: color 0.15s;
}

.kr-bottom-nav-item:hover,
.kr-bottom-nav-item:active {
    color: var(--kr-primary);
    text-decoration: none;
}

.kr-bottom-nav-item.active {
    color: var(--kr-primary);
}

.kr-bottom-nav-icon {
    font-size: 22px;
    line-height: 1;
}

.kr-bottom-nav-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Mobile responsive breakpoint */
@media screen and (max-width: 768px) {
    /* Show hamburger button on mobile */
    .kr-mobile-menu-btn {
        display: flex;
        flex-shrink: 0;
    }

    /* Hide desktop nav links — use hamburger drawer instead */
    .kr-top-nav .kr-nav-link,
    .kr-top-nav .kr-nav-dropdown,
    .kr-top-nav .kr-nav-spacer,
    .kr-top-nav .kr-nav-todo-dropdown,
    .kr-top-nav .kr-nav-clock,
    .kr-top-nav #kr-online-indicator {
        display: none;
    }

    /* Keep nav bar visible but minimal */
    .kr-top-nav {
        gap: 8px;
        padding: 8px 0;
        overflow: visible;
        align-items: center;
    }

    /* Show theme toggle on mobile nav bar */
    .kr-top-nav .kr-theme-toggle {
        display: flex;
        margin-left: auto;
    }

    /* Mobile header adjustments */
    .kr-app-header {
        padding: 8px 0;
    }

    .kr-app-logo {
        font-size: 16px;
    }

    .kr-app-version {
        font-size: 10px;
    }

    /* Hide ERP subnav on mobile — accessible via drawer */
    .kr-ekf-subnav {
        display: none;
    }

    /* Show quick-create button on mobile (hidden on desktop) */
    .kr-mobile-create-btn {
        display: block;
        margin: 8px 0;
    }

    /* Touch-friendly buttons */
    .kr-btn {
        min-height: 44px;
        padding: 12px 20px;
    }

    .kr-btn-sm {
        min-height: 40px;
        padding: 10px 16px;
    }

    /* Touch-friendly form inputs */
    .kr-form-group input,
    .kr-form-group select,
    .kr-form-group textarea {
        min-height: 44px;
        font-size: 16px; /* Prevents iOS zoom */
        padding: 12px;
    }

    /* Card adjustments */
    .kr-card {
        padding: 16px;
        margin-bottom: 12px;
        border-radius: var(--kr-radius);
    }

    /* Header adjustments */
    .kr-header,
    .kr-header-view {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
    }

    .kr-header-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .kr-header-actions .kr-btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        text-align: center;
        justify-content: center;
        font-size: 13px;
        padding: 10px 8px;
    }

    .kr-title {
        font-size: 20px;
    }

    /* Table to card view on mobile */
    .kr-table-responsive {
        margin: 0;
        padding: 0;
        overflow-x: visible;
    }

    .kr-list-table {
        display: block;
    }

    .kr-list-table thead {
        display: none;
    }

    .kr-list-table tbody {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 0;
    }

    .kr-list-table tbody tr {
        display: block;
        background: var(--kr-bg-card);
        border: 1px solid var(--kr-border);
        border-radius: var(--kr-radius);
        padding: 12px;
        box-shadow: var(--kr-shadow);
    }

    .kr-list-table tbody tr:hover {
        background: var(--kr-bg-card);
    }

    .kr-list-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        border-bottom: 1px solid var(--kr-gray-100);
        font-size: 14px;
    }

    .kr-list-table td:last-child {
        border-bottom: none;
    }

    .kr-list-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--kr-gray-500);
        font-size: 12px;
        text-transform: uppercase;
    }

    /* Hide rank column on dashboard cards — not useful in card view */
    .kr-list-table td.kr-dashboard-rank {
        display: none;
    }

    /* Override inline fixed widths on mobile */
    .kr-list-table th,
    .kr-list-table td,
    .kr-ekf-rows-table th,
    .kr-ekf-rows-table td {
        width: auto !important;
        min-width: 0 !important;
    }

    input[style*="width"],
    select[style*="width"] {
        max-width: 100% !important;
    }

    /* Filter bar mobile */
    .kr-filter-bar,
    .kr-ekf-filter-bar {
        flex-direction: column;
        gap: 8px;
    }

    .kr-filter-group {
        width: 100%;
    }

    .kr-filter-group input,
    .kr-filter-group select {
        width: 100%;
    }

    /* Pagination mobile */
    .kr-pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    /* Detail grid mobile */
    .kr-detail-grid {
        grid-template-columns: 1fr;
    }

    .kr-detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    /* Form grid mobile */
    .kr-form-row {
        flex-direction: column;
    }

    .kr-form-row .kr-form-group {
        width: 100%;
    }

    /* EKF rows table mobile */
    .kr-ekf-rows-table {
        font-size: 14px;
    }

    .kr-ekf-rows-table th,
    .kr-ekf-rows-table td {
        padding: 8px 6px;
    }

    .kr-ekf-rows-table input,
    .kr-ekf-rows-table select {
        min-height: 40px;
        font-size: 14px;
    }

    /* Dashboard cards mobile */
    .kr-dashboard-grid,
    .kr-ekf-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .kr-dashboard-card {
        padding: 12px;
    }

    .kr-dashboard-num {
        font-size: 24px;
    }

    /* Popup mobile */
    .kr-popup {
        width: 95vw;
        max-width: none;
        margin: 10px;
        max-height: 90vh;
        overflow-y: auto;
    }

    .kr-popup-wide {
        width: 95vw;
    }

    /* Mini dashboard mobile */
    .kr-ekf-mini-dash {
        flex-wrap: wrap;
    }

    .kr-mini-dash-item {
        flex: 1 1 45%;
    }

    /* Action buttons stack on mobile */
    .kr-view-actions {
        flex-direction: column;
        gap: 8px;
    }

    .kr-view-actions .kr-btn {
        width: 100%;
        justify-content: center;
    }

    /* Hide clock on very small screens */
    .kr-nav-clock {
        display: none;
    }

    /* Status action row — wrap buttons */
    .kr-ekf-status-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .kr-ekf-status-action-form {
        display: block;
        flex: 1 1 calc(50% - 4px);
    }

    .kr-ekf-status-action-form .kr-btn {
        width: 100%;
        justify-content: center;
    }

    /* Popup padding reduction */
    .kr-popup {
        padding: 20px 16px;
    }

    /* Form rows stack */
    .kr-form-row {
        flex-direction: column;
        gap: 12px;
    }

    .kr-form-row .kr-form-group {
        width: 100%;
        min-width: 0;
    }

    /* Inline form elements: remove fixed widths */
    .kr-form-group input,
    .kr-form-group select,
    .kr-form-group textarea {
        max-width: 100%;
    }

    /* Order line items table: card-like layout */
    .kr-ekf-rows-table {
        min-width: 0;
    }

    .kr-ekf-rows-wrapper {
        overflow-x: visible;
    }

    .kr-ekf-rows-table thead {
        display: none;
    }

    .kr-ekf-rows-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 12px;
        padding: 12px;
        margin-bottom: 8px;
        background: var(--kr-bg-card);
        border: 1px solid var(--kr-border);
        border-radius: var(--kr-radius);
        position: relative;
    }

    .kr-ekf-rows-table tbody td {
        display: block;
        border: none;
        padding: 2px 0;
    }

    .kr-ekf-rows-table tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        font-weight: 600;
        color: var(--kr-gray-500);
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    /* Description takes full width */
    .kr-ekf-col-desc {
        flex: 1 1 100%;
    }

    .kr-ekf-col-desc input,
    .kr-ekf-col-desc textarea {
        width: 100%;
    }

    /* Art.nr takes full width */
    .kr-ekf-col-artnr {
        flex: 1 1 100%;
    }

    .kr-ekf-col-artnr input {
        width: 100%;
    }

    /* Number fields side by side */
    .kr-ekf-col-qty,
    .kr-ekf-col-unit,
    .kr-ekf-col-price,
    .kr-ekf-col-disc,
    .kr-ekf-col-vat,
    .kr-ekf-col-sum {
        flex: 1 1 calc(33% - 8px);
        min-width: 70px;
    }

    .kr-ekf-col-qty input,
    .kr-ekf-col-unit input,
    .kr-ekf-col-unit select,
    .kr-ekf-col-price input,
    .kr-ekf-col-disc input,
    .kr-ekf-col-vat select {
        width: 100%;
    }

    /* Delete button: full width at bottom of card */
    .kr-ekf-col-actions {
        flex: 1 1 100%;
        text-align: right;
    }
}

/* Extra small screens */
@media screen and (max-width: 480px) {
    .kr-app {
        padding: 12px;
        padding-bottom: 80px;
    }

    .kr-card {
        padding: 12px;
    }

    .kr-title {
        font-size: 18px;
    }

    /* Buttons full width stacked on very small screens */
    .kr-header-actions .kr-btn {
        flex: 1 1 100%;
    }

    .kr-dashboard-grid,
    .kr-ekf-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .kr-bottom-nav-label {
        font-size: 9px;
    }

    /* Hide todo dropdown on very small screens */
    .kr-nav-todo-dropdown {
        display: none;
    }
}

/* Touch-friendly dropdown toggle (JS adds kr-touch-device to body) */
.kr-touch-device .kr-nav-dropdown:hover > .kr-nav-dropdown-menu {
    display: none;
}
.kr-touch-device .kr-nav-dropdown.kr-dropdown-open > .kr-nav-dropdown-menu {
    display: block;
}

/* PWA standalone mode */
@media (display-mode: standalone) {
    html, body {
        overscroll-behavior: none;
    }

    .kr-app {
        padding-top: env(safe-area-inset-top, 20px);
    }

    .kr-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}

/* Dark mode mobile adjustments */
body.kr-body-dark .kr-mobile-nav,
.kr-app.kr-theme-dark .kr-mobile-nav {
    background: var(--kr-bg-card, #1f2937);
    border-right: 1px solid var(--kr-border, #374151);
}

body.kr-body-dark .kr-mobile-nav-header,
.kr-app.kr-theme-dark .kr-mobile-nav-header {
    background: var(--kr-bg-alt, #111827);
}

body.kr-body-dark .kr-mobile-nav-link:hover,
.kr-app.kr-theme-dark .kr-mobile-nav-link:hover {
    background: var(--kr-gray-200, #374151);
}

body.kr-body-dark .kr-bottom-nav,
.kr-app.kr-theme-dark .kr-bottom-nav {
    background: var(--kr-bg-card, #1f2937);
    border-top-color: var(--kr-border, #374151);
}

/* Touch feedback for mobile */
@media (hover: none) and (pointer: coarse) {
    .kr-btn:active {
        transform: scale(0.98);
    }

    .kr-mobile-nav-link:active,
    .kr-bottom-nav-item:active {
        background: var(--kr-gray-100);
    }

    .kr-list-table tbody tr:active {
        background: var(--kr-gray-50);
    }
}

/* ==========================================
   BOKFÖRING - RESKONTRA & RAPPORTER
   ========================================== */

/* Stat cards for summaries */
.kr-stat-card {
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius-lg);
    box-shadow: var(--kr-shadow);
    padding: 20px;
    text-align: center;
    min-width: 0;
    width: 100%;
}

.kr-stat-card .kr-stat-label {
    display: block;
    font-size: 12px;
    color: var(--kr-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.kr-stat-value {
    display: block;
    font-size: 24px;
    font-weight: 600;
    color: var(--kr-gray-900);
}

.kr-stat-value-danger {
    color: var(--kr-danger);
}

.kr-stat-value-success {
    color: var(--kr-success);
}

.kr-stat-value-warning {
    color: var(--kr-warning);
}

/* Stats grid layouts */
.kr-stats-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
    width: 100%;
}

.kr-stats-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.kr-stats-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.kr-stats-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Balansrapport grid */
.kr-balans-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Responsive stats grid */
@media (max-width: 768px) {
    .kr-stats-grid-2,
    .kr-stats-grid-3,
    .kr-stats-grid-4 {
        grid-template-columns: 1fr;
    }

    .kr-balans-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .kr-stats-grid-3,
    .kr-stats-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Card warning states */
.kr-card-warning {
    border-left: 4px solid var(--kr-danger);
}

.kr-card-success {
    border-left: 4px solid var(--kr-success);
}

/* Avstämning checkbox */
.kr-avstam-check {
    cursor: pointer;
    font-size: 1.2em;
    user-select: none;
}

.kr-avstam-check:hover {
    opacity: 0.7;
}

/* Table row states */
.kr-row-danger {
    background: var(--kr-error-light) !important;
}

.kr-row-danger:hover {
    background: #fecaca !important;
}

.kr-row-muted {
    opacity: 0.5;
    background: var(--kr-gray-50);
}

.kr-row-muted:hover {
    opacity: 0.7;
}

/* Rapport total row (momsrapport etc) */
.kr-rapport-total td {
    background: var(--kr-primary);
    color: white;
    font-weight: 600;
    padding: 12px;
}

.kr-rapport-total-success td {
    background: var(--kr-success);
    color: white;
    font-weight: 600;
    padding: 12px;
}

/* Section subtitle */
.kr-section-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: var(--kr-gray-700);
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Simple list */
.kr-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kr-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--kr-gray-200);
}

.kr-list li:last-child {
    border-bottom: none;
}

/* Dark mode for bokföring */
body.kr-body-dark .kr-stat-card,
.kr-app.kr-theme-dark .kr-stat-card {
    background: var(--kr-bg-card);
    border-color: var(--kr-border);
    box-shadow: var(--kr-shadow);
}

body.kr-body-dark .kr-stat-value,
.kr-app.kr-theme-dark .kr-stat-value {
    color: var(--kr-gray-900);
}

body.kr-body-dark .kr-row-danger,
.kr-app.kr-theme-dark .kr-row-danger {
    background: rgba(220, 38, 38, 0.2) !important;
}

body.kr-body-dark .kr-row-danger:hover,
.kr-app.kr-theme-dark .kr-row-danger:hover {
    background: rgba(220, 38, 38, 0.3) !important;
}

body.kr-body-dark .kr-row-muted,
.kr-app.kr-theme-dark .kr-row-muted {
    background: var(--kr-gray-100);
}

body.kr-body-dark .kr-rapport-table td,
.kr-app.kr-theme-dark .kr-rapport-table td {
    color: var(--kr-text);
    border-color: var(--kr-gray-300);
}

body.kr-body-dark .kr-rapport-section-header td,
.kr-app.kr-theme-dark .kr-rapport-section-header td {
    background: var(--kr-gray-200);
    border-color: var(--kr-gray-300);
    color: var(--kr-text);
}

body.kr-body-dark .kr-rapport-subtotal td,
.kr-app.kr-theme-dark .kr-rapport-subtotal td {
    background: var(--kr-gray-100);
    border-color: var(--kr-gray-300);
    color: var(--kr-text);
}

body.kr-body-dark .kr-rapport-group-header td,
.kr-app.kr-theme-dark .kr-rapport-group-header td {
    color: var(--kr-gray-500);
}

body.kr-body-dark .kr-rapport-result td,
.kr-app.kr-theme-dark .kr-rapport-result td {
    background: var(--kr-primary);
    color: white;
}

body.kr-body-dark .kr-rapport-total td,
.kr-app.kr-theme-dark .kr-rapport-total td {
    background: var(--kr-primary);
    color: white;
}

body.kr-body-dark .kr-rapport-total-success td,
.kr-app.kr-theme-dark .kr-rapport-total-success td {
    background: var(--kr-success);
    color: white;
}

/* Reskontra views - full width */
.kr-app > .kr-header,
.kr-app > .kr-card,
.kr-app > .kr-ekf-subnav,
.kr-app > .kr-view-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Reskontra summary */
.kr-reskontra-summary {
    font-size: 14px;
    color: var(--kr-gray-600);
    margin: 0 0 16px 0;
}

.kr-text-danger {
    color: var(--kr-danger);
}

.kr-form-group-action {
    align-self: flex-end;
}

/* ==========================================
   DASHBOARD v1
   ========================================== */
.kr-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--kr-space-4);
}

.kr-dashboard-summary {
    border-left: 4px solid var(--kr-info);
    margin-bottom: var(--kr-space-5);
}

details.kr-dashboard-summary summary {
    cursor: pointer;
    padding: 12px 16px;
    list-style: none;
}

details.kr-dashboard-summary summary::-webkit-details-marker {
    display: none;
}

details.kr-dashboard-summary summary::before {
    content: '▸ ';
    font-size: var(--kr-text-sm);
}

details.kr-dashboard-summary[open] summary::before {
    content: '▾ ';
}

details.kr-dashboard-summary[open] summary {
    border-bottom: 1px solid var(--kr-border);
}

details.kr-dashboard-summary > :not(summary) {
    padding: 0 16px 12px;
}

.kr-dashboard-summary ul {
    margin: 8px 0 4px;
    padding-left: 20px;
}

.kr-dashboard-summary li {
    font-size: var(--kr-text-sm);
}

.kr-dashboard-risk {
    font-size: var(--kr-text-sm);
    color: var(--kr-error);
    margin-top: var(--kr-space-2);
    font-weight: 500;
}

.kr-dashboard-rank {
    text-align: center;
    font-weight: 700;
    color: var(--kr-primary);
}

.kr-dashboard-overdue {
    background: var(--kr-warning-light) !important;
}

.kr-dashboard-days-late {
    color: var(--kr-error);
    font-weight: 600;
}

.kr-dashboard-score {
    display: inline-block;
    min-width: 36px;
    text-align: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
    font-size: var(--kr-text-sm);
}

.kr-dashboard-score-high {
    background: var(--kr-error-light);
    color: var(--kr-error-dark);
}

.kr-dashboard-score-medium {
    background: var(--kr-warning-light);
    color: var(--kr-warning-dark);
}

.kr-dashboard-score-low {
    background: var(--kr-success-light);
    color: var(--kr-success-dark);
}

.kr-dashboard-sync-msg {
    font-size: var(--kr-text-sm);
}

.kr-dashboard-sync-ok {
    color: var(--kr-success);
}

.kr-dashboard-sync-err {
    color: var(--kr-error);
}

/* Dashboard step badges */
.kr-badge-step-internal_action_required { background: #fee2e2; color: #991b1b; }
.kr-badge-step-waiting_for_customer { background: #fef3c7; color: #92400e; }
.kr-badge-step-waiting_for_supplier { background: #e0e7ff; color: #3730a3; }
.kr-badge-step-waiting_for_payment { background: #d1fae5; color: #065f46; }
.kr-badge-step-waiting_for_delivery { background: #dbeafe; color: #1d4ed8; }
.kr-badge-step-waiting_for_invoice { background: #fce7f3; color: #9d174d; }
.kr-badge-step-done { background: var(--kr-gray-100); color: var(--kr-gray-600); }

body.kr-body-dark .kr-app .kr-badge-step-internal_action_required { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
body.kr-body-dark .kr-app .kr-badge-step-waiting_for_customer { background: rgba(245, 158, 11, 0.2); color: #fcd34d; }
body.kr-body-dark .kr-app .kr-badge-step-waiting_for_supplier { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; }
body.kr-body-dark .kr-app .kr-badge-step-waiting_for_payment { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
body.kr-body-dark .kr-app .kr-badge-step-waiting_for_delivery { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
body.kr-body-dark .kr-app .kr-badge-step-waiting_for_invoice { background: rgba(236, 72, 153, 0.2); color: #f9a8d4; }
body.kr-body-dark .kr-app .kr-badge-step-done { background: rgba(107, 114, 128, 0.2); color: #9ca3af; }

/* ========================================================================== */
/* COLLABORATION: Presence (Fas 1)                                            */
/* ========================================================================== */

.kr-presence-bar {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 4px var(--kr-space-4);
    min-height: 28px;
}

.kr-presence-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--kr-primary);
    color: #fff;
    font-size: var(--kr-text-xs);
    font-weight: 700;
    cursor: default;
    position: relative;
}

.kr-presence-avatar.kr-presence-self {
    background: var(--kr-success);
}

.kr-presence-avatar.kr-presence-locked {
    background: var(--kr-warning);
}

.kr-presence-avatar.kr-presence-locked::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    background: var(--kr-error);
    border-radius: 50%;
    border: 2px solid var(--kr-bg-card);
}

/* Online indicator in nav */
.kr-online-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
    font-size: var(--kr-text-xs);
    color: var(--kr-text-muted);
    cursor: default;
}

.kr-online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    display: inline-block;
}

.kr-online-count {
    font-weight: 600;
}

/* Lock banner */
.kr-lock-banner {
    margin: var(--kr-space-2) var(--kr-space-4);
    padding: var(--kr-space-3);
    border-radius: var(--kr-radius);
}

/* ========================================================================== */
/* COLLABORATION: Chat (Fas 2)                                                */
/* ========================================================================== */

.kr-chat-panel {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 360px;
    max-width: 90vw;
    background: var(--kr-bg-card);
    border-left: 1px solid var(--kr-border);
    box-shadow: var(--kr-shadow-lg);
    display: flex;
    flex-direction: column;
    z-index: 10000;
    transition: transform 0.2s ease;
}

.kr-chat-hidden {
    transform: translateX(100%);
    pointer-events: none;
}

.kr-chat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--kr-space-3) var(--kr-space-4);
    border-bottom: 1px solid var(--kr-border);
    background: var(--kr-bg-alt);
    flex-shrink: 0;
}

.kr-chat-title {
    font-weight: 700;
    font-size: var(--kr-text-base);
    color: var(--kr-text);
}

.kr-chat-header-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.kr-chat-tab {
    background: transparent;
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius);
    padding: 2px 10px;
    font-size: var(--kr-text-xs);
    cursor: pointer;
    color: var(--kr-text-muted);
}

.kr-chat-tab-active {
    background: var(--kr-primary);
    color: #fff;
    border-color: var(--kr-primary);
}

/* Online users bar in chat */
.kr-chat-online {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px var(--kr-space-3);
    border-bottom: 1px solid var(--kr-border);
    background: var(--kr-bg);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.kr-chat-online-label {
    font-size: var(--kr-text-xs);
    color: var(--kr-text-muted);
    margin-right: 4px;
}

/* Read receipts */
.kr-chat-msg-reads {
    display: flex;
    gap: 2px;
    margin-top: 2px;
    justify-content: flex-end;
    min-height: 0;
}

.kr-chat-read-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--kr-gray-300);
    color: var(--kr-gray-700);
    font-size: 8px;
    font-weight: 700;
    cursor: default;
}

/* Pin button */
.kr-chat-pin {
    background: transparent;
    border: none;
    font-size: 14px;
    cursor: pointer;
    color: var(--kr-text-muted);
    padding: 2px 4px;
    line-height: 1;
    border-radius: var(--kr-radius);
    opacity: 0.5;
    transition: opacity 0.15s, transform 0.15s;
    transform: rotate(30deg);
}

.kr-chat-pin:hover {
    opacity: 0.8;
}

.kr-chat-pin.kr-chat-pinned {
    opacity: 1;
    color: var(--kr-primary);
    transform: rotate(0deg);
}

.kr-chat-close {
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--kr-text-muted);
    padding: 0 4px;
    line-height: 1;
}

.kr-chat-close:hover {
    color: var(--kr-error);
}

.kr-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--kr-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--kr-space-2);
}

.kr-chat-msg {
    max-width: 90%;
    padding: var(--kr-space-2) var(--kr-space-3);
    border-radius: var(--kr-radius);
    background: var(--kr-bg-alt);
    word-break: break-word;
}

.kr-chat-msg-self {
    align-self: flex-end;
    background: var(--kr-primary);
    color: #fff;
}

.kr-chat-msg-self .kr-chat-msg-name,
.kr-chat-msg-self .kr-chat-msg-time {
    color: rgba(255, 255, 255, 0.7);
}

.kr-chat-msg-system {
    align-self: center;
    background: transparent;
    color: var(--kr-text-muted);
    font-size: var(--kr-text-xs);
    font-style: italic;
    text-align: center;
    max-width: 100%;
    padding: var(--kr-space-1) var(--kr-space-2);
}

.kr-chat-msg-ai {
    background: var(--kr-info-light);
    border-left: 3px solid var(--kr-info);
}

.kr-chat-msg-name {
    font-weight: 700;
    font-size: var(--kr-text-xs);
    color: var(--kr-text-muted);
    margin-right: 6px;
}

.kr-chat-msg-time {
    font-size: 10px;
    color: var(--kr-text-muted);
}

.kr-chat-msg-text {
    margin-top: 2px;
    font-size: var(--kr-text-sm);
    line-height: 1.4;
}

.kr-chat-msg-text code {
    background: rgba(0, 0, 0, 0.1);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.9em;
}

.kr-chat-loading .kr-chat-msg-text {
    opacity: 0.6;
    animation: kr-pulse 1.5s infinite;
}

@keyframes kr-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.kr-mention {
    color: var(--kr-primary);
    font-weight: 600;
}

.kr-chat-input-wrap {
    display: flex;
    gap: 8px;
    padding: var(--kr-space-3);
    border-top: 1px solid var(--kr-border);
    flex-shrink: 0;
}

.kr-chat-input {
    flex: 1;
    border: 1px solid var(--kr-input-border);
    border-radius: var(--kr-radius);
    padding: var(--kr-space-2);
    font-size: var(--kr-text-sm);
    resize: none;
    background: var(--kr-input-bg);
    color: var(--kr-text);
    font-family: inherit;
}

.kr-chat-input:focus {
    outline: none;
    border-color: var(--kr-primary);
    box-shadow: var(--kr-focus-shadow);
}

/* Chat toggle button — removed, only bubble used now */
.kr-chat-toggle, .kr-chat-badge {
    display: none;
    line-height: 14px;
}

/* Floating chat bubble (bottom-right corner) */
.kr-chat-bubble {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--kr-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.15s ease;
}

.kr-chat-bubble:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.kr-chat-bubble:active {
    transform: scale(0.95);
}

.kr-chat-bubble-hidden {
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
}

.kr-chat-bubble-icon {
    font-size: 24px;
    line-height: 1;
}

.kr-chat-bubble-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--kr-error);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    line-height: 14px;
    border: 2px solid var(--kr-bg);
}

/* @mention dropdown */
.kr-mention-dropdown {
    position: absolute;
    bottom: 100%;
    left: var(--kr-space-3);
    right: var(--kr-space-3);
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius);
    box-shadow: var(--kr-shadow);
    max-height: 150px;
    overflow-y: auto;
    z-index: 10001;
}

.kr-mention-item {
    padding: var(--kr-space-2) var(--kr-space-3);
    cursor: pointer;
    font-size: var(--kr-text-sm);
}

.kr-mention-item:hover {
    background: var(--kr-bg-alt);
}

.kr-mention-item small {
    color: var(--kr-text-muted);
}

/* ========================================================================== */
/* COLLABORATION: User List & DM (Fas 2b)                                     */
/* ========================================================================== */

/* DM conversation header */
.kr-chat-dm-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--kr-space-2) var(--kr-space-3);
    border-bottom: 1px solid var(--kr-border);
    background: var(--kr-primary);
    color: #fff;
    flex-shrink: 0;
}

.kr-chat-dm-back {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--kr-radius);
}

.kr-chat-dm-back:hover {
    background: rgba(255, 255, 255, 0.15);
}

.kr-chat-dm-name {
    font-weight: 700;
    font-size: var(--kr-text-base);
}

/* Users panel */
.kr-chat-users-panel {
    flex: 1;
    overflow-y: auto;
    padding: var(--kr-space-2) 0;
}

.kr-chat-users-loading,
.kr-chat-users-empty {
    text-align: center;
    padding: var(--kr-space-6);
    color: var(--kr-text-muted);
    font-size: var(--kr-text-sm);
}

.kr-chat-user-item {
    display: flex;
    align-items: center;
    gap: var(--kr-space-3);
    padding: var(--kr-space-2) var(--kr-space-4);
    cursor: pointer;
    transition: background 0.1s;
}

.kr-chat-user-item:hover {
    background: var(--kr-bg-alt);
}

.kr-chat-user-item.kr-chat-user-self {
    cursor: default;
    opacity: 0.65;
}

.kr-chat-user-avatar {
    position: relative;
    flex-shrink: 0;
}

.kr-chat-user-avatar .kr-presence-avatar {
    width: 32px;
    height: 32px;
    font-size: var(--kr-text-xs);
}

/* Status dot — online/offline indicator */
.kr-user-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.kr-user-status-dot.kr-user-status-online {
    background: #22c55e;
    box-shadow: 0 0 0 2px var(--kr-bg-card);
}

.kr-user-status-dot.kr-user-status-offline {
    background: var(--kr-gray-400);
    box-shadow: 0 0 0 2px var(--kr-bg-card);
}

/* Status dot positioned on avatar */
.kr-chat-user-avatar .kr-user-status-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--kr-bg-card);
}

.kr-chat-user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.kr-chat-user-name {
    font-size: var(--kr-text-sm);
    font-weight: 600;
    color: var(--kr-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kr-chat-user-status {
    font-size: var(--kr-text-xs);
    color: var(--kr-text-muted);
}

/* DM unread badge */
.kr-user-dm-badge {
    background: var(--kr-error);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    line-height: 16px;
    flex-shrink: 0;
}

/* Online users bar — updated for names */
.kr-chat-online-user {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
    font-size: var(--kr-text-xs);
    font-weight: 500;
    color: var(--kr-text);
    cursor: default;
    white-space: nowrap;
}

.kr-chat-online-user .kr-user-status-dot {
    width: 6px;
    height: 6px;
    box-shadow: none;
}

.kr-chat-online-self {
    border-color: var(--kr-primary);
    color: var(--kr-primary);
}

/* ========================================================================== */
/* COLLABORATION: Timeline (Fas 3)                                            */
/* ========================================================================== */

.kr-timeline-filters {
    display: flex;
    gap: 4px;
    margin-bottom: var(--kr-space-3);
    flex-wrap: wrap;
}

.kr-timeline-filter-active {
    background: var(--kr-primary) !important;
    color: #fff !important;
    border-color: var(--kr-primary) !important;
}

.kr-timeline-items {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 24px;
}

/* Vertical line */
.kr-timeline-items::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--kr-border);
}

.kr-timeline-item {
    display: flex;
    gap: var(--kr-space-3);
    padding: var(--kr-space-2) 0;
    position: relative;
}

.kr-timeline-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kr-bg-card);
    border: 2px solid var(--kr-border);
    border-radius: 50%;
    font-size: 12px;
    position: absolute;
    left: -24px;
    z-index: 1;
}

.kr-timeline-system .kr-timeline-icon {
    border-color: var(--kr-info);
}

.kr-timeline-ai_response .kr-timeline-icon {
    border-color: var(--kr-primary);
}

.kr-timeline-chat .kr-timeline-icon {
    border-color: var(--kr-success);
}

.kr-timeline-body {
    flex: 1;
    min-width: 0;
}

.kr-timeline-meta {
    display: flex;
    align-items: center;
    gap: var(--kr-space-2);
    font-size: var(--kr-text-xs);
}

.kr-timeline-meta strong {
    color: var(--kr-text);
}

.kr-timeline-time {
    color: var(--kr-text-muted);
}

.kr-timeline-content {
    font-size: var(--kr-text-sm);
    color: var(--kr-text);
    margin-top: 2px;
    line-height: 1.4;
}

.kr-timeline-empty {
    text-align: center;
    color: var(--kr-text-muted);
    padding: var(--kr-space-6);
    font-style: italic;
}

.kr-timeline-input-wrap {
    display: flex;
    gap: 8px;
    margin-top: var(--kr-space-3);
    padding-top: var(--kr-space-3);
    border-top: 1px solid var(--kr-border);
}

/* ========================================================================== */
/* COLLABORATION: Hotkey modal (Fas 5)                                        */
/* ========================================================================== */

.kr-hotkey-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
}

.kr-hotkey-modal-content {
    background: var(--kr-bg-card);
    border-radius: var(--kr-radius-lg);
    padding: var(--kr-space-6);
    max-width: 500px;
    width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--kr-shadow-lg);
    color: var(--kr-text);
}

.kr-hotkey-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--kr-space-4);
}

.kr-hotkey-modal-header h3 {
    margin: 0;
    font-size: var(--kr-text-lg);
}

.kr-hotkey-close {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--kr-text-muted);
    padding: 0;
    line-height: 1;
}

.kr-hotkey-close:hover {
    color: var(--kr-error);
}

.kr-hotkey-table kbd {
    display: inline-block;
    background: var(--kr-bg-alt);
    border: 1px solid var(--kr-border);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: var(--kr-text-xs);
    font-family: monospace;
    min-width: 32px;
    text-align: center;
}

.kr-hotkey-recording {
    animation: kr-pulse 0.8s infinite;
    background: var(--kr-warning-light) !important;
    border-color: var(--kr-warning) !important;
}

/* ========================================================================== */
/* COLLABORATION: Dark mode overrides                                         */
/* ========================================================================== */

body.kr-body-dark .kr-app .kr-chat-panel {
    background: var(--kr-bg-card);
    border-color: var(--kr-border);
}

body.kr-body-dark .kr-app .kr-chat-header {
    background: var(--kr-bg-alt);
    border-color: var(--kr-border);
}

body.kr-body-dark .kr-app .kr-chat-msg {
    background: var(--kr-bg-alt);
}

body.kr-body-dark .kr-app .kr-chat-msg-self {
    background: var(--kr-primary-dark);
}

body.kr-body-dark .kr-app .kr-chat-msg-ai {
    background: rgba(8, 145, 178, 0.15);
}

body.kr-body-dark .kr-app .kr-chat-msg-text code {
    background: rgba(255, 255, 255, 0.1);
}

body.kr-body-dark .kr-app .kr-mention-dropdown {
    background: var(--kr-bg-card);
    border-color: var(--kr-border);
}

body.kr-body-dark .kr-app .kr-mention-item:hover {
    background: var(--kr-bg-alt);
}

body.kr-body-dark .kr-app .kr-hotkey-modal-content {
    background: var(--kr-bg-card);
}

body.kr-body-dark .kr-app .kr-timeline-items::before {
    background: var(--kr-border);
}

body.kr-body-dark .kr-app .kr-timeline-icon {
    background: var(--kr-bg-card);
    border-color: var(--kr-border);
}

body.kr-body-dark .kr-app .kr-chat-online {
    background: var(--kr-bg-alt);
    border-color: var(--kr-border);
}

body.kr-body-dark .kr-app .kr-chat-read-avatar {
    background: var(--kr-gray-600);
    color: var(--kr-gray-200);
}

body.kr-body-dark .kr-app .kr-chat-user-item:hover {
    background: var(--kr-bg-alt);
}

body.kr-body-dark .kr-app .kr-user-status-dot.kr-user-status-online {
    box-shadow: 0 0 0 2px var(--kr-bg-card);
}

body.kr-body-dark .kr-app .kr-user-status-dot.kr-user-status-offline {
    background: var(--kr-gray-500);
    box-shadow: 0 0 0 2px var(--kr-bg-card);
}

body.kr-body-dark .kr-app .kr-chat-online-user {
    background: var(--kr-bg-card);
    border-color: var(--kr-border);
    color: var(--kr-text);
}

body.kr-body-dark .kr-app .kr-chat-dm-header {
    background: var(--kr-primary-dark);
}

body.kr-body-dark .kr-app .kr-chat-input {
    background: var(--kr-bg-alt);
    border-color: var(--kr-border);
    color: var(--kr-text);
}

body.kr-body-dark .kr-app .kr-chat-input-wrap {
    border-color: var(--kr-border);
}

body.kr-body-dark .kr-app .kr-chat-close,
body.kr-body-dark .kr-app .kr-chat-pin {
    color: var(--kr-text-muted);
}

body.kr-body-dark .kr-app .kr-chat-tab {
    color: var(--kr-text-muted);
    border-color: var(--kr-border);
}

body.kr-body-dark .kr-app .kr-chat-users-panel {
    background: var(--kr-bg-card);
}

body.kr-body-dark .kr-app .kr-chat-user-name {
    color: var(--kr-text);
}

body.kr-body-dark .kr-app .kr-chat-bubble {
    background: var(--kr-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

body.kr-body-dark .kr-app .kr-chat-bubble-badge {
    border-color: var(--kr-bg);
}

/* ========================================================================== */
/* COLLABORATION: Enhanced Chat Features                                       */
/* ========================================================================== */

/* --- Tab badges (unread per channel) --- */
.kr-tab-badge {
    display: none;
    background: var(--kr-error);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    min-width: 14px;
    text-align: center;
    line-height: 12px;
    margin-left: 4px;
    vertical-align: middle;
}

.kr-chat-tab-active .kr-tab-badge {
    background: rgba(255, 255, 255, 0.3);
}

/* --- Typing indicator --- */
.kr-chat-typing {
    padding: 4px var(--kr-space-3);
    font-size: var(--kr-text-xs);
    color: var(--kr-text-muted);
    font-style: italic;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.kr-typing-dots {
    display: inline-flex;
    gap: 2px;
    align-items: center;
}

.kr-typing-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--kr-text-muted);
    animation: kr-typing-bounce 1.4s infinite ease-in-out both;
}

.kr-typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.kr-typing-dots span:nth-child(2) { animation-delay: -0.16s; }
.kr-typing-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes kr-typing-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* --- Reply / Quote preview --- */
.kr-chat-reply-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px var(--kr-space-3);
    background: var(--kr-bg-alt);
    border-top: 1px solid var(--kr-border);
    border-left: 3px solid var(--kr-primary);
    font-size: var(--kr-text-xs);
    color: var(--kr-text-muted);
    flex-shrink: 0;
}

.kr-reply-indicator {
    font-weight: 700;
    color: var(--kr-primary);
    white-space: nowrap;
}

.kr-reply-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kr-reply-cancel {
    background: transparent;
    border: none;
    color: var(--kr-text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}

.kr-reply-cancel:hover {
    color: var(--kr-error);
}

/* Quoted message within a chat message */
.kr-chat-msg-quote {
    font-size: var(--kr-text-xs);
    color: var(--kr-text-muted);
    background: rgba(0, 0, 0, 0.04);
    border-left: 2px solid var(--kr-primary);
    padding: 3px 8px;
    margin-bottom: 4px;
    border-radius: 0 var(--kr-radius) var(--kr-radius) 0;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kr-chat-msg-self .kr-chat-msg-quote {
    background: rgba(255, 255, 255, 0.15);
    border-left-color: rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.8);
}

.kr-quote-name {
    font-weight: 700;
}

/* --- Reactions --- */
.kr-chat-msg-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.kr-reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--kr-bg);
    border: 1px solid var(--kr-border);
    border-radius: 12px;
    padding: 1px 8px;
    font-size: 13px;
    cursor: pointer;
    line-height: 20px;
    transition: border-color 0.15s, background 0.15s;
}

.kr-reaction-btn:hover {
    border-color: var(--kr-primary);
    background: var(--kr-bg-alt);
}

.kr-reaction-btn.kr-reaction-mine {
    border-color: var(--kr-primary);
    background: rgba(59, 130, 246, 0.08);
}

.kr-reaction-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--kr-text-muted);
}

.kr-chat-msg-self .kr-reaction-btn {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.kr-chat-msg-self .kr-reaction-btn.kr-reaction-mine {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

.kr-chat-msg-self .kr-reaction-count {
    color: rgba(255, 255, 255, 0.8);
}

/* --- Message action buttons (reply, react) --- */
.kr-chat-msg-actions {
    display: none;
    position: absolute;
    top: -4px;
    right: 4px;
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius);
    box-shadow: var(--kr-shadow);
    padding: 2px;
    gap: 2px;
    z-index: 2;
}

.kr-chat-msg {
    position: relative;
}

.kr-chat-msg:hover .kr-chat-msg-actions {
    display: flex;
}

.kr-chat-reply-btn,
.kr-reaction-add-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: var(--kr-radius);
    color: var(--kr-text-muted);
    line-height: 1;
}

.kr-chat-reply-btn:hover,
.kr-reaction-add-btn:hover {
    background: var(--kr-bg-alt);
    color: var(--kr-primary);
}

/* Reaction picker popup */
.kr-reaction-picker {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius);
    box-shadow: var(--kr-shadow);
    padding: 4px 6px;
    display: flex;
    gap: 4px;
    z-index: 3;
    margin-top: 2px;
}

.kr-reaction-pick {
    font-size: 18px;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    transition: transform 0.1s;
}

.kr-reaction-pick:hover {
    transform: scale(1.3);
    background: var(--kr-bg-alt);
}

/* --- File attachment in chat --- */
.kr-chat-attach-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 4px 2px;
    color: var(--kr-text-muted);
    line-height: 1;
    flex-shrink: 0;
}

.kr-chat-attach-btn:hover {
    color: var(--kr-primary);
}

.kr-chat-msg-file {
    margin-top: 4px;
}

.kr-chat-img {
    max-width: 200px;
    max-height: 200px;
    border-radius: var(--kr-radius);
    border: 1px solid var(--kr-border);
    cursor: pointer;
    display: block;
}

.kr-chat-img:hover {
    opacity: 0.9;
}

.kr-chat-file-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--kr-bg);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius);
    font-size: var(--kr-text-xs);
    color: var(--kr-primary);
    text-decoration: none;
}

.kr-chat-file-link:hover {
    background: var(--kr-bg-alt);
}

.kr-chat-dragover {
    background: rgba(59, 130, 246, 0.05) !important;
    outline: 2px dashed var(--kr-primary);
    outline-offset: -4px;
}

/* --- Mute button --- */
.kr-chat-mute {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 4px;
    color: var(--kr-text-muted);
    line-height: 1;
}

.kr-chat-mute:hover {
    color: var(--kr-text);
}

/* --- Search panel --- */
.kr-chat-search-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 4px;
    color: var(--kr-text-muted);
    line-height: 1;
}

.kr-chat-search-btn:hover {
    color: var(--kr-primary);
}

.kr-chat-search-panel {
    border-bottom: 1px solid var(--kr-border);
    flex-shrink: 0;
    max-height: 300px;
    display: flex;
    flex-direction: column;
}

.kr-chat-search-panel .kr-chat-input {
    border: none;
    border-bottom: 1px solid var(--kr-border);
    border-radius: 0;
    padding: var(--kr-space-2) var(--kr-space-3);
}

.kr-chat-search-results {
    overflow-y: auto;
    flex: 1;
    max-height: 250px;
}

.kr-chat-search-item {
    padding: var(--kr-space-2) var(--kr-space-3);
    border-bottom: 1px solid var(--kr-border);
    cursor: pointer;
}

.kr-chat-search-item:hover {
    background: var(--kr-bg-alt);
}

.kr-search-meta {
    font-size: var(--kr-text-xs);
    margin-bottom: 2px;
}

.kr-search-time {
    color: var(--kr-text-muted);
    margin-left: 4px;
}

.kr-search-text {
    font-size: var(--kr-text-sm);
    color: var(--kr-text);
}

.kr-search-text mark {
    background: var(--kr-warning-light);
    padding: 0 2px;
    border-radius: 2px;
}

.kr-chat-search-loading,
.kr-chat-search-empty {
    text-align: center;
    padding: var(--kr-space-4);
    color: var(--kr-text-muted);
    font-size: var(--kr-text-sm);
}

/* --- Dark mode overrides for new features --- */
body.kr-body-dark .kr-app .kr-chat-reply-preview {
    background: var(--kr-bg-alt);
    border-color: var(--kr-border);
}

body.kr-body-dark .kr-app .kr-chat-msg-quote {
    background: rgba(255, 255, 255, 0.05);
}

body.kr-body-dark .kr-app .kr-reaction-btn {
    background: var(--kr-bg-alt);
    border-color: var(--kr-border);
}

body.kr-body-dark .kr-app .kr-reaction-btn.kr-reaction-mine {
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--kr-primary);
}

body.kr-body-dark .kr-app .kr-chat-msg-actions {
    background: var(--kr-bg-card);
    border-color: var(--kr-border);
}

body.kr-body-dark .kr-app .kr-reaction-picker {
    background: var(--kr-bg-card);
    border-color: var(--kr-border);
}

body.kr-body-dark .kr-app .kr-chat-file-link {
    background: var(--kr-bg-alt);
    border-color: var(--kr-border);
}

body.kr-body-dark .kr-app .kr-chat-search-panel {
    border-color: var(--kr-border);
}

body.kr-body-dark .kr-app .kr-chat-search-item {
    border-color: var(--kr-border);
}

body.kr-body-dark .kr-app .kr-chat-search-item:hover {
    background: var(--kr-bg-alt);
}

body.kr-body-dark .kr-app .kr-search-text mark {
    background: rgba(234, 179, 8, 0.25);
}

/* ==========================================================================
   CRM — Pipeline, Suggestions, Tasks, Timeline
   ========================================================================== */

/* Pipeline stage badges */
.kr-crm-stage-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.kr-crm-stage-prospect  { background: #9e9e9e; }
.kr-crm-stage-lead      { background: #2196f3; }
.kr-crm-stage-qualified { background: #9c27b0; }
.kr-crm-stage-active    { background: #4caf50; }
.kr-crm-stage-inactive  { background: #f44336; }

.kr-crm-stage-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 4px;
}

/* CRM section */
.kr-crm-section {
    border-left: 4px solid #2196f3;
}

.kr-crm-stage-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* Suggestion cards */
.kr-crm-suggestion-card {
    background: #f8f9fa;
    border: 1px dashed #d0d7de;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
}
.kr-crm-suggestion-title {
    font-weight: 600;
    margin-bottom: 4px;
}
.kr-crm-suggestion-desc {
    line-height: 1.4;
}
.kr-crm-suggestion-inline {
    background: #fff8e1;
    border-left: 3px solid #ffc107;
    padding: 6px 12px;
    border-radius: 4px;
}

/* Inline forms */
.kr-crm-inline-form {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
}
.kr-crm-inline-form h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
}

/* Timeline items */
.kr-crm-timeline-item {
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    line-height: 1.5;
}
.kr-crm-timeline-item:last-child {
    border-bottom: none;
}
.kr-crm-timeline-icon {
    display: inline-block;
    width: 20px;
    text-align: center;
}

/* Task overdue row */
.kr-crm-task-overdue td {
    background: #fff5f5 !important;
}

/* Quick action buttons */
.kr-crm-quick-actions .kr-btn {
    white-space: nowrap;
}

/* Form row for side-by-side fields */
.kr-form-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Dashboard CRM section */
.kr-crm-dashboard {
    border-left: 4px solid #4caf50;
}

/* Dark mode CRM overrides */
body.kr-body-dark .kr-app .kr-crm-suggestion-card {
    background: var(--kr-bg-alt);
    border-color: var(--kr-border);
}
body.kr-body-dark .kr-app .kr-crm-suggestion-inline {
    background: rgba(255, 193, 7, 0.1);
}
body.kr-body-dark .kr-app .kr-crm-inline-form {
    background: var(--kr-bg-alt);
    border-color: var(--kr-border);
}
body.kr-body-dark .kr-app .kr-crm-timeline-item {
    border-color: var(--kr-border);
}
body.kr-body-dark .kr-app .kr-crm-task-overdue td {
    background: rgba(244, 67, 54, 0.1) !important;
}

/* ==========================================================================
   DESIGNSYSTEM v2 — FINAL OVERRIDE
   --------------------------------------------------------------------------
   Detta block ligger SIST i CSS-filen och vinner därför över alla tidigare
   regler via cascade-ordningen. Dubblerade .kr-mini-dash-item/.kr-badge
   tidigare i filen har skrivit över v1.x-iterationerna — denna sektion
   tvingar EN konsekvent stil för alla komponenter över hela appen.
   Inga affärsändringar, ingen markup, bara CSS-överskrivning.
   ========================================================================== */

/* === KORTSTANDARD === */
/* Alla "stat-/KPI-/filter-kort" delar samma designspråk */
.kr-app .kr-mini-dash-item,
.kr-app a.kr-mini-dash-item,
.kr-app button.kr-mini-dash-clickable,
.kr-app .kr-stat-card,
.kr-app .kr-ekonomi-summary-card {
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius-lg);
    box-shadow: var(--kr-shadow);
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
.kr-app .kr-mini-dash-item,
.kr-app a.kr-mini-dash-item,
.kr-app button.kr-mini-dash-clickable {
    padding: var(--kr-space-3) var(--kr-space-4);
    min-width: 110px;
    /* Harmonisera höjd med KPI-korten (kr-stat-card / kr-ekonomi-summary-card)
       så Dashboard-korten upplevs som samma kortfamilj — bara mer kompakta. */
    min-height: 76px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
}
/* Försäljning + Bokföring KPI-kort: samma padding och samma min-height
   så att 2-rad (Bokföring) och 3-rad (Försäljning) upplevs i samma höjdklass.
   Dashboard mini-dash är mindre och har egen padding ovan. */
.kr-app .kr-stat-card,
.kr-app .kr-ekonomi-summary-card {
    padding: var(--kr-space-4);
    min-height: 92px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    gap: 2px;
}
/* Hover för klickbara kort — DISKRET.
   Ingen lyft-transform, ingen färgad border, bara mjuk shadow + lätt bakgrund.
   Lyft + färgad border är reserverat för aktivt valt filter. */
.kr-app a.kr-mini-dash-item:hover,
.kr-app button.kr-mini-dash-clickable:hover,
.kr-app a.kr-ekonomi-summary-card:hover {
    box-shadow: var(--kr-shadow-lg);
    background: var(--kr-bg-alt);
    text-decoration: none;
}
/* Aktivt valt filter — TYDLIGT.
   Färgad border (2px), bakgrund, tydlig undre bar, inset focus-ring.
   Detta ska inte gå att förväxla med hover. */
.kr-app button.kr-mini-dash-clickable.kr-mini-dash-active {
    background: rgba(37, 99, 235, 0.10);
    border-color: var(--kr-primary);
    border-width: 2px;
    padding: calc(var(--kr-space-3) - 1px) calc(var(--kr-space-4) - 1px);
    box-shadow: 0 0 0 1px var(--kr-primary), var(--kr-shadow), inset 0 -3px 0 var(--kr-primary);
}
.kr-app button.kr-mini-dash-clickable.kr-mini-dash-active:hover {
    background: rgba(37, 99, 235, 0.14);
}
body.kr-body-dark .kr-app button.kr-mini-dash-clickable:hover,
.kr-app.kr-theme-dark button.kr-mini-dash-clickable:hover,
body.kr-body-dark .kr-app a.kr-mini-dash-item:hover,
.kr-app.kr-theme-dark a.kr-mini-dash-item:hover {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: var(--kr-shadow-lg);
}
body.kr-body-dark .kr-app button.kr-mini-dash-clickable.kr-mini-dash-active,
.kr-app.kr-theme-dark button.kr-mini-dash-clickable.kr-mini-dash-active {
    background: rgba(96, 165, 250, 0.20);
    border-color: var(--kr-primary-light);
    border-width: 2px;
    box-shadow: 0 0 0 1px var(--kr-primary-light), var(--kr-shadow), inset 0 -3px 0 var(--kr-primary-light);
}
body.kr-body-dark .kr-app button.kr-mini-dash-clickable.kr-mini-dash-active:hover,
.kr-app.kr-theme-dark button.kr-mini-dash-clickable.kr-mini-dash-active:hover {
    background: rgba(96, 165, 250, 0.28);
}
/* Container för kort-grid — låt INTE konkurrera */
.kr-app .kr-ekf-mini-dash {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: var(--kr-space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--kr-space-3);
}
.kr-app .kr-dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--kr-space-3);
    margin-bottom: var(--kr-space-4);
}
/* Konsekvent typografi i ALLA stat-kort */
.kr-app .kr-mini-dash-num,
.kr-app .kr-mini-dash-value,
.kr-app .kr-stat-num,
.kr-app .kr-stat-value,
.kr-app .kr-ekonomi-summary-card .kr-stat-num {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--kr-text);
    font-variant-numeric: tabular-nums;
    display: block;
}
.kr-app .kr-mini-dash-label,
.kr-app .kr-stat-label,
.kr-app .kr-stat-card .kr-stat-label,
.kr-app .kr-ekonomi-summary-card .kr-stat-label {
    font-size: 11px;
    color: var(--kr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    display: block;
    margin-top: 2px;
}

/* === BADGE-STANDARD === */
/* Alla badges (status, lager, doctype, rabatt, inkop, score, crm) delar samma rytm */
.kr-app .kr-badge,
.kr-app .kr-status-badge,
.kr-app .kr-lager-badge,
.kr-app .kr-rabatt-badge,
.kr-app .kr-inkop-badge,
.kr-app .kr-economy-badge,
.kr-app .kr-crm-stage-badge,
.kr-app .kr-dashboard-score {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 12px;
    white-space: nowrap;
    vertical-align: middle;
}

/* Adresskort i EKF-detaljvyn (Fakturaadress + Leveransadress sida vid sida) */
.kr-app .kr-address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--kr-space-4);
}
.kr-app .kr-address-card-inline {
    background: var(--kr-bg-alt);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius-md);
    padding: var(--kr-space-3) var(--kr-space-4);
}
.kr-app .kr-address-card-title {
    font-size: 11px;
    color: var(--kr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 8px;
}
.kr-app .kr-address-card-body {
    font-size: 13px;
    line-height: 1.5;
    color: var(--kr-text);
}
@media (max-width: 600px) {
    .kr-app .kr-address-grid {
        grid-template-columns: 1fr;
    }
}

/* "Att göra"-count + andra siffer-badges (Försenade/Kund/Lager/Intern m.fl.)
   Rund/kompakt pill, siffran exakt centrerad horisontellt och vertikalt.
   inline-flex + line-height:1 förhindrar baseline-drift som ger ojämn placering. */
.kr-app .kr-todo-count,
.kr-app .kr-nav-todo-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    border-radius: 11px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}
.kr-app .kr-risk-badge {
    /* Risk-badges har egen kompakt stil (mindre) */
    line-height: 1.4;
    vertical-align: middle;
}

/* === TABELLSTANDARD === */
/* Alla listvy-tabeller har EXAKT samma rytm */
.kr-app .kr-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.kr-app .kr-list-table thead th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    color: var(--kr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--kr-bg-alt);
    border-bottom: 1px solid var(--kr-border);
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}
.kr-app .kr-list-table tbody td {
    padding: 10px 12px;
    line-height: 1.4;
    vertical-align: middle;
    color: var(--kr-text);
    border-bottom: 1px solid var(--kr-border);
}
.kr-app .kr-list-table tbody tr:last-child td {
    border-bottom: none;
}
.kr-app .kr-list-table tbody tr:nth-child(even) {
    background: var(--kr-gray-50);
}
.kr-app .kr-list-table tbody tr:hover {
    background: rgba(37, 99, 235, 0.06);
}
.kr-app .kr-list-table tbody td.kr-cell-empty,
.kr-app .kr-list-table tbody td .kr-cell-empty {
    color: var(--kr-text-muted);
    font-style: italic;
}

/* Stable-tabeller (auto-layout med min-widths från kr-col-*) */
.kr-app .kr-table-stable {
    table-layout: auto;
}
/* Fixed-tabeller (Dashboard Attention Stack med colgroup) */
.kr-app .kr-table-fixed {
    table-layout: fixed;
    width: 100%;
}
.kr-app .kr-table-fixed th,
.kr-app .kr-table-fixed td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* === TOPNAV ACTIVE — TYDLIG === */
.kr-app .kr-nav-link.kr-nav-active,
.kr-app .kr-nav-link.kr-nav-primary.kr-nav-active {
    background: rgba(37, 99, 235, 0.16);
    color: var(--kr-primary-dark);
    font-weight: 600;
    box-shadow: inset 0 -3px 0 var(--kr-primary);
    border-radius: var(--kr-radius) var(--kr-radius) 0 0;
}
.kr-app .kr-nav-link:hover {
    background: rgba(37, 99, 235, 0.08);
    color: var(--kr-primary-dark);
}
body.kr-body-dark .kr-app .kr-nav-link.kr-nav-active,
.kr-app.kr-theme-dark .kr-nav-link.kr-nav-active {
    background: rgba(96, 165, 250, 0.22);
    color: #f1f5ff;
    box-shadow: inset 0 -3px 0 var(--kr-primary-light);
}

/* === SUB-NAV TABS === */
.kr-app .kr-ekf-nav-tab.active {
    background: rgba(37, 99, 235, 0.16);
    color: var(--kr-primary-dark);
    box-shadow: inset 0 -3px 0 var(--kr-primary);
    font-weight: 600;
}
body.kr-body-dark .kr-app .kr-ekf-nav-tab.active,
.kr-app.kr-theme-dark .kr-ekf-nav-tab.active {
    background: rgba(96, 165, 250, 0.22);
    color: #f1f5ff;
    box-shadow: inset 0 -3px 0 var(--kr-primary-light);
}

/* === BOKFÖRING RAPPORT — lugnare summary + token-baserad === */
.kr-app .kr-rapport-section-header td {
    background: var(--kr-bg-alt);
    border-top-color: var(--kr-border);
    border-bottom-color: var(--kr-border);
    color: var(--kr-text);
}
.kr-app .kr-rapport-subtotal td {
    background: var(--kr-bg-alt);
    border-top-color: var(--kr-border);
    color: var(--kr-text);
}
.kr-app .kr-rapport-result td {
    background: rgba(37, 99, 235, 0.10);
    color: var(--kr-primary-dark);
    border-top: 2px solid var(--kr-primary);
    border-bottom: 2px solid var(--kr-primary);
    font-weight: 700;
}
body.kr-body-dark .kr-app .kr-rapport-result td,
.kr-app.kr-theme-dark .kr-rapport-result td {
    background: rgba(96, 165, 250, 0.16);
    color: #e5edff;
    border-top-color: var(--kr-primary-light);
    border-bottom-color: var(--kr-primary-light);
}

/* === FILTER-BAR konsekvent === */
.kr-app .kr-ekf-filter-bar {
    border-radius: var(--kr-radius-lg);
    box-shadow: var(--kr-shadow);
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
}

/* === DARK MODE OVERRIDES för hardcoded ljusa bakgrunder === */
body.kr-body-dark .kr-app .kr-icon-btn-edit:hover,
.kr-app.kr-theme-dark .kr-icon-btn-edit:hover {
    background: rgba(96, 165, 250, 0.18);
    border-color: rgba(96, 165, 250, 0.40);
}
body.kr-body-dark .kr-app .kr-icon-btn-add:hover,
.kr-app.kr-theme-dark .kr-icon-btn-add:hover {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.40);
}
/* kr-cron-stats redan tokeniserad i v1, men säkerställ */
body.kr-body-dark .kr-app .kr-cron-stats,
.kr-app.kr-theme-dark .kr-cron-stats {
    background: var(--kr-bg-alt);
    color: var(--kr-text);
    border-color: var(--kr-border);
}

/* === PURPLE LAGER-BADGE → varm röd istället (varning, inte premium) === */
.kr-app .kr-lager-badge-purple {
    background: rgba(220, 38, 38, 0.10);
    color: #b91c1c;
}
body.kr-body-dark .kr-app .kr-lager-badge-purple,
.kr-app.kr-theme-dark .kr-lager-badge-purple {
    background: rgba(248, 113, 113, 0.18);
    color: #fca5a5;
}

/* === SETTINGS-KORT konsekvent === */
.kr-app a.kr-settings-card {
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius-lg);
    box-shadow: var(--kr-shadow);
    padding: var(--kr-space-5);
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
.kr-app a.kr-settings-card:hover {
    box-shadow: var(--kr-shadow-lg);
    border-color: var(--kr-primary-light);
    transform: translateY(-1px);
    text-decoration: none;
}
.kr-app .kr-settings-card strong {
    font-size: 14px;
    color: var(--kr-text);
    display: block;
    margin-bottom: 4px;
}
.kr-app .kr-settings-card p {
    font-size: 13px;
    color: var(--kr-text-muted);
    line-height: 1.45;
    margin: 0;
}

/* === SETTINGS-FORMULÄR konsekvent === */
.kr-app .kr-form-input,
.kr-app .kr-form-select,
.kr-app .kr-input {
    padding: 7px 12px;
    font-size: 13px;
    line-height: 1.4;
    border: 1px solid var(--kr-input-border);
    border-radius: var(--kr-radius);
    background: var(--kr-input-bg);
    color: var(--kr-text);
}
.kr-app .kr-form-input:focus,
.kr-app .kr-form-select:focus,
.kr-app .kr-input:focus {
    outline: none;
    border-color: var(--kr-primary);
    box-shadow: var(--kr-focus-shadow-light);
}

/* === FÖRSÄLJNING KPI-kort (.kr-ekonomi-summary-card) === */
/* Padding/min-height styrs via gemensamt .kr-stat-card + .kr-ekonomi-summary-card
   block ovan så Försäljning och Bokföring blir samma höjdklass.
   Här bara typografi + alignment som är specifikt för Försäljnings-kort. */
.kr-app .kr-ekonomi-summary-card,
.kr-app a.kr-ekonomi-summary-card.kr-dashboard-card {
    background: var(--kr-bg-card);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius-lg);
    box-shadow: var(--kr-shadow);
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    text-decoration: none;
    color: var(--kr-text);
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
.kr-app .kr-ekonomi-summary-card .kr-stat-num {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--kr-text);
    font-variant-numeric: tabular-nums;
}
.kr-app .kr-ekonomi-summary-card .kr-stat-label {
    font-size: 11px;
    color: var(--kr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-top: 2px;
}
.kr-app .kr-ekonomi-summary-card .kr-stat-count {
    font-size: 11px;
    color: var(--kr-text-muted);
    margin-top: 2px;
}
.kr-app a.kr-ekonomi-summary-card:hover {
    box-shadow: var(--kr-shadow-lg);
    border-color: var(--kr-primary-light);
    transform: translateY(-1px);
    text-decoration: none;
}
.kr-app .kr-dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--kr-space-3);
    margin-bottom: var(--kr-space-4);
}

/* === FIX: Ärenden — ta bort monospace + egen färg på .kr-list-* === */
.kr-app .kr-list-casenr {
    font-family: inherit;
    font-size: inherit;
    white-space: nowrap;
}
.kr-app .kr-list-casenr a,
.kr-app .kr-list-title a {
    color: var(--kr-text);
    font-weight: 500;
    text-decoration: none;
}
.kr-app .kr-list-casenr a:hover,
.kr-app .kr-list-title a:hover {
    color: var(--kr-primary);
}
.kr-app .kr-list-date {
    color: var(--kr-text);
    font-size: 13px;
    white-space: nowrap;
}
.kr-app .kr-list-status .kr-status-badge,
.kr-app td .kr-status-badge {
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 12px;
}

/* === FIX: Status-färger — token-baserade dark-mode-overrides === */
body.kr-body-dark .kr-app .kr-status-ny,
.kr-app.kr-theme-dark .kr-status-ny {
    background: rgba(96, 165, 250, 0.18);
    color: #bfdbfe;
}
body.kr-body-dark .kr-app .kr-status-pagaende,
.kr-app.kr-theme-dark .kr-status-pagaende {
    background: rgba(245, 158, 11, 0.20);
    color: #fde68a;
}
body.kr-body-dark .kr-app .kr-status-vantar,
.kr-app.kr-theme-dark .kr-status-vantar {
    background: rgba(129, 140, 248, 0.20);
    color: #c7d2fe;
}
body.kr-body-dark .kr-app .kr-status-avslutat,
.kr-app.kr-theme-dark .kr-status-avslutat {
    background: rgba(34, 197, 94, 0.20);
    color: #bbf7d0;
}
body.kr-body-dark .kr-app .kr-status-arkiverat,
.kr-app.kr-theme-dark .kr-status-arkiverat {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
}

/* === FIX: Priser — kr-marginal-pct/kr-marginal-kr ska inte vara mindre === */
.kr-app .kr-marginal-pct,
.kr-app .kr-marginal-kr {
    color: var(--kr-text);
    font-size: 13px;
}
.kr-app .kr-price-cell {
    font-size: 13px;
}

/* === ROW ACTIONS i listvyer (Iteration F1) === */
.kr-app td.kr-row-actions {
    white-space: nowrap;
    text-align: right;
    padding: 6px 12px;
}
.kr-app td.kr-row-actions .kr-row-action-form {
    display: inline-block;
    margin: 0;
}
.kr-app td.kr-row-actions .kr-row-action-form + .kr-row-action-form {
    margin-left: 6px;
}
/* Tvinga konsekvent knapphöjd så att raden inte blir högre */
.kr-app td.kr-row-actions .kr-btn-xs {
    line-height: 1.3;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
}

/* === HOVER-PREVIEW — kompaktare card-känsla (Iteration F1) === */
.kr-app .kr-row-preview-tooltip {
    background: var(--kr-bg-card);
    color: var(--kr-text);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius-lg);
    box-shadow: var(--kr-shadow-lg);
    padding: 0;
    min-width: 280px;
    max-width: 380px;
    font-size: 13px;
    line-height: 1.5;
    overflow: hidden;
}
.kr-app .kr-row-preview-tooltip .kr-preview-header {
    padding: 10px 14px;
    background: var(--kr-bg-alt);
    border-bottom: 1px solid var(--kr-border);
    margin: 0;
}
.kr-app .kr-row-preview-tooltip .kr-preview-header .kr-preview-docnr {
    font-weight: 600;
    font-size: 14px;
    color: var(--kr-text);
    display: block;
    line-height: 1.3;
}
.kr-app .kr-row-preview-tooltip .kr-preview-header .kr-preview-company,
.kr-app .kr-row-preview-tooltip .kr-preview-header small {
    display: block;
    font-size: 12px;
    color: var(--kr-text-muted);
    font-weight: 400;
    margin-top: 2px;
}
.kr-app .kr-row-preview-tooltip .kr-preview-body {
    padding: 8px 14px;
    border-top: none;
    margin: 0;
}
.kr-app .kr-row-preview-tooltip .kr-preview-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
}
.kr-app .kr-row-preview-tooltip .kr-preview-lines li {
    display: grid;
    grid-template-columns: 90px 1fr;
    column-gap: 10px;
    padding: 3px 0;
    align-items: baseline;
    border-bottom: 1px dashed var(--kr-border);
}
.kr-app .kr-row-preview-tooltip .kr-preview-lines li:last-child {
    border-bottom: none;
}
.kr-app .kr-row-preview-tooltip .kr-preview-lines .kr-preview-artnr {
    color: var(--kr-text-muted);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    min-width: 0;
}
.kr-app .kr-row-preview-tooltip .kr-preview-lines .kr-preview-desc {
    color: var(--kr-text);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.kr-app .kr-row-preview-tooltip .kr-preview-lines .kr-preview-qty {
    color: var(--kr-text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.kr-app .kr-row-preview-tooltip .kr-preview-total {
    padding: 8px 14px;
    border-top: 1px solid var(--kr-border);
    background: var(--kr-bg-alt);
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    color: var(--kr-text);
    font-variant-numeric: tabular-nums;
}
.kr-app .kr-row-preview-tooltip .kr-preview-links {
    padding: 8px 14px;
    border-top: 1px solid var(--kr-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kr-app .kr-row-preview-tooltip .kr-preview-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--kr-text-muted);
}
.kr-app .kr-row-preview-tooltip .kr-preview-link .kr-link-label {
    color: var(--kr-text);
    font-weight: 500;
}

/* === FIX: E-postlogg — inline-style status erstatts via klass-stöd ===
   (markup behåller inline-style för bakåtkompat, men säkerställ att
   raden inte blir högre/annorlunda än övriga listvyer) */
.kr-app .kr-list-table tbody td .kr-text-sm {
    font-size: 12px;
    line-height: 1.4;
}