/* HW List - Brand CSS
 * Colors, typography and small components for the corporate identity
 * Generated: 2025-11-30
 */

/* Import recommended web fonts (Inter as primary, Roboto fallback) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Roboto:wght@300;400;500;700&display=swap');

:root {
    /* Primary */
    --hw-red: #F04648; /* RGB 240,70,72 */

    /* Greys */
    --dark-grey: #1E1E23;
    --light-grey: #F5F5F7;
    --neutral-grey: #C4C4CC;
    --white: #FFFFFF;

    /* Typography */
    --font-family-ui: 'Inter', 'Roboto', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --base-font-size: 13px; /* smaller base font size */
}

/* Apply font globally for the app UI */
body, button, input, textarea, select {
    font-family: var(--font-family-ui), sans-serif;
    font-size: var(--base-font-size);
    line-height: 1.4;
}

/* Heading sizes (consistent, slightly smaller) */
h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }

/* Primary actions */
.btn-primary,
.btn.btn-primary,
.btn-primary:focus,
.btn-primary:hover {
    background-color: var(--hw-red) !important;
    border-color: var(--hw-red) !important;
    color: var(--white) !important;
    box-shadow: none !important;
}

/* Ensure card outlines use HW-Red for primary variant */
.card-outline.card-primary {
    border-top: 3px solid var(--hw-red) !important;
}

.card-header h1 b {
    color: var(--hw-red) !important;
}

/* Accent badges / status */
.badge-hw,
.badge.hw-badge {
    background-color: var(--hw-red);
    color: var(--white);
}

/* Links and accents */
.text-hw {
    color: var(--hw-red) !important;
}

/* Brand logo helper (use on header) */
.brand-image-hw {
    height: 36px;
    width: auto;
}

/* Favicon square visible area guideline
   Use the icon (rounded square) with enough padding. */
.brand-icon-square {
    width: 40px;
    height: 40px;
    background-color: var(--hw-red);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px; /* rounded square */
}

/* Ensure readable text on HW-Red */
.text-on-hw { color: var(--white); }

/* Disabled / borders */
.border-neutral { border-color: var(--neutral-grey) !important; }
.bg-light { background-color: var(--light-grey) !important; }

/* Accessibility helpers */
:root {
    --hw-red-rgb: 240,70,72;
}

/* Focus visible outline for primary buttons */
.btn-primary:focus {
    outline: 2px solid rgba(var(--hw-red-rgb),0.15);
    outline-offset: 2px;
}

/* Small utility for logo protection area (CSS only) */
.logo-protect { padding-left: 8px; padding-right: 8px; }

/* Do not use HW-Red for large filled backgrounds; keep for accents */
/* This file focuses on variables and small components. */

/* Navbar & Logo responsive helpers - cleaned */
.navbar .navbar-brand {
    display: flex;
    align-items: center;
    padding-right: 0.5rem;
    flex: 0 0 auto; /* brand doesn't grow */
}

/* Full horizontal logo: show only on md+ */
.brand-image-hw-full {
    display: none;
    height: 36px;
    width: auto;
    max-width: 140px; /* prevent very wide logos from pushing content */
    margin-right: 8px;
}

/* Compact square icon: show on small screens */
.brand-image-hw-compact {
    display: inline-block;
    height: 36px;
    width: 36px;
    object-fit: contain;
    border-radius: 8px;
    margin-right: 6px;
}

/* Desktop: make collapse area a flex container so menu items align horizontally */
@media (min-width: 768px) {
    .brand-image-hw-full { display: inline-block; }
    .brand-image-hw-compact { display: none; }

    .navbar .navbar-collapse { display: flex !important; flex: 1 1 auto; align-items: center; }
    .navbar .navbar-nav { display:flex; align-items:center; }
    .navbar .navbar-nav .nav-item { white-space: nowrap; }
}

/* Mobile: collapse behaves normally (block when shown) */
@media (max-width: 767.98px) {
    .brand-image-hw-full { display: none; }
    .brand-image-hw-compact { display: inline-block; }

    .navbar .navbar-collapse { display: block !important; width: 100%; }
    .navbar .navbar-nav { display: flex; flex-direction: column; }
    .navbar .navbar-nav .nav-item { width: 100%; }
}

