/*
 * Brand override for mein-bereich.de customer portal
 * Overrides EasyAdmin-pro default blue with mein-bereich.de teal + custom fonts
 */

/* ── Fonts ─────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Noirden';
    src: url('../../../_css/fonts/Noirden Reg.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('../../../_css/fonts/NotoSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* ── Color tokens ───────────────────────────────────────────────────────── */
:root {
    --primary-color: #2a5555;
    --primary-dark:  #224444;
    --primary-light: #3a7070;

    --header-bg:     #2a5555;
    --sidebar-bg:    #1e3e3e;

    --font-family:       'Noto Sans', 'DM Sans', sans-serif;
    --heading-font:      'Noirden', 'Inter', sans-serif;
}

/* ── Primary button & links ─────────────────────────────────────────────── */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color:     var(--primary-color) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--primary-dark) !important;
    border-color:     var(--primary-dark) !important;
}

a {
    color: var(--primary-color);
}

a:hover {
    color: var(--primary-dark);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.header {
    background-color: var(--header-bg) !important;
    border-bottom: none !important;
}

.header .header-logo span,
.header .header-action,
.header .search-toggle-btn {
    color: #fff !important;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
    background-color: var(--sidebar-bg) !important;
}

.sidebar .nav-link,
.sidebar .nav-link i {
    color: rgba(255, 255, 255, 0.75) !important;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ── Sidebar collapsed: centre icon in 50px rail ───────────────────────── */
@media (min-width: 1200px) {
    .sidebar-collapsed .sidebar .nav-item > .nav-link {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Strip thick border/padding in collapsed rail so image+background fits 50px */
    .sidebar-collapsed .sidebar .sidebar-logo-container {
        padding: 4px !important;
        border: none !important;
        background-color: var(--bg-light, #f8f9fa) !important;
        border-radius: var(--radius-md, 0.5rem) !important;
        margin-bottom: 0.5rem !important;
    }
    .sidebar-collapsed .sidebar .sidebar-logo-container img {
        max-width: 100% !important;
    }

    /* Restore full styling on hover-expand */
    .sidebar-collapsed .sidebar:hover .sidebar-logo-container {
        padding: 1rem !important;
        border: 0.5rem solid rgb(30, 62, 62) !important;
        background-color: var(--bg-light, #f8f9fa) !important;
        border-radius: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    .sidebar-collapsed .sidebar:hover .sidebar-logo-container img {
        max-width: 80% !important;
    }
}

/* ── Header right: user-dropdown button width & spacing ─────────────────── */
/* Increase gap so items breathe across available space */
.header-right {
    gap: 1rem !important;
}

/* Let the user dropdown button grow to fit its content (name + icons) */
.header-right .dropdown > button.header-action {
    width: auto !important;
    min-width: 40px;
    padding: 0 0.75rem !important;
    gap: 0.5rem;
}

/* ── Auth card accent ───────────────────────────────────────────────────── */
.auth-card {
    border-top: 3px solid var(--primary-color);
}

/* ── Form focus ─────────────────────────────────────────────────────────── */
.form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(42, 85, 85, 0.25) !important;
}

/* ── Headings font ──────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.auth-title {
    font-family: var(--heading-font);
}

body {
    font-family: var(--font-family);
}