/* ============================================
   Hustavla.NO - CSS DESIGN TOKENS
   Shared variables for consistent styling
   ============================================ */

:root {
  /* ===== COLOR PALETTE ===== */
  
  /* ===== PRIMARY COLORS (REFINED 10/10 PALETTE) ===== */
  
  /* Core Brand Colors */
  --color-primary: #3d5a7a;              /* Base brand color */
  --color-primary-dark: #34495E;         /* Headers, footers, dark sections */
  --color-primary-muted: #8fa3b8;        /* Disabled states, subtle backgrounds */
  
  /* Interactive Accent Colors */
  --color-accent-primary: #3498db;       /* CTAs, links, active states */
  --color-accent-primary-hover: #2980b9; /* Hover state for accent elements */
  
  /* Semantic State Variants */
  --color-primary-hover: #4a6b8f;        /* Hover state for primary elements */
  --color-primary-active: #2f4a65;       /* Active/pressed state */
  
  /* Background Variants */
  --color-primary-bg-subtle: #f4f7fa;    /* Very light tint for sections */
  --color-primary-bg-soft: #e8eef4;      /* Soft tint for hover backgrounds */
  
  /* Text Colors (Accessibility Optimized) */
  --color-primary-text: #2c3e50;         /* High contrast text (AAA - 8.6:1) */
  --color-primary-text-soft: #3d5a7a;    /* Medium contrast text (AA - 4.8:1) */
  
  /* Accent Colors */
  --color-success: #27ae60;
  --color-danger: #e74c3c;
  --color-warning: #ffc107;
  
  /* Extended Color Palette */
  
  /* Text Color Variants */
  --color-text-heading: #2c3e50;
  --color-text-secondary: #6c757d;
  --color-text-tertiary: #495057;
  
  /* Background Variants */
  --color-bg-panel: #f8f9fa;
  --color-bg-divider: #e9ecef;
  --color-bg-placeholder: #f0f4f8;
  
  /* Info Colors (Caretaker boxes) */
  --color-info-bg: #e8f4f8;
  --color-info-border: #b8dce5;
  --color-info-text: #0c5460;
  
  /* Warning Colors (Emergency boxes) */
  --color-warning-bg: #fffbf0;
  --color-warning-border: #f5e5b8;
  --color-warning-text: #856404;
  
  /* Success Variants */
  --color-success-dark: #1b5e20;
  --color-success-darker: #2e7d32;
  
  /* Danger Variants */
  --color-danger-dark: #c62828;
  
  /* Accent Colors */
  --color-accent-orange: #f39c12;
  --color-accent-green: #2ecc71;
  
  /* Trial Banner Colors */
  --color-trial-info-bg: #e3f2fd;
  --color-trial-info-border: #1976d2;
  --color-trial-info-text: #0d47a1;
  --color-trial-warning-bg: #fff3e0;
  --color-trial-warning-border: #f57c00;
  --color-trial-warning-text: #e65100;
  --color-trial-urgent-bg: #ffebee;
  --color-trial-urgent-border: #c62828;
  --color-trial-urgent-text: #b71c1c;
  
  /* Badge Colors */
  --color-badge-verified-bg: #d4edda;
  --color-badge-verified-text: #155724;
  --color-badge-verified-border: #c3e6cb;
  --color-badge-pending-bg: #fff3cd;
  --color-badge-pending-text: #856404;
  --color-badge-pending-border: #ffeaa7;
  
  /* Billing Status Colors */
  --color-billing-blue: #2196F3;
  --color-billing-blue-dark: #1976d2;
  --color-billing-red: #F44336;
  
  /* Overlay Colors */
  --overlay-light: rgba(0, 0, 0, 0.3);
  --overlay-medium: rgba(0, 0, 0, 0.5);
  --overlay-dark: rgba(0, 0, 0, 0.7);
  --glass-light: rgba(255, 255, 255, 0.05);
  --glass-medium: rgba(255, 255, 255, 0.12);
  
  /* Neutral Colors */
  --color-neutral-dark: #2D2D2D;
  --color-neutral: #666;
  --color-neutral-light: #999;
  --color-neutral-lighter: #6c7a7d;  /* Updated for WCAG AA compliance - was #95a5a6 */
  --color-neutral-lightest: #5a6a6d; /* Updated for WCAG AA compliance - was #7f8c8d */
  --color-neutral-slate: #6c7a89;
  
  /* Background Colors */
  --color-bg-primary: #E8F2F9;
  --color-bg-secondary: #F8F9FA;
  --color-bg-card: #F0F0F0;
  --color-bg-white: white;
  --color-bg-success: #e8f5e9;
  --color-bg-danger: #ffe6e6;
  
  /* Border Colors */
  --color-border: #D0D0D0;
  --color-border-dark: #ccc;
  
  /* ===== TYPOGRAPHY ===== */
  
  /* Font Families */
  --font-family-base: system-ui, -apple-system, sans-serif;
  
  /* Font Sizes */
  --font-size-h1: 28px;
  --font-size-h2: 18px;
  --font-size-h3: 16px;
  --font-size-base: 14px;
  --font-size-small: 12px;
  --font-size-tiny: 13px;
  --font-size-body: 15px;
  --font-size-icon: 22px;
  --font-size-icon-large: 24px;
  --font-size-icon-small: 20px;
  --font-size-header: 34px;
  
  /* Font Weights */
  --font-weight-normal: normal;
  --font-weight-medium: 600;
  --font-weight-bold: bold;
  
  /* Line Heights */
  --line-height-base: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-tight: 1.8;
  
  /* ===== SPACING ===== */
  
  /* Granular Spacing Scale (0-50px) */
  --spacing-0: 0;
  --spacing-1: 1px;
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  
  /* Legacy Spacing Aliases (for backward compatibility) */
  --spacing-xs: var(--spacing-5);
  --spacing-sm: var(--spacing-8);
  --spacing-md: var(--spacing-20);
  --spacing-lg: var(--spacing-16);
  --spacing-xl: var(--spacing-15);
  --spacing-2xl: var(--spacing-20);
  --spacing-3xl: var(--spacing-30);
  --spacing-4xl: var(--spacing-32);
  
  /* Margin Scale */
  --margin-0: 0;
  --margin-4: 4px;
  --margin-5: 5px;
  --margin-6: 6px;
  --margin-8: 8px;
  --margin-10: 10px;
  --margin-12: 12px;
  --margin-15: 15px;
  --margin-20: 20px;
  --margin-30: 30px;
  
  /* Legacy Margin Aliases (for backward compatibility) */
  --margin-xs: var(--margin-4);
  --margin-sm: var(--margin-5);
  --margin-md: var(--margin-8);
  --margin-lg: var(--margin-10);
  --margin-xl: var(--margin-12);
  --margin-2xl: var(--margin-15);
  --margin-3xl: var(--margin-20);
  
  /* Semantic Spacing Aliases */
  --spacing-button-y: var(--spacing-10);
  --spacing-button-x: var(--spacing-16);
  --spacing-button-sm-y: var(--spacing-6);
  --spacing-button-sm-x: var(--spacing-12);
  --spacing-button-lg-y: var(--spacing-14);
  --spacing-button-lg-x: var(--spacing-32);
  --spacing-card-padding: var(--spacing-15);
  --spacing-section-padding: var(--spacing-20);
  --spacing-modal-padding: var(--spacing-20);
  --spacing-form-group: var(--spacing-15);
  
  /* Card Spacing (SSOT for consistent gaps between cards) */
  --card-spacing: 24px;
  
  /* Mobile Column Margins (SSOT for side margins on mobile) */
  --column-margin-mobile: 24px;
  
  /* Mobile Header Spacing (SSOT for header top margins on mobile) */
  --header-spacing-mobile-first: 12px;
  --header-spacing-mobile: 25px;
  
  /* Section Title Spacing (SSOT for spacing between section titles) */
  --section-title-spacing: 28px;
  
  /* Desktop Container Padding (SSOT for kanban container padding on desktop) */
  --container-padding-desktop: 12px;
  
  /* Section Internal Padding (SSOT for vertical padding inside sections) */
  --section-padding-vertical: 20px;
  
  /* Landing Page Card Padding (SSOT for consistent internal spacing) */
  --landing-card-padding-vertical: 1.5rem;
  --landing-card-padding-horizontal: 2.5rem;
  --landing-card-padding-vertical-mobile: 1.5rem;
  --landing-card-padding-horizontal-mobile: 1.5rem;
  --landing-card-gap: 2.5rem;
  
  /* Landing Page Typography (SSOT for consistent card content styling) */
  --landing-card-title-size: 1.65rem;
  --landing-card-title-color: var(--color-primary-dark);
  --landing-card-title-margin: 0.75rem;
  --landing-card-text-size: 1.05rem;
  --landing-card-text-color: #34495e;
  --landing-card-label-size: 0.85rem;
  --landing-card-label-color: var(--color-primary-dark);
  
  /* Column Gap (SSOT for horizontal spacing between kanban columns on desktop) */
  --column-gap: 18px;
  
  /* Section Spacing (SSOT for spacing below section containers) */
  --section-spacing-mobile: 15px;
  --section-spacing-desktop: 15px;
  
  /* ===== BORDERS ===== */
  
  /* Border Radius */
  --radius-xs: 4px;    /* Small elements: badges, buttons, small UI */
  --radius-sm: 6px;    /* Medium buttons, inputs */
  --radius-md: 8px;    /* Cards, containers, most content boxes */
  --radius-lg: 12px;   /* Section wrappers, modals, hero sections */
  
  /* Border Widths */
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;
  
  /* ===== SHADOWS ===== */
  
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  
  /* ===== TRANSITIONS ===== */
  
  --transition-fast: 0.3s;
  --transition-base: 0.3s ease;
  
/* ===== LAYOUT ===== */
  
  /* Container Widths */
  --container-mobile: 420px;
  --container-tablet: 600px;
  
  /* Z-Index Scale */
  --z-index-modal: 1000;
  --z-index-dropdown: 100;
  --z-index-overlay: 50;
  
  /* Page Container */
  --page-bg: var(--color-bg-white);
  
/* ===== OPACITY ===== */
  
  --opacity-subtle: 0.7;
  --opacity-medium: 0.9;
  
  
  /* ===== ADDITIONAL COLORS (for provision/signup pages) ===== */
  
  /* Text Colors */
  --color-text: var(--color-primary-dark);
  --color-text-light: #6c757d;
  
  /* Text on Dark Backgrounds (for hero sections with dark blue background) */
  --color-text-on-dark: #ffffff;           /* Pure white for primary text */
  --color-text-on-dark-secondary: #e8f1f5; /* Very light blue-gray for secondary text */
  --color-text-on-dark-muted: #b8d4e6;     /* Light blue for tertiary/muted text */
  
  /* Footer Text Colors (WCAG AA Compliant on dark backgrounds) */
  --color-footer-text: rgba(255, 255, 255, 0.7);      /* Accessible footer body text */
  --color-footer-text-strong: rgba(255, 255, 255, 0.85); /* Accessible footer emphasis */
  --color-footer-link: rgba(255, 255, 255, 0.75);     /* Accessible footer links */
  --color-footer-link-hover: rgba(255, 255, 255, 0.9); /* Footer link hover state */
  
  /* Background Variants */
  --color-bg: white;
  --color-bg-alt: #f8f9fa;
  --color-background: #f5f5f5;
  
  /* Error Color */
  --color-error: #e74c3c;
  
  /* ===== BORDER RADIUS ALIASES ===== */
  
  /* Aliases for consistency with provision-styles.css naming */
  --border-radius-sm: var(--radius-xs);
  --border-radius-md: var(--radius-sm);
  --border-radius-lg: var(--radius-md);
  --border-radius-full: 9999px;
  
  /* ===== FONT SIZE EXTENSIONS ===== */
  
  /* Complete Font Size Scale */
  --font-size-10: 10px;
  --font-size-11: 11px;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-22: 22px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-32: 32px;
  --font-size-34: 34px;
  --font-size-36: 36px;
  
  /* Legacy Font Size Aliases */
  --font-size-xs: var(--font-size-11);
  --font-size-sm: var(--font-size-13);
  --font-size-lg: var(--font-size-18);
  --font-size-xl: var(--font-size-20);
  --font-size-2xl: var(--font-size-24);
  --font-size-3xl: var(--font-size-32);
  
  /* Semantic Font Size Aliases */
  --font-size-button: var(--font-size-14);
  --font-size-input: var(--font-size-14);
  --font-size-label: var(--font-size-13);
  
  /* ===== LINE HEIGHT EXTENSIONS ===== */
  
  --line-height-normal: 1.6;
  
  /* ===== SHADOW EXTENSIONS ===== */
  
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15);
  
  /* ===== Z-INDEX EXTENSIONS ===== */
  
  --z-modal: 1000;
  
