/* =========================================================
   aiadaption.se UI System (McKinsey Insights × Stripe Editorial)
   Rules:
   - No pure white (#fff) surfaces, no pure black (#000) text
   - Background = warm paper, headings = plum, interactions = teal
   - Use accents sparingly; typography + spacing carry the design
   ========================================================= */

   @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700&display=swap');

   :root {
     /* =========================================================
        NEW COLOR SCHEME (ONLY COLORS CHANGED)
        Royal Blue base, Techy Green headings, Friendly Pink interactions
        ========================================================= */
   
    /* Surfaces (dark, no pure black/white) */
    --color-bg: #232A52;          /* Royal Blue */
    --color-surface: #2B3463;     /* cards / buttons / inputs */
    --color-surface-2: #313C72;   /* alt surface for callouts/sections */
    --color-light-surface: #FEFEF0; /* Cloudy White – light panels, no pure white */
    --color-on-light: #232A52;    /* Royal Blue – text on light surfaces */

    /* Text (no pure white; no grey on blue – off-white only) */
    --color-text: #F2F4FF;        /* primary text */
    --color-text-muted: #E2E5F5;  /* secondary text – off-white tint, NOT grey on blue */

    /* Accents */
     --color-heading: #96FA9D;     /* Techy Green */
     --color-accent: #FDD3FE;      /* Friendly Pink */
     --color-accent-hover: #F7A8FA;
   
     /* Borders & focus */
     --color-border: rgba(242, 244, 255, 0.14);
     --color-focus: rgba(253, 211, 254, 0.28);
     --color-input-border: rgba(242, 244, 255, 0.18);
     --color-input-bg: var(--color-surface);
   
     /* Feedback */
     --color-warning-bg: rgba(150, 250, 157, 0.14);
     --color-warning-text: #96FA9D;
   
    /* Section colors (used sparingly) */
    --color-have: #96FA9D;   /* green */
    --color-know: #FDD3FE;   /* pink */
    --color-want: #96FA9D;   /* signatur grön (som Jag har) */
   
     /* Spacing */
     --space-xs: 4px;
     --space-sm: 8px;
     --space-md: 16px;
     --space-lg: 24px;
     --space-xl: 32px;
     --space-2xl: 48px;
   
     /* Radius */
     --radius-sm: 8px;
     --radius-md: 12px;
     --radius-lg: 16px;
   
     /* Shadows (subtle on dark bg) */
     --shadow-sm: 0 1px 2px rgba(16, 18, 35, 0.28);
     --shadow-md: 0 10px 24px rgba(16, 18, 35, 0.40);
   
     /* Typography */
     --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
     --font-body-weight: 400;
     --font-heading: "Fraunces", ui-serif, Georgia, serif;
   
     /* Layout: HARD RULES */
     --container-reading: 720px;   /* text-heavy pages */
     --container-queenslab: 480px; /* role select page */
   
     /* One gutter token (responsive overrides below) */
     --gutter: 24px;
   
     /* Vertical rhythm */
     --page-pad-top: 48px;
     --page-pad-bottom: 56px;
     --section-gap: 32px;
     --block-gap: 16px;
     --item-gap: 10px;
   
     /* Progress / charts */
     --chart-grid: rgba(242, 244, 255, 0.14);
     --chart-gradient: linear-gradient(90deg, #96FA9D, #FDD3FE);
   }
   
   /* Responsive gutters + rhythm */
   @media (max-width: 480px) {
     :root {
       --gutter: 16px;
       --page-pad-top: 40px;
       --page-pad-bottom: 48px;
       --section-gap: 28px;
     }
   }
   @media (min-width: 901px) {
     :root { --gutter: 32px; }
   }
  @media (min-width: 1200px) {
    :root { --gutter: 40px; }
  }

  /* Skeleton shimmer: prevent layout shift / page shake – isolate animation */
  .progress-skeleton .skeleton-summary,
  .progress-skeleton .skeleton-stat,
  .progress-skeleton .skeleton-graph,
  .tasks-skeleton .skeleton-title,
  .tasks-skeleton .skeleton-category-title,
  .tasks-skeleton .skeleton-subtitle,
  .tasks-skeleton .skeleton-line,
  .tasks-skeleton .skeleton-form,
  .tasks-skeleton .skeleton-subcategory,
  .users-skeleton .skeleton-table-row,
  .todo-skeleton .skeleton-summary,
  .todo-skeleton .skeleton-stat,
  .todo-skeleton .skeleton-line,
  .inbox-skeleton .skeleton-table-row,
  .roles-skeleton .skeleton-table-row,
  .suggestions-skeleton .skeleton-table-row {
    overflow: hidden;
    contain: paint;
  }

  /* Light surface utility: text on light panels must be Royal Blue, never white; rounded like other containers */
  .light, .card-light, .panel-light, .surface-light, .modal-light,
  [class*="light-surface"] {
    background-color: var(--color-light-surface);
    color: var(--color-on-light);
    border-radius: var(--radius-md);
  }
  .light input, .light textarea, .light select,
  .card-light input, .panel-light input, .surface-light input,
  .modal-light input, .modal-light textarea, .modal-light select {
    background: var(--color-light-surface);
    color: var(--color-on-light);
    border-color: rgba(35, 42, 82, 0.2);
  }
  .light a, .card-light a, .panel-light a, .surface-light a, .modal-light a {
    color: var(--color-accent);
  }
  .light a:hover, .card-light a:hover, .panel-light a:hover, .surface-light a:hover, .modal-light a:hover {
    color: var(--color-accent-hover);
  }

  /* Signature pink content blocks: rounded corners, Royal Blue text (like other containers) */
  .block-signature,
  .panel-signature {
    background: var(--color-accent);
    color: var(--color-on-light);
    border-radius: var(--radius-md);
    border: 1px solid rgba(35, 42, 82, 0.12);
  }
  .block-signature .admin-section-label,
  .block-signature .muted,
  .block-signature p,
  .block-signature label,
  .panel-signature .admin-section-label,
  .panel-signature .muted,
  .panel-signature p,
  .panel-signature label {
    color: var(--color-on-light);
  }
  .block-signature .admin-section-label,
  .block-signature label,
  .block-signature .tasks-table th,
  .panel-signature .admin-section-label,
  .panel-signature label {
    font-family: var(--font-heading);
    font-weight: 600;
  }
  .block-signature input,
  .block-signature .form-input,
  .panel-signature input,
  .panel-signature .form-input {
    background: var(--color-light-surface);
    color: var(--color-on-light);
    border-color: rgba(35, 42, 82, 0.25);
  }
  .block-signature .error,
  .panel-signature .error {
    color: var(--color-on-light);
    opacity: 0.9;
  }
  .block-signature .btn-save-teal,
  .block-signature .add-button,
  .block-signature .add-task-button,
  .panel-signature .btn-save-teal,
  .panel-signature .add-button,
  .panel-signature .add-task-button {
    background: var(--color-bg);
    color: var(--color-light-surface);
    border-color: var(--color-bg);
  }
  .block-signature .btn-save-teal:hover,
  .block-signature .add-button:hover,
  .block-signature .add-task-button:hover,
  .panel-signature .btn-save-teal:hover,
  .panel-signature .add-button:hover,
  .panel-signature .add-task-button:hover {
    background: #1e2446;
    border-color: #1e2446;
  }
  .block-signature .btn-secondary,
  .panel-signature .btn-secondary {
    color: var(--color-on-light);
    border-color: rgba(35, 42, 82, 0.35);
  }
  .block-signature .btn-secondary:hover,
  .panel-signature .btn-secondary:hover {
    color: var(--color-on-light);
    background: rgba(35, 42, 82, 0.12);
    border-color: var(--color-on-light);
  }

  /* Light modals (vit box): Royal Blue text only, no pink; primary button = Royal Blue */
  .modal-box,
  .modal-content {
    background: var(--color-light-surface);
    color: var(--color-on-light);
    border-radius: var(--radius-md);
  }
  .modal-box h3,
  .modal-box p,
  .modal-content h3,
  .modal-content p {
    color: var(--color-on-light);
  }
  .modal-box .password-warning,
  .modal-box .error,
  .modal-content .password-warning,
  .modal-content .error {
    color: var(--color-on-light);
  }
  .modal-box .btn-primary,
  .modal-content .btn-primary {
    background: var(--color-bg);
    color: var(--color-light-surface);
    border-color: var(--color-bg);
  }
  .modal-box .btn-primary:hover,
  .modal-content .btn-primary:hover {
    background: #1e2446;
    border-color: #1e2446;
  }

  /* Task edit modals (masteradmin inbox + org admin): blå bakgrund som Organisation krävs-popup, rosa rubriker */
  .modal-content.task-edit-modal-content,
  .edit-task-form {
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-md);
  }
  .modal-content.task-edit-modal-content h3,
  .edit-task-form h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-have);
    margin: 0 0 20px 0;
  }
  .modal-content.task-edit-modal-content label,
  .modal-content.task-edit-modal-content p,
  .edit-task-form label {
    color: var(--color-accent);
  }
  .modal-content.task-edit-modal-content input,
  .modal-content.task-edit-modal-content select,
  .modal-content.task-edit-modal-content textarea,
  .edit-task-form input,
  .edit-task-form select,
  .edit-task-form textarea {
    background: var(--color-surface-2);
    color: var(--color-text);
    border-color: var(--color-accent);
  }
  .modal-content.task-edit-modal-content .form-actions button,
  .modal-content.task-edit-modal-content button[type="submit"],
  .modal-content.task-edit-modal-content button:not([type]),
  .edit-task-form .form-actions button,
  .edit-task-form button {
    background: var(--color-accent);
    color: var(--color-bg);
    border: 1px solid var(--color-accent);
  }
  .modal-content.task-edit-modal-content .form-actions button:hover,
  .modal-content.task-edit-modal-content button:hover,
  .edit-task-form button:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
  }
  /* Extra checkbox: label och checkbox på samma rad när typ är "Jag har" */
  .modal-content.task-edit-modal-content .form-group-extra label,
  .edit-task-form .form-group-extra label {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 0;
  }
  .modal-content.task-edit-modal-content .form-group-extra input[type="checkbox"],
  .edit-task-form .form-group-extra input[type="checkbox"] {
    accent-color: var(--color-accent);
  }

  /* -------------------------
     Base / Reset-ish
  -------------------------- */
   
   html, body {
     height: 100%;
     min-height: 100vh;
   }
   
   body {
     margin: 0;
     font-family: var(--font-body);
     font-weight: var(--font-body-weight);
     font-size: 16px;
     line-height: 1.65;
     color: var(--color-text);
     background: var(--color-bg);
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
   }
   
   /* Better selection (removes browser-blue feel) */
   ::selection {
     background: rgba(150, 250, 157, 0.22);
   }
   
   * { box-sizing: border-box; }
   
   img, svg {
     max-width: 100%;
     height: auto;
   }
   
   /* Stripe-like link behavior */
   a {
     color: var(--color-accent);
     text-decoration: none;
     transition: color 0.15s ease, text-decoration-color 0.15s ease;
   }
   a:hover {
     color: var(--color-accent-hover);
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-underline-offset: 3px;
   }
   a:visited { color: var(--color-accent); }
   
   /* Normalize lists (reduce Word-feel, improve rhythm) */
   ul, ol {
     padding-left: 22px;
     margin: 0 0 var(--block-gap);
   }
   li {
     margin: var(--item-gap) 0;
   }
   
   /* Dividers */
   .hr, hr {
     border: none;
     border-top: 1px solid var(--color-border);
     margin: var(--space-xl) 0;
   }
   
   /* -------------------------
      Layout normalization (fix inconsistent padding across pages)
      This is the "single source of truth" for side gutters.
   -------------------------- */
   
   /* Page-level padding (top/bottom) */
   body {
     padding-top: var(--page-pad-top);
     padding-bottom: var(--page-pad-bottom);
   }
   
   /*
     IMPORTANT:
     Many pages use .container as main wrapper. Previously it had 8px padding.
     Now we enforce consistent gutters everywhere:
   */
   .container,
   main,
   .wrapper,
   .content,
   .page,
   .page-content {
     max-width: var(--container-reading);
     margin-left: auto;
     margin-right: auto;
     padding-left: var(--gutter);
     padding-right: var(--gutter);
   }
   
   /* If you use a separate helper class somewhere */
   .reading-container {
     max-width: var(--container-reading);
     margin: 0 auto;
     padding-left: var(--gutter);
     padding-right: var(--gutter);
   }
   
   /* Queenslab container: always narrow */
   .queenslab-container,
   .container-queenslab,
   .container:has(.options) {
     max-width: var(--container-queenslab);
     margin: 0 auto;
     padding-left: var(--gutter);
     padding-right: var(--gutter);
     padding-top: 40px;   /* slightly tighter than global */
     padding-bottom: 40px;
   }
   
   /* -------------------------
      Typography / Headings
   -------------------------- */
   
   h1, h2 {
     font-family: var(--font-heading);
     color: var(--color-heading);
     margin: 0 0 var(--block-gap) 0;
   }
   
   h1 {
     font-size: clamp(34px, 3.4vw, 40px);
     font-weight: 600;
     letter-spacing: -0.02em;
     line-height: 1.15;
     margin-bottom: 16px;
   }
   
   h2 {
     font-size: clamp(22px, 2.2vw, 26px);
     font-weight: 600;
     letter-spacing: -0.01em;
     line-height: 1.2;
     margin-top: var(--section-gap);
     margin-bottom: 12px;
   }
  h2:first-of-type { margin-top: 0; }
  
  /* Start page title – same green and style as todo page h1 */
  .start-page-title {
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: bold;
    color: var(--color-heading);
    margin: 0 0 16px 0;
  }

  /* Sidintrotexter (start + todo) – samma storlek och typsnitt, större än brödtext men mindre än rubriker */
  .todo-description,
  .start-page-intro {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    line-height: 1.5;
    font-weight: 500;
    color: var(--color-accent);
  }
  .todo-description {
    margin: 0 0 1.25rem 0;
    max-width: 52ch;
  }
  .start-page-intro {
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
  }
  
  h3 {
     font-family: var(--font-body);
     font-size: 18px;
     font-weight: 600;
     margin: var(--space-lg) 0 var(--space-sm);
     color: var(--color-text);
   }
   
   p {
     margin: 0 0 var(--block-gap);
     color: var(--color-text);
     font-family: var(--font-body);
     font-weight: var(--font-body-weight);
   }
   
   small, .muted, .domain-text, .domain {
     color: var(--color-text-muted);
     font-size: 14px;
   }
   
   .domain, .domain-text {
     margin-bottom: var(--space-2xl);
   }
   
   /* -------------------------
      Inputs
   -------------------------- */
   
   input, textarea, select {
     font-family: var(--font-body);
     font-size: 16px;
     color: var(--color-text);
     background: var(--color-surface);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-sm);
     padding: 10px 12px;
     outline: none;
     transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
   }
   
  input:focus, textarea:focus, select:focus {
    border-color: rgba(253, 211, 254, 0.55);
    box-shadow: 0 0 0 4px var(--color-focus);
  }

  /* Dark inputs: off-white text; light inputs: use .light or .surface-light parent → Cloudy White bg + Royal Blue text */
  input::placeholder, textarea::placeholder {
    color: var(--color-text-muted);
  }

  /* Fix default blue checkbox/radio */
   input[type="checkbox"],
   input[type="radio"] {
     accent-color: var(--color-accent);
   }
   
   /* -------------------------
      Buttons
   -------------------------- */
   
   button,
   .button,
   .btn {
     font-family: var(--font-body);
     font-size: 16px;
     font-weight: 500;
     border-radius: var(--radius-md);
     padding: 12px 16px;
     border: 1px solid var(--color-border);
     background: var(--color-surface);
     color: var(--color-text);
     cursor: pointer;
     transition: color 0.15s ease, background-color 0.15s ease, border-color 0.2s ease,
                 box-shadow 0.2s ease, transform 0.15s ease;
   }
   
   button:hover,
   .button:hover,
   .btn:hover {
     transform: translateY(-1px);
     box-shadow: var(--shadow-md);
     border-color: rgba(242, 244, 255, 0.22);
   }
   
   button:active,
   .button:active,
   .btn:active {
     transform: translateY(0);
     box-shadow: var(--shadow-sm);
   }
   
   button:focus-visible,
   .button:focus-visible,
   .btn:focus-visible {
     outline: none;
     box-shadow: 0 0 0 4px var(--color-focus);
   }
   
   /* Primary CTA */
   .btn-primary, .primary-button {
     background: var(--color-accent);
     border-color: transparent;
     color: var(--color-bg); /* dark text on pink */
   }
   .btn-primary:hover, .primary-button:hover {
     background: var(--color-accent-hover);
   }
   
   /* Secondary outline */
   .btn-secondary, .secondary-button {
     background: transparent;
     border: 1px solid var(--color-border);
     color: var(--color-text);
   }
   .btn-secondary:hover, .secondary-button:hover {
     background: var(--color-surface);
   }
   
  /* Solid pink CTA – Lägg till + small controls (no outline; pink bg + Royal Blue text) */
  .btn-outline-teal,
  .add-want-button,
  .add-button,
  .add-task-button {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-on-light);
    background: var(--color-accent);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease,
                box-shadow 0.2s ease, transform 0.15s ease;
  }
  /* Override a:visited so link-buttons stay readable (fixes Edge: pink-on-pink = invisible) */
  a.btn-outline-teal:link,
  a.btn-outline-teal:visited {
    color: var(--color-on-light);
  }
  .btn-outline-teal:hover,
  .add-want-button:hover,
  .add-button:hover,
  .add-task-button:hover {
    color: var(--color-on-light);
    background: var(--color-accent-hover);
    border-color: transparent;
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
  }
  .add-button:disabled,
  .add-task-button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    color: var(--color-on-light);
    border-color: transparent;
    background: var(--color-accent);
    transform: none;
    box-shadow: none;
  }
   
   /* Link-like actions */
   .action-link, .link {
     color: var(--color-accent);
     font-weight: 500;
     transition: color 0.15s ease;
   }
   .action-link:hover, .link:hover {
     color: var(--color-accent-hover);
     text-decoration: underline;
     text-underline-offset: 3px;
   }
   
   /* Save button made more "button-like" */
   .save-section .action-link {
     display: inline-block;
     padding: 10px 18px;
     border-radius: var(--radius-md);
     border: 1px solid var(--color-border);
     background: var(--color-surface);
     transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
   }
   .save-section .action-link:hover {
     box-shadow: var(--shadow-md);
     border-color: rgba(242, 244, 255, 0.22);
     transform: translateY(-1px);
   }
   
   /* -------------------------
      Queenslab (role select)
   -------------------------- */
   
  .create-user-section h2 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    margin-bottom: 1.5em; /* tomrad mellan rubrik och rollmeny */
  }
   
   .options {
     display: flex;
     flex-direction: column;
     gap: var(--space-md);
   }
   
  .option-button {
    width: 100%;
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 18px 28px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-accent);
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  }
  .option-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: rgba(242, 244, 255, 0.22);
    background: var(--color-surface);
    color: var(--color-accent-hover);
  }
   
   /* Role accent (DISCREET): 3px left border (data-testid used in HTML) */
   .option-button.role-designer,
   .option-button[data-testid="role-designer"],
   .option-button.role-programmer,
   .option-button[data-testid="role-programmerare"],
   .option-button.role-sales,
   .option-button[data-testid="role-saljare"] { border-left: 3px solid var(--color-accent); }
   
   /* Generic list rows (admin etc.) */
   .user-row, .existing-user-row, .list-row {
     padding: 10px 12px;
     border-radius: var(--radius-sm);
     transition: background-color 0.15s ease;
   }
   .user-row:hover, .existing-user-row:hover, .list-row:hover {
     background: rgba(253, 211, 254, 0.10);
   }
   
   /* -------------------------
      Admin utility bar (optional)
      If you can wrap top-right links in .top-actions it becomes perfect.
   -------------------------- */
   
   .top-actions {
     display: flex;
     gap: 10px;
     justify-content: flex-end;
     align-items: center;
     margin-top: 8px;
     margin-bottom: 18px;
   }
   
   .top-actions a {
     display: inline-flex;
     align-items: center;
     padding: 8px 12px;
     border-radius: 999px;
     border: 1px solid var(--color-border);
     background: var(--color-surface);
     color: var(--color-text);
     text-decoration: none;
     transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
   }
   
   .top-actions a:hover {
     box-shadow: var(--shadow-sm);
     transform: translateY(-1px);
     border-color: rgba(242, 244, 255, 0.22);
   }
   
   /* -------------------------
      Editorial modules
   -------------------------- */
   
   .callout {
     background: var(--color-surface-2);
     border: 1px solid var(--color-border);
     border-left: 3px solid var(--color-accent);
     border-radius: var(--radius-md);
     padding: 16px 20px;
     margin: var(--space-lg) 0;
   }
   
   .pullquote {
     font-family: var(--font-heading);
     color: var(--color-heading);
     font-size: 22px;
     line-height: 1.25;
     margin: var(--space-xl) 0;
   }
   
   .metric-row {
     display: grid;
     gap: var(--space-md);
     grid-template-columns: repeat(3, minmax(0, 1fr));
     background: var(--color-surface);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
     padding: 16px 20px;
     margin: var(--space-lg) 0;
   }
   
   .metric { padding: 8px 0; }
   
   .metric .value {
     font-size: 28px;
     font-weight: 600;
     color: var(--color-text);
     line-height: 1.1;
   }
   
   .metric .label {
     font-size: 13px;
     color: var(--color-text-muted);
     margin-top: 6px;
   }
   
   @media (max-width: 720px) {
     .metric-row { grid-template-columns: 1fr; }
   }
   
   /* -------------------------
      Checklist sections
   -------------------------- */
   
   [data-section="have"] h2 { color: var(--color-have); }
   [data-section="know"] h2 { color: var(--color-know); }
   [data-section="want"] h2 { color: var(--color-want); }
   
   .checklist-section h2 {
     display: flex;
     align-items: center;
     gap: var(--space-sm);
   }
   
   .section-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 24px;
     height: 24px;
     flex-shrink: 0;
   }
   .section-icon svg {
     width: 24px;
     height: 24px;
   }
   
   /* Make sections feel less like Word: subtle panel */
   .checklist-section {
     background: var(--color-surface);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
     padding: 18px 20px;
     margin: 0 0 var(--section-gap);
   }
   @media (max-width: 480px) {
     .checklist-section { padding: 16px; }
   }
   
   /* Checklist rows – consistent click area + hover */
   .checkbox-item {
     display: grid;
     grid-template-columns: auto 1fr;
     align-items: center;
     gap: 12px;
     padding: 10px 10px;
     border-radius: var(--radius-sm);
     cursor: pointer;
     transition: background-color 0.15s ease;
   }
   .checkbox-item:hover {
     background: rgba(253, 211, 254, 0.10);
   }
   .checkbox-item input[type="checkbox"] {
     margin: 0 !important;
     flex-shrink: 0;
     cursor: pointer;
     align-self: center;
   }
   .checkbox-item .checkbox-label {
     display: flex;
     align-items: center;
     min-height: var(--checkbox-size, 18px);
   }
   
   /* Add-want section: input + OK button (start page) */
   .add-want-section {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-top: 12px;
   }
   .add-want-section input {
     flex: 1;
     min-width: 0;
     max-width: 100%;
     padding: 10px 14px;
     border: 1px solid var(--color-input-border);
     border-radius: var(--radius-sm);
     font-size: 16px;
   }
   
   /* Activity items */
   .activity-item {
     padding: 10px 10px;
     border-radius: var(--radius-sm);
     transition: background-color 0.15s ease;
   }
  .activity-item:hover {
    background: rgba(253, 211, 254, 0.10);
  }
   
   /* Edit pencil next to "Jag vill" tasks (start page) */
   .activity-edit-pencil {
     flex: 0 0 auto;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 22px;
     height: 22px;
     padding: 0;
     margin-left: 6px;
     background: transparent;
     border: none;
     border-radius: 2px;
     cursor: pointer;
     color: #fff;
     transition: opacity 0.15s ease;
   }
   .activity-edit-pencil:hover {
     opacity: 0.85;
   }
   .activity-edit-pencil:focus-visible {
     outline: 2px solid rgba(255, 255, 255, 0.6);
     outline-offset: 2px;
   }
   .activity-edit-pencil svg {
     width: 14px;
     height: 14px;
     display: block;
   }
   
   /* Todo list items */
   .todo-item {
     padding: 10px 10px;
     border-radius: var(--radius-sm);
     transition: background-color 0.15s ease;
   }
   .todo-item:hover {
     background: rgba(253, 211, 254, 0.10);
   }
   
   /* Done state: softer strike-through */
   .is-done,
   .done,
   .completed {
     color: rgba(242, 244, 255, 0.55);
     text-decoration-color: rgba(242, 244, 255, 0.28);
   }
   
   /* -------------------------
      Progress bar (Stripe-like)
   -------------------------- */
   
   .progress-bar {
     height: 5px;
     border-radius: 999px;
     background: rgba(242, 244, 255, 0.16);
     overflow: hidden;
     margin: 14px 0 28px;
   }
   
   .progress-fill,
   .progress-bar-fill {
     height: 100%;
     width: 0%;
     border-radius: 999px;
     background: var(--chart-gradient);
     transition: width 0.3s ease;
   }
   
   /* -------------------------
      Small warning blocks
   -------------------------- */
   
   .warning, .alert-warning {
     background: var(--color-warning-bg);
     color: var(--color-warning-text);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
     padding: 12px 14px;
   }
   
   /* -------------------------
      Optional: watermark crowns (if applicable)
      Make decorative crowns barely visible (McKinsey/Stripe discipline).
      Adjust selector to your actual crown elements if needed.
   -------------------------- */
   
   .crown, .crown-watermark, .watermark-crown {
     opacity: 0.06;
     filter: blur(0.2px);
   }
   
   /* =========================================================
      PATCH v2 – Robust width + todo inset + admin margins
      Paste at END (overrides previous FINAL PATCH)
      ========================================================= */
   
   /* ---------- Tokens ---------- */
   :root{
     /* Wider app layouts */
     --container-ui: 1120px;      /* start + todo */
     --container-admin: 1400px;   /* admin + masteradmin dashboard (1200–1400px) */
     --gutter-ui: 28px;           /* normal side padding on wide pages */
     --gutter-admin: 28px;        /* side padding on admin pages (24–32px) */
   
     /* Panel + row insets (fix: checkbox too close to border) */
     --panel-pad-x: 28px;
     --panel-pad-y: 22px;
     --row-pad-x: 16px;
     --row-pad-y: 12px;
   
     /* Checkbox */
     --checkbox-size: 18px;
     --checkbox-nudge: 3px;
   }
   
   /* ---------- 1) Make START + TODO use screen width better ---------- */
   /* Detect via content; if :has not supported, nothing breaks */
   .container:has(.checklist-section),
   .container:has(.todo-list),
   .container:has(.progress-bar),
   main:has(.checklist-section),
   main:has(.todo-list),
   main:has(.progress-bar){
     max-width: var(--container-ui) !important;
   }
   
   /* Use a single gutter for these pages */
   .container:has(.checklist-section),
   .container:has(.todo-list),
   .container:has(.progress-bar),
   main:has(.checklist-section),
   main:has(.todo-list),
   main:has(.progress-bar){
     padding-left: var(--gutter-ui) !important;
     padding-right: var(--gutter-ui) !important;
   }
   
   /* ---------- 2) ADMIN: reduce side margins + increase max width ---------- */
   /* Works without HTML classes by matching typical admin elements you already show */
   /* Add more selectors here if you have unique admin wrappers */
   .container:has(a[href*="/admin"]),
   main:has(a[href*="/admin"]),
   .container:has(.top-actions),
   main:has(.top-actions),
   .container:has(button:where(.edit-button,.delete-button,.save-button)),
   main:has(button:where(.edit-button,.delete-button,.save-button)),
   .container:has(#userInvitesList){
     max-width: var(--container-admin) !important;
     padding-left: var(--gutter-admin) !important;
     padding-right: var(--gutter-admin) !important;
   }
   
   /* If you CAN add a class in HTML later, this becomes the clean “official” switch */
   /* Main page title only – first heading on each page (36px) */
   body.admin-page .container .header h1,
   body.admin-page .container .admin-page-header h1,
   body.admin-page .container > h2.category-title,
   .container > .todo-title-row h1 {
     font-size: 36px !important;
     font-weight: bold;
   }

  body.admin-page .container,
  body.admin-page main,
  .admin-container{
    max-width: var(--container-admin) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--gutter-admin) !important;
    padding-right: var(--gutter-admin) !important;
  }

  /* ---------- Admin/Masteradmin: fixed tab-like menu layout ---------- */
  /* Order: h1 → section-intro → admin-nav (same position on all pages) */
  /* min-height prevents layout shift (jumpiness) when navigating between pages */
  body.admin-page .admin-page-header {
    margin-bottom: 0;
    min-height: 240px;
  }
  body.admin-page .admin-page-title {
    font-size: 36px !important;
    font-weight: bold;
    margin: 0 0 16px 0;
    font-family: var(--font-heading);
    color: var(--color-heading);
    min-height: 44px;
  }
  body.admin-page .admin-page-header .section-intro {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-accent);
    font-family: var(--font-body);
    margin: 0 0 24px 0;
    max-width: 720px;
    min-height: 48px;
  }
  body.admin-page .admin-page-header .section-intro.section-intro-narrow {
    max-width: 680px;
  }
  body.admin-page .admin-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    min-height: 54px;
    margin-top: 20px;
    margin-bottom: 32px;
    padding: 0;
  }
  body.admin-page .admin-nav-tabs {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
  }
  /* Actions (Byt lösenord, Logga ut) – link style, right-aligned */
  body.admin-page .admin-nav-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-left: auto;
  }
  body.admin-page .admin-nav-actions a,
  body.admin-page .admin-nav-actions button {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-accent);
    background: none;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease;
  }
  body.admin-page .admin-nav-actions a:hover,
  body.admin-page .admin-nav-actions button:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  /* Nav items: outline by default, filled when active */
  body.admin-page .admin-nav-tabs .btn-admin-nav {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-accent);
    background: transparent;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  }
  body.admin-page .admin-nav-tabs a.btn-admin-nav:hover {
    background: rgba(253, 211, 254, 0.15);
    color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
  }
  body.admin-page .admin-nav-tabs .btn-admin-nav.active {
    background: var(--color-accent);
    color: var(--color-on-light);
    border-color: transparent;
    cursor: default;
  }
  body.admin-page .admin-nav-tabs .btn-admin-nav.active:hover {
    background: var(--color-accent);
    color: var(--color-on-light);
  }
  
  /* Admin login card: keep narrow; overrides general .admin-container */
   body:has(.login-form) .admin-container {
     max-width: 440px !important;
   }
   
   /* ---------- 3) Checkbox size + baseline alignment (everywhere) ---------- */
   input[type="checkbox"]{
     width: var(--checkbox-size);
     height: var(--checkbox-size);
     flex: 0 0 var(--checkbox-size);
     margin: 0;
     margin-top: var(--checkbox-nudge);
     vertical-align: top;
     accent-color: var(--color-accent);
   }
   
   /* Ensure rows align nicely */
   .todo-item,
   .activity-item,
   h2 + ul li,
   h3 + ul li{
     display: flex;
     align-items: flex-start;
     gap: 12px;
   }
   /* Todo + activity items: center content vertically */
   .todo-item,
   .activity-item {
     align-items: center;
   }
   .todo-item input[type="checkbox"] {
     margin-top: 0 !important;
   }
   
   /* ---------- 4) TODO panels: guaranteed inset + remove list indentation ---------- */
   /* The big fix: UL default padding creates “border hugs checkbox”. Kill it everywhere inside panels. */
   .todo-list,
   .todo-list ul,
   .checklist-section ul,
   .checklist-section ol{
     padding-left: 0 !important;
     margin-left: 0 !important;
   }
   
   /* If todo section is any UL that is inside container (common pattern) */
   .container ul {
     list-style-type: inherit;
     /* don’t globally kill all lists’ padding – only when they are clearly “task lists” */
   }
   
   /* Style the TODO section rectangle like Start panels, even if it’s just an UL */
   h2 + ul,
   h3 + ul,
   .todo-list{
     background: var(--color-surface);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
     padding: var(--panel-pad-y) var(--panel-pad-x) !important;
     margin: 0 0 var(--section-gap);
     list-style: none;
   }
   
   /* Stronger: if UL is inside a “todo area” wrapper, give it same panel styling */
   .container:has(.todo-item) ul{
     list-style: none;
   }
   .container:has(.todo-item) ul{
     background: var(--color-surface);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
     padding: var(--panel-pad-y) var(--panel-pad-x) !important;
   }
   
   /* Rows inside todo panels: proper inset so checkbox never hugs border */
   h2 + ul li,
   h3 + ul li,
   .todo-list li,
   .todo-item{
     padding: var(--row-pad-y) var(--row-pad-x) !important;
     margin: 0 !important;
     border-radius: var(--radius-sm);
     transition: background-color 0.15s ease;
   }
   h2 + ul li:hover,
   h3 + ul li:hover,
   .todo-list li:hover,
   .todo-item:hover{
     background: rgba(253, 211, 254, 0.10);
   }
   
   /* ---------- 5) “Jag vill” button spacing (if rows are flex) ---------- */
   .want-row,
   .want-item,
   .activity-row{
     display: flex;
     align-items: flex-start;
     gap: 14px;
   }
   .want-row button,
   .want-item button,
   .activity-row button{
     flex: 0 0 auto;
     margin-top: 2px;
   }
   
   /* ---------- 6) Chart: make it feel less “underwhelming” (CSS-only) ---------- */
   /* Without HTML hook we can at least ensure it’s centered and framed */
   .container > svg,
   .container > canvas{
     width: 100% !important;
     max-width: 100% !important;
     display: block;
     background: var(--color-surface);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
     padding: 18px;
     margin: 18px 0 var(--section-gap);
   }
   
   /* ---------- 7) Minor rhythm: keep calm separation ---------- */
   .checklist-section{ margin-bottom: var(--section-gap); }
   h1{ margin-bottom: 20px; }
   h2{ margin-top: var(--section-gap); margin-bottom: 14px; }
   
   /* =========================================================
      TODO Progress Metric (ADRENALIN – stor, markant, milstolpar)
      ========================================================= */
   
   .progress-hero {
     margin-bottom: var(--space-lg);
   }
   
   .progress-card{
     position: relative;
     display: flex;
     flex-direction: column;
     gap: 16px;
     width: 100%;
   
     background: var(--color-surface);
     border: 1px solid var(--color-border);
     border-radius: 16px;
   
     padding: 24px 28px;
   
     box-shadow: var(--shadow-md);
   }
   
   .progress-row{
     display: flex;
     align-items: baseline;
     justify-content: flex-start;
     gap: 12px;
   }
   
   .progress-value{
     font-family: var(--font-heading);
     font-size: clamp(64px, 10vw, 96px);
     font-weight: 700;
     letter-spacing: -0.03em;
     line-height: 1;
     color: var(--color-know);
     text-shadow: 0 0 24px rgba(253, 211, 254, 0.35);
   }
   
   .progress-text{
     font-size: 18px;
     color: var(--color-text-muted);
     transform: translateY(-4px);
     font-weight: 500;
   }
   
   .progress-bar-track{
     position: relative;
     height: 18px;
     background: rgba(242, 244, 255, 0.12);
     border-radius: 999px;
     overflow: visible;
   }
   
   .progress-bar-fill{
     height: 100%;
     width: 0%;
     border-radius: 999px;
     background: var(--chart-gradient);
     box-shadow: 0 0 16px rgba(150, 250, 157, 0.4), 0 0 8px rgba(253, 211, 254, 0.3);
     transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
   
   .progress-milestones{
     position: absolute;
     inset: 0;
     pointer-events: none;
   }
   
   .progress-milestones .milestone{
     position: absolute;
     top: -2px;
     width: 2px;
     height: 22px;
     background: rgba(242, 244, 255, 0.45);
     border-radius: 1px;
     transform: translateX(-50%);
   }
   
   .progress-toast{
     position: absolute;
     bottom: -8px;
     left: 50%;
     transform: translateX(-50%) translateY(100%);
     padding: 8px 20px;
     background: var(--color-have);
     color: var(--color-on-light);
     font-family: var(--font-heading);
     font-size: 18px;
     font-weight: 600;
     border-radius: 999px;
     box-shadow: var(--shadow-md);
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
     z-index: 10;
   }
   
   .progress-toast.visible{
     opacity: 1;
     visibility: visible;
     transform: translateX(-50%) translateY(0);
   }
   
   .progress-next-milestone{
     margin: 12px 0 0 0;
     font-size: 16px;
     font-family: var(--font-heading);
     font-weight: 600;
     color: var(--color-know);
   }
   
   .todo-title-row{
     align-items: baseline;
   }
   
   @media (max-width: 480px) {
     .progress-card { padding: 20px 20px; gap: 14px; }
     .progress-value { font-size: 56px; }
     .progress-bar-track { height: 14px; }
     .progress-milestones .milestone { height: 18px; }
   }
   
   /* =========================================================
      Shared confirm / alert modal (replaces browser confirm/alert)
      ========================================================= */
   .app-modal-overlay {
     position: fixed;
     inset: 0;
     background: rgba(16, 18, 35, 0.55);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 10000;
     padding: var(--gutter, 24px);
     font-family: var(--font-body);
   }
   .app-modal {
     background: var(--color-surface, #2B3463);
     color: var(--color-text, #F2F4FF);
     border-radius: var(--radius-lg, 16px);
     box-shadow: var(--shadow-md, 0 10px 24px rgba(16, 18, 35, 0.40));
     max-width: 420px;
     width: 100%;
     padding: var(--space-lg, 24px);
   }
   .app-modal-title {
     font-family: var(--font-heading);
     font-size: 1.25rem;
     font-weight: 600;
     color: var(--color-heading, #96FA9D);
     margin: 0 0 0.5rem 0;
   }
   .app-modal-message {
     font-size: 1rem;
     line-height: 1.5;
     color: var(--color-text);
     margin: 0 0 1.5rem 0;
   }
   .app-modal-actions {
     display: flex;
     gap: 12px;
     justify-content: flex-end;
     flex-wrap: wrap;
   }
   .app-modal-btn {
     font-family: var(--font-body);
     font-size: 1rem;
     padding: 10px 20px;
     border-radius: var(--radius-sm, 8px);
     cursor: pointer;
     border: 1px solid var(--color-border, rgba(242, 244, 255, 0.14));
     background: var(--color-surface-2, #313C72);
     color: var(--color-text);
     transition: background 0.15s, border-color 0.15s;
   }
   .app-modal-btn:hover {
     background: rgba(242, 244, 255, 0.12);
   }
   .app-modal-btn-primary {
     background: var(--color-accent, #FDD3FE);
     color: var(--color-bg, #232A52);
     border-color: var(--color-accent);
   }
   .app-modal-btn-primary:hover {
     background: var(--color-accent-hover, #F7A8FA);
     border-color: var(--color-accent-hover);
   }
   .app-modal-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
   .app-modal-reset-input {
     font-family: var(--font-body);
     font-size: 1rem;
     border: 1px solid var(--color-border, rgba(242, 244, 255, 0.14));
     border-radius: var(--radius-sm, 8px);
     background: var(--color-surface);
     color: var(--color-text);
   }
   
  /* Add-idea + Personligt Anteckningsblock (todo page): team color + consistent section gap */
  .add-idea-section {
    margin-top: var(--section-gap);
  }
  .idea-notes-section {
    margin-top: calc(var(--section-gap) + 12px);
    padding: var(--panel-pad-y, 18px) var(--panel-pad-x, 28px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }
  .idea-notes-section__title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-accent) !important;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 var(--space-sm) 0;
    cursor: default;
  }
  .idea-notes-section__title .section-icon {
    color: var(--color-accent) !important;
  }
  .idea-notes-section textarea {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
  }

  /* Footer help lines (todo-admin-help, reset-profile-line) – same size and spacing */
  .todo-admin-help,
  .reset-profile-line {
    margin-top: 1.5rem;
    font-size: 0.9rem;
  }
  .reset-profile-line {
    margin-bottom: 1rem;
  }
  .container:has(.reset-profile-line) {
    padding-bottom: 1rem;
  }

  /* Muted links in footer help – consistent styling */
  .reset-profile-link,
  .footer-help-link {
    font-size: inherit;
    color: inherit;
    text-decoration: none;
  }
  .reset-profile-link:hover,
  .footer-help-link:hover {
    text-decoration: underline;
    color: var(--color-accent);
  }
  .footer-help-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }