/* Nord Canvas Designer Styles */

/* CSS Variables */
:root {
    --nord-primary: #003D4C;
    --nord-secondary: #165C7D;
    --nord-accent: #94B7BB;
    --nord-light-turquoise: #8FD6BD;
    --nord-web-turquoise: #00B0B9;
    --nord-light-green: #A9C47F;
    --nord-red: #EC5742;
    --nord-orange: #FFA300;
    --nord-background: #f8f9fa;
    --nord-border: #e0e0e0;
    --nord-text: #333;
    --nord-text-light: #666;
    --nord-white: #ffffff;

     /* NORD Colors */
      
            /* NORD Secondary Colors */
            --nord-sekund1: #003D4C; /* Mørk blå (Dark Blue) */
            --nord-sekund2: #165C7D; /* Medium blå (Medium Blue) */
            --nord-sekund3: #115E67; /* Mørk turkis (Dark Turquoise) */
            --nord-sekund4: #007041; /* Mørk grønn (Dark Green) */
            --nord-sekund5: #6CC24A; /* Lys grønn (Light Green - Secondary) */
            --nord-sekund6: #94B7BB; /* Grå blå (Grey Blue) */
            --nord-sekund7: #009FDF; /* Lys blå (Light Blue - Secondary) */
            /* NORD Primary Colors */
            --nord-prima1: #8FD6BD; /* Lys turkis (Light Turquoise) */
            --nord-prima3: #A9C47F; /* Lys grønn (Light Green - Primary) */
            /* NORD Contrast Colors */
            --nord-kontrast1: #EC5742; /* Rød (Red) */
            --nord-kontrast2: #FFA300; /* Oransje (Orange) */
            /* Basic Colors */
            --tekst-standard: #2D3B45;
            --tekst-lys: #34495e;
       
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-round: 50%;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 16px rgba(0,0,0,0.1);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}

/* Reset and Base Styles */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--nord-text);
    background-color: #f5f5f5;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* Layout */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Header */
.app-header {
    background: var(--nord-white);
    border-bottom: 2px solid var(--nord-accent);
    padding: 6px var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.header-left h1 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--nord-primary);
    font-weight: 700;
}

.header-left p {
    margin: 0;
    font-size: 0.75rem;
    color: var(--nord-text-light);
}

.compatibility-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(0, 176, 185, 0.06);
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 176, 185, 0.2);
}


/* Main Container */
.main-container {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative; /* Positioning parent for floating panels */
}

/* Sidebar */
.sidebar {
    width: 300px;
    background: var(--nord-white);
    border-right: 1px solid var(--nord-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.element-selector {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Sidebar Header Row */
.sidebar-header-row {
    padding: 8px 10px;
    border-bottom: 1px solid var(--nord-border);
    background: var(--nord-background);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Tool Launchers */
.tool-launchers {
    display: flex;
    gap: 6px;
}

.tool-launcher-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    background: var(--nord-white);
    border: 1px solid var(--nord-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--nord-text-light);
    transition: all var(--transition-fast);
}

.tool-launcher-btn i {
    font-size: 0.9rem;
    color: var(--nord-secondary);
}

.tool-launcher-btn:hover {
    border-color: var(--nord-accent);
    background: rgba(148, 183, 187, 0.08);
    color: var(--nord-primary);
}

.tool-launcher-btn.active {
    border-color: var(--nord-web-turquoise);
    background: rgba(0, 176, 185, 0.08);
    color: var(--nord-primary);
}

/* Sidebar Compatibility Filter */
.sidebar-compat-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    background: rgba(0, 176, 185, 0.04);
    border-bottom: 1px solid var(--nord-border);
    font-size: 0.78rem;
    color: var(--nord-text-light);
    font-weight: 500;
}

/* Sidebar Content Row (icon strip + element list) */
.sidebar-content-row {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Vertical Category Icon Strip */
.category-icon-strip {
    width: 52px;
    flex-shrink: 0;
    background: var(--nord-background);
    border-right: 1px solid var(--nord-border);
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    gap: 2px;
    align-items: center;
    overflow-y: auto;
}

.category-btn {
    width: 42px;
    height: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 0;
    border: 2px solid transparent;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.category-btn:hover {
    background: rgba(148, 183, 187, 0.15);
    border-color: var(--nord-accent);
}

.category-btn.active {
    background: var(--nord-primary);
    color: var(--nord-white);
    border-color: var(--nord-primary);
    box-shadow: 0 2px 6px rgba(0, 61, 76, 0.25);
}

.category-btn .icon {
    font-size: 1.1rem;
    line-height: 1;
}

.category-btn .label {
    font-size: 0.55rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40px;
    text-align: center;
}

.category-btn .count {
    display: none;
}

/* Element List Panel */
.element-list-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* Page-specific elements section */
.page-specific-elements {
    padding: var(--spacing-md);
    background: var(--nord-background);
    border-bottom: 2px solid var(--nord-accent);
    margin-bottom: var(--spacing-md);
}

.page-specific-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--nord-primary);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.page-specific-items {
    display: grid;
    gap: var(--spacing-sm);
}

/* =============================================
   Tool Mode Tab Bar
   ============================================= */

.tool-mode-bar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 var(--spacing-lg);
    background: linear-gradient(to bottom, #ffffff, #f8f9fa);
    border-bottom: 2px solid var(--nord-border);
    flex-shrink: 0;
}

.tool-mode-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--nord-text-light);
    transition: all var(--transition-fast);
    font-family: inherit;
}

.tool-mode-tab i {
    font-size: 1rem;
}

.tool-mode-tab:hover {
    color: var(--nord-primary);
    background: rgba(0, 176, 185, 0.06);
}

.tool-mode-tab.active {
    color: var(--nord-primary);
    border-bottom-color: var(--nord-web-turquoise);
    font-weight: 600;
}

.tool-mode-separator {
    width: 1px;
    height: 20px;
    background: var(--nord-border);
    margin: 0 8px;
}

.tool-mode-label {
    font-size: 0.7rem;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 6px;
}

/* Tool panels in sidebar */
.tool-panel {
    display: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.tool-panel.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

/* =============================================
   Floating panels (legacy, kept for CSS reference)
   ============================================= */

.floating-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    min-width: 500px;
    max-width: 700px;
    z-index: 100;
    background: var(--nord-white);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid var(--nord-border);
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.floating-panel.open {
    transform: translateX(0);
}

/* Split layout inside the drawer: preview on top, controls below */
.floating-panel-body {
    display: flex;
    flex-direction: column;
}

.drawer-preview-area {
    flex-shrink: 0;
    padding: 20px;
    background: #f5f5f5;
    border-bottom: 1px solid var(--nord-border);
    min-height: 180px;
    max-height: 40vh;
    overflow-y: auto;
}

.drawer-preview-area h4 {
    margin: 0 0 12px 0;
    color: var(--nord-primary);
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.drawer-controls-area {
    flex: 1;
    overflow-y: auto;
}

.floating-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--nord-primary);
    color: white;
    user-select: none;
    flex-shrink: 0;
}

.floating-panel-title {
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.floating-panel-title i {
    font-size: 1rem;
    opacity: 0.85;
}

.floating-panel-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    font-size: 0.9rem;
}

.floating-panel-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.floating-panel-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.floating-panel-body::-webkit-scrollbar {
    width: 6px;
}

.floating-panel-body::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.floating-panel-body::-webkit-scrollbar-thumb {
    background: var(--nord-accent);
    border-radius: 3px;
}



/* Preview Container */
.preview-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f5f5f5;
    overflow: hidden;
}

/* Toolbar */
.preview-toolbar {
    background: var(--nord-white);
    border-bottom: 1px solid var(--nord-border);
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.toolbar-left,
.toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.toolbar-left {
    flex: 1;
    min-width: 0;
}

.toolbar-right {
    flex-shrink: 0;
}

.toolbar-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--nord-border);
    background: var(--nord-white);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}

.toolbar-btn:hover {
    background: var(--nord-background);
    border-color: var(--nord-accent);
}

.toolbar-btn.active {
    background: var(--nord-accent);
    color: var(--nord-white);
    border-color: var(--nord-accent);
}

.toolbar-btn.active:hover {
    background: #6FA8AC;
}

.toolbar-btn.primary {
    background: var(--nord-primary);
    color: var(--nord-white);
    border-color: var(--nord-primary);
}

.toolbar-btn.primary:hover {
    background: var(--nord-secondary);
    border-color: var(--nord-secondary);
}

.toolbar-btn.active {
    background: var(--nord-accent);
    color: var(--nord-white);
    border-color: var(--nord-accent);
}

/* Grid Layout Selector — now inline in grid header, old floating styles removed */

.grid-selector-label {
    font-size: 0.7rem;
    color: var(--nord-text-light);
    font-weight: 600;
    white-space: nowrap;
    padding-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Unified 3x3 grid for all layout options */
.grid-layout-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
}

.grid-layout-options {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.grid-layout-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 6px;
    border: 2px solid var(--nord-border);
    background: var(--nord-white);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 44px;
}

.grid-layout-option:hover {
    border-color: var(--nord-accent);
    background: rgba(148, 183, 187, 0.1);
}

.grid-layout-option.active {
    border-color: var(--nord-secondary);
    background: rgba(22, 92, 125, 0.1);
    box-shadow: 0 0 0 2px rgba(22, 92, 125, 0.2);
}

.layout-preview {
    display: flex;
    gap: 2px;
    width: 40px;
    height: 20px;
}

.layout-preview .preview-col {
    background: var(--nord-accent);
    border-radius: 2px;
    min-width: 4px;
}

.grid-layout-option.active .layout-preview .preview-col {
    background: var(--nord-secondary);
}

.grid-layout-option:hover .layout-preview .preview-col {
    background: var(--nord-secondary);
}

.layout-label {
    font-size: 0.65rem;
    color: var(--nord-text-light);
    white-space: nowrap;
}

.grid-layout-option.active .layout-label {
    color: var(--nord-secondary);
    font-weight: 600;
}

/* Grid layout dropdown for advanced options */
.grid-layout-more {
    position: relative;
}

.grid-layout-more-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 2px solid var(--nord-border);
    background: var(--nord-white);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.7rem;
    color: var(--nord-text-light);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.grid-layout-more-btn:hover {
    border-color: var(--nord-accent);
    background: rgba(148, 183, 187, 0.1);
    color: var(--nord-secondary);
}

.grid-layout-more-btn.active {
    border-color: var(--nord-secondary);
    background: rgba(22, 92, 125, 0.1);
}

.grid-layout-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--nord-white);
    border: 1px solid var(--nord-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 8px;
    z-index: 1000;
    min-width: 200px;
}

.grid-layout-dropdown.show {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.grid-layout-dropdown .grid-layout-option {
    min-width: auto;
}

/* Legacy grid-option support (for backwards compatibility) */
.grid-option {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--nord-border);
    background: var(--nord-white);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.75rem;
    transition: all var(--transition-fast);
}

.grid-option:hover {
    background: var(--nord-background);
}

.grid-option.active {
    background: var(--nord-secondary);
    color: var(--nord-white);
    border-color: var(--nord-secondary);
}

/* Canvas */
/* FLEXIBLE CANVAS THAT GROWS WITH CONTENT */

.canvas {
    background: var(--nord-white);
    /* Remove fixed heights - let content determine height */
    min-height: calc(100vh - 200px); /* Minimum height for empty state */
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-xl);
    transition: all var(--transition-normal);
    
    /* Allow canvas to grow with content */
    width: 100%;
    /* No max-height or fixed height */
}

/* Responsive viewport preview modes */
.canvas.viewport-tablet {
    max-width: 768px;
    margin: 0 auto;
    transition: max-width 0.3s ease;
}
.canvas.viewport-mobile {
    max-width: 375px;
    margin: 0 auto;
    transition: max-width 0.3s ease;
}

/* Mobile warning badges (editor-only, stripped on export) */
.mobile-warning-badge {
    position: absolute;
    top: 4px;
    right: 40px;
    background: #f0ad4e;
    color: #fff;
    font-size: 0.7em;
    padding: 2px 8px;
    border-radius: 4px;
    z-index: 5;
    pointer-events: none;
}

/* Canvas-matching typography — match Canvas LMS native rendering */
.canvas h1, .canvas h2 {
    font-size: 1.8em;
    line-height: 1.5;
    font-weight: bold;
    font-family: "Lato Extended","Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.canvas h3 {
    font-size: 1.5em;
    line-height: 1.5;
    font-weight: bold;
    font-family: "Lato Extended","Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.canvas h4 {
    font-size: 1.125em;
    line-height: 1.5;
    font-weight: bold;
    font-family: "Lato Extended","Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.canvas p {
    margin: 12px 0;
    line-height: 1.5;
}

.canvas.empty {
    /* Only apply fixed height when empty */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    height: calc(100vh - 200px); /* Fixed height only for empty state */
}

/* When canvas has content, remove the fixed height */
.canvas:not(.empty) {
    /* Let content determine height naturally */
    height: auto;
    min-height: 400px; /* Just a reasonable minimum */
}

/* Canvas wrapper - scrollable container */
.canvas-wrapper {
    flex: 1;
    padding: var(--spacing-lg);
    overflow-y: auto; /* Allow scrolling when content exceeds viewport */
    overflow-x: hidden;
    
    /* Ensure scrolling works properly */
    height: calc(100vh - 120px); /* Account for header + toolbar */
}

/* =============================================================================
   Activity Colour Picker
   ============================================================================= */

.activity-color-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #f8f9fa;
    border-radius: var(--radius-md);
    border: 1px solid #e8e8e8;
}

.activity-color-label {
    font-size: 0.8em;
    color: #666;
    font-weight: 500;
    margin-right: 4px;
}

.activity-color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}

.activity-color-swatch:hover {
    transform: scale(1.15);
}

.activity-color-swatch.active {
    border-color: #003D4C;
    outline: 2px solid white;
}

/* Activity Color Settings Modal */
.activity-type-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}
.activity-type-row:last-child { border-bottom: none; }

.activity-type-label {
    width: 130px;
    flex-shrink: 0;
    font-size: 0.9em;
    color: #003D4C;
    font-weight: 600;
}

.activity-type-swatches {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.activity-type-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s;
}
.activity-type-swatch:hover { transform: scale(1.15); }
.activity-type-swatch.active {
    border-color: #003D4C;
    outline: 2px solid white;
}

.activity-type-custom {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 2px solid #d4e3e6;
    border-radius: 50%;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}
.activity-type-custom::-webkit-color-swatch-wrapper { padding: 0; }
.activity-type-custom::-webkit-color-swatch { border: none; border-radius: 50%; }
.activity-type-custom::-moz-color-swatch { border: none; border-radius: 50%; }

.activity-type-preview {
    width: 22px;
    height: 4px;
    border-radius: 2px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Color dot on sidebar activity items */
.activity-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: auto;
    border: 1px solid rgba(0,0,0,0.1);
}

/* Activity override popover (shift+click) */
.activity-override-popover {
    position: absolute;
    z-index: 1000;
    background: white;
    border: 1px solid #d4e3e6;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 280px;
}
.activity-override-popover .activity-type-swatch { width: 24px; height: 24px; }

/* Tilpass button in sidebar */
.activity-settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: #f8f9fa;
    border: 1px dashed #94B7BB;
    border-radius: var(--radius-md);
    color: #165C7D;
    cursor: pointer;
    font-size: 0.85em;
    transition: background 0.15s;
}
.activity-settings-btn:hover { background: #f0f4f5; }

/* Sidestil (page-style) picker — sidebar variant.
   Lives above the sub-categories tabs when page-types is the active
   category. Matches the visual weight of .activity-settings-btn. */
.sidebar-page-style-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    margin: 0;
    background: #f8f9fa;
    border: 1px dashed #94B7BB;
    border-radius: var(--radius-md);
    color: #165C7D;
    cursor: pointer;
    font-size: 0.85em;
    transition: background 0.15s;
}
.sidebar-page-style-btn:hover { background: #f0f4f5; }
/* Wrapper spans full panel width and matches the sub-categories background
   so the Page-style row reads as part of the same control strip. */
#sidebar-page-style-wrapper {
    margin: 0;
    padding: 10px 15px 0 15px;
    background: #f0f4f7;
}

