/* =============================================================================
   amadee CRM - Anwendungsrahmen (template.xhtml)

   Kopfzeile mit Modulleiste, Seitenleiste des aktuellen Moduls, Seitenkopf und
   Inhalt. Klassen nach BEM: Block cm-topbar, Element cm-topbar__brand, Zustand
   is-active. Werte nur über Tokens (tokens.css).

   Modulfarbe: Das Template setzt am <body> die Klasse cm-module--<key>; die setzt
   --cm-module-color, das Modulleiste und Seitenleiste für den Akzent verwenden.
   ============================================================================= */

body.cm-module--contacts { --cm-module-color: var(--cm-module-contacts); }
body.cm-module--cash     { --cm-module-color: var(--cm-module-cash); }
body.cm-module--support  { --cm-module-color: var(--cm-module-support); }
body.cm-module--admin    { --cm-module-color: var(--cm-module-admin); }
body.cm-module--start    { --cm-module-color: var(--cm-module-start); }
body.cm-module--todo     { --cm-module-color: var(--cm-module-todo); }
body.cm-module--calendar { --cm-module-color: var(--cm-module-calendar); }

body {
    --cm-module-color: var(--cm-accent);
    margin: 0;
}

/* --- Kopfzeile --- */

/* Klebt oben, damit die Navigation beim Scrollen langer Tabellen (Übersicht, Journal)
   erreichbar bleibt. z-index über dem Sticky-Tabellenkopf (der liegt auf 10). */
.cm-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: stretch;
    gap: var(--cm-space-5);
    min-height: var(--cm-topbar-height);
    padding: 0 var(--cm-space-4);
    background: var(--cm-topbar-bg);
    color: var(--cm-topbar-fg);
    box-shadow: var(--cm-shadow-sm);
}

.cm-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--cm-space-2);
    color: var(--cm-topbar-fg);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
}

.cm-topbar__logo {
    height: 22px;
    display: block;
}

.cm-topbar__product {
    padding-left: var(--cm-space-2);
    border-left: 1px solid var(--cm-topbar-muted);
    letter-spacing: .02em;
}

.cm-topbar__spacer {
    flex: 1;
}

/* --- Modulleiste --- */

.cm-modules {
    display: flex;
    align-items: stretch;
    gap: var(--cm-space-1);
    overflow-x: auto;
    flex-shrink: 0; /* with little space the search field shrinks first */
}

.cm-modules__item {
    display: inline-flex;
    align-items: center;
    gap: var(--cm-space-2);
    padding: 0 var(--cm-space-3);
    color: var(--cm-topbar-muted);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    border-top: 3px solid transparent;
}

.cm-modules__item:hover {
    color: var(--cm-topbar-fg);
    background: var(--cm-topbar-hover-bg);
}

.cm-modules__item.is-active {
    color: var(--cm-topbar-fg);
    border-bottom-color: var(--cm-module-color);
}

.cm-modules__dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--cm-item-color, var(--cm-topbar-muted));
}

.cm-modules__item--contacts { --cm-item-color: var(--cm-module-contacts); }
.cm-modules__item--cash     { --cm-item-color: var(--cm-module-cash); }
.cm-modules__item--support  { --cm-item-color: var(--cm-module-support); }
.cm-modules__item--admin    { --cm-item-color: var(--cm-module-admin); }
.cm-modules__item--start    { --cm-item-color: var(--cm-module-start); }
.cm-modules__item--todo     { --cm-item-color: var(--cm-module-todo); }
.cm-modules__item--calendar { --cm-item-color: var(--cm-module-calendar); }

/* Module ohne Text rechts oben (Stammdaten als Zahnrad), siehe AppModule.isIconOnly */
.cm-topbar__tools {
    display: flex;
    align-items: center;
    gap: var(--cm-space-1);
    margin-right: var(--cm-space-3);
}

.cm-topbar__icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    align-self: center;
    border-radius: 50%;
    color: var(--cm-topbar-muted);
    font-size: 1.15rem;
    text-decoration: none;
}

.cm-topbar__icon-link:hover,
.cm-topbar__icon-link:focus-visible {
    color: var(--cm-topbar-fg);
    background: var(--cm-topbar-hover-bg);
}

.cm-topbar__icon-link.is-active {
    color: var(--cm-topbar-fg);
    box-shadow: inset 0 0 0 2px var(--cm-module-color);
}

/* nur für Screenreader sichtbar */
.cm-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* --- Benutzer rechts oben --- */

.cm-user {
    display: flex;
    align-items: center;
    gap: var(--cm-space-3);
}

.cm-user__name {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    font-size: var(--cm-font-size-sm);
    text-align: right;
}