/* Tweak: ensure navbar toggler doesn't overlap and container uses full width */
.navbar .navbar-toggler { margin-left: 8px; }
.navbar { overflow: visible; }

/* Keep logo images from shrinking */
.navbar .navbar-brand img { max-height: 40px; width: auto; }

/* Small adjustments to prevent logo pushing menu off-screen */
.brand-image-hw-full { max-width: 140px !important; }

.navbar .navbar-brand { margin-right: 0.75rem; }

/* Allow collapse to shrink properly when space is limited */
.navbar .navbar-collapse { min-width: 0; }

/* Ensure nav items are visible and not clipped */
.navbar .navbar-nav { overflow: visible; }

/* Keep navbar z-index high to avoid content overlap */
.navbar { z-index: 1030; }

/* Fix for adminlte .brand-link when used inside navbar */
.navbar .brand-link,
.navbar .brand-link img {
    display: inline-flex;
    align-items: center;
}

/* Prevent the link from growing and pushing the menu */
.navbar .brand-link {
    flex: 0 0 auto;
    max-width: 220px; /* don't allow huge logos */
    padding: 0.125rem 0.5rem; /* small padding but not full block */
    margin-right: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
}

/* Ensure the image inside the brand-link scales and doesn't force width */
.navbar .brand-link img {
    max-height: 40px;
    width: auto;
    display: inline-block;
}

/* If someone uses <a class="brand-link"> in the navbar, treat it like navbar-brand */
.navbar .brand-link { text-decoration: none; }

/* Strong override for brand-link/navbar-brand inside the main header to prevent layout shifts */
.main-header .brand-link,
.main-header .navbar-brand,
.navbar .brand-link,
.navbar .navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    max-width: 160px !important;
    padding: 0.125rem 0.5rem !important;
    margin-right: 0.5rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

/* Ensure image inside the link never forces width */
.main-header .brand-link img, .main-header .navbar-brand img {
    max-height: 40px !important;
    width: auto !important;
    display: inline-block !important;
}

/* High-priority fixes for main header layout to prevent brand from pushing menu */
.main-header .container-fluid {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.main-header .navbar-brand,
.main-header .no-brand-link {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 160px !important;
    overflow: hidden !important;
}

.main-header .navbar-brand img,
.main-header .no-brand-link img {
    max-height: 40px !important;
    width: auto !important;
}

.main-header .navbar-collapse {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.main-header .navbar-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

/* Prevent unexpected width from brand-link in AdminLTE sidebar - keep scope to sidebar only */
.sidebar .brand-link, .sidebar .brand-link img { max-width: 100% !important; }

/* Sidebar brand centering and sizing */
.sidebar .sidebar-brand-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1.8rem 0 !important; /* base vertical spacing */
    padding-left: 0.75rem !important; /* Abstand von der Seite */
    padding-right: 0.75rem !important;
    border-bottom: 1px solid rgba(196,196,204,0.12); /* dezente Trennung unter dem Brand */
}

/* Sidebar brand spacing: more space above/below */
.sidebar .sidebar-brand-link {
    padding-top: 3rem !important; /* weiter nach oben verschieben */
    padding-bottom: 1.6rem !important;
}

/* Larger logo in the sidebar */
.sidebar .brand-image-hw {
    height: 96px !important; /* visible size */
    width: auto !important;
    max-width: 260px !important;
    transition: height 160ms ease-in-out;
    margin-top: 0.15rem; /* slight visual offset */
}

/* Side spacing so it doesn't touch the left edge */
.main-sidebar { padding-left: 6px; }

/* Brand text neben dem Logo in Sidebar */
.brand-text {
    margin-left: 0.9rem;
    font-family: var(--font-family-ui);
    font-weight: 700;
    letter-spacing: 0.8px;
    font-size: 20px; /* größer und deutlicher */
    display: inline-flex;
    align-items: baseline;
}

.brand-text .brand-hw {
    color: #111827; /* dunkelgrau */
    margin-right: 6px;
}

.brand-text .brand-list {
    color: var(--hw-red);
    font-weight: 800; /* kräftiger */
    text-transform: uppercase;
}

/* Für sehr kleine Seiten (mobile) nur Icon zeigen */
@media (max-width: 767.98px) {
    .sidebar .brand-image-hw { height: 64px !important; }
    .brand-text { display: none !important; }
}