/* ===== ICONS ===== */

/* Icon Sizes */
--icon-size-sm: 20px;
--icon-size-md: 48px;
--icon-size-lg: 28px;
}

/* ============================================
   LAYOUT COMPONENTS
   NOTE: Page container and kanban layout moved to shared/css/content.css
   ============================================ */

/* ===== CARD COMPONENTS ===== */

/* Base card styling - shared across all pages */
.card-base {
  background: var(--color-bg-white);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-lg);
}

/* Card with admin footer space */
.card-base-admin {
  background: var(--color-bg-white);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-lg);
  padding-bottom: 50px; /* Space for admin footer */
  position: relative;
}

/* ===== EXTENDED CARD COMPONENTS ===== */

/* Card variants */
.card-admin {
  background: var(--color-bg-white);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: var(--spacing-lg);
  margin-bottom: 0;
  position: relative;
}

.card-info {
  background: var(--color-info-bg);
  border: var(--border-width-thin) solid var(--color-info-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-15);
}

.card-warning {
  background: var(--color-warning-bg);
  border: var(--border-width-thin) solid var(--color-warning-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-15);
}

.card-hover {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Card sections */
.card-header {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-dark);
  margin-bottom: var(--margin-md);
}

.card-content {
  font-size: var(--font-size-body);
  color: var(--color-neutral);
  line-height: var(--line-height-relaxed);
}