/* Section divider inside a sub-category element list (e.g. modul → Simple / Visual). */
.element-section-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 6px 0;
    font-size: 0.72em;
    color: #718096;
    letter-spacing: 0.5px;
}
.element-section-divider::before,
.element-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #d4e3e6;
}
.element-section-divider span { padding: 0 2px; }
.element-section-divider:first-child { margin-top: 2px; }

/* Brand Color Settings Modal */
.brand-color-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}
.brand-color-row:last-child { border-bottom: none; }

.brand-color-label {
    width: 120px;
    flex-shrink: 0;
    font-size: 0.9em;
    color: #003D4C;
    font-weight: 600;
}

.brand-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 2px solid #d4e3e6;
    flex-shrink: 0;
}

.brand-color-hex {
    font-family: monospace;
    font-size: 0.85em;
    color: #003D4C;
    width: 80px;
    padding: 4px 8px;
    border: 1px solid #d4e3e6;
    border-radius: 6px;
    background: #f8f9fa;
    text-align: center;
}
.brand-color-hex:focus {
    outline: none;
    border-color: #94B7BB;
    background: white;
}

.brand-color-picker {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 2px solid #d4e3e6;
    border-radius: 8px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.brand-color-picker::-webkit-color-swatch-wrapper { padding: 2px; }
.brand-color-picker::-webkit-color-swatch { border: none; border-radius: 4px; }
.brand-color-picker::-moz-color-swatch { border: none; border-radius: 4px; }

.brand-preview-card {
    margin-top: 16px;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #d4e3e6;
    background: white;
}

/* =============================================================================
   Templates - Sidebar button + Canvas browser
   ============================================================================= */

.templates-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #f0f7f4, #e8f4f8);
    border: 1px solid #d4e3e8;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 600;
    color: #003d4c;
    transition: all 0.2s;
}

.templates-section-toggle:hover {
    background: linear-gradient(135deg, #e4f0ea, #dceef4);
    border-color: #94B7BB;
}

/* Template browser - full canvas area overlay */
.template-browser {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f4f6f8;
    z-index: 20;
    overflow-y: auto;
    padding: 40px;
}

.template-browser-header {
    text-align: center;
    margin-bottom: 32px;
}

.template-browser-header h2 {
    margin: 0 0 8px 0;
    color: #003d4c;
    font-size: 1.8em;
    font-weight: 700;
}

.template-browser-header p {
    margin: 0 0 20px 0;
    color: #666;
    font-size: 1.05em;
}

.template-browser-close {
    background: none;
    border: 2px solid #ccc;
    padding: 8px 20px;
    border-radius: 8px;
    cursor: pointer;
    color: #666;
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.2s;
}

.template-browser-close:hover {
    border-color: #003d4c;
    color: #003d4c;
}

.template-browser-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* =============================================================================
   Page Frame (Sideramme)
   ============================================================================= */

.page-frame-header {
    background: linear-gradient(135deg, #003d4c 0%, #165c7d 100%);
    padding: 24px var(--spacing-xl);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin: 0;
    position: relative;
}

/* Match frame header padding to canvas padding at wider breakpoints */
@media (min-width: 1200px) {
    .page-frame-header {
        padding: 28px 48px;
    }
}
@media (min-width: 1600px) {
    .page-frame-header {
        padding: 32px 60px;
        max-width: 1400px;
        margin: 0 auto;
    }
}

.page-frame-header-content {
    position: relative;
    z-index: 1;
}

.page-frame-title {
    margin: 0;
    color: #ffffff;
    font-size: 1.6em;
    font-weight: 600;
    outline: none;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.2s;
    line-height: 1.3;
}

.page-frame-title:hover,
.page-frame-title:focus {
    border-bottom-color: rgba(255, 255, 255, 0.4);
}

.page-frame-subtitle {
    margin: 8px 0 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1em;
    font-weight: 400;
    outline: none;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.2s;
    line-height: 1.4;
}

.page-frame-subtitle:hover,
.page-frame-subtitle:focus {
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.page-frame-header-hint {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 0.7em;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    transition: opacity 0.2s;
}

.page-frame-header:hover .page-frame-header-hint {
    opacity: 0;
}

/* Frame active state - header and canvas form a visual unit */
.canvas-wrapper.frame-active .page-frame-header {
    border: 2px solid #94B7BB;
    border-bottom: none;
}

.canvas-wrapper.frame-active .canvas {
    border: 2px solid #94B7BB;
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.canvas-wrapper.frame-active .page-frame-header + .canvas {
    margin-top: 0;
}

/* Frame Selector Dropdown */
.frame-selector-wrapper {
    position: relative;
}

.frame-selector-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--nord-white);
    border: 1px solid var(--nord-border);
    border-radius: var(--radius-md);
    padding: 8px;
    z-index: 50;
    min-width: 180px;
}

.frame-selector-dropdown.show {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.frame-selector-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border: 2px solid var(--nord-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    min-width: 56px;
    background: white;
    transition: all 0.15s;
}

.frame-selector-option:hover {
    border-color: var(--nord-accent);
}

.frame-selector-option.active {
    border-color: var(--nord-secondary);
    background: rgba(22, 92, 125, 0.06);
}

.frame-option-preview {
    width: 48px;
}

.frame-option-label {
    font-size: 0.65em;
    color: var(--nord-text-light);
}

.frame-selector-option.active .frame-option-label {
    color: var(--nord-secondary);
}

.frame-selector-divider {
    width: 1px;
    background: var(--nord-border);
    align-self: stretch;
    margin: 0 2px;
}

.frame-selector-off {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 40px;
}

/* Frame toggle button active state */
.toolbar-btn.frame-active {
    background: #003d4c;
    color: white;
}

/* Frame style: accent (left border) */
.page-frame-header[data-frame-style="accent"] {
    background: transparent;
    border-left: 5px solid #003d4c;
    border-radius: 0;
    padding: 16px 24px;
}

.page-frame-header[data-frame-style="accent"] .page-frame-title {
    color: #003d4c;
    font-size: 1.4em;
}

.page-frame-header[data-frame-style="accent"] .page-frame-subtitle {
    color: #4a5568;
}

/* Frame style: light (soft top banner) */
.page-frame-header[data-frame-style="light"] {
    background: linear-gradient(135deg, #f0f4f5, #e8eff0);
    border-bottom: 3px solid #94B7BB;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 24px 32px;
}

.page-frame-header[data-frame-style="light"] .page-frame-title {
    color: #003d4c;
    font-size: 1.4em;
}

.page-frame-header[data-frame-style="light"] .page-frame-subtitle {
    color: #4a5568;
}

.page-frame-header[data-frame-style="light"] .page-frame-header-hint {
    color: rgba(0, 61, 76, 0.3);
}

/* Accent frame: canvas gets left border too */
.canvas-wrapper.frame-active.frame-style-accent .canvas {
    border-left: 5px solid #003d4c;
    border-radius: 0;
    border-top: none;
    border-right: none;
    border-bottom: none;
}

.canvas-wrapper.frame-active.frame-style-accent .page-frame-header {
    border: none;
    border-left: 5px solid #003d4c;
}

/* Light frame: canvas border matches */
.canvas-wrapper.frame-active.frame-style-light .canvas {
    border: 1px solid #d4e3e6;
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.canvas-wrapper.frame-active.frame-style-light .page-frame-header {
    border: 1px solid #d4e3e6;
    border-bottom: 3px solid #94B7BB;
}

/* Responsive frame padding for accent and light styles */
@media (min-width: 1200px) {
    .page-frame-header[data-frame-style="accent"],
    .page-frame-header[data-frame-style="light"] {
        padding-left: 48px;
        padding-right: 48px;
    }
}
@media (min-width: 1600px) {
    .page-frame-header[data-frame-style="accent"],
    .page-frame-header[data-frame-style="light"] {
        padding-left: 60px;
        padding-right: 60px;
        max-width: 1400px;
        margin: 0 auto;
    }
}

.toolbar-btn.frame-active .icon {
    filter: none;
}

/* Responsive adjustments */
@media (min-width: 1200px) {
    /* Large desktop screens */
    .canvas {
        padding: 48px;
        min-height: calc(100vh - 180px);
    }
    
    .canvas.empty {
        min-height: calc(100vh - 180px);
        height: calc(100vh - 180px);
    }
    
    .canvas:not(.empty) {
        min-height: 500px; /* Larger minimum on big screens */
    }
    
    .canvas-wrapper {
        padding: 32px;
        height: calc(100vh - 100px);
    }
}

@media (min-width: 1600px) {
    /* Extra large screens */
    .canvas {
        padding: 60px;
        margin: 0 auto;
        max-width: 1400px; /* Optional: limit max width for readability */
    }
    
    .canvas.empty {
        min-height: calc(100vh - 160px);
        height: calc(100vh - 160px);
    }
}

@media (max-width: 1024px) {
    /* Tablet screens */
    .canvas {
        padding: var(--spacing-lg);
        min-height: calc(100vh - 220px);
    }
    
    .canvas.empty {
        min-height: calc(100vh - 220px);
        height: calc(100vh - 220px);
    }
    
    .canvas:not(.empty) {
        min-height: 300px;
    }
    
    .canvas-wrapper {
        padding: var(--spacing-md);
        height: calc(100vh - 140px);
    }
}

@media (max-width: 768px) {
    /* Mobile screens */
    .canvas {
        padding: var(--spacing-md);
        border-radius: var(--radius-md);
        min-height: calc(100vh - 240px);
    }
    
    .canvas.empty {
        min-height: calc(100vh - 240px);
        height: calc(100vh - 240px);
    }
    
    .canvas:not(.empty) {
        min-height: 250px;
    }
    
    .canvas-wrapper {
        padding: var(--spacing-sm);
        height: calc(100vh - 160px);
    }
}

/* Improved scrollbar styling for canvas wrapper */
.canvas-wrapper::-webkit-scrollbar {
    width: 8px;
}

.canvas-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.canvas-wrapper::-webkit-scrollbar-thumb {
    background: var(--nord-accent);
    border-radius: 4px;
}

.canvas-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--nord-secondary);
}

/* Canvas elements spacing improvements */
.canvas-element:last-child {
    margin-bottom: var(--spacing-lg); /* Extra space at bottom */
}

/* Visual indicator when canvas is scrollable */
.canvas-wrapper.scrollable::after {
    content: '';
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: var(--nord-accent);
    border-radius: 50%;
    opacity: 0.7;
    pointer-events: none;
    z-index: 100;
    
    /* Scroll indicator icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}

/* Hide scroll indicator when at bottom */
.canvas-wrapper.at-bottom::after {
    display: none;
}

/* Empty state improvements */
.empty-state {
    text-align: center;
    color: var(--nord-text-light);
    max-width: 600px;
    margin: 0 auto;
}

.empty-state h3 {
    color: var(--nord-primary);
    margin-bottom: var(--spacing-md);
    font-size: 1.8rem;
}

.empty-state p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
}

/* Preview Container */
.preview-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f5f5f5;
    overflow: hidden;
}

.preview-toolbar {
    background: var(--nord-white);
    border-bottom: 1px solid var(--nord-border);
    padding: 6px var(--spacing-xl) 6px var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
    min-height: 44px;
    overflow: visible;
    gap: 6px;
    position: relative;
    z-index: 10;
}


/* Canvas Elements */
.canvas-element {
    position: relative;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    border: 2px dashed transparent;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.canvas-element:hover {
    border-color: var(--nord-accent);
    background: rgba(148, 183, 187, 0.05);
}

.canvas-element.dragging {
    opacity: 0.5;
}

.canvas-element.drag-over {
    border-color: var(--nord-secondary);
    background: rgba(22, 92, 125, 0.1);
}

/* Element Controls */
.element-controls {
    position: absolute;
    top: -36px;
    right: 0;
    display: none;
    gap: var(--spacing-xs);
    background: var(--nord-white);
    padding: var(--spacing-xs);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--nord-border);
    /* Slight delay before appearing to prevent flicker when moving between elements */
    animation: controlsFadeIn 0.1s ease;
}

@keyframes controlsFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Show controls only on the innermost hovered element.
   :hover matches ancestors too, so we suppress when a child is hovered.
   Combined with the :has() rules below, only ONE set of controls shows. */
.canvas-element:hover > .element-controls {
    display: flex;
}

.control-btn {
    width: 50px;
    height: 35px;
    border: none;
    background: var(--nord-background);
    color: var(--nord-text);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    font-size: 0.875rem;
}

.control-btn:hover {
    background: var(--nord-primary);
    color: var(--nord-white);
}

/* ============================================================================
   Phase 6 bridge (2026-04-12): fix overlap + overflow for .element-controls
   on canvas-elements that live inside .container-zone (the "Layouter"
   palette category).

   Issue 1 — overlap: when a nested canvas-element is hovered, the outer
     container's :hover state ALSO fires (events bubble), so both control
     bars become visible simultaneously and stack on top of each other.
     Solution: use :has(.canvas-element:hover) on the outer container to
     suppress its own controls AND its own hover styling whenever any
     nested child is being hovered. Safari 15.4+ supports :has().

   Issue 2 — narrow column overflow: the control bar is 300–350px wide
     (6–7 buttons × 50px) which overflows the ~180px width of a 1/4
     column. Solution: compact button size (32×28) + flex-wrap: wrap +
     anchor to bottom: 100% so the bar grows UPWARD when it wraps onto
     a second row, instead of crashing into the zone below.
   ============================================================================ */

/* Issue 1: suppress outer container's controls and hover styling when a
   nested child is being hovered */
.canvas-element:has(.canvas-element:hover) > .element-controls {
    display: none;
}
.canvas-element:has(.canvas-element:hover) {
    border-color: transparent;
    background: transparent;
}

/* Child controls BELOW child element (so container controls at top don't collide) */
.container-zone .canvas-element > .element-controls {
    top: 100%;
    bottom: auto;
    right: 0;
    margin-top: 4px;
    margin-bottom: 0;
    max-width: 100%;
    flex-wrap: wrap;
    padding: 3px;
    gap: 3px;
    justify-content: flex-end;
}

/* Suppress preceding child's controls when a later sibling is hovered (prevents overlap) */
.container-zone .canvas-element:has(~ .canvas-element:hover) > .element-controls {
    display: none;
}

/* Issue 2b: compact button size inside zones so more fit per row */
.container-zone .canvas-element > .element-controls .control-btn {
    width: 32px;
    height: 28px;
    font-size: 0.75rem;
}

/* Container shell: suppress hover highlight, promote z-index so top controls
   render above the preceding sibling's bottom edge. */
.canvas-element[data-is-container="true"]:hover {
    border-color: transparent;
    background: transparent;
    z-index: 5;
}

/* Container controls at TOP — move arrows feel natural (up=up).
   Child controls are now BELOW children, so no overlap is possible. */
.canvas-element[data-is-container="true"] > .element-controls {
    top: -44px;
    bottom: auto;
    right: 0;
    left: auto;
}

/* ============================================================================
   Layout switcher popover — opened by clicking the fa-table-columns button
   on a container element's control bar (canvasOpsMixin.openLayoutSwitcher).
   Shows a grid of 9 layout thumbnails; picking one calls
   switchContainerLayout and rewrites the grid-template-columns while
   preserving content by positional zone mapping.
   ============================================================================ */
.layout-switcher-popover {
    background: #ffffff;
    border: 1px solid #d4e3e6;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    max-width: 340px;
    z-index: 9999;
}

.layout-switcher-title {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #718096;
    margin-bottom: 10px;
}

.layout-switcher-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.layout-switcher-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border: 2px solid #e0e7e8;
    background: #f7fafa;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-family: inherit;
    text-align: center;
}

.layout-switcher-option:hover {
    border-color: #94B7BB;
    background: #edf4f5;
}

.layout-switcher-option.active {
    border-color: #003D4C;
    background: rgba(22, 92, 125, 0.08);
}

.layout-switcher-icon {
    font-size: 1.5em;
    color: #165C7D;
    line-height: 1;
}

.layout-switcher-option.active .layout-switcher-icon {
    color: #003D4C;
}

.layout-switcher-name {
    font-size: 0.7em;
    color: #4a5568;
    line-height: 1.25;
}

/* Grid Container */
.grid-container {
    display: grid;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    margin: var(--spacing-md) 0;
    border: 2px dashed var(--nord-accent);
    border-radius: var(--radius-md);
    min-height: 150px;
    background: rgba(148, 183, 187, 0.05);
}

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

.grid-container.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-container.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-column {
    min-height: 100px;
    padding: var(--spacing-md);
    border: 1px dashed var(--nord-border);
    border-radius: var(--radius-sm);
    background: var(--nord-white);
    position: relative;
}

.grid-column.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nord-text-light);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.grid-column.empty:hover {
    background: var(--nord-background);
    border-color: var(--nord-accent);
}

