/**
 * ==========================================================================
 * GLOBAL CSS CLIENT EXTENSION - COMPLETE PUNTUS DARK MODE (Liferay 2025.Q1)
 * ==========================================================================
 */

/* 1. DESIGN TOKENS (FARBEN & VARIABLEN) */
:root {
    --puntus-black: #0F0F11;          /* Haupt-Hintergrundfarbe (Tiefschwarz) */
    --puntus-dark-gray: #1A1A1E;      /* Für Cards, Boxen und Container */
    --puntus-orange: #FF5A00;         /* Akzent- und Signal-Orange */
    --puntus-orange-hover: #E04F00;   /* Abgedunkeltes Orange für Hover-Effekte */
    --puntus-white: #FFFFFF;          /* Standard-Textfarbe */
    --puntus-muted-gray: #A1A1AA;     /* Für sekundäre Texte und inaktive Elemente */

    /* Overriding Liferay / Clay Framework Tokens */
    --primary: var(--puntus-orange);
    --primary-bg: var(--puntus-black);
    --body-bg: var(--puntus-black);
    --body-color: var(--puntus-white);
    --link-color: var(--puntus-orange);
    --link-hover-color: var(--puntus-orange-hover);

    /* Layout */
    --font-family-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
    --border-radius: 12px;
}

/* ==========================================================================
   2. HEADER (KOPFZEILE) - MAXIMALER OVERRIDE FÜR CODES & FRAGMENTE
   ========================================================================== */
header,
#banner,
.header,
.navbar-app,
header.navbar-app,
[data-fragment-namespace*="header"],
.component-header,
div[id*="banner"],
.portlet-topper {
    background-color: #000000 !important;
    background: #000000 !important;
    border-bottom: 2px solid var(--puntus-orange) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Zwingt ALLE inneren Container (Layouts, Grids, Spalten) im Header auf Schwarz */
header div,
#banner div,
.header div,
.navbar-app div,
header .container,
header .container-fluid,
header .row {
    background-color: #000000 !important;
    background: #000000 !important;
}

/* Deaktiviert weiße Liferay Utility-Hintergrundklassen im Header-Bereich */
header .bg-white,
header .bg-light,
#banner .bg-white,
#banner .bg-light {
    background-color: #000000 !important;
    background: #000000 !important;
}

/* ALLE Texte, Titel, Links und Icons im Header-Bereich auf Weiß setzen */
header *,
#banner *,
.header *,
.navbar-app * {
    color: var(--puntus-white) !important;
}

/* Spezifischer Fix für den Portal-Namen ("GEMA CMS") */
header .site-name,
header h1,
header h2,
#banner .site-name,
.navbar-brand {
    color: var(--puntus-white) !important;
    font-weight: 700 !important;
}

/* Hover-Effekt für Links im Header */
header a:hover,
#banner a:hover,
.navbar-app a:hover {
    color: var(--puntus-orange) !important;
}

/* ==========================================================================
   3. INHALTSBEREICH (CONTENT) - SCHWARZ MIT ANTHRAZIT-CARDS
   ========================================================================== */
#content,
.main-content,
#main-content,
.lfr-layout-structure-item-container {
    background-color: var(--puntus-black) !important;
    color: var(--puntus-white) !important;
}

/* Texte im Content-Bereich */
#content p, #content span, #content h1, #content h2, #content h3,
#content h4, #content h5, #content h6, #content label, #content .component-title {
    color: var(--puntus-white) !important;
}

/* Cards im Content-Bereich */
#content .card,
#content div[role="tabpanel"] .card,
#content .sheet {
    background-color: var(--puntus-dark-gray) !important;
    border: 1px solid #2A2A30 !important;
    border-radius: var(--border-radius) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
    padding: 24px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#content .card:hover {
    border-color: rgba(255, 90, 0, 0.4) !important;
}

#content .card-title,
#content .card-header {
    background-color: transparent !important;
    border-bottom: 1px solid #2A2A30 !important;
    color: var(--puntus-white) !important;
    font-weight: 700;
}

/* Tabs/Reiter im Inhaltsbereich */
#content .nav-tabs {
    border-bottom: 1px solid #2A2A30 !important;
}

#content .nav-tabs .nav-link {
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    border: none !important;
    color: var(--puntus-muted-gray) !important;
    background: transparent !important;
    padding: 10px 20px !important;
    transition: color 0.2s ease;
}

#content .nav-tabs .nav-link:hover {
    color: var(--puntus-white) !important;
}

#content .nav-tabs .nav-link.active {
    color: var(--puntus-orange) !important;
    border-bottom: 3px solid var(--puntus-orange) !important;
}

#content .dropdown-menu {
    background-color: var(--puntus-black) !important;
}
#content .dropdown-item.active {
    background-color: var(--puntus-black) !important;
}
#banner .dropdown-menu {
    background-color: var(--puntus-black) !important;
}
#banner .dropdown-item.active {
    background-color: var(--puntus-black) !important;
}

/* Buttons im Inhaltsbereich */
#content .btn-primary {
    background-color: var(--puntus-orange) !important;
    border-color: var(--puntus-orange) !important;
    color: var(--puntus-white) !important;
    border-radius: 6px;
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: all 0.2s ease-in-out;
}

#content .btn-primary:hover,
#content .btn-primary:focus {
    background-color: var(--puntus-orange-hover) !important;
    border-color: var(--puntus-orange-hover) !important;
    box-shadow: 0 4px 12px rgba(255, 90, 0, 0.4);
}

/* ==========================================================================
   4. FOOTER (FUSSZEILE) - JETZT SCHWARZ
   ========================================================================== */
footer,
#footer,
.footer {
    background-color: #000000 !important;
    color: var(--puntus-white) !important;
    border-top: 1px solid #2A2A30 !important;
    padding: 2rem 0;
}

footer a,
#footer a,
.footer a {
    color: var(--puntus-muted-gray) !important;
}

footer a:hover,
#footer a:hover,
.footer a:hover {
    color: var(--puntus-orange) !important;
    text-decoration: none;
}

/* ==========================================================================
   5. ADMIN-SICHERHEIT (Schützt das Liferay Admin-Menü vor Darstellungsfehlern)
   ========================================================================== */
.control-menu-container,
.lexicon-icon {
    --primary: #0b5fff;
}