.card-footer {
  background: var(--color-bg-panel);
  border: var(--border-width-thin) solid var(--color-bg-divider);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: var(--spacing-8) var(--spacing-15);
  margin-bottom: var(--card-spacing);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ===== UTILITY CLASSES ===== */

/* Display utilities */
.hidden { 
  display: none !important;
}

.visible {
  display: block !important;
}

.block { 
  display: block; 
}

.flex { 
  display: flex; 
}

.flex-column { 
  flex-direction: column; 
}

.flex-between { 
  justify-content: space-between; 
}

.flex-center { 
  justify-content: center; 
  align-items: center; 
}

/* State utilities */
.expanded {
  display: block !important;
}

.collapsed {
  display: none !important;
}

/* Spacing utilities */
.mt-5 { 
  margin-top: 5px; 
}

.mt-10 { 
  margin-top: 10px; 
}

.mt-12 { 
  margin-top: 12px; 
}

.mt-20 { 
  margin-top: 20px; 
}

.mt-30 { 
  margin-top: 30px; 
}

.mb-10 { 
  margin-bottom: 10px; 
}

.mb-15 { 
  margin-bottom: 15px; 
}

/* Text utilities */
.text-center { 
  text-align: center; 
}

.text-small { 
  font-size: var(--font-size-small); 
}

.text-tiny { 
  font-size: var(--font-size-tiny); 
}

/* Gap utilities */
.gap-8 { 
  gap: var(--spacing-8); 
}

.gap-10 { 
  gap: var(--spacing-10); 
}

/* ===== BASE BUTTON COMPONENTS ===== */

/* Base button - shared properties for all buttons */
.btn-base {
  padding: var(--spacing-button-y) var(--spacing-button-x);
  border: none;
  border-radius: var(--radius-xs);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-bold);
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition-base);
  text-align: center;
  display: inline-block;
}

.btn-base:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Button color variants */
.btn-primary {
  background: var(--color-accent-primary);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-accent-primary-hover);
}

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

.btn-success:hover:not(:disabled) {
  background: var(--color-success-dark);
}

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

.btn-danger:hover:not(:disabled) {
  background: var(--color-danger-dark);
}

.btn-secondary {
  background: var(--color-neutral-lighter);
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-neutral-lightest);
}

.btn-warning {
  background: var(--color-accent-orange);
  color: white;
}

.btn-warning:hover:not(:disabled) {
  background: #d35400;
}

/* Button size variants */
.btn-sm {
  padding: var(--spacing-button-sm-y) var(--spacing-button-sm-x);
  font-size: var(--font-size-12);
}

.btn-lg {
  padding: var(--spacing-button-lg-y) var(--spacing-button-lg-x);
  font-size: var(--font-size-16);
}

/* Button modifiers */
.btn-full {
  width: 100%;
  display: block;
}

.btn-icon {
  background: none;
  border: none;
  padding: var(--spacing-4) var(--spacing-8);
  color: var(--color-text-secondary);
  font-size: var(--font-size-13);
  transition: all 0.2s;
}

.btn-icon:hover:not(:disabled) {
  background: var(--color-bg-divider);
  color: var(--color-text-tertiary);
}

