/* global-chrome.css - styling for det delte chrome-modul (global-chrome.js)
 *
 * KUN det NYE der ikke findes i ccm-sidebar.css: profil-tilens klasser
 * (.sb-profile*) bor i ccm-sidebar.css og duplikeres IKKE her - produktet
 * SKAL loade ccm-sidebar.css sammen med denne fil.
 *
 * Alt er scopet under .gc-chrome så intet lækker ind i produkternes egne
 * sidebars. Ikon-maskerne (.gc-chrome .ic-*) er scoped KOPIER af husets
 * ikon-system (i.ic + mask-image, jf. canvas-inline-base.css:444 og
 * workspace-inline.css .ic-gear/.ic-moon/.ic-lock) - nødvendige fordi
 * Planner/HRM ikke loader de layout-filer hvor maskerne ellers bor.
 * Samme navn = samme maske → ingen konflikt hvor begge er loadet.
 *
 * Tokens: dual-token-fallbacks som ccm-sidebar.css (var(--x, var(--color-x,
 * <fallback>))) så det virker i alle 4 produkters token-systemer. */

/* ── Ikon-base (scoped kopi af i.ic) ── */
.gc-chrome .ic {
    display: inline-flex;
    width: 1em; height: 1em;
    vertical-align: -.15em;
    background: currentColor;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    flex-shrink: 0;
}

/* ── Ikon-masker (fill-baserede = kopi fra workspace-inline.css) ── */
.gc-chrome .ic-gear{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.49.49 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.gc-chrome .ic-moon{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 109 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 01-4.4 2.26 5.403 5.403 0 01-3.14-9.8c-.44-.06-.9-.1-1.36-.1z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.gc-chrome .ic-lock{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}

/* ── Ikon-masker (stroke-baserede, nye - sun/logout/user/chevron) ── */
.gc-chrome .ic-sun{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.gc-chrome .ic-logout{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.gc-chrome .ic-user{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.gc-chrome .ic-chev-r{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}

/* ── Bund-container (delt sidebar-bund) ── */
.gc-bottom {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    margin-top: auto;
    border-top: 1px solid var(--border, var(--color-border, rgba(120,130,150,.18)));
    padding-top: 8px;
}

/* ── Menu-/action-rækker (spejler .ccm-sb-btn i ccm-sidebar.css) ── */
.gc-chrome .gc-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 7px 10px;
    background: transparent; border: none; border-radius: 8px;
    color: var(--text-2, var(--color-text-2, #5a647a));
    font-size: .78rem; font-weight: 500; font-family: inherit;
    cursor: pointer; text-align: left; text-decoration: none;
    transition: background .15s, color .15s;
    box-sizing: border-box;
}
.gc-chrome .gc-item:hover {
    background: var(--surface, var(--color-surface, rgba(120,130,150,.08)));
    color: var(--text-1, var(--color-text-1, #0e1320));
}
.gc-chrome .gc-item .ic { width: 16px; height: 16px; }
.gc-chrome .gc-item__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Log ud - danger-tone som husets logout-menupunkter */
.gc-chrome .gc-logout { color: var(--color-danger, var(--red, #e0392b)); }
.gc-chrome .gc-logout:hover {
    background: color-mix(in srgb, var(--color-danger, var(--red, #e0392b)) 10%, transparent);
    color: var(--color-danger, var(--red, #e0392b));
}

/* ── Tema-toggle: sol vises i dark (→ skift til lyst), måne i light ── */
.gc-chrome .gc-theme-toggle .ic-sun,
.gc-chrome .gc-theme-toggle .ic-moon { display: none; }
.gc-chrome .gc-theme-toggle[data-gc-theme="dark"] .ic-sun { display: inline-flex; }
.gc-chrome .gc-theme-toggle[data-gc-theme="light"] .ic-moon { display: inline-flex; }
/* Før bindToggle har sat data-gc-theme: vis månen som neutral default */
.gc-chrome .gc-theme-toggle:not([data-gc-theme]) .ic-moon { display: inline-flex; }

/* ── Profil-tile-tillæg (basen bor i ccm-sidebar.css .sb-profile*) ── */
.gc-chrome .gc-profile-slot { position: relative; }
.gc-chrome .gc-profile { width: 100%; }
.gc-chrome .gc-avatar img,
.gc-chrome .gc-avatar canvas { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.gc-chrome .gc-avatar-px { image-rendering: pixelated; }
.gc-chrome .gc-chev { width: 14px; height: 14px; margin-left: auto; opacity: .5; color: var(--text-3, var(--color-text-3, #7a849a)); }

/* ── Popup-menu på profil-tilen ── */
.gc-chrome .gc-menu {
    position: absolute;
    left: 8px; right: 8px;
    bottom: calc(100% + 6px);
    min-width: 180px;
    background: var(--card-solid, var(--card, var(--color-card, #fff)));
    border: 1px solid var(--border, var(--color-border, rgba(120,130,150,.18)));
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
    padding: 4px;
    z-index: 300;
    overflow: hidden;
}
.gc-chrome .gc-menu[hidden] { display: none; }
.gc-chrome .gc-menu__item {
    display: flex; align-items: center; gap: 9px;
    width: 100%; padding: 8px 10px;
    background: transparent; border: none; border-radius: 8px;
    color: var(--text-1, var(--color-text-1, #0e1320));
    font-size: .76rem; font-weight: 600; font-family: inherit;
    cursor: pointer; text-align: left; text-decoration: none;
    transition: background .15s;
    box-sizing: border-box;
}
.gc-chrome .gc-menu__item:hover {
    background: var(--surface, var(--color-surface, rgba(120,130,150,.08)));
}
.gc-chrome .gc-menu__item .ic { width: 15px; height: 15px; color: var(--text-2, var(--color-text-2, #5a647a)); }

/* ── Privacy-badge (valgfri, diskret) ── */
.gc-chrome .gc-privacy {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px 2px;
    color: var(--text-3, var(--color-text-3, #7a849a));
    font-size: .6rem; font-weight: 600;
    letter-spacing: .3px; text-transform: uppercase;
}
.gc-chrome .gc-privacy .ic { width: 11px; height: 11px; }

/* ── Collapsed-sidebar-støtte (matcher .ccm-sb.collapsed-mønstret) ── */
.ccm-sb.collapsed .gc-item .gc-item__label,
.ccm-sb.collapsed .gc-privacy span { display: none; }
.ccm-sb.collapsed .gc-item { justify-content: center; }
.ccm-sb.collapsed:hover .gc-item .gc-item__label,
.ccm-sb.collapsed:hover .gc-privacy span { display: block; }
.ccm-sb.collapsed:hover .gc-item { justify-content: flex-start; }