/**
 * LetsLead — Leadership Conversation Intelligence
 * Frontend theme (reskin only; no backend impact)
 */
:root {
    --color-primary-navy: #1F2A44;
    --color-secondary-gray: #F4F6F8;
    --color-text-charcoal: #1A1A1A;
    --color-accent-blue: #2F80ED;
    --color-accent-teal: #28A3BD;
    --color-status-success: #27AE60;
    --color-status-danger: #EB5757;
    --color-white: #FFFFFF;
    --color-gray-soft: #BDBDBD;
    --color-gray-muted: #9E9E9E;
    --color-border: #E2E8F0;
    --ll-radius: 6px;
    --ll-shadow: 0 1px 3px rgba(31, 42, 68, 0.08);
}

/* ── Typography ── */
html,
body,
h1, h2, h3, h4, h5, h6,
.sidebar,
.topbar,
.card,
.btn,
.form-control,
.table,
.dropdown-menu,
.menu-name {
    font-family: 'Inter', Arial, sans-serif;
}

body {
    color: var(--color-text-charcoal);
    background-color: var(--color-secondary-gray);
    font-size: 0.9rem;
}

/* ── Layout surfaces (55% gray/white, 25% navy) ── */
#wrapper {
    background-color: var(--color-secondary-gray);
}

#content-wrapper {
    background-color: var(--color-secondary-gray);
}

.container-fluid {
    background-color: transparent;
}

.card {
    border: 1px solid var(--color-border);
    border-radius: var(--ll-radius);
    box-shadow: var(--ll-shadow);
    background-color: var(--color-white);
}

.card-header {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}