.grid-column-controls {
    position: absolute;
    top: -30px;
    right: 0;
    display: none;
    gap: var(--spacing-xs);
    background: var(--nord-white);
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--nord-border);
}

.grid-column:hover .grid-column-controls {
    display: flex;
}

.add-to-column-btn {
    position: absolute;
    bottom: var(--spacing-sm);
    right: var(--spacing-sm);
    width: 32px;
    height: 32px;
    border: 1px dashed var(--nord-accent);
    background: var(--nord-white);
    color: var(--nord-accent);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    font-size: 1.2rem;
}

.add-to-column-btn:hover {
    background: var(--nord-accent);
    color: var(--nord-white);
    border-style: solid;
}

/* Modals */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--nord-white);
    border-radius: var(--radius-lg);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--nord-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    margin: 0;
    font-size: 1.25rem;
    color: var(--nord-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--nord-text-light);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: var(--nord-background);
}

.modal-body {
    padding: var(--spacing-lg);
    overflow-y: auto;
}

.modal-footer {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--nord-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

/* Forms */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
    color: var(--nord-text);
}

.form-control {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--nord-border);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--nord-accent);
    box-shadow: 0 0 0 3px rgba(148, 183, 187, 0.2);
}

textarea.form-control {
    min-height: 120px;
    resize: vertical;
    font-family: 'Courier New', monospace;
}

.form-help {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: 0.75rem;
    color: var(--nord-text-light);
}

/* ========================================================================== */
/* ACCORDION BUILDER MODAL STYLING - ENHANCED & CONSOLIDATED */
/* ========================================================================== */

/* Modal enhancements */
#accordion-builder-modal .modal-content {
    max-width: 950px;
    max-height: 90vh;
}

#accordion-builder-modal .modal-body {
    max-height: 75vh;
    overflow-y: auto;
    padding: 30px;
}

#accordion-builder-modal .modal-body::-webkit-scrollbar {
    width: 8px;
}

#accordion-builder-modal .modal-body::-webkit-scrollbar-track {
    background: #f1f3f4;
    border-radius: 4px;
}

#accordion-builder-modal .modal-body::-webkit-scrollbar-thumb {
    background: var(--nord-accent, #94B7BB);
    border-radius: 4px;
}

#accordion-builder-modal .modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--nord-secondary, #165C7D);
}