.cm-user__roles {
    color: var(--cm-topbar-muted);
    font-size: var(--cm-font-size-xs);
}


/* Abmelden: a <button> styled like .cm-topbar__icon-link - reset the browser defaults */
.cm-topbar__logout {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* --- Seitenleiste + Inhalt --- */

.cm-layout {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - var(--cm-topbar-height));
}

.cm-sidebar {
    flex: 0 0 var(--cm-sidebar-width);
    background: var(--cm-sidebar-bg);
    border-right: 1px solid var(--surface-border);
    padding: var(--cm-space-4) var(--cm-space-2);
}

/* Die Seitenleiste wandert mit, solange sie kürzer ist als das Fenster. */
.cm-sidebar__inner {
    position: sticky;
    top: calc(var(--cm-topbar-height) + var(--cm-space-4));
}

.cm-sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 var(--cm-space-3) var(--cm-space-2);
}

.cm-sidebar__toggle {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--cm-radius-sm);
    background: transparent;
    color: var(--text-color-secondary);
    cursor: pointer;
}

.cm-sidebar__toggle:hover {
    background: var(--surface-hover);
    border-color: var(--surface-border);
}

.cm-sidebar__module {
    display: flex;
    align-items: center;
    gap: var(--cm-space-2);
    font-size: var(--cm-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-color-secondary);
}

.cm-sidebar__module::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--cm-module-color);
}

.cm-sidebar__group {
    margin: var(--cm-space-3) var(--cm-space-2) var(--cm-space-1);
    font-size: var(--cm-font-size-xs);
    font-weight: 600;
    color: var(--text-color-secondary);
}

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

.cm-sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--cm-space-2);
    padding: .4rem var(--cm-space-3);
    border-radius: var(--cm-radius-sm);
    color: var(--text-color);
    text-decoration: none;
}

.cm-sidebar__link .pi {
    width: 1rem;
    color: var(--text-color-secondary);
    font-size: .9rem;
}

.cm-sidebar__link:hover {
    background: var(--surface-hover);
}

.cm-sidebar__link.is-active {
    background: var(--cm-sidebar-active-bg);
    color: var(--cm-sidebar-active-fg);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--cm-module-color);
}

.cm-sidebar__link.is-active .pi {
    color: var(--cm-sidebar-active-fg);
}

.cm-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* --- Seitenkopf --- */

.cm-page-header {
    padding: var(--cm-space-4) var(--cm-space-5) 0;
}

.cm-page-header__module {
    font-size: var(--cm-font-size-xs);
    color: var(--text-color-secondary);
}

.cm-page-header__title {
    margin: var(--cm-space-1) 0 0;
    font-size: var(--cm-font-size-h1);
    font-weight: 600;
    color: var(--text-color);
}

/* Seiteninhalt mit definiertem Rand */
.cm-container {
    flex: 1;
    padding: var(--cm-space-4) var(--cm-space-5);
}

.cm-footer {
    padding: var(--cm-space-3) var(--cm-space-5);
    color: var(--text-color-secondary);
    font-size: var(--cm-font-size-xs);
}

/* Login und 2FA: ohne Kopfzeile und Seitenleiste */
.cm-layout--bare {
    min-height: 100vh;
}

.cm-layout--bare .cm-container {
    padding: 0;
}

/* --- Eingeklappte Seitenleiste: nur Symbole (cm.js, cmToggleSidebar) --- */

.cm-sidebar-collapsed .cm-sidebar {
    flex-basis: 52px;
    padding-left: var(--cm-space-1);
    padding-right: var(--cm-space-1);
}

.cm-sidebar-collapsed .cm-sidebar__head {
    justify-content: center;
    margin-left: 0;
}

.cm-sidebar-collapsed .cm-sidebar__module,
.cm-sidebar-collapsed .cm-sidebar__link span {
    display: none;
}

.cm-sidebar-collapsed .cm-sidebar__toggle .pi {
    transform: rotate(180deg);
}

/* Gruppenüberschrift wird zum Trennstrich */
.cm-sidebar-collapsed .cm-sidebar__group {
    height: 0;
    margin: var(--cm-space-2) var(--cm-space-2);
    border-top: 1px solid var(--surface-border);
    overflow: hidden;
}

.cm-sidebar-collapsed .cm-sidebar__link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* --- Schmale Fenster: Seitenleiste wird zur waagerechten Leiste über dem Inhalt --- */

