/* SendMerge site styles. Third-party frameworks (Bootstrap, Remix Icons) load from CDN;
   only app-specific tweaks live here. */

/* Brand palette, matching the LogSink workspace theme (steel blue on warm off-white). */
:root {
    --sm-primary: #355872;
    --sm-primary-dark: #243c4e;
    --sm-bg: #f7f8f0;
    --sm-accent: #9cd5ff;
    /* Steer Bootstrap's primary-tinted utilities (text-bg-primary badges, outline
       buttons, focus rings) to the brand colour. */
    --bs-primary: #355872;
    --bs-primary-rgb: 53, 88, 114;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--sm-bg);
}

main {
    flex: 1 0 auto;
}

.navbar-dark {
    background-color: var(--sm-primary) !important;
}

.navbar-dark .navbar-brand {
    color: #fff;
    font-weight: 700;
}

.navbar-dark .nav-link {
    color: rgba(255, 255, 255, 0.85);
}

.navbar-dark .nav-link:hover {
    color: #fff;
}

.btn-primary {
    --bs-btn-bg: var(--sm-primary);
    --bs-btn-border-color: var(--sm-primary);
    --bs-btn-hover-bg: var(--sm-primary-dark);
    --bs-btn-hover-border-color: var(--sm-primary-dark);
    --bs-btn-active-bg: var(--sm-primary-dark);
    --bs-btn-active-border-color: var(--sm-primary-dark);
    --bs-btn-disabled-bg: var(--sm-primary);
    --bs-btn-disabled-border-color: var(--sm-primary);
}

/* Auth pages: two-column split (branding panel + form). */
.auth-image {
    background: linear-gradient(135deg, var(--sm-primary) 0%, #7aaace 100%);
}

/* Home hero: full-bleed brand gradient under the navbar (mirrors LogSink). */
.hero-section {
    /* Cancel the layout wrapper's mt-4 so the gradient touches the navbar. */
    margin-top: -1.5rem;
    background: linear-gradient(135deg, var(--sm-primary) 0%, #7aaace 100%);
    color: #fff;
    padding: 5rem 0;
}

.hero-logo {
    height: 96px;
    width: auto;
}

@media (max-width: 576px) {
    .hero-logo {
        height: 64px;
    }
}

.auth-tagline {
    color: var(--sm-accent) !important;
}

.auth-logo {
    height: 96px;
    width: auto;
}

.mobile-brand-logo {
    height: 32px;
    width: auto;
}

@media (max-width: 576px) {
    .auth-logo {
        height: 64px;
    }
}
/* Brand marks. */
.navbar-brand-logo {
    height: 22px;
    width: auto;
}

/* Footer pinned to the bottom by the flex body. */
.footer {
    flex-shrink: 0;
    background-color: var(--sm-primary);
    color: var(--sm-bg);
}

/* Workspace section layout: sticky left sidebar beside the content column. */
.workspace-container {
    flex-wrap: nowrap;
}

.workspace-sidebar .list-group-item {
    border: 0;
    border-radius: 6px;
    margin-bottom: 2px;
    /* Keep nav labels on one line even when the active item is bolded. */
    padding: 0.5rem 0.625rem;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workspace-sidebar .list-group-item.active {
    font-weight: 600;
    --bs-list-group-active-bg: var(--sm-primary);
    --bs-list-group-active-border-color: var(--sm-primary);
}

.disabled-placeholder {
    cursor: default;
    opacity: 0.65;
    pointer-events: none;
    color: var(--bs-secondary-color) !important;
}

.sidebar-category {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    padding: 0.75rem 0.625rem 0.25rem;
}

@media (max-width: 991.98px) {
    .workspace-container {
        flex-wrap: wrap;
    }

    .workspace-sidebar {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }
}