/* Main container for accordion inputs */
.trekkspill-input-beholder {
    background: #f8fafa;
    padding: 25px;
    border-radius: 12px;
    border: 2px solid #e1ecee;
    margin-bottom: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Individual input groups */
.trekkspill-input-gruppe {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
    padding: 22px;
    background: white;
    border-radius: 10px;
    border: 1px solid #e5edef;
    position: relative;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
}

.trekkspill-input-gruppe:hover {
    border-color: var(--nord-accent, #94B7BB);
    box-shadow: 0 3px 12px rgba(148, 183, 187, 0.15);
    transform: translateY(-1px);
}

/* Title inputs */
.trekkspill-input-gruppe .trekkspill-tittel-input,
.trekkspill-input-gruppe .trekkspill-tittel-inndata {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e5edef;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    background: #fafbfc;
    transition: all 0.3s ease;
    box-sizing: border-box;
    margin: 0;
}

/* Content textareas */
.trekkspill-input-gruppe .trekkspill-innhold-input,
.trekkspill-input-gruppe .trekkspill-innhold-inndata {
    width: 100%;
    min-height: 120px;
    max-height: 300px;
    padding: 14px 16px;
    border: 2px solid #e5edef;
    border-radius: 8px;
    font-size: 0.95em;
    font-family: inherit;
    line-height: 1.6;
    background: #fafbfc;
    resize: vertical;
    transition: all 0.3s ease;
    box-sizing: border-box;
    margin: 0;
}

/* Enhanced focus states */
.trekkspill-input-gruppe .trekkspill-tittel-input:focus,
.trekkspill-input-gruppe .trekkspill-tittel-inndata:focus,
.trekkspill-input-gruppe .trekkspill-innhold-input:focus,
.trekkspill-input-gruppe .trekkspill-innhold-inndata:focus {
    outline: none;
    border-color: var(--nord-accent, #94B7BB);
    background: white;
    box-shadow: 0 0 0 3px rgba(148, 183, 187, 0.12);
    transform: translateY(-1px);
}

/* Remove section buttons */
.trekkspill-input-gruppe .fjern-seksjon-knapp,
.trekkspill-input-gruppe .fjern-fane-knapp {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #ff6b6b;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    font-family: inherit;
    transition: all 0.3s ease;
    z-index: 10;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
}

.trekkspill-input-gruppe .fjern-seksjon-knapp:hover,
.trekkspill-input-gruppe .fjern-fane-knapp:hover {
    background: #ff5252;
    transform: scale(1.05) translateY(-1px);
    box-shadow: 0 4px 8px rgba(255, 107, 107, 0.4);
}

/* Add section button */
.legg-til-seksjon-knapp,
.legg-til-fane-knapp {
    background: linear-gradient(135deg, var(--nord-accent, #94B7BB) 0%, #85a8ad 100%);
    color: white;
    border: none;
    padding: 16px 28px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    box-shadow: 0 4px 12px rgba(148, 183, 187, 0.25);
    text-transform: none;
    letter-spacing: 0.3px;
}

.legg-til-seksjon-knapp:hover,
.legg-til-fane-knapp:hover {
    background: linear-gradient(135deg, #7a9fa4 0%, #6d8a8e 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(148, 183, 187, 0.35);
}

.legg-til-seksjon-knapp:active,
.legg-til-fane-knapp:active {
    transform: translateY(0px);
    box-shadow: 0 2px 8px rgba(148, 183, 187, 0.3);
}

/* Icon is added explicitly via <i class="fa-solid fa-plus"> in the button markup. */

/* Steps Builder input groups */
.steps-input-container {
    background: #f8fafa;
    padding: 20px;
    border-radius: 12px;
    border: 2px solid #e1ecee;
}

.steps-input-gruppe {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
    padding: 18px;
    background: white;
    border-radius: 10px;
    border: 1px solid #e5edef;
    position: relative;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition: all 0.2s ease;
}

.steps-input-gruppe:hover {
    border-color: var(--nord-accent);
    box-shadow: 0 3px 10px rgba(148, 183, 187, 0.15);
}

.steps-title-input {
    width: 100%;
    padding: 10px 40px 10px 14px;
    border: 2px solid #e5edef;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    background: #fafbfc;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.steps-title-input:focus {
    outline: none;
    border-color: var(--nord-accent);
    background: white;
    box-shadow: 0 0 0 3px rgba(148, 183, 187, 0.12);
}

.steps-content-input {
    width: 100%;
    min-height: 60px;
    padding: 10px 14px;
    border: 2px solid #e5edef;
    border-radius: 8px;
    font-size: 0.9em;
    font-family: inherit;
    line-height: 1.5;
    background: #fafbfc;
    resize: vertical;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.steps-content-input:focus {
    outline: none;
    border-color: var(--nord-accent);
    background: white;
    box-shadow: 0 0 0 3px rgba(148, 183, 187, 0.12);
}

.steps-remove-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #ff6b6b;
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.steps-remove-btn:hover {
    background: #ff5252;
    transform: scale(1.05);
}

/* Criteria builder input rows */
.criteria-input-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    padding: 14px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e5edef;
    position: relative;
}

.criteria-input-row:hover {
    border-color: var(--nord-accent);
}

.criteria-name-input {
    width: 100%;
    padding: 8px 36px 8px 12px;
    border: 2px solid #e5edef;
    border-radius: 6px;
    font-size: 0.95em;
    font-family: inherit;
    box-sizing: border-box;
}

.criteria-name-input:focus {
    outline: none;
    border-color: var(--nord-accent);
}

.criteria-desc-input {
    width: 100%;
    padding: 6px 12px;
    border: 1px solid #e5edef;
    border-radius: 6px;
    font-size: 0.85em;
    font-family: inherit;
    color: #718096;
    box-sizing: border-box;
}

.criteria-desc-input:focus {
    outline: none;
    border-color: var(--nord-accent);
}

.criteria-remove-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ff6b6b;
    color: white;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
}

.criteria-remove-btn:hover {
    background: #ff5252;
}

.criteria-col-btn.active {
    border-color: #165c7d !important;
    background: rgba(22, 92, 125, 0.06) !important;
    color: #165c7d !important;
}

/* Media modal tab buttons */
.media-tab-btn.active {
    color: #003d4c !important;
    border-bottom-color: #00B0B9 !important;
}

/* Style selector */
.stil-velger {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.stil-alternativ {
    padding: 20px 18px;
    border: 2px solid #e5edef;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    font-size: 0.95em;
    font-weight: 600;
    background: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.stil-alternativ::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(148, 183, 187, 0.08), transparent);
    transition: left 0.6s ease;
}

.stil-alternativ:hover::before {
    left: 100%;
}

.stil-alternativ:hover {
    border-color: var(--nord-accent, #94B7BB);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(148, 183, 187, 0.15);
}

.stil-alternativ.valgt {
    border-color: var(--nord-primary, #003d4c);
    background: linear-gradient(135deg, rgba(0, 61, 76, 0.06), rgba(148, 183, 187, 0.04));
    color: var(--nord-primary, #003d4c);
    box-shadow: 0 4px 16px rgba(0, 61, 76, 0.12);
    transform: translateY(-2px);
}

.stil-alternativ strong {
    display: block;
    margin-bottom: 6px;
    font-size: 1.05em;
}

.stil-alternativ small {
    color: #6c7b7f;
    font-size: 0.85em;
}

.stil-alternativ.valgt small {
    color: var(--nord-secondary, #165C7D);
}

/* Builder section styling */
.bygger-seksjon {
    margin-bottom: 35px;
}

.bygger-etikett {
    font-weight: 700;
    color: var(--nord-primary, #003d4c);
    margin-bottom: 15px;
    display: block;
    font-size: 1.15em;
    letter-spacing: 0.3px;
}

/* Preview area */
.forhandsvisning-omrade {
    margin-top: 35px;
    padding: 30px;
    background: linear-gradient(135deg, #fdfdfe, #f8fafa);
    border-radius: 12px;
    border: 2px solid #e1ecee;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.forhandsvisning-tittel {
    color: var(--nord-primary, #003d4c);
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.3em;
    font-weight: 700;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--nord-accent, #94B7BB);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* NOTE: emoji ::before removed — all markup now provides its own
   <i class="fa-solid fa-eye"></i> explicitly. Leaving the pseudo here
   caused a double-icon (emoji + FA) in builder previews. */

/* Preview container */
#trekkspill-forhandsvisning-beholder {
    max-height: 450px;
    overflow-y: auto;
    border: 1px solid #e5edef;
    border-radius: 10px;
    padding: 20px;
    background: white;
    position: relative;
    z-index: 1;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
}

#trekkspill-forhandsvisning-beholder::-webkit-scrollbar {
    width: 8px;
}

#trekkspill-forhandsvisning-beholder::-webkit-scrollbar-track {
    background: #f1f3f4;
    border-radius: 4px;
}

#trekkspill-forhandsvisning-beholder::-webkit-scrollbar-thumb {
    background: var(--nord-accent, #94B7BB);
    border-radius: 4px;
}

#trekkspill-forhandsvisning-beholder::-webkit-scrollbar-thumb:hover {
    background: var(--nord-secondary, #165C7D);
}

/* Loading state */
.trekkspill-forhandsvisning-beholder.loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

.trekkspill-forhandsvisning-beholder.loading::after {
    content: 'Oppdaterer forhåndsvisning...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.9em;
    color: var(--nord-primary, #003d4c);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 1px solid #e5edef;
}

/* Edit button enhancements */
.control-btn[onclick*="editAccordion"] {
    background: linear-gradient(135deg, #17a2b8, #138496);
    color: white;
    box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
}

.control-btn[onclick*="editAccordion"]:hover {
    background: linear-gradient(135deg, #138496, #0f6b7a);
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(23, 162, 184, 0.4);
}

/* Focus state for accessibility */
.trekkspill-input-gruppe:focus-within {
    border-color: var(--nord-accent, #94B7BB);
    box-shadow: 0 0 0 3px rgba(148, 183, 187, 0.15);
}

/* Smooth transitions */
.trekkspill-input-beholder *,
.stil-velger *,
.forhandsvisning-omrade * {
    transition: all 0.2s ease;
}

/* Font family consistency */
.trekkspill-input-gruppe input,
.trekkspill-input-gruppe textarea,
.trekkspill-input-gruppe button {
    font-family: inherit;
}

/* ========================================================================== */
/* RESPONSIVE DESIGN */
/* ========================================================================== */

@media (max-width: 768px) {
    #accordion-builder-modal .modal-content {
        max-width: 95%;
        margin: 10px;
    }
    
    #accordion-builder-modal .modal-body {
        padding: 20px;
        max-height: 80vh;
    }
    
    .trekkspill-input-beholder {
        padding: 20px;
    }
    
    .trekkspill-input-gruppe {
        padding: 18px;
        gap: 12px;
    }
    
    .trekkspill-input-gruppe .trekkspill-innhold-input,
    .trekkspill-input-gruppe .trekkspill-innhold-inndata {
        min-height: 100px;
    }
    
    .stil-velger {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .stil-alternativ {
        padding: 16px 14px;
    }
    
    .fjern-seksjon-knapp,
    .fjern-fane-knapp {
        position: static;
        margin-top: 12px;
        align-self: flex-start;
        padding: 6px 12px;
    }
    
    .legg-til-seksjon-knapp,
    .legg-til-fane-knapp {
        padding: 14px 24px;
        font-size: 0.95em;
    }
    
    .forhandsvisning-omrade {
        padding: 20px;
        margin-top: 25px;
    }
    
    #trekkspill-forhandsvisning-beholder {
        max-height: 350px;
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .trekkspill-input-gruppe {
        padding: 15px;
    }
    
    .trekkspill-input-gruppe .trekkspill-tittel-input,
    .trekkspill-input-gruppe .trekkspill-tittel-inndata,
    .trekkspill-input-gruppe .trekkspill-innhold-input,
    .trekkspill-input-gruppe .trekkspill-innhold-inndata {
        padding: 12px 14px;
        font-size: 0.9em;
    }
    
    .forhandsvisning-tittel {
        font-size: 1.15em;
    }
    
    .bygger-etikett {
        font-size: 1.05em;
    }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .trekkspill-input-gruppe,
    .stil-alternativ,
    .legg-til-seksjon-knapp,
    .legg-til-fane-knapp,
    .fjern-seksjon-knapp,
    .fjern-fane-knapp {
        transition: none;
    }
    
    .stil-alternativ::before {
        display: none;
    }
}
/* Edit Preview */
.edit-preview {
    border: 1px solid var(--nord-border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    background: var(--nord-white);
    min-height: 200px;
}

/* Code Area */
.code-area {
    width: 100%;
    height: 400px;
    padding: var(--spacing-md);
    border: 1px solid var(--nord-border);
    border-radius: var(--radius-sm);
    background: #f7f7f7;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    resize: none;
}

/* Buttons */
.btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    transition: all var(--transition-fast);
}

.btn-primary {
    background: var(--nord-primary);
    color: var(--nord-white);
}

.btn-primary:hover {
    background: var(--nord-secondary);
}

.btn-secondary {
    background: var(--nord-white);
    color: var(--nord-primary);
    border: 1px solid var(--nord-border);
}

.btn-secondary:hover {
    background: var(--nord-background);
}

/* Toast */
.toast {
    position: fixed;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    background: var(--nord-secondary);
    color: var(--nord-white);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: none;
    animation: slideIn 0.3s ease;
}

.toast.show {
    display: block;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .app-header {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .main-container {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
        height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--nord-border);
    }
    
    .main-categories {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .canvas-wrapper {
        padding: var(--spacing-md);
    }
}


/* Additional CSS for Page-Specific Elements Section */

/* Page-specific elements section */
.page-specific-elements {
    padding: var(--spacing-md);
    background: var(--nord-background);
    border-bottom: 2px solid var(--nord-accent);
    margin-bottom: var(--spacing-md);
}

.page-specific-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--nord-primary);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.page-specific-items {
    display: grid;
    gap: var(--spacing-sm);
}

/* Enhanced grid column styling */
.grid-column {
    min-height: 100px;
    padding: var(--spacing-md);
    border: 1px dashed var(--nord-border);
    border-radius: var(--radius-sm);
    background: var(--nord-white);
    position: relative;
    transition: all var(--transition-fast);
}

.grid-column.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nord-text-light);
    font-size: 0.875rem;
    cursor: pointer;
}

.grid-column.empty:hover {
    background: var(--nord-background);
    border-color: var(--nord-accent);
    border-style: solid;
}

.grid-column:not(.empty) {
    padding: var(--spacing-sm);
}

/* Grid column controls */
.grid-column-controls {
    position: absolute;
    top: -30px;
    right: 0;
    display: none;
    gap: var(--spacing-xs);
    background: var(--nord-white);
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--nord-border);
}

.grid-column:hover .grid-column-controls {
    display: flex;
}

.add-to-column-btn {
    position: absolute;
    bottom: var(--spacing-sm);
    right: var(--spacing-sm);
    width: 32px;
    height: 32px;
    border: 1px dashed var(--nord-accent);
    background: var(--nord-white);
    color: var(--nord-accent);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    font-size: 1.2rem;
}

.add-to-column-btn:hover {
    background: var(--nord-accent);
    color: var(--nord-white);
    border-style: solid;
}

/* Enhanced grid container */
.grid-container {
    display: grid;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    margin: var(--spacing-md) 0;
    border: 2px dashed var(--nord-accent);
    border-radius: var(--radius-md);
    min-height: 150px;
    background: rgba(148, 183, 187, 0.05);
    position: relative;
}

.grid-container::before {
    content: "Rutenett - " attr(data-columns) " kolonner";
    position: absolute;
    top: -10px;
    left: 15px;
    background: var(--nord-white);
    padding: 2px 8px;
    font-size: 0.75rem;
    color: var(--nord-primary);
    font-weight: 500;
}

/* Toast improvements */
.toast.warning {
    background: var(--nord-orange);
}

.toast.error {
    background: var(--nord-red);
}

/* Form improvements for image modal */
.form-group {
    margin-bottom: var(--spacing-lg);
}

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

/* Enhanced element item hover effects */
.element-item {
    position: relative;
    overflow: hidden;
}

.element-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(148, 183, 187, 0.2), transparent);
    transition: left 0.5s ease;
}

.element-item:hover::before {
    left: 100%;
}

/* Enhanced canvas element styling */
.canvas-element {
    position: relative;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    border: 2px dashed transparent;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    background: transparent;
}

.canvas-element:hover {
    border-color: var(--nord-accent);
    background: rgba(148, 183, 187, 0.05);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Enhanced button styling */
.toolbar-btn.active {
    background: var(--nord-accent);
    color: var(--nord-white);
    border-color: var(--nord-accent);
    box-shadow: var(--shadow-sm);
}

/* Responsive improvements */
@media (max-width: 768px) {
    .page-specific-elements {
        padding: var(--spacing-sm);
    }
    
    .grid-container {
        padding: var(--spacing-md);
        gap: var(--spacing-md);
    }
    
    .grid-options {
        flex-wrap: wrap;
    }
    
    .element-item {
        padding: var(--spacing-md);
    }
}

/* Enhanced Grid Editing Styles - Add to your existing CSS */

/* Grid editing mode styling */
.grid-wrapper.editing-mode {
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.3);
    animation: editing-pulse 2s infinite;
}

@keyframes editing-pulse {
    0%, 100% { 
        box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.3);
    }
    50% { 
        box-shadow: 0 0 0 6px rgba(255, 193, 7, 0.2);
    }
}

/* Enhanced grid header for editing mode */
.grid-header.editing {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7) !important;
    border-color: #ffc107 !important;
    position: relative;
}

.grid-header.editing::before {
    content: "✏️ REDIGERER";
    position: absolute;
    top: -8px;
    left: 15px;
    background: #ffc107;
    color: #000;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7em;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* Enhanced interactive grid styling for edit mode */
.interactive-grid.editing {
    background: linear-gradient(135deg, #fffbf0, #fff8e1) !important;
    border-color: #ffc107 !important;
}

/* Cancel button styling */
.control-btn.cancel-edit {
    background: #dc3545 !important;
    color: white !important;
    animation: cancel-highlight 1s ease-in-out;
}

@keyframes cancel-highlight {
    0%, 100% { 
        background: #dc3545 !important;
    }
    50% { 
        background: #c82333 !important;
        transform: scale(1.1);
    }
}

/* Enhanced column selection for edit mode */
.grid-column.editing-active {
    border: 2px solid #ffc107 !important;
    background: #fffbf0 !important;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

/* Enhanced column hover effects in edit mode */
.interactive-grid.editing .grid-column:hover {
    border-color: #ffc107 !important;
    background: #fff8e1 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.2);
}

/* Column element controls enhancement */
.column-element-controls {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(4px);
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.column-element-controls button {
    transition: all 0.2s ease;
}

.column-element-controls button:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Active indicator enhancement */
.active-indicator {
    animation: active-pulse 2s infinite;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@keyframes active-pulse {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* Enhanced column tabs for editing */
.column-tab.editing-mode {
    position: relative;
}

.column-tab.editing-mode::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid #ffc107;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.column-tab.editing-mode.active::after {
    opacity: 1;
}

/* Grid status indicator */
.grid-status-indicator {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #28a745;
    color: white;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 0.6em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.grid-status-indicator.editing {
    background: #ffc107;
    color: #000;
}

.grid-status-indicator.editing::before {
    content: "✏️ ";
}

/* Enhanced empty state for edit mode */
.column-empty-state.editing {
    border: 2px dashed #ffc107;
    background: rgba(255, 193, 7, 0.1);
    border-radius: 8px;
    padding: 20px;
}

/* Toolbar button enhancements for grid editing */
.toolbar-btn.grid-editing {
    background: linear-gradient(135deg, #ffc107, #ffca2c);
    color: #000;
    border-color: #ffc107;
    font-weight: bold;
}

.toolbar-btn.grid-editing:hover {
    background: linear-gradient(135deg, #e0a800, #ffc107);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
}

/* Grid content area enhancements */
.element-content .finalized-grid {
    position: relative;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.element-content .finalized-grid::before {
    content: "📊 Grid Layout";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(148, 183, 187, 0.1);
    padding: 8px 12px;
    font-size: 0.8em;
    font-weight: bold;
    color: #003d4c;
    border-bottom: 1px solid #e0e0e0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.element-content .finalized-grid:hover::before {
    opacity: 1;
}

/* Enhanced element hover effects in grid */
.column-element {
    transition: all 0.2s ease;
}

.column-element:hover {
    background: #f8f9fa !important;
    border-color: #94B7BB !important;
    transform: translateX(2px);
    box-shadow: 0 2px 6px rgba(148, 183, 187, 0.2);
}

/* Grid column content area */
.grid-column {
    position: relative;
    overflow: visible;
}

.grid-column::before {
    content: attr(data-column-index);
    position: absolute;
    top: -15px;
    left: 10px;
    background: #94B7BB;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    font-weight: bold;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.grid-column:hover::before {
    opacity: 1;
}

/* Responsive enhancements */
@media (max-width: 768px) {
    .grid-header.editing::before {
        font-size: 0.6em;
        padding: 1px 6px;
    }
    
    .column-element-controls {
        position: static !important;
        display: flex !important;
        justify-content: center;
        margin-top: 10px;
        background: #f8f9fa !important;
        padding: 5px;
        border-radius: 4px;
    }
    
    .active-indicator {
        position: static !important;
        display: inline-block;
        margin: 5px auto;
    }
}

/* Toast enhancements for grid operations */
.toast.grid-info {
    background: linear-gradient(135deg, #17a2b8, #20c997);
    border-left: 4px solid #fff;
}

.toast.grid-warning {
    background: linear-gradient(135deg, #ffc107, #fd7e14);
    color: #000;
    border-left: 4px solid #fff;
}

.toast.grid-success {
    background: linear-gradient(135deg, #28a745, #20c997);
    border-left: 4px solid #fff;
}

/* Animation for grid transitions */
.grid-transition {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.grid-fade-in {
    animation: gridFadeIn 0.5s ease-out;
}

@keyframes gridFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* SEARCH CONTAINER */
.search-container {
    padding: 15px;
    border-bottom: 1px solid var(--nord-border);
    background: var(--nord-background);
}

.search-input-wrapper {
    position: relative;
}

.search-input {
    width: 100%;
    padding: 10px 40px 10px 15px;
    border: 2px solid var(--nord-border);
    border-radius: 8px;
    font-size: 0.9em;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.search-input:focus {
    outline: none;
    border-color: var(--nord-accent);
}

.search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 1.1em;
    pointer-events: none;
}

.search-clear {
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 1.2em;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-clear:hover {
    background: #f0f0f0;
}

/* UPDATED MAIN CATEGORIES - 3x2 GRID */
.main-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--nord-border);
    background: var(--nord-background);
}

/* UPDATE CATEGORY BUTTONS */
.category-btn .icon {
    font-size: 1.3em;
}

.category-btn .label {
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}

.category-btn .count {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-top: 2px;
}

/* SUB-CATEGORIES */
.sub-categories {
    padding: 10px 15px;
    background: #f0f4f7;
    border-bottom: 1px solid var(--nord-border);
}

.sub-category-tabs {
    display: flex;
    gap: 4px;
}

.sub-tab {
    flex: 1;
    padding: 6px 8px;
    background: var(--nord-white);
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    text-align: center;
    transition: all var(--transition-fast);
    color: #666;
}

.sub-tab:hover {
    background: #e9ecef;
}

.sub-tab.active {
    background: var(--nord-primary);
    color: var(--nord-white);
    border-color: var(--nord-primary);
}

/* SIDEBAR ELEMENTS - CLEANED AND RESPONSIVE */

/* Sub Elements - Single consolidated definition */
.sub-elements {
    flex: 1;
    padding: var(--spacing-md);
    padding-bottom: 120px; /* Extra padding at bottom to ensure last element is fully visible */
    overflow-y: auto;
    /* Responsive height that uses available space */
    min-height: 200px;
    max-height: calc(100vh - 420px); /* Adjust for header + tool-nav + search + categories */
}

/* Custom scrollbar styling */
.sub-elements::-webkit-scrollbar {
    width: 6px;
}

.sub-elements::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.sub-elements::-webkit-scrollbar-thumb {
    background: var(--nord-accent);
    border-radius: 3px;
}

/* Search Results - Matching responsive behavior */
.search-results {
    flex: 1;
    padding: var(--spacing-md);
    padding-bottom: 120px; /* Extra padding at bottom to ensure last element is fully visible */
    overflow-y: auto;
    /* Same responsive height as sub-elements */
    min-height: 200px;
    max-height: calc(100vh - 420px);
}

/* Search results content styling */
.search-results .section-title {
    font-size: 0.8em;
    font-weight: bold;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 15px 0 8px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--nord-border);
}

.search-results .section-title:first-child {
    margin-top: 5px;
}

.no-results {
    text-align: center;
    color: #999;
    font-style: italic;
    padding: 20px;
}

/* Element Items - Consolidated styling */
.element-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    background: var(--nord-background);
    border: 1px solid var(--nord-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.element-item:hover {
    background: var(--nord-white);
    border-color: var(--nord-accent);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

/* Enhanced hover effect */
.element-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(148, 183, 187, 0.2), transparent);
    transition: left 0.5s ease;
}

.element-item:hover::before {
    left: 100%;
}

.element-item .icon {
    font-size: 1.25rem;
    color: var(--nord-secondary);
}

.element-item .name {
    flex: 1;
    font-weight: 500;
}

/* Element badges */
.element-item .badge {
    background: var(--nord-accent);
    color: var(--nord-white);
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.7em;
    font-weight: bold;
    margin-left: auto;
}

.element-item .badge.new {
    background: #4caf50;
}

.element-item .badge.page-template {
    background: #ff9800;
    color: #333;
}

.element-item .badge.coming {
    background: #9e9e9e;
}

/* Phase 3: EKSTRA badge — muted gray-teal, marks elements that are only
   visible when the user has enabled the "Ekstra design" toggle. Lower visual
   weight than the bright NY badge since "ekstra" means "extra options for
   power users" rather than "new feature". */
.element-item .badge.ekstra {
    background: #94B7BB;
    color: #ffffff;
}

/* Web-only marker — shown on elements whose Canvas output depends on jQuery
   UI enhancement (tabs-builder, sortable-quiz). Those work in Canvas web but
   degrade to plain HTML in the Canvas mobile app. Visually understated so
   it doesn't compete with NY/MAL/KOMMER. */
.element-item .badge.web-only {
    background: transparent;
    color: #6b7c80;
    padding: 2px 4px;
    font-size: 0.85em;
    font-weight: normal;
    cursor: help;
}

/* Tilpasset boks — rich-text body field. Placeholder shows when the
   contenteditable div is empty; hidden once the user types. */
.ub-body-editor:empty::before {
    content: attr(data-placeholder);
    color: #a0aec0;
    pointer-events: none;
}
.ub-body-editor:focus {
    outline: 2px solid #00B0B9;
    outline-offset: -1px;
}
.ub-rt-btn:hover {
    background: #ffffff !important;
}
.ub-rt-btn.active {
    background: #ffffff !important;
    color: #00B0B9 !important;
}

/* SEARCH CONTAINER */
.search-container {
    padding: 15px;
    border-bottom: 1px solid var(--nord-border);
    background: var(--nord-background);
    flex-shrink: 0; /* Prevent search from shrinking */
}

.search-input-wrapper {
    position: relative;
}

.search-input {
    width: 100%;
    padding: 10px 40px 10px 15px;
    border: 2px solid var(--nord-border);
    border-radius: 8px;
    font-size: 0.9em;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.search-input:focus {
    outline: none;
    border-color: var(--nord-accent);
}

.search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 1.1em;
    pointer-events: none;
}

.search-clear {
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 1.2em;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-clear:hover {
    background: #f0f0f0;
}

/* MAIN CATEGORIES */
.main-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--nord-border);
    background: var(--nord-background);
    flex-shrink: 0; /* Prevent categories from shrinking */
}

/* SUB-CATEGORIES */
.sub-categories {
    padding: 10px 15px;
    background: #f0f4f7;
    border-bottom: 1px solid var(--nord-border);
    flex-shrink: 0; /* Prevent sub-categories from shrinking */
}

.sub-category-tabs {
    display: flex;
    gap: 4px;
}

.sub-tab {
    flex: 1;
    padding: 6px 8px;
    background: var(--nord-white);
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    text-align: center;
    transition: all var(--transition-fast);
    color: #666;
}

.sub-tab:hover {
    background: #e9ecef;
}

.sub-tab.active {
    background: var(--nord-primary);
    color: var(--nord-white);
    border-color: var(--nord-primary);
}

/* RESPONSIVE BEHAVIOR */
@media (max-width: 1200px) {
    /* Reduce height calculation for smaller screens */
    .sub-elements,
    .search-results {
        max-height: calc(100vh - 390px);
    }
}

@media (max-width: 768px) {
    /* Mobile specific adjustments */
    .main-categories {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        padding: 10px;
    }
    
    .search-container {
        padding: 10px;
    }
    
    .element-item {
        padding: var(--spacing-md);
    }
    
    /* Fixed height on mobile for better UX */
    .sub-elements,
    .search-results {
        max-height: 300px;
        min-height: 200px;
    }
}

/* HIGH RESOLUTION DISPLAYS */
@media (min-height: 900px) {
    /* On tall screens, allow more space for elements */
    .sub-elements,
    .search-results {
        max-height: calc(100vh - 370px);
        min-height: 300px;
    }
}

@media (min-height: 1200px) {
    /* On very tall screens, use even more space */
    .sub-elements,
    .search-results {
        max-height: calc(100vh - 350px);
        min-height: 400px;
    }
}


/* Remove reference button styling */
.remove-reference {
    position: absolute;
    top: 5px;
    right: 8px;
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    font-size: 1.2em;
    display: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transition: all var(--transition-fast);
}

.remove-reference:hover {
    background: #f0f0f0;
    color: #dc3545;
}

/* Show remove button on hover */
.reference-item:hover .remove-reference {
    display: block;
}

/* Add reference button styling */
.add-reference-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background: #e9ecef;
    border: 2px dashed var(--nord-accent);
    border-radius: 6px;
    color: var(--nord-primary);
    cursor: pointer;
    font-size: 0.9em;
    transition: all var(--transition-normal);
    margin-top: 15px;
    font-family: inherit;
}

.add-reference-btn:hover {
    background: var(--nord-accent);
    color: var(--nord-white);
    border-color: var(--nord-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Editor-only elements that will be removed during export */
.editor-only {
    /* No specific styling needed, just used for targeting during export cleanup */
}

        .demo-seksjon {
            background: white;
            margin: 30px 0;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .demo-tittel {
            color: var(--nord-sekund1);
            font-size: 1.5em;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--nord-sekund6);
        }
        
        /* === GRUNNLEGGENDE FANE-STILER === */
        .faner-beholder {
            margin: 25px 0;
            font-family: system-ui, -apple-system, sans-serif;
        }

        .faneliste {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .fane {
            display: inline-block;
            text-decoration: none !important;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
            font-size: 0.95em;
            border: none;
            outline: none;
        }

        .fane:focus {
            outline: 2px solid var(--nord-sekund6);
            outline-offset: 2px;
        }

        .fanepanel {
            background: white;
            border-radius: 8px;
        }

        .fanepanel h2,
        .fanepanel h3,
        .fanepanel h4 {
            color: var(--nord-sekund1);
            margin-top: 0;
            margin-bottom: 15px;
        }

        .fanepanel p {
            margin-bottom: 15px;
            line-height: 1.6;
        }

        .fanepanel ul,
        .fanepanel ol {
            margin-bottom: 15px;
            padding-left: 20px;
        }

        .fanepanel li {
            margin-bottom: 6px;
        }

        /* === HORISONTALE RENE FANER === */
        .horisontale-rene .faneliste {
            display: flex;
            gap: 4px;
            padding: 4px;
            background: #f8f9fa;
            border-radius: 8px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            border: none;
        }

        .horisontale-rene .fane {
            padding: 12px 20px;
            background: transparent;
            border: none;
            border-radius: 6px;
            color: var(--nord-sekund2);
            transition: all 0.3s ease;
        }

        .horisontale-rene .fane:hover {
            background: rgba(148, 183, 187, 0.2);
            transform: translateY(-1px);
            color: var(--nord-sekund1);
        }

        .horisontale-rene .fane.aktiv {
            background: var(--nord-sekund1);
            color: white;
            box-shadow: 0 2px 8px rgba(0, 61, 76, 0.3);
        }

        .horisontale-rene .fanepanel {
            padding: 25px;
            background: white;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        /* === VERTIKALE RENE FANER === */
        .vertikale-rene {
            display: grid;
            grid-template-columns: 220px 1fr;
            gap: 25px;
            background: white;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid #e9ecef;
            min-height: 350px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        .vertikale-rene .faneliste {
            display: flex;
            flex-direction: column;
            padding: 20px;
            background: #f8f9fa;
            margin: 0;
            border: none;
            gap: 6px;
        }

        .vertikale-rene .fane {
            padding: 14px 18px;
            background: transparent;
            border: none;
            border-radius: 8px;
            color: var(--nord-sekund2);
            text-align: left;
            transition: all 0.3s ease;
            position: relative;
            display: block;
        }

        .vertikale-rene .fane:hover {
            background: rgba(148, 183, 187, 0.15);
            padding-left: 22px;
            color: var(--nord-sekund1);
        }

        .vertikale-rene .fane.aktiv {
            background: var(--nord-sekund1);
            color: white;
            font-weight: 600;
            position: relative;
        }

        .vertikale-rene .fane.aktiv::after {
            content: '';
            position: absolute;
            right: -20px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-left: 8px solid var(--nord-sekund1);
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
        }

        .vertikale-rene .fane-innhold {
            padding: 30px;
        }

        .vertikale-rene .fanepanel {
            padding: 0;
            background: transparent;
            border: none;
            box-shadow: none;
        }
        
        /* === FANE-BYGGER STILER === */
        .fane-bygger {
            background: #f8f9fa;
            padding: 30px;
            border-radius: 12px;
            border: 2px dashed var(--nord-sekund6);
            margin: 20px 0;
        }

        .bygger-seksjon {
            margin-bottom: 25px;
        }

        .bygger-etikett {
            font-weight: 600;
            color: var(--nord-sekund1);
            margin-bottom: 12px;
            display: block;
            font-size: 1.1em;
        }

        .stil-velger {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 12px;
            margin-bottom: 20px;
        }

        .stil-alternativ {
            padding: 16px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            cursor: pointer;
            text-align: center;
            transition: all 0.3s ease;
            font-size: 0.95em;
            font-weight: 500;
            background: white;
        }

        .stil-alternativ:hover {
            border-color: var(--nord-sekund6);
            transform: translateY(-1px);
        }

        .stil-alternativ.valgt {
            border-color: var(--nord-sekund1);
            background: rgba(0, 61, 76, 0.05);
            color: var(--nord-sekund1);
        }

        .faner-beholder-input {
            background: white;
            padding: 20px;
            border-radius: 8px;
            border: 1px solid #e9ecef;
        }

        .fane-input-gruppe {
            display: flex;
            gap: 10px;
            margin-bottom: 12px;
            align-items: center;
        }

        .fane-input {
            flex: 1;
            padding: 10px 14px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 0.95em;
            transition: border-color 0.3s ease;
            font-family: inherit;
        }

        .fane-input:focus {
            outline: none;
            border-color: var(--nord-sekund6);
            box-shadow: 0 0 0 3px rgba(148, 183, 187, 0.1);
        }

        .fjern-fane-knapp {
            background: #dc3545;
            color: white;
            border: none;
            padding: 6px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.85em;
            transition: background-color 0.3s ease;
            font-family: inherit;
        }

        .fjern-fane-knapp:hover {
            background: #c82333;
        }

        .legg-til-fane-knapp {
            background: var(--nord-sekund6);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.95em;
            font-weight: 500;
            transition: all 0.3s ease;
            font-family: inherit;
        }

        .legg-til-fane-knapp:hover {
            background: #7a9fa4;
            transform: translateY(-1px);
        }

        .forhandsvisning-omrade {
            margin-top: 30px;
            padding: 25px;
            background: white;
            border-radius: 8px;
            border: 1px solid #e9ecef;
        }

        .forhandsvisning-tittel {
            color: var(--nord-sekund1);
            margin-top: 0;
            margin-bottom: 20px;
            font-size: 1.2em;
            padding-bottom: 8px;
            border-bottom: 1px solid #e9ecef;
        }

        .generer-kode-knapp {
            background: var(--nord-sekund1);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 600;
            margin-top: 20px;
            transition: all 0.3s ease;
            font-family: inherit;
        }

        .generer-kode-knapp:hover {
            background: var(--nord-sekund2);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 61, 76, 0.3);
        }

        .kode-utdata {
            background: #2d3748;
            color: #e2e8f0;
            padding: 20px;
            border-radius: 8px;
            font-family: 'Courier New', Monaco, Consolas, monospace;
            font-size: 0.85em;
            overflow-x: auto;
            margin-top: 20px;
            max-height: 300px;
            overflow-y: auto;
            display: none;
            white-space: pre-wrap;
            line-height: 1.4;
        }

        .kode-utdata.vis {
            display: block;
        }
        
        /* === RESPONSIV DESIGN === */
        @media (max-width: 768px) {
            .vertikale-rene {
                grid-template-columns: 1fr;
            }
            
            .vertikale-rene .faneliste {
                flex-direction: row;
                overflow-x: auto;
                padding: 15px;
                gap: 8px;
            }
            
            .vertikale-rene .fane {
                white-space: nowrap;
                min-width: 120px;
                text-align: center;
            }
            
            .vertikale-rene .fane.aktiv::after {
                display: none;
            }
            
            .horisontale-rene .faneliste {
                flex-direction: column;
                gap: 6px;
            }
            
            .horisontale-rene .fane {
                text-align: center;
            }
            
            .stil-velger {
                grid-template-columns: 1fr;
            }
        }
        #tab-builder-modal .stil-velger {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

/* Tab builder — colour theme swatch picker */
#tab-builder-modal .tab-theme-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}
#tab-builder-modal .tab-theme-swatch {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border: 2px solid #e5edef;
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
#tab-builder-modal .tab-theme-swatch:hover {
    transform: translateY(-2px);
    border-color: #94B7BB;
    box-shadow: 0 4px 12px rgba(0, 61, 76, 0.08);
}
#tab-builder-modal .tab-theme-swatch.selected {
    border-color: #003d4c;
    box-shadow: 0 4px 14px rgba(0, 61, 76, 0.18);
}
#tab-builder-modal .tab-theme-swatch-nav {
    display: block;
    height: 16px;
}
#tab-builder-modal .tab-theme-swatch-accent {
    display: block;
    height: 28px;
}
#tab-builder-modal .tab-theme-swatch-label {
    display: block;
    padding: 8px 10px;
    font-size: 0.85em;
    color: #003d4c;
    background: #fff;
    font-weight: 600;
}

/* Tab builder — preview-scoped active-tab highlight.
   Canvas's real jQuery UI swaps `ui-state-active` at click time, but the
   modal preview (and the designer canvas after insertion) run outside
   Canvas, so we apply local styling to match how Canvas actually renders
   the tabs: the active tab becomes a white pill with dark text, and
   inactive tabs show cyan/light-blue text on the dark nav bar.
   Scope: #tab-preview-container (builder modal) + .canvas-element (inserted
   on canvas) so the preview reflects the real Canvas look in both places. */
.tab-preview-scope .ui-tabs-nav li,
#canvas .canvas-element .ui-tabs-nav li {
    transition: background 0.15s ease;
}
.tab-preview-scope .ui-tabs-nav .ui-state-active,
#canvas .canvas-element .ui-tabs-nav .ui-state-active {
    background: #ffffff !important;
}
.tab-preview-scope .ui-tabs-nav .ui-state-active a,
#canvas .canvas-element .ui-tabs-nav .ui-state-active a {
    color: #1e293b !important;
}
.tab-preview-scope .ui-tabs-nav li:not(.ui-state-active) a,
#canvas .canvas-element .ui-tabs-nav li:not(.ui-state-active) a {
    color: #7dd3fc !important;
}
/* Hide non-active panels so the designer preview mimics Canvas's jQuery UI
   (which hides all panels except the active one via display: none). */
.tab-preview-scope .ui-tabs-panel[aria-hidden="true"],
#canvas .canvas-element .ui-tabs-panel[aria-hidden="true"] {
    display: none !important;
}
/* Clickable tabs on the canvas: when the user clicks an inactive tab label
   on an inserted tabs-builder element, JS (canvasOpsMixin) toggles the
   active classes so the designer behaves like Canvas. */
#canvas .canvas-element .ui-tabs-nav a {
    cursor: pointer;
}

/* Tab builder — per-tab row with inline rich-text editor */
#tab-builder-modal #tab-inputs {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 12px;
}
#tab-builder-modal .fane-input-gruppe {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: #f8fafa;
    border: 1px solid #e1ecee;
    border-radius: 10px;
}
#tab-builder-modal .fane-input-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
#tab-builder-modal .fane-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #003d4c;
    color: #ffffff;
    font-size: 0.8em;
    font-weight: 700;
    flex-shrink: 0;
}
#tab-builder-modal .fane-input-header .fane-input {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 0.95em;
    font-weight: 600;
    color: #003d4c;
    background: #ffffff;
}
#tab-builder-modal .tab-content-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px;
    background: #e8eef0;
    border: 1px solid #d4e3e6;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
}
#tab-builder-modal .tab-rt-btn {
    width: 32px;
    height: 28px;
    border: none;
    background: transparent;
    color: #003d4c;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.85em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#tab-builder-modal .tab-rt-btn:hover {
    background: #d4e3e6;
}
#tab-builder-modal .tab-rt-btn.active {
    background: #00B0B9;
    color: #ffffff;
}
#tab-builder-modal .tab-rt-sep {
    width: 1px;
    margin: 4px 4px;
    background: #cbd8dc;
}
#tab-builder-modal .tab-content-editor {
    min-height: 80px;
    max-height: 240px;
    overflow-y: auto;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #d4e3e6;
    border-radius: 0 0 6px 6px;
    font-size: 0.95em;
    color: #1e293b;
    line-height: 1.6;
    outline: none;
}
#tab-builder-modal .tab-content-editor:focus {
    border-color: #00B0B9;
}
#tab-builder-modal .tab-content-editor:empty::before {
    content: attr(data-placeholder);
    color: #94a3b8;
    font-style: italic;
    pointer-events: none;
}
#tab-builder-modal .tab-content-editor h2,
#tab-builder-modal .tab-content-editor h3,
#tab-builder-modal .tab-content-editor h4 {
    margin: 8px 0 6px;
    color: #003d4c;
}
#tab-builder-modal .tab-content-editor p {
    margin: 0 0 8px;
}
#tab-builder-modal .fane-remove-btn {
    flex-shrink: 0;
}