@media (max-width: 900px) {
    .cm-topbar {
        flex-wrap: wrap;
        gap: var(--cm-space-2);
    }

    .cm-user__name {
        display: none;
    }

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

    .cm-sidebar {
        flex: none;
        border-right: 0;
        border-bottom: 1px solid var(--surface-border);
        padding: var(--cm-space-2);
        overflow-x: auto;
    }

    .cm-sidebar__inner {
        position: static;
    }

    .cm-sidebar__module,
    .cm-sidebar__group {
        display: none;
    }

    .cm-sidebar__inner,
    .cm-sidebar__list {
        display: flex;
        gap: var(--cm-space-1);
        width: max-content;
    }

    .cm-sidebar__link {
        white-space: nowrap;
    }

    .cm-page-header,
    .cm-container {
        padding-left: var(--cm-space-4);
        padding-right: var(--cm-space-4);
    }
}

/* Name und Avatar oben rechts führen zu „Mein Konto“ */
.cm-user__account {
    display: flex;
    align-items: center;
    gap: var(--cm-space-3);
    color: inherit;
    text-decoration: none;
    padding: var(--cm-space-1) var(--cm-space-2);
    border-radius: var(--cm-radius-sm);
}

.cm-user__account:hover {
    background: var(--cm-topbar-hover-bg);
}

/* Zahl hinter einem Menüpunkt, z. B. „Anrufe (3)“ */
.cm-sidebar__badge {
    margin-left: var(--cm-space-1);
    color: var(--text-color-secondary);
    font-weight: 600;
}

/* --- Globale Suche in der Kopfleiste (cm.js, core.search) --- */

.cm-gsearch {
    position: relative;
    display: flex;
    align-items: center;
    align-self: center;
    flex: 0 1 18rem;
    min-width: 8rem;
}

.cm-gsearch__icon {
    position: absolute;
    left: var(--cm-space-3);
    color: var(--cm-topbar-muted);
    pointer-events: none;
}

/* doppelte Klasse: schlägt allgemeine input-Regeln des Themes (Abstand, Schriftgröße) */
.cm-gsearch .cm-gsearch__input {
    width: 100%;
    height: 34px;
    padding: 0 4.2rem 0 2.2rem;
    border: 1px solid transparent;
    border-radius: var(--cm-radius-sm);
    background: var(--cm-topbar-hover-bg);
    color: var(--cm-topbar-fg);
    font: inherit;
    font-size: var(--cm-font-size-sm);
    outline: none;
}

.cm-gsearch__input::placeholder {
    color: var(--cm-topbar-muted);
}

.cm-gsearch .cm-gsearch__input:focus {
    background: var(--surface-card);
    color: var(--text-color);
    border-color: var(--cm-topbar-muted);
}

.cm-gsearch__input:focus::placeholder {
    color: var(--text-color-secondary);
}

.cm-gsearch__key {
    position: absolute;
    right: var(--cm-space-2);
    padding: 0 var(--cm-space-1);
    border: 1px solid var(--cm-topbar-muted);
    border-radius: 4px;
    color: var(--cm-topbar-muted);
    font-family: inherit;
    font-size: var(--cm-font-size-xs);
    pointer-events: none;
}

.cm-gsearch__input:focus ~ .cm-gsearch__key {
    display: none;
}

.cm-gsearch__results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 24rem;
    max-height: min(70vh, 34rem);
    overflow-y: auto;
    padding: var(--cm-space-1) 0;
    border: 1px solid var(--surface-border);
    border-radius: var(--cm-radius-sm);
    background: var(--surface-card);
    color: var(--text-color);
    box-shadow: var(--cm-shadow-md);
    z-index: 1100;
}

.cm-gsearch__results[hidden] {
    display: none;
}

.cm-gsearch__group {
    padding: var(--cm-space-2) var(--cm-space-3) var(--cm-space-1);
    color: var(--text-color-secondary);
    font-size: var(--cm-font-size-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cm-gsearch__hit {
    display: flex;
    align-items: center;
    gap: var(--cm-space-3);
    padding: var(--cm-space-2) var(--cm-space-3);
    color: inherit;
    text-decoration: none;
}

.cm-gsearch__hit:hover,
.cm-gsearch__hit.is-active {
    background: var(--surface-hover);
}

.cm-gsearch__hit-icon {
    color: var(--text-color-secondary);
}

.cm-gsearch__hit-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cm-gsearch__hit-title,
.cm-gsearch__hit-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-gsearch__hit-sub {
    color: var(--text-color-secondary);
    font-size: var(--cm-font-size-xs);
}

.cm-gsearch__all {
    margin-top: var(--cm-space-1);
    border-top: 1px solid var(--surface-border);
    color: var(--primary-color);
    font-size: var(--cm-font-size-sm);
}

.cm-gsearch__empty {
    padding: var(--cm-space-3);
    color: var(--text-color-secondary);
    font-size: var(--cm-font-size-sm);
}