/* ── Sidebar & topbar (navy + white text) ── */
.bg-gradient-primary,
.sidebar.bg-gradient-primary {
    background-color: var(--color-primary-navy) !important;
    background-image: linear-gradient(180deg, #263556 0%, var(--color-primary-navy) 100%) !important;
}

.sidebar .nav-item .nav-link,
.sidebar .sidebar-brand,
.sidebar .sidebar-heading,
.sidebar .nav-item .nav-link span,
.sidebar .nav-item .nav-link i {
    color: var(--color-white) !important;
}

.sidebar .nav-item .nav-link:hover,
.sidebar .nav-item.active .nav-link {
    color: var(--color-white) !important;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: var(--ll-radius);
}

.sidebar hr.sidebar-divider {
    border-top-color: rgba(255, 255, 255, 0.15);
}

.topbar.navbar-light {
    background-color: var(--color-white) !important;
    box-shadow: var(--ll-shadow);
}

.topbar .nav-link,
.topbar .navbar-nav .nav-link {
    color: var(--color-text-charcoal) !important;
}

/* ── Primary CTA (accent blue) ── */
.btn-primary,
.badge-primary,
.bg-primary,
.page-item.active .page-link {
    color: var(--color-white) !important;
    background-color: var(--color-accent-blue) !important;
    border: none !important;
    border-color: var(--color-accent-blue) !important;
    border-radius: var(--ll-radius);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: var(--color-white) !important;
    background-color: var(--color-accent-blue) !important;
    filter: brightness(0.9);
}

.text-primary {
    color: var(--color-accent-blue) !important;
}

.btn-outline-primary {
    color: var(--color-accent-blue);
    border-color: var(--color-accent-blue);
    border-radius: var(--ll-radius);
}

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

.border-left-primary {
    border-left: 0.25rem solid var(--color-accent-blue) !important;
}

.border-bottom-primary {
    border-bottom: 0.25rem solid var(--color-accent-blue) !important;
}

.text-gray-800,
.text-gray-900 {
    color: var(--color-text-charcoal) !important;
}

.scroll-to-top {
    background: var(--color-accent-blue);
}

.scroll-to-top:hover {
    filter: brightness(0.9);
}


.border-primary {
    border-color: var(--color-accent-blue) !important;
}

/* ── Secondary accent (teal) ── */
.btn-info,
.badge-info,
.bg-info {
    color: var(--color-white) !important;
    background-color: var(--color-accent-teal) !important;
    border: none !important;
    border-color: var(--color-accent-teal) !important;
    border-radius: var(--ll-radius);
}

.text-info {
    color: var(--color-accent-teal) !important;
}

.border-left-info {
    border-left: 0.25rem solid var(--color-accent-teal) !important;
}

.border-info {
    border-color: var(--color-accent-teal) !important;
}

.btn-outline-info {
    color: var(--color-accent-teal);
    border-color: var(--color-accent-teal);
    border-radius: var(--ll-radius);
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active,
.btn-outline-info.active {
    color: var(--color-white) !important;
    background-color: var(--color-accent-teal) !important;
    border-color: var(--color-accent-teal) !important;
}

/* Warning → teal secondary emphasis (flat, no orange) */
.btn-warning,
.badge-warning,
.bg-warning {
    color: var(--color-white) !important;
    background-color: var(--color-accent-teal) !important;
    border: none !important;
    border-color: var(--color-accent-teal) !important;
    border-radius: var(--ll-radius);
}

.text-warning {
    color: var(--color-accent-teal) !important;
}

.border-left-warning {
    border-left: 0.25rem solid var(--color-accent-teal) !important;
}

.border-warning {
    border-color: var(--color-accent-teal) !important;
}

/* ── Success / danger ── */
.btn-success,
.badge-success,
.bg-success {
    color: var(--color-white) !important;
    background-color: var(--color-status-success) !important;
    border: none !important;
    border-color: var(--color-status-success) !important;
    border-radius: var(--ll-radius);
}

.text-success {
    color: var(--color-status-success) !important;
}

.border-left-success {
    border-left: 0.25rem solid var(--color-status-success) !important;
}

.btn-danger,
.badge-danger,
.bg-danger {
    color: var(--color-white) !important;
    background-color: var(--color-status-danger) !important;
    border: none !important;
    border-color: var(--color-status-danger) !important;
    border-radius: var(--ll-radius);
}

.text-danger {
    color: var(--color-status-danger) !important;
}

.border-left-danger {
    border-left: 0.25rem solid var(--color-status-danger) !important;
}

/* ── Forms & tables ── */
.form-control,
.custom-select,
.bootstrap-select.form-control {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--ll-radius);
    color: var(--color-text-charcoal);
}

.form-control:focus {
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 0.15rem rgba(47, 128, 237, 0.2);
}

.table thead th {
    color: var(--color-text-charcoal);
    border-bottom-color: var(--color-border);
}

/* ── Footer ── */
.sticky-footer {
    background-color: var(--color-white);
    border-top: 1px solid var(--color-border);
}

.sticky-footer span {
    color: var(--color-gray-muted);
}

/* ── SweetAlert2 ── */
.swal2-styled.swal2-confirm {
    background-color: var(--color-accent-blue) !important;
    border-radius: var(--ll-radius) !important;
}

.swal2-styled.swal2-cancel {
    background-color: var(--color-status-danger) !important;
    border-radius: var(--ll-radius) !important;
}

/* ── Sidebar width & menu labels (Organizasyon etc.) ── */
/* Icon + label-under mode (mobile / default narrow rail) */
.sidebar {
    width: 7.75rem;
}

.sidebar .nav-item .nav-link {
    width: 7.75rem;
    padding: 0.85rem 0.4rem;
}

.sidebar .nav-item .nav-link span.menu-name,
.sidebar .nav-item .nav-link span {
    display: block;
    font-size: 0.7rem;
    line-height: 1.25;
    letter-spacing: 0.01em;
    padding: 0.2rem 0.15rem 0;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    hyphens: auto;
}

.sidebar .nav-item .collapse {
    left: calc(7.75rem + 0.75rem);
}

@media (min-width: 768px) {
    .sidebar {
        width: 16rem !important;
    }

    .sidebar .nav-item .nav-link {
        width: 16rem;
        padding: 0.95rem 1.15rem;
        text-align: left;
    }

    .sidebar .nav-item .nav-link span.menu-name,
    .sidebar .nav-item .nav-link span {
        display: inline;
        font-size: 0.88rem;
        line-height: 1.35;
        padding: 0;
        text-align: left;
        white-space: nowrap;
        word-break: normal;
    }

    .sidebar .nav-item .nav-link i {
        margin-right: 0.45rem;
        width: 1.1rem;
        text-align: center;
    }

    .sidebar.toggled {
        width: 7.75rem !important;
    }

    .sidebar.toggled .nav-item .nav-link {
        width: 7.75rem;
        padding: 0.85rem 0.4rem;
        text-align: center;
    }

    .sidebar.toggled .nav-item .nav-link span {
        display: none;
    }

    .sidebar.toggled .nav-item .collapse {
        left: calc(7.75rem + 0.75rem);
    }
}

/* ── Sidebar brand / logos on navy ── */
.sidebar .sidebar-brand {
    padding: 1.1rem 0.75rem;
    min-height: 4.75rem;
}

.sidebar .sidebar-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.sidebar .sidebar-brand-icon img {
    width: 1.85rem !important;
    height: 1.85rem !important;
    object-fit: contain;
    /* Blue mark → white silhouette on navy */
    filter: brightness(0) invert(1);
}

.sidebar:not(.toggled) .sidebar-brand-icon {
    display: none !important;
}

.sidebar:not(.toggled) .sidebar-brand-text {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0.35rem 0.55rem;
    max-width: calc(100% - 1rem);
}

.sidebar:not(.toggled) .sidebar-brand-text img {
    max-width: 9.75rem;
    height: auto;
    display: block;
    filter: brightness(0) invert(1);
}

.sidebar.toggled .sidebar-brand-text {
    display: none !important;
}

.sidebar.toggled .sidebar-brand-icon {
    display: inline-flex !important;
}

/* Home / content logos stay brand-blue on light surfaces (no filter) */

/* ── Flatten heavy shadows ── */
.shadow,
.card.shadow {
    box-shadow: var(--ll-shadow) !important;
}

/* ── Login / standalone pages ── */
.bg-gradient-primary .card {
    border-radius: var(--ll-radius);
}