/* ==========================================================================
   Canvas connection indicator + status badges
   ========================================================================== */
.canvas-conn-indicator {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.canvas-conn-indicator::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    border: 1.5px solid #ffffff;
}
.canvas-conn-indicator.connected::after {
    background: #007041;
}

/* Connection modal status messages.
   Hidden by default; a kind-specific modifier class (cc-status-testing /
   saved / success / error) turns it on AND applies the colour palette.
   We use a single-selector rule to keep specificity low so the inline
   element style doesn't need to fight it. */
.cc-status {
    display: none;
    margin: 14px 0 0;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.9em;
    line-height: 1.5;
}
.cc-status.cc-status-testing,
.cc-status.cc-status-saved,
.cc-status.cc-status-success,
.cc-status.cc-status-error {
    display: block;
}
.cc-status.cc-status-testing { background: #eef4f5; color: #165C7D; border-left: 4px solid #165C7D; }
.cc-status.cc-status-saved { background: #eef4f5; color: #003D4C; border-left: 4px solid #94B7BB; }
.cc-status.cc-status-success { background: #edf8f4; color: #007041; border-left: 4px solid #007041; }
.cc-status.cc-status-error { background: #fff5f2; color: #9f1239; border-left: 4px solid #EC5742; }

/* Publish modal status messages (same pattern) */
.cp-status {
    display: none;
    margin: 14px 0 0;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.9em;
    line-height: 1.5;
}
.cp-status.cp-status-working,
.cp-status.cp-status-success,
.cp-status.cp-status-warning,
.cp-status.cp-status-error,
.cp-status.cp-status-saved {
    display: block;
}
.cp-status.cp-status-working { background: #eef4f5; color: #165C7D; border-left: 4px solid #165C7D; }
.cp-status.cp-status-success { background: #edf8f4; color: #007041; border-left: 4px solid #007041; }
.cp-status.cp-status-warning { background: #fff7ed; color: #92400e; border-left: 4px solid #f59e0b; }
.cp-status.cp-status-error { background: #fff5f2; color: #9f1239; border-left: 4px solid #EC5742; }
.cp-status.cp-status-saved { background: #f7fafa; color: #4a5568; border-left: 4px solid #94B7BB; font-size: 0.85em; }
.cp-status.cp-status-success a { color: #007041; text-decoration: underline; font-weight: 700; }
.cp-status.cp-status-warning a { color: #92400e; text-decoration: underline; font-weight: 700; }

/* ==========================================================================
   Preview mode (2026-04-15) — hide the editor chrome on the canvas so the
   teacher can see the page as it will appear in Canvas, without dashed
   drop zones / hover controls / container placeholders getting in the
   way. Pure visual toggle: interactions are preserved so the teacher can
   still click anywhere to exit via the floating "Exit preview" pill (or
   press Esc, or re-click the toolbar button). Nothing about the canvas
   state changes while preview mode is on.
   ========================================================================== */

/* The canvas itself loses padding/border affordances. */
body.preview-mode #canvas {
    background: #ffffff;
}

/* Every .canvas-element loses its hover border, padding, and background. */
body.preview-mode .canvas-element {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin-bottom: 0;
}
body.preview-mode .canvas-element:hover {
    border: none !important;
    background: none !important;
}

/* Hover controls (move up/down, edit, delete, clone, etc.) are the
   single biggest source of visual noise during preview — kill them
   unconditionally, including the :has() escalation rules that normally
   force the innermost hovered element to show its controls. */
body.preview-mode .element-controls,
body.preview-mode .canvas-element:hover > .element-controls,
body.preview-mode .canvas-element:has(.canvas-element:hover) > .element-controls {
    display: none !important;
}

/* Container zones: drop borders off, empty-state hints off, active/hover
   highlights off. Teachers can still technically interact with these
   while previewing, but they look like plain content flow. */
body.preview-mode .container-zone {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    min-height: 0;
}
body.preview-mode .container-zone:empty::after,
body.preview-mode .container-zone.container-zone-empty::after,
body.preview-mode .container-zone[data-zone]:empty::after {
    content: none !important;
    display: none !important;
}
body.preview-mode .container-zone.active-zone,
body.preview-mode .container-zone.drop-zone-hover {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* Container breadcrumb navigation is a pure-editor affordance. Hide it
   so preview mode looks like a real Canvas page. */
body.preview-mode .container-breadcrumb-wrapper {
    display: none !important;
}

/* Empty-state helper text on a blank canvas — nothing to preview, but
   we don't want the welcome text leaking into the preview illusion. */
body.preview-mode #canvas .empty-state {
    display: none !important;
}

/* The "Exit preview" pill: floats top-right over the canvas wrapper,
   hidden except when preview mode is active. Using transform here is
   fine because this element never goes through Canvas's HTML sanitizer
   — it only exists in the designer UI. */
.preview-exit-pill {
    display: none;
    position: fixed;
    top: 96px;
    right: 24px;
    z-index: 9999;
    padding: 10px 18px;
    background: #165C7D;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 999px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(22, 92, 125, 0.35);
    gap: 8px;
    align-items: center;
    transition: background 0.15s ease, transform 0.15s ease;
}
.preview-exit-pill i {
    margin-right: 6px;
}
.preview-exit-pill:hover {
    background: #0e4460;
    transform: translateY(-1px);
}
body.preview-mode .preview-exit-pill {
    display: inline-flex;
}

/* Toolbar "Forhåndsvis" button active-state — matches the existing
   `.toolbar-btn.active` convention used by viewport-toggle. */
#preview-toggle.active {
    background: #165C7D;
    color: #ffffff;
}
#preview-toggle.active .icon {
    color: #ffffff;
}

/* ==========================================================================
   Canvas Bootstrap grid simulation — designer preview only
   ==========================================================================
   Canvas's WYSIWYG editor preserves <details>/<summary> inside Canvas's own
   Bootstrap grid classes (grid-row + col-md-* + col-xs-*), but strips them
   when wrapped in inline `display: grid`. So our generated HTML uses the
   Bootstrap classes.
   The Canvas Designer app itself, however, does NOT load Bootstrap, so
   those classes have no visible effect in our preview — everything would
   stack vertically. These rules simulate the Bootstrap grid layout so the
   designer preview matches what teachers will see in Canvas. Scoped to
   `#canvas`, the flashcard preview, and the template browser preview so
   they don't interfere with the designer chrome.
   ========================================================================== */
#canvas .grid-row,
#fc-preview .grid-row,
#template-browser .grid-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -6px;
}
#canvas .grid-row [class*="col-md-"],
#fc-preview .grid-row [class*="col-md-"],
#template-browser .grid-row [class*="col-md-"] {
    box-sizing: border-box;
}
#canvas .grid-row .col-md-12, #fc-preview .grid-row .col-md-12, #template-browser .grid-row .col-md-12 { flex: 0 0 100%;    max-width: 100%; }
#canvas .grid-row .col-md-6,  #fc-preview .grid-row .col-md-6,  #template-browser .grid-row .col-md-6  { flex: 0 0 50%;     max-width: 50%; }
#canvas .grid-row .col-md-4,  #fc-preview .grid-row .col-md-4,  #template-browser .grid-row .col-md-4  { flex: 0 0 33.333%; max-width: 33.333%; }
#canvas .grid-row .col-md-3,  #fc-preview .grid-row .col-md-3,  #template-browser .grid-row .col-md-3  { flex: 0 0 25%;     max-width: 25%; }
#canvas .grid-row .col-md-2,  #fc-preview .grid-row .col-md-2,  #template-browser .grid-row .col-md-2  { flex: 0 0 16.666%; max-width: 16.666%; }
/* Mobile stacking — Bootstrap 3 md breakpoint is 992px, but in the
   constrained designer preview viewport we want stacking below ~640px to
   match typical reading widths. Below 640px, col-xs-12 takes over. */
@media (max-width: 640px) {
    #canvas .grid-row [class*="col-xs-12"],
    #fc-preview .grid-row [class*="col-xs-12"],
    #template-browser .grid-row [class*="col-xs-12"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   Shared theme-swatch + row patterns for self-check builders.
   The Flashcard, Worked-example, Concept-check, and Worksheet builders
   all use the same theme-swatch picker layout and the same per-item row
   layout. Keeping one rule-set saves duplication.
   ========================================================================== */
#flashcard-builder-modal .fc-theme-picker,
#worked-example-builder-modal .we-theme-picker,
#concept-check-builder-modal .cc-theme-picker,
#worksheet-builder-modal .ws-theme-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
#flashcard-builder-modal .fc-theme-swatch,
#worked-example-builder-modal .we-theme-swatch,
#concept-check-builder-modal .cc-theme-swatch,
#worksheet-builder-modal .ws-theme-swatch {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    width: 120px;
    border: 2px solid #e5edef;
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
#flashcard-builder-modal .fc-theme-swatch:hover,
#worked-example-builder-modal .we-theme-swatch:hover,
#concept-check-builder-modal .cc-theme-swatch:hover,
#worksheet-builder-modal .ws-theme-swatch:hover {
    transform: translateY(-2px);
    border-color: #94B7BB;
    box-shadow: 0 4px 12px rgba(0, 61, 76, 0.08);
}
#flashcard-builder-modal .fc-theme-swatch.selected,
#worked-example-builder-modal .we-theme-swatch.selected,
#concept-check-builder-modal .cc-theme-swatch.selected,
#worksheet-builder-modal .ws-theme-swatch.selected {
    border-color: #003d4c;
    box-shadow: 0 4px 14px rgba(0, 61, 76, 0.18);
}
#flashcard-builder-modal .fc-theme-swatch-sample,
#worked-example-builder-modal .we-theme-swatch-sample,
#concept-check-builder-modal .cc-theme-swatch-sample,
#worksheet-builder-modal .ws-theme-swatch-sample {
    display: block;
    height: 36px;
}
#flashcard-builder-modal .fc-theme-swatch-label,
#worked-example-builder-modal .we-theme-swatch-label,
#concept-check-builder-modal .cc-theme-swatch-label,
#worksheet-builder-modal .ws-theme-swatch-label {
    display: block;
    padding: 8px 10px;
    font-size: 0.85em;
    color: #003d4c;
    background: #fff;
    font-weight: 600;
}

/* Flashcard builder — per-card row */
#flashcard-builder-modal #fc-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}
#flashcard-builder-modal .fc-card-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: #f8fafa;
    border: 1px solid #e1ecee;
    border-radius: 10px;
}
#flashcard-builder-modal .fc-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
#flashcard-builder-modal .fc-card-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #003d4c;
    color: #ffffff;
    font-size: 0.8em;
    font-weight: 700;
    flex-shrink: 0;
}
#flashcard-builder-modal .fc-question {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-weight: 600;
    color: #003d4c;
    background: #ffffff;
}
#flashcard-builder-modal .fc-answer {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    color: #1e293b;
    background: #ffffff;
    resize: vertical;
}
#flashcard-builder-modal .fc-question:focus,
#flashcard-builder-modal .fc-answer:focus {
    outline: none;
    border-color: #00B0B9;
}
#flashcard-builder-modal .fc-row-controls {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Worked example builder */
#worked-example-builder-modal #we-stages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
}
#worked-example-builder-modal .we-stage-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: #f8fafa;
    border: 1px solid #e1ecee;
    border-radius: 10px;
}
#worked-example-builder-modal .we-stage-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
#worked-example-builder-modal .we-stage-type-chip {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.72em;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}
#worked-example-builder-modal .we-stage-type-chip.we-type-hint { background: #9a6a00; }
#worked-example-builder-modal .we-stage-type-chip.we-type-start { background: #165C7D; }
#worked-example-builder-modal .we-stage-type-chip.we-type-solution { background: #007041; }
#worked-example-builder-modal .we-stage-label {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    background: #ffffff;
}
#worked-example-builder-modal .we-stage-content {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    background: #ffffff;
    resize: vertical;
    font-family: inherit;
}
#worked-example-builder-modal .we-row-controls {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Concept-check builder */
#concept-check-builder-modal #cc-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}
#concept-check-builder-modal .cc-option-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: #f8fafa;
    border: 2px solid #e1ecee;
    border-radius: 10px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