/* Reorder controls - inline with Edit/Delete buttons */
.reorder-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 8px;
  padding-right: 8px;
  border-right: 1px solid var(--color-bg-divider);
}

.reorder-label {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  margin-right: 4px;
}

.arrow-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-13);
  color: var(--color-text-secondary);
  padding: var(--spacing-4) var(--spacing-8);
  border-radius: var(--radius-xs);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  font-family: inherit;
}

.arrow-btn:hover:not(:disabled) {
  background: var(--color-bg-divider);
  color: var(--color-text-tertiary);
}

.arrow-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Header action button - unified style for login/logout buttons */
.btn-header-action {
  background: var(--color-accent-primary);
  color: var(--color-bg-white);
  border: none;
  padding: var(--spacing-14);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background var(--transition-base);
  white-space: nowrap;
}

.btn-header-action:hover:not(:disabled) {
  background: var(--color-accent-primary-hover);
}

.btn-header-action:disabled {
  background: var(--color-neutral-lighter);
  cursor: not-allowed;
}

/* Legacy button utility classes (for backward compatibility) */
.btn-cancel {
  background: var(--color-neutral-lighter);
}

.btn-save {
  background: var(--color-success);
}

.btn-primary-blue {
  background: var(--color-accent-primary);
}

/* ===== FORM UTILITIES ===== */

.form-readonly {
  background: #f5f5f5;
  cursor: not-allowed;
}

.textarea-sm {
  min-height: 100px;
}

.textarea-md {
  min-height: 120px;
}

.textarea-lg {
  min-height: 150px;
}

/* ===== LAYOUT UTILITIES ===== */

.flex-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.flex-1 {
  flex: 1;
}

.w-full {
  width: 100%;
}

.nowrap {
  white-space: nowrap;
}

.align-start {
  align-self: flex-start;
}