#concept-check-builder-modal .cc-option-row.is-correct {
    background: #edf8f4;
    border-color: #a5dcbc;
}
#concept-check-builder-modal .cc-option-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
#concept-check-builder-modal .cc-option-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #003d4c;
    color: #ffffff;
    font-weight: 700;
    flex-shrink: 0;
}
#concept-check-builder-modal .cc-correct-btn {
    padding: 6px 14px;
    border: 2px solid #e5edef;
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
    color: #718096;
    font-size: 0.82em;
    font-weight: 600;
}
#concept-check-builder-modal .cc-correct-btn:hover {
    border-color: #94B7BB;
}
#concept-check-builder-modal .cc-correct-btn.selected {
    background: #edf8f4;
    border-color: #007041;
    color: #007041;
}
#concept-check-builder-modal .cc-option-text,
#concept-check-builder-modal .cc-option-feedback {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    background: #ffffff;
    resize: vertical;
}
#concept-check-builder-modal .cc-row-controls {
    display: flex;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Worksheet builder */
#worksheet-builder-modal #ws-prompts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}
#worksheet-builder-modal .ws-prompt-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: #f8fafa;
    border: 1px solid #e1ecee;
    border-radius: 10px;
}
#worksheet-builder-modal .ws-prompt-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
#worksheet-builder-modal .ws-prompt-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #003d4c;
    color: #ffffff;
    font-size: 0.8em;
    font-weight: 700;
    flex-shrink: 0;
}
#worksheet-builder-modal .ws-row-controls {
    display: flex;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}
#worksheet-builder-modal .ws-prompt-text,
#worksheet-builder-modal .ws-prompt-answer {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    background: #ffffff;
    resize: vertical;
}

/* Sortable quiz — per-card reasoning toggle layout tweak */
#sortable-quiz-builder-modal .sq-card-row.with-reasoning {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
}
#sortable-quiz-builder-modal .sq-card-row .sq-card-main-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
#sortable-quiz-builder-modal .sq-card-reasoning {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    background: #ffffff;
    resize: vertical;
    font-size: 0.9em;
}

/* True/False builder — theme swatch picker */
#true-false-builder-modal .tf-theme-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
#true-false-builder-modal .tf-theme-swatch {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    width: 120px;
    border: 2px solid #e5edef;
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
#true-false-builder-modal .tf-theme-swatch:hover {
    transform: translateY(-2px);
    border-color: #94B7BB;
    box-shadow: 0 4px 12px rgba(0, 61, 76, 0.08);
}
#true-false-builder-modal .tf-theme-swatch.selected {
    border-color: #003d4c;
    box-shadow: 0 4px 14px rgba(0, 61, 76, 0.18);
}
#true-false-builder-modal .tf-theme-swatch-sample {
    display: block;
    height: 36px;
}
#true-false-builder-modal .tf-theme-swatch-label {
    display: block;
    padding: 8px 10px;
    font-size: 0.85em;
    color: #003d4c;
    background: #fff;
    font-weight: 600;
}

/* Per-statement row */
#true-false-builder-modal #tf-statements {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 12px;
}
#true-false-builder-modal .tf-statement-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: #f8fafa;
    border: 1px solid #e1ecee;
    border-radius: 10px;
}
#true-false-builder-modal .tf-statement-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
#true-false-builder-modal .tf-statement-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #003d4c;
    color: #ffffff;
    font-size: 0.8em;
    font-weight: 700;
    flex-shrink: 0;
}
#true-false-builder-modal .tf-correct-group {
    display: flex;
    gap: 6px;
    flex: 1;
    min-width: 160px;
}
#true-false-builder-modal .tf-correct-btn {
    flex: 1;
    padding: 8px 14px;
    border: 2px solid #e5edef;
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
    color: #718096;
    font-weight: 700;
    font-size: 0.8em;
    letter-spacing: 0.04em;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
#true-false-builder-modal .tf-correct-btn:hover {
    border-color: #94B7BB;
}
#true-false-builder-modal .tf-correct-btn.selected[data-value="true"] {
    background: #edf8f4;
    border-color: #007041;
    color: #007041;
}
#true-false-builder-modal .tf-correct-btn.selected[data-value="false"] {
    background: #fff5f2;
    border-color: #9f1239;
    color: #9f1239;
}
#true-false-builder-modal .tf-row-controls {
    display: flex;
    gap: 4px;
}
#true-false-builder-modal .tf-statement-text,
#true-false-builder-modal .tf-explanation-text {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.92em;
    color: #1e293b;
    resize: vertical;
    background: #ffffff;
}
#true-false-builder-modal .tf-statement-text:focus,
#true-false-builder-modal .tf-explanation-text:focus {
    outline: none;
    border-color: #00B0B9;
}

/* Custom HTML modal — sanitiser explainer <code> styling */
#html-modal .html-sanitize-explainer code {
    background: #ffffff;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.92em;
    color: #003D4C;
    font-family: 'Courier New', Courier, monospace;
}

/* Source mode: textarea hidden by default, contenteditable visible. When the
   row has .source-mode the visibility swaps so the user can paste raw HTML. */
#tab-builder-modal .tab-content-source {
    display: none;
    width: 100%;
    min-height: 120px;
    max-height: 280px;
    padding: 12px 14px;
    margin: 0;
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid #334155;
    border-radius: 0 0 6px 6px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85em;
    line-height: 1.55;
    resize: vertical;
    outline: none;
    tab-size: 2;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}
#tab-builder-modal .tab-content-source:focus {
    border-color: #00B0B9;
    box-shadow: 0 0 0 2px rgba(0, 176, 185, 0.25);
}
#tab-builder-modal .fane-input-gruppe.source-mode .tab-content-editor {
    display: none;
}
#tab-builder-modal .fane-input-gruppe.source-mode .tab-content-source {
    display: block;
}
/* Highlight the source toggle button when active */
#tab-builder-modal .tab-rt-btn.tab-source-btn.active {
    background: #0f172a;
    color: #00B0B9;
}

/* Sortable quiz builder — theme swatch picker */
#sortable-quiz-builder-modal .sq-theme-picker,
#sortable-quiz-builder-modal .sq-content-type-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
#sortable-quiz-builder-modal .sq-theme-swatch {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    width: 120px;
    border: 2px solid #e5edef;
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
#sortable-quiz-builder-modal .sq-theme-swatch:hover {
    transform: translateY(-2px);
    border-color: #94B7BB;
    box-shadow: 0 4px 12px rgba(0, 61, 76, 0.08);
}
#sortable-quiz-builder-modal .sq-theme-swatch.selected {
    border-color: #003d4c;
    box-shadow: 0 4px 14px rgba(0, 61, 76, 0.18);
}
#sortable-quiz-builder-modal .sq-theme-swatch-sample {
    display: block;
    height: 36px;
}
#sortable-quiz-builder-modal .sq-theme-swatch-label {
    display: block;
    padding: 8px 10px;
    font-size: 0.85em;
    color: #003d4c;
    background: #fff;
    font-weight: 600;
}
#sortable-quiz-builder-modal .sq-content-type-btn {
    padding: 10px 18px;
    border: 2px solid #e5edef;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    color: #003d4c;
    font-weight: 600;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#sortable-quiz-builder-modal .sq-content-type-btn.selected {
    border-color: #003d4c;
    box-shadow: 0 4px 14px rgba(0, 61, 76, 0.18);
}
#sortable-quiz-builder-modal .sq-content-type-btn:hover {
    border-color: #94B7BB;
}
#sortable-quiz-builder-modal #sq-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
#sortable-quiz-builder-modal .sq-card-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}
#sortable-quiz-builder-modal .sq-card-row .sq-card-index {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #003d4c;
    color: #fff;
    font-size: 0.8em;
    font-weight: 700;
    flex-shrink: 0;
}
#sortable-quiz-builder-modal .sq-card-row input.sq-card-label {
    flex: 1;
    padding: 6px 10px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
}
#sortable-quiz-builder-modal .sq-card-row .control-btn {
    flex-shrink: 0;
}




/* Enhanced Accordion Styles *//* Enhanced Accordion Styles */
/*
.nord-accordion {
    transition: all 0.3s ease;
}

.nord-accordion:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.nord-accordion[open] .accordion-icon {
    transform: rotate(180deg);
    background: #003d4c !important;
}

.nord-accordion[open] .accordion-header {
    background: linear-gradient(135deg, #e8f2f5, #f0f7ff) !important;
    border-bottom-color: #d0dae0 !important;
}
*/
/* FAQ Accordion Specific Styles */
/*
.faq-item:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

.faq-item[open] .faq-toggle {
    transform: rotate(45deg);
    color: #003d4c !important;
}

.faq-item[open] .accordion-header {
    background: linear-gradient(135deg, #e8f2f5, #ffffff) !important;
}
*/
/* Learning Section Accordion */
/*.learning-section:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.learning-section[open] .expand-icon {
    transform: rotate(45deg);
}

.learning-section[open] .section-icon {
    transform: scale(1.1);
}
*/
/* Resource Accordion */
/*.resource-item:hover {
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

.resource-item[open] .toggle-indicator {
    transform: rotate(90deg);
}

.resource-item .accordion-content a:hover {
    background: #e9ecef !important;
    transform: translateX(5px);
}*/

/* General Accordion Animation */
/*
.accordion-content {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
*/
/* Accordion Builder Specific Styles */
/*
.accordion-content-input {
    width: 100%;
    min-height: 80px;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9em;
    font-family: inherit;
    line-height: 1.4;
    resize: vertical;
    margin-top: 8px;
    transition: border-color 0.3s ease;
}

.accordion-content-input:focus {
    outline: none;
    border-color: var(--nord-accent);
    box-shadow: 0 0 0 3px rgba(148, 183, 187, 0.1);
}

.fane-input-gruppe {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    position: relative;
}

.fane-input-gruppe .fjern-fane-knapp {
    position: absolute;
    top: 10px;
    right: 10px;
}
*/
/* Responsive Accordion Adjustments */
/*
@media (max-width: 768px) {
    .accordion-header {
        padding: 15px 18px !important;
        font-size: 1.1rem !important;
    }
    
    .accordion-content {
        padding: 20px 22px !important;
    }
    
    .learning-section .section-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.2em !important;
    }
    
    .faq-number {
        width: 20px !important;
        height: 20px !important;
        font-size: 0.7em !important;
    }
    
    .resource-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 1em !important;
    }
    
    .fane-input-gruppe {
        padding: 12px;
    }
    
    .accordion-content-input {
        min-height: 60px;
    }
}
        */


/*==========================================================================
   NEW ACCORDION STYLES (for Builder Preview & Canvas Output)
   Using Pseudo-elements for Icons
   ========================================================================== */