.max-w-600 {
  max-width: 600px;
}

.max-w-700 {
  max-width: 700px;
}

/* ===== ADDITIONAL SPACING UTILITIES ===== */

.mb-20 {
  margin-bottom: 20px;
}

.mb-5 {
  margin-bottom: 5px;
}

.pl-20 {
  padding-left: 20px;
}

/* ===== TEXT UTILITIES ===== */

.text-xs {
  font-size: var(--font-size-xs);
}

.text-gray {
  color: #666;
}

.text-italic {
  font-style: italic;
}

.help-text {
  color: var(--color-neutral);
  font-size: 14px;
}

.required-indicator {
  color: var(--color-danger);
}

/* ===== FOOTER UTILITIES ===== */

.footer-link {
  color: inherit;
  text-decoration: underline;
  margin-right: 1rem;
}

.footer-text {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

/* ===== LAYOUT UTILITIES (EXTENDED) ===== */

.scrollable-container {
  max-height: 400px;
  overflow-y: auto;
}

/* ===== DOCUMENTATION UTILITIES (EXTENDED) ===== */

.doc-section {
  margin-bottom: 20px;
}

.doc-section-content {
  padding-left: 20px;
  color: var(--color-neutral);
  font-size: 14px;
  line-height: 1.6;
}

/* ===== MESSAGE FORMATTING UTILITIES ===== */

/* Message line with icon spacing */
.message-line {
  margin-bottom: 4px;
}

.message-email::before {
  content: '📧 ';
}

.message-phone::before {
  content: '📱 ';
}

/* ===== CHECKBOX UTILITIES ===== */

.checkbox-mr-8 {
  margin-right: 8px;
}

/* ===== SUPPORT PANEL UTILITIES ===== */

.support-textarea {
  width: 100%;
  min-height: 150px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  margin-bottom: 10px;
}

.support-feedback {
  margin-top: 10px;
  font-size: 13px;
}

/* ===== DOCUMENTATION UTILITIES ===== */

.doc-content {
  padding-left: 20px;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

.doc-list {
  margin-left: 20px;
  margin-top: 5px;
}

.doc-paragraph {
  margin-top: 8px;
}

.doc-paragraph-12 {
  margin-top: 12px;
}

.doc-paragraph-italic {
  margin-top: 8px;
  font-size: 13px;
  font-style: italic;
}

/* ===== MODAL UTILITIES ===== */

.modal-help-text {
  color: #666;
  font-size: 12px;
}

.modal-description {
  color: #666;
  font-size: 14px;
  margin-bottom: 20px;
}

.modal-container-scroll {
  margin-top: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.modal-footer-center {
  margin-top: 30px;
  text-align: center;
}

.cursor-pointer {
  cursor: pointer;
}

.font-14 {
  font-size: 14px;
}

.color-warning {
  color: #856404;
}

.color-info {
  color: #0c5460;
}

/* ===== TOGGLE LINK STYLES ===== */

.toggle-link {
  color: #666;
  font-family: system-ui, -apple-system, sans-serif;
  cursor: pointer;
  text-decoration: none;
}

.toggle-link:hover {
  text-decoration: underline;
}

/* ===== STATE MESSAGE STYLES ===== */

.loading-state {
  color: #999;
  text-align: center;
  padding: 20px;
}

.empty-state {
  color: #999;
  text-align: center;
  padding: 20px;
}

.error-state {
  color: #e74c3c;
  text-align: center;
  padding: 20px;
}

.success-message {
  color: #27ae60;
}

.warning-message {
  color: #e67e22;
}

.error-message {
  color: #e74c3c;
}

/* ===== ICON COMPONENTS ===== */

.hustavla-icon {
  height: 62px;
  width: auto;
  margin: 0;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Desktop: larger icon for better prominence */
@media (min-width: 768px) {
  .hustavla-icon {
    height: 69px;
  }
}

/* ===== TEXT COMPONENTS ===== */

/* Page Header (H1) - Main page title */
.text-page-header {
  font-size: var(--font-size-h1);      /* 24px */
  font-weight: var(--font-weight-bold);
  color: var(--color-bg-white);
  margin-bottom: var(--margin-xl);
}

/* Header Subtitle - Secondary header text */
.text-header-subtitle {
  font-size: var(--font-size-base);    /* 14px */
  opacity: var(--opacity-medium);      /* 0.9 */
  margin: 0;
}

/* Category Header - Desktop Kanban columns (admin only) */
.text-category-header {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-dark);
}

/* Section Title - Section headers with icons */
.text-section-title {
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-dark);
}

/* Card Title - Titles within cards */
.text-card-title {
  font-size: var(--font-size-h3);      /* 16px */
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-dark);
  margin-bottom: var(--margin-md);
}

/* ===== APPLY TEXT COMPONENTS TO EXISTING SELECTORS ===== */

/* Header components use text-page-header and text-header-subtitle */
.header {
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
  color: var(--color-bg-white);
  padding: var(--spacing-3xl) var(--spacing-2xl);
  text-align: center;
  position: relative;
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
}

.header h1 {
  font-size: var(--font-size-header);
  font-weight: var(--font-weight-bold);
  color: var(--color-bg-white);
  margin-bottom: var(--margin-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Desktop: larger header */
@media (min-width: 768px) {
  .header h1 {
    font-size: 36px;
    gap: 16px;
  }
}

.header-subtitle {
  font-size: var(--font-size-base);
  opacity: var(--opacity-medium);
  margin: 0;
}

.header-branding {
  position: absolute;
  bottom: var(--margin-2xl);
  right: var(--spacing-2xl);
  font-size: var(--font-size-tiny);
  opacity: var(--opacity-subtle);
  display: none; /* Hidden on mobile for cleaner look */
}

/* Desktop: Show branding */
@media (min-width: 768px) {
  .header-branding {
    display: block;
  }
}

/* Section titles use text-section-title */
.section-title {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--margin-2xl);
  padding-bottom: var(--margin-md);
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  color: var(--color-neutral-dark);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* Spacing for multiple section titles in same column */
.section-title:not(:first-child) {
  margin-top: var(--section-title-spacing);
}

/* Card titles use text-card-title */
.message-card h3,
.rule-title,
.board-card .role,
.protocol-info h3,
.info-card-header {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-dark);
  margin-bottom: var(--margin-md);
}

/* Dates use text-date */
.message-card .date,
.protocol-info .date,
.protocol-card .date,
.card .date {
  font-size: 12px;
  color: #999;
  margin-top: var(--margin-sm);
  margin-bottom: var(--margin-md);
}

/* Content text uses text-content */
.card-content-text,
.message-card .content,
.rule-content {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

/* ===== PROTOCOL CARD COMPONENTS ===== */

/* Protocol badge - category label */
.protocol-badge {
  display: inline-block;
  padding: 4px 8px;
  color: white;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: bold;
}

/* Protocol badge positioning */
.protocol-badge-container {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

/* Protocol download button positioning */
.protocol-download-container {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

/* Protocol download button styling */
.btn-protocol-download {
  background: #f0f0f0;
  color: var(--color-neutral-dark);
  border: 1px solid var(--color-border);
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 11px;
  font-weight: normal;
  transition: background var(--transition-base);
}

.btn-protocol-download:hover {
  background: #e0e0e0;
}

/* ============================================
   CONTENT CARD COMPONENTS (SHARED)
   Used by both admin and public views
   ============================================ */

/* ============================================
   CONTENT CARD COMPONENTS
   NOTE: All content card styles moved to shared/css/content.css
   This includes: message cards, rule items, info cards, board cards,
   caretaker cards, protocol cards, building info cards, and all
   related components (caretaker boxes, emergency boxes, document icons)
   ============================================ */