/* === GRUNNLEGGENDE TREKKSPILL-STILER (Copied from Canvas Custom CSS v2) === */
.trekkspill-beholder {
    margin: 25px 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.trekkspill-element {
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
    border: 1px solid #e0e5e7;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.trekkspill-hode {
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border: none;
    color: #003d4c;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 20px 25px;
    width: 100%;
    text-align: left;
    font-weight: 600;
    list-style: none; 
    display: flex;
    align-items: center;
    gap: 15px; 
    position: relative;
    transition: background 0.3s ease, border-color 0.3s ease;
    border-bottom: 1px solid transparent;
    box-sizing: border-box;
}

.trekkspill-hode::-webkit-details-marker,
.trekkspill-hode::marker {
    display: none;
}

.trekkspill-hode::before,
.trekkspill-hode::after {
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.trekkspill-tittel {
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.trekkspill-innhold {
    background-color: #fff;
    padding: 25px 30px;
    border-top: 1px solid #f0f2f3;
    animation: gliNed 0.3s ease-out;
    text-align: left;
}
.trekkspill-innhold p {
    margin-top: 0;
    color: #444; 
    line-height: 1.6;
}
.trekkspill-innhold p:last-child {
    margin-bottom: 0;
}
.trekkspill-innhold p + p { 
    color: #666;
    font-size: 0.95em;
}

.seksjons-header {
    text-align: center;
    margin-bottom: 25px;
}
.seksjons-header h3 {
    color: #003d4c;
    font-size: 1.6em;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.seksjons-header p {
    color: #666;
    margin: 0;
    font-size: 1.1em;
}
.seksjons-header .header-ikon {
    font-size: 1.2em;
}

.nord-trekkspill:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}
.nord-trekkspill .trekkspill-hode::before {
    content: '▼';
    background: #94b7bb;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.8em; 
    order: -1; 
    margin-right: 15px;
}
.nord-trekkspill .trekkspill-hode {
    gap: 0; 
}
.nord-trekkspill .trekkspill-hode::before {
     margin-right: 15px; 
}
.nord-trekkspill[open] .trekkspill-hode::before {
    transform: rotate(180deg);
    background: #003d4c !important;
}
.nord-trekkspill[open] .trekkspill-hode {
    background: linear-gradient(135deg, #e8f2f5, #f0f7ff) !important;
    border-bottom-color: #d0dae0 !important;
}

.sporsmal-element:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.sporsmal-element .trekkspill-hode {
    background: #f8f9fa;
    font-size: 1.1rem;
    padding: 18px 22px;
    font-weight: 500;
    gap: 12px;
}
.sporsmal-nummer {
    background: #165c7d;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    font-weight: bold;
    flex-shrink: 0;
}
.sporsmal-element .trekkspill-hode::after {
    content: '+';
    color: #94b7bb;
    font-size: 1.5rem; 
    font-weight: 300; 
    display: inline-block;
    margin-left: auto; 
    padding-left: 10px; 
}
.sporsmal-element[open] .trekkspill-hode::after {
    transform: rotate(45deg);
    color: #003d4c !important;
}
.sporsmal-element[open] .trekkspill-hode {
    background: linear-gradient(135deg, #e8f2f5, #ffffff) !important;
}
.sporsmal-element .trekkspill-innhold {
    padding: 20px 25px 20px 58px; 
    color: #555;
    line-height: 1.6;
}

.laerings-seksjon:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
.laerings-seksjon .trekkspill-hode {
    gap: 15px;
    border-left: 4px solid;
}
.seksjon-ikon { 
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em; 
    color: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.laerings-tittel-beholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
}
.laerings-hovedtittel {
    font-size: 1em; 
    margin-bottom: 2px;
    display: block;
    font-weight: 600;
}
.laerings-undertittel {
    font-size: 0.75em; 
    font-weight: 400;
    display: block;
}
.laerings-seksjon .trekkspill-hode::after {
    content: '⊕';
    font-size: 1.6rem; 
    font-weight: normal; 
    display: inline-block;
    margin-left: auto; 
    padding-left: 10px; 
}
.laerings-seksjon[open] .trekkspill-hode::after {
    transform: rotate(45deg);
}
.laerings-seksjon[open] .seksjon-ikon {
    transform: scale(1.1);
}
.laerings-seksjon .trekkspill-innhold .innhold-boks {
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
}
.laerings-seksjon .trekkspill-innhold .innhold-boks h4 {
    margin: 0 0 10px 0;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.laerings-seksjon .trekkspill-innhold .innhold-boks ul {
    margin: 0;
    padding-left: 20px;
    color: #555;
}
.laerings-seksjon .trekkspill-innhold .innhold-boks li {
    margin-bottom: 5px;
}

.laerings-seksjon .trekkspill-hode { 
    background: linear-gradient(135deg, #f0f0f0, #e8e8e8);
    border-left-color: #777;
    color: #333;
}
.laerings-seksjon .seksjon-ikon { 
    background: #777;
}
.laerings-seksjon .laerings-undertittel {
    color: #555; 
}
.laerings-seksjon .trekkspill-hode::after { 
    color: #777;
}
.laerings-seksjon .trekkspill-innhold {
    border-top: 1px solid #e0e0e0;
}
.laerings-seksjon .trekkspill-innhold h4 {
    color: #333;
}
.laerings-seksjon .trekkspill-innhold .innhold-boks {
    background: #f5f5f5;
}

.laerings-seksjoner > .laerings-seksjon:nth-child(1) .trekkspill-hode {
    background: linear-gradient(135deg, #e8f5e8, #f8f9fa);
    border-left-color: #4caf50;
    color: #2e7d32;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(1) .seksjon-ikon {
    background: #4caf50;
    box-shadow: 0 2px 6px rgba(76, 175, 80, 0.2);
}
.laerings-seksjoner > .laerings-seksjon:nth-child(1) .laerings-undertittel {
    color: #4caf50;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(1) .trekkspill-hode::after {
    color: #4caf50;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(1) .trekkspill-innhold {
     border-top: 1px solid #e8f5e8;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(1) .trekkspill-innhold h4 {
    color: #2e7d32;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(1) .trekkspill-innhold .innhold-boks {
    background: #f0f8f0;
}

.laerings-seksjoner > .laerings-seksjon:nth-child(2) .trekkspill-hode {
    background: linear-gradient(135deg, #e3f2fd, #f8f9fa);
    border-left-color: #2196f3;
    color: #1565c0;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(2) .seksjon-ikon {
    background: #2196f3;
    box-shadow: 0 2px 6px rgba(33, 150, 243, 0.2);
}
.laerings-seksjoner > .laerings-seksjon:nth-child(2) .laerings-undertittel {
    color: #2196f3;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(2) .trekkspill-hode::after {
    color: #2196f3;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(2) .trekkspill-innhold {
     border-top: 1px solid #e3f2fd;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(2) .trekkspill-innhold h4 {
    color: #1565c0;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(2) .trekkspill-innhold .innhold-boks {
    background: #f0f7ff;
}

.laerings-seksjoner > .laerings-seksjon:nth-child(3) .trekkspill-hode {
    background: linear-gradient(135deg, #fff3e0, #f8f9fa);
    border-left-color: #ff9800;
    color: #e65100;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(3) .seksjon-ikon {
    background: #ff9800;
    box-shadow: 0 2px 6px rgba(255, 152, 0, 0.2);
}
.laerings-seksjoner > .laerings-seksjon:nth-child(3) .laerings-undertittel {
    color: #ff9800;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(3) .trekkspill-hode::after {
    color: #ff9800;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(3) .trekkspill-innhold {
     border-top: 1px solid #fff3e0;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(3) .trekkspill-innhold h4 {
    color: #e65100;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(3) .trekkspill-innhold .innhold-boks {
    background: #fffbf0;
}

.ressurs-element:hover {
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}
.ressurs-element .trekkspill-hode {
    font-size: 1.1rem;
    padding: 16px 20px;
    font-weight: 600;
    gap: 12px;
}
.ressurs-ikon { 
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em; 
    color: white;
    flex-shrink: 0;
}
.ressurs-element .trekkspill-hode::after { 
    content: '⊞'; 
    font-size: 1.2em; 
    display: inline-block;
    margin-left: auto;
    padding-left: 10px;
    transition: transform 0.3s ease, color 0.3s ease;
}
.ressurs-element[open] .trekkspill-hode::after {
    transform: rotate(90deg);
}
.ressurs-element .trekkspill-innhold .ressurs-lenkeliste {
    display: grid;
    gap: 10px;
}
.ressurs-element .trekkspill-innhold a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
    color: #333; 
}
.ressurs-element .trekkspill-innhold a:hover {
    background: #e9ecef !important;
    transform: translateX(5px);
}
.ressurs-element .trekkspill-innhold .lenke-ikon {
    font-size: 1.2em;
    flex-shrink: 0;
}

.ressurs-element .trekkspill-hode {
    background: linear-gradient(135deg, #f5f5f5, #e9e9e9);
    color: #333;
}
.ressurs-element .ressurs-ikon {
    background: #888;
}
.ressurs-element .trekkspill-hode::after {
    color: #888;
}
.ressurs-element .trekkspill-innhold {
    border-top-color: #f5f5f5;
}
.ressurs-element .trekkspill-innhold a {
    color: #333;
}

.ressurs-trekkspill > .ressurs-element:nth-child(1) .trekkspill-hode { 
    background: linear-gradient(135deg, #f0f8f0, #ffffff);
    color: #2e7d32;
}
.ressurs-trekkspill > .ressurs-element:nth-child(1) .ressurs-ikon {
    background: #4caf50;
}
.ressurs-trekkspill > .ressurs-element:nth-child(1) .trekkspill-hode::after {
    color: #4caf50;
}
.ressurs-trekkspill > .ressurs-element:nth-child(1) .trekkspill-innhold {
    border-top-color: #f0f8f0;
}
.ressurs-trekkspill > .ressurs-element:nth-child(1) .trekkspill-innhold a {
    color: #2e7d32;
}

.ressurs-trekkspill > .ressurs-element:nth-child(2) .trekkspill-hode { 
    background: linear-gradient(135deg, #f0f7ff, #ffffff);
    color: #1565c0;
}
.ressurs-trekkspill > .ressurs-element:nth-child(2) .ressurs-ikon {
    background: #2196f3;
}
.ressurs-trekkspill > .ressurs-element:nth-child(2) .trekkspill-hode::after {
    color: #2196f3;
}
.ressurs-trekkspill > .ressurs-element:nth-child(2) .trekkspill-innhold {
    border-top-color: #f0f7ff;
}
.ressurs-trekkspill > .ressurs-element:nth-child(2) .trekkspill-innhold a {
    color: #1565c0;
}

.ressurs-trekkspill > .ressurs-element:nth-child(3) .trekkspill-hode { 
    background: linear-gradient(135deg, #fffbf0, #ffffff);
    color: #e65100;
}
.ressurs-trekkspill > .ressurs-element:nth-child(3) .ressurs-ikon {
    background: #ff9800;
}
.ressurs-trekkspill > .ressurs-element:nth-child(3) .trekkspill-hode::after {
    color: #ff9800;
}
.ressurs-trekkspill > .ressurs-element:nth-child(3) .trekkspill-innhold {
    border-top-color: #fffbf0;
}
.ressurs-trekkspill > .ressurs-element:nth-child(3) .trekkspill-innhold a {
    color: #e65100;
}

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

@media (max-width: 768px) {
    .trekkspill-hode { padding: 15px 18px !important; font-size: 1.1rem !important; }
    .trekkspill-hode::before, .trekkspill-hode::after { font-size: 1.3rem; }
    .nord-trekkspill .trekkspill-hode::before { width: 28px; height: 28px; font-size: 0.7em; }
    .seksjon-ikon { width: 36px !important; height: 36px !important; font-size: 1.2em !important; }
    .sporsmal-nummer { width: 20px !important; height: 20px !important; font-size: 0.7em !important; }
    .ressurs-ikon { width: 28px !important; height: 28px !important; font-size: 1em !important; }
    .trekkspill-innhold { padding: 20px 22px !important; }
    .trekkspill-beholder { margin: 15px 0; }
}

.trekkspill-element:focus-within {
    outline: 2px solid var(--nord-sekund6, #94B7BB); 
    outline-offset: 2px;
}
@media (prefers-contrast: high) {
    .trekkspill-element { border: 2px solid currentColor; }
    .trekkspill-hode { border-bottom: 1px solid currentColor; }
}
@media (prefers-reduced-motion: reduce) {
    .trekkspill-element, .trekkspill-hode::before, .trekkspill-hode::after,
    .seksjon-ikon, .ressurs-ikon { transition: none; }
    .nord-trekkspill:hover, .sporsmal-element:hover, .laerings-seksjon:hover,
    .ressurs-element:hover { transform: none; }
    .trekkspill-innhold { animation: none; }
}
/* ============================================
   LAPTOP OPTIMIZATION (13" screens)
   Maximize vertical space for element list
   ============================================ */

/* 1. COMPACT ELEMENT ITEMS - More elements visible at once */
.element-item {
    padding: 6px 12px !important; /* Reduced from 8px 16px */
    margin-bottom: 4px !important; /* Reduced from 8px */
    gap: 8px !important;
}

.element-item .icon {
    font-size: 1.1rem !important; /* Reduced from 1.25rem */
}

.element-item .name {
    font-size: 0.875rem; /* Slightly smaller text */
    line-height: 1.3;
}

.element-item .badge {
    font-size: 0.65em !important;
    padding: 1px 5px !important;
}

/* 2. OPTIMIZED SIDEBAR HEIGHT - More space for elements */
.sub-elements {
    max-height: calc(100vh - 280px) !important; /* Increased from 420px */
    padding-bottom: 80px !important; /* Reduced from 120px */
}

.search-results {
    max-height: calc(100vh - 280px) !important; /* Increased from 420px */
    padding-bottom: 80px !important; /* Reduced from 120px */
}

/* 3. COMPACT SEARCH BAR */
.search-container {
    padding: 10px 12px !important; /* Reduced from 15px */
}

.search-input {
    padding: 8px 35px 8px 12px !important; /* Reduced from 10px 40px 10px 15px */
    font-size: 0.85em !important;
}

/* 4. COMPACT CATEGORY GRID */
.main-categories {
    padding: 10px !important; /* Reduced from 16px */
    gap: 6px !important; /* Reduced from 8px */
}

.category-btn {
    padding: 8px 6px !important; /* Reduced from 16px 8px */
}

.category-btn .icon {
    font-size: 1.3rem !important; /* Reduced from 1.5rem */
}

.category-btn .label {
    font-size: 0.7rem !important; /* Reduced from 0.75rem */
}

.category-btn .count {
    font-size: 0.65rem !important; /* Reduced from 0.7rem */
}

/* 5. COLLAPSIBLE CATEGORIES */
.categories-collapse-btn {
    background: var(--nord-background);
    border: 1px solid var(--nord-border);
    border-top: none;
    width: 100%;
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--nord-text-light);
    transition: all var(--transition-fast);
}

.categories-collapse-btn:hover {
    background: var(--nord-white);
    color: var(--nord-secondary);
}

.categories-collapse-btn .arrow {
    transition: transform var(--transition-fast);
}

.main-categories.collapsed {
    display: none;
}

.main-categories.collapsed + .categories-collapse-btn .arrow {
    transform: rotate(180deg);
}

/* When categories are collapsed, give even more space to elements */
.main-categories.collapsed ~ * .sub-elements,
.main-categories.collapsed ~ * .search-results {
    max-height: calc(100vh - 180px) !important; /* Extra 100px when collapsed */
}

/* 6. COMPACT SUB-CATEGORY TABS */
.sub-categories {
    padding: 8px 12px !important; /* Reduced from 10px 15px */
}

.sub-tab {
    flex: 0 1 auto !important;   /* Size to content instead of equal-width */
    padding: 5px 6px !important;
    font-size: 0.75em !important;
    white-space: nowrap;
}

.sub-category-tabs {
    flex-wrap: wrap;              /* Wrap to second row if tabs still overflow */
}

/* 7. COMPACT HEADER */
.app-header {
    padding: 6px var(--spacing-xl) 6px var(--spacing-lg) !important;
}

.header-left h1 {
    font-size: 1.3rem !important; /* Reduced from 1.5rem */
    margin-bottom: 2px !important;
}

.header-left p {
    font-size: 0.8rem !important; /* Reduced from 0.875rem */
}

.compatibility-filter {
    padding: 8px 12px !important; /* Reduced from 12px 18px */
}

.compatibility-filter label {
    font-size: 0.85em !important; /* Reduced from 0.95em */
}

/* Table builder preset cards */
.table-preset-card:hover {
    border-color: var(--nord-web-turquoise) !important;
    background: #f7fafa !important;
}

/* Icon mode segmented control */
.icon-mode-btn.active {
    background: #ffffff !important;
    color: var(--nord-primary) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

/* Language pill toggle — mirrors icon-mode-btn */
.lang-btn.active {
    background: #ffffff !important;
    color: var(--nord-primary) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

/* 8. COMPACT TOOLBAR */
.preview-toolbar {
    padding: 6px 24px 6px 16px !important;
    min-height: 44px !important;
    height: auto !important;
}

.toolbar-btn {
    padding: 6px 10px !important; /* Reduced from 8px 16px */
    font-size: 0.8rem !important; /* Reduced from 0.875rem */
}

.toolbar-btn .icon {
    font-size: 0.9em;
}

/* Adjust canvas wrapper height to account for compact toolbar */
.canvas-wrapper {
    height: calc(100vh - 110px) !important; /* Adjusted for smaller header + toolbar */
}

/* ============================================
   END LAPTOP OPTIMIZATION
   ============================================ */

/* ============================================
   GRID LAYOUT SELECTOR SPACING FIX
   Give more breathing room when grid is active
   ============================================ */

/* When grid options are visible, give toolbar more height */
#grid-options {
    padding: 4px 8px;
    margin-left: 8px;
}

.grid-layout-selector {
    padding: 6px 10px !important;
    gap: 10px !important;
}

.grid-selector-label {
    font-size: 0.8rem !important;
    margin-right: 4px;
}

.grid-layout-primary {
    gap: 8px !important;
}

.grid-layout-option {
    padding: 8px 10px !important;
    min-width: 55px !important;
}

.layout-preview {
    width: 45px !important;
    height: 22px !important;
}

.layout-label {
    font-size: 0.7rem !important;
    margin-top: 2px;
}

.grid-layout-more-btn {
    padding: 8px 12px !important;
    font-size: 0.75rem !important;
}

/* Give toolbar more height when grid is active */
.preview-toolbar:has(#grid-options[style*="display: flex"]),
.preview-toolbar:has(#grid-options:not([style*="display: none"])) {
    height: 58px !important;
    padding: 8px 12px !important;
}

/* Ensure grid end button has good spacing */
#grid-end {
    margin-right: 12px;
}

/* ============================================
   END GRID SPACING FIX
   ============================================ */

/* ============================================
   TEMPLATE SYSTEM STYLES
   ============================================ */

/* Template cards */
.template-card:hover {
    border-color: #165c7d !important;
    box-shadow: 0 6px 16px rgba(22, 92, 125, 0.15) !important;
    transform: translateY(-2px);
}

.template-card:active {
    transform: translateY(0);
}

/* Template category buttons */
.template-category-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Template panel scrolling */
#templates-panel {
    overflow-y: auto;
}

/* Empty state for templates */
.templates-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.templates-empty p {
    margin: 10px 0 0 0;
    font-size: 0.95em;
}

/* ============================================
   END TEMPLATE SYSTEM STYLES
   ============================================ */

/* Clear canvas button in templates panel */
#templates-panel button[onclick*="clearCanvas"]:hover {
    background: #d4442f !important;
    box-shadow: 0 4px 12px rgba(236, 87, 66, 0.3);
    transform: translateY(-1px);
}

#templates-panel button[onclick*="clearCanvas"]:active {
    transform: translateY(0);
}

/* ============================================
   CONTAINER SYSTEM STYLES
   ============================================ */

/* Container wrapper element */
.container-wrapper {
    position: relative;
}

.container-wrapper .element-content {
    position: relative;
}

/* Active container highlight */
.container-wrapper.container-active {
    outline: 2px dashed var(--secondary);
    outline-offset: 4px;
}

/* Container zones - base styles */
.container-zone {
    min-height: 48px;
    border: 2px dashed transparent;
    transition: all 0.2s ease;
    position: relative;
}

/* Empty zone state — compact placeholder (Norwegian default) */
.container-zone:empty::after,
.container-zone.container-zone-empty::after {
    content: 'Klikk for å plassere elementer';
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #999;
    padding: 16px 20px;
    font-size: 0.85em;
    min-height: 48px;
    border: 2px dashed #ccc;
    border-radius: 6px;
    background: rgba(148, 183, 187, 0.05);
    margin: 6px;
}

/* English override */
html:lang(en) .container-zone:empty::after,
html:lang(en) .container-zone.container-zone-empty::after {
    content: 'Click to place elements here';
}

/* Active zone highlight */
.container-zone.active-zone {
    border-color: var(--secondary);
    background: rgba(22, 92, 125, 0.03);
    box-shadow: inset 0 0 0 2px rgba(22, 92, 125, 0.1);
}

.container-zone.active-zone::after {
    content: none;
}

/* Drop zone hover state */
.container-zone.drop-zone-hover {
    border-color: var(--primary) !important;
    background: rgba(22, 92, 125, 0.08) !important;
    box-shadow: 0 0 12px rgba(22, 92, 125, 0.2);
}

/* Zone labels for empty containers — Norwegian default */
.container-zone[data-zone="header"]:empty::after {
    content: 'Header — klikk for å plassere elementer';
}
.container-zone[data-zone="content"]:empty::after {
    content: 'Innhold — klikk for å plassere elementer';
}
.container-zone[data-zone="left"]:empty::after {
    content: 'Venstre kolonne — klikk for å plassere elementer';
}
.container-zone[data-zone="right"]:empty::after {
    content: 'Høyre kolonne — klikk for å plassere elementer';
}
.container-zone[data-zone="center"]:empty::after {
    content: 'Midtkolonne — klikk for å plassere elementer';
}
.container-zone[data-zone="main"]:empty::after {
    content: 'Hovedinnhold — klikk for å plassere elementer';
}
.container-zone[data-zone="sidebar"]:empty::after {
    content: 'Sidepanel — klikk for å plassere elementer';
}

/* English overrides */
html:lang(en) .container-zone[data-zone="header"]:empty::after {
    content: 'Header — click to place elements';
}
html:lang(en) .container-zone[data-zone="content"]:empty::after {
    content: 'Content — click to place elements';
}
html:lang(en) .container-zone[data-zone="left"]:empty::after {
    content: 'Left column — click to place elements';
}
html:lang(en) .container-zone[data-zone="right"]:empty::after {
    content: 'Right column — click to place elements';
}
html:lang(en) .container-zone[data-zone="center"]:empty::after {
    content: 'Center column — click to place elements';
}
html:lang(en) .container-zone[data-zone="main"]:empty::after {
    content: 'Main content — click to place elements';
}
html:lang(en) .container-zone[data-zone="sidebar"]:empty::after {
    content: 'Sidebar — click to place elements';
}

/* ============================================================================
   Quick-add inline element picker (Notion/Gutenberg-style "+" between elements)
   ============================================================================ */

/* Floating "+" trigger button — positioned dynamically by JS */
.quick-add-trigger {
    position: fixed;
    z-index: 100;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #d4e3e6;
    background: #ffffff;
    color: #94B7BB;
    font-size: 0.85em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.quick-add-trigger:hover {
    border-color: #00B0B9;
    color: #00B0B9;
    background: #f0fbfc;
    transform: scale(1.15);
}

/* Popover panel */
.quick-add-popover {
    position: fixed;
    z-index: 10000;
    width: 300px;
    max-height: 400px;
    background: #ffffff;
    border: 1px solid #d4e3e6;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Search input */
.quick-add-search {
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.85em;
    outline: none;
    background: #f8f9fa;
}

.quick-add-search:focus {
    background: #ffffff;
}

/* Category tab strip */
.quick-add-tabs {
    display: flex;
    gap: 2px;
    padding: 6px 8px;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
}

.quick-add-tab {
    flex: 1;
    padding: 6px 4px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    text-align: center;
    transition: background 0.15s;
}

.quick-add-tab:hover {
    background: #e9ecef;
}

.quick-add-tab.active {
    background: #003D4C;
    color: #ffffff;
}

.quick-add-tab.active i {
    color: #ffffff;
}

/* Sub-category tabs */
.quick-add-subtabs {
    display: flex;
    gap: 4px;
    padding: 4px 8px;
    border-bottom: 1px solid #e9ecef;
    flex-wrap: wrap;
}

.quick-add-subtab {
    padding: 3px 10px;
    border: 1px solid #d4e3e6;
    background: #ffffff;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.75em;
    color: #4a5568;
    transition: all 0.15s;
}

.quick-add-subtab:hover {
    border-color: #94B7BB;
    background: #f7fafa;
}

.quick-add-subtab.active {
    background: #003D4C;
    color: #ffffff;
    border-color: #003D4C;
}

/* Scrollable element list */
.quick-add-elements {
    overflow-y: auto;
    flex: 1;
    padding: 4px;
    max-height: 260px;
}

/* Individual element items */
.quick-add-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
}

.quick-add-item:hover {
    background: #f0f8fa;
}

.quick-add-item-icon {
    width: 24px;
    text-align: center;
    font-size: 0.9em;
    flex-shrink: 0;
}

.quick-add-item-name {
    font-size: 0.82em;
    color: #2d3b45;
}

.quick-add-empty {
    padding: 20px;
    text-align: center;
    color: #999;
    font-size: 0.85em;
}

/* ============================================================================
   Help guide modal — tabbed panel with getting started, accessibility, etc.
   ============================================================================ */

.help-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e9ecef;
    background: #f8f9fa;
    padding: 0 16px;
}

.help-tab {
    padding: 10px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.82em;
    color: #718096;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
}

.help-tab:hover {
    color: #003D4C;
    background: rgba(0, 61, 76, 0.04);
}

.help-tab.active {
    color: #003D4C;
    border-bottom-color: #003D4C;
    background: #ffffff;
}

.help-panel {
    display: none;
    max-height: 55vh;
    overflow-y: auto;
}

.help-panel.active {
    display: block;
}

.help-step {
    margin-bottom: 16px;
    padding-left: 0;
}

.help-step h4 {
    margin: 0 0 4px 0;
    color: #003D4C;
    font-size: 0.95em;
}

.help-step p {
    margin: 0;
    color: #4a5568;
    font-size: 0.9em;
    line-height: 1.6;
}

kbd {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.85em;
    font-family: monospace;
    color: #003D4C;
    background: #f0f4f5;
    border: 1px solid #d4e3e6;
    border-radius: 4px;
}

/* Sidebar zone context indicator — shown when user is inside a container zone */
.sidebar-zone-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(22, 92, 125, 0.08), rgba(0, 176, 185, 0.06));
    border-bottom: 2px solid var(--secondary, #165c7d);
    color: var(--secondary, #165c7d);
    font-size: 0.8em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.sidebar-zone-indicator i {
    font-size: 0.9em;
    opacity: 0.7;
}

/* Breadcrumb navigation */
.container-breadcrumb-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-size: 0.9em;
}

.breadcrumb-label {
    color: #666;
    font-size: 0.85em;
}

.container-breadcrumb-wrapper.at-root {
    display: none;
}

#container-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.breadcrumb-item {
    padding: 4px 8px;
    border-radius: 4px;
    color: var(--text-secondary);
}

.breadcrumb-item.active {
    background: var(--primary);
    color: white;
    font-weight: 500;
}

.breadcrumb-item.clickable {
    cursor: pointer;
    color: var(--secondary);
}

.breadcrumb-item.clickable:hover {
    background: rgba(22, 92, 125, 0.1);
    text-decoration: underline;
}

.breadcrumb-separator {
    color: #ccc;
    font-weight: bold;
}

/* Exit container button */
.exit-container-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.exit-container-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Nested elements styling inside containers */
.container-zone > .canvas-element {
    margin: 8px 0;
}

.container-zone > .canvas-element:first-child {
    margin-top: 0;
}

.container-zone > .canvas-element:last-child {
    margin-bottom: 0;
}

/* Container element icon in sidebar */
.element-item[data-is-container="true"] .element-icon::after {
    content: '+';
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: var(--secondary);
    color: white;
    font-size: 10px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* ============================================
   END CONTAINER SYSTEM STYLES
   ============================================ */