/*
 * BAYWORX brand theme for the Bootstrap 5.3 CDN build loaded in base.html.twig.
 *
 * Bootstrap 5.3's compiled CSS bakes some component colors in at build time
 * as literal hex values on per-component custom properties (e.g.
 * .btn-primary's --bs-btn-bg), rather than always referencing the root
 * --bs-primary variable live. Root-level overrides alone won't retint
 * those - each affected component is overridden explicitly below, verified
 * against the actual bootstrap@5.3.3 CDN output rather than assumed.
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --bayworx-blue: #3271aa;
    --bayworx-blue-hover: #2a5f91;
    --bayworx-blue-active: #24507b;
    --bayworx-navy: #152940;
    --bayworx-accent: #9ccb41;

    /* Live-referenced by .text-bg-primary, subtle utilities, etc. */
    --bs-primary: var(--bayworx-blue);
    --bs-primary-rgb: 50, 113, 170;
    --bs-primary-text-emphasis: var(--bayworx-navy);
    --bs-primary-bg-subtle: #dce8f2;
    --bs-primary-border-subtle: #a9c5dd;

    /* Live-referenced by <a>, .bg-dark (navbar), .dropdown-item.active */
    --bs-link-color: var(--bayworx-blue);
    --bs-link-color-rgb: 50, 113, 170;
    --bs-link-hover-color: var(--bayworx-blue-hover);
    --bs-link-hover-color-rgb: 42, 95, 145;
    --bs-dark: var(--bayworx-navy);
    --bs-dark-rgb: 21, 41, 64;
    --bs-dropdown-link-active-bg: var(--bayworx-blue);

    --bs-body-font-family: 'Outfit', sans-serif;
}

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

code, pre, kbd {
    font-family: 'JetBrains Mono', monospace;
}

/* .btn-primary/.btn-outline-primary hardcode Bootstrap's default blue on
   their own --bs-btn-* variables at build time - override those directly. */
.btn-primary {
    --bs-btn-bg: var(--bayworx-blue);
    --bs-btn-border-color: var(--bayworx-blue);
    --bs-btn-hover-bg: var(--bayworx-blue-hover);
    --bs-btn-hover-border-color: var(--bayworx-blue-hover);
    --bs-btn-active-bg: var(--bayworx-blue-active);
    --bs-btn-active-border-color: var(--bayworx-blue-active);
    --bs-btn-disabled-bg: var(--bayworx-blue);
    --bs-btn-disabled-border-color: var(--bayworx-blue);
    --bs-btn-focus-shadow-rgb: 50, 113, 170;
}

.btn-outline-primary {
    --bs-btn-color: var(--bayworx-blue);
    --bs-btn-border-color: var(--bayworx-blue);
    --bs-btn-hover-bg: var(--bayworx-blue);
    --bs-btn-hover-border-color: var(--bayworx-blue);
    --bs-btn-active-bg: var(--bayworx-blue);
    --bs-btn-active-border-color: var(--bayworx-blue);
    --bs-btn-disabled-color: var(--bayworx-blue);
    --bs-btn-disabled-border-color: var(--bayworx-blue);
    --bs-btn-focus-shadow-rgb: 50, 113, 170;
}

.form-check-input:checked {
    background-color: var(--bayworx-blue);
    border-color: var(--bayworx-blue);
}

/* App shell: fixed dark sidebar + scrollable main content column,
   replacing the old full-width top navbar. */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    flex: 0 0 240px;
    width: 240px;
    display: flex;
    flex-direction: column;
    padding: 24px 16px 20px;
    background: var(--bayworx-navy);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-header {
    margin-bottom: 28px;
}

.sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.02em;
    text-decoration: none;
}

/* The mark is a blue gear behind green wordmark, sat on the navy sidebar -
   readable, but it needs the room, so cap the width rather than the height
   and let the 300x170 source scale itself. The auto margins centre it in the
   sidebar's content box; the wordmark and rule below stay left-aligned. */
.sidebar-logo {
    display: block;
    width: 100%;
    max-width: 150px;
    height: auto;
    margin-inline: auto;
}

/* Login card is col-md-3, so the 300px source would fill it edge to edge. */
.login-logo {
    width: 100%;
    max-width: 200px;
    height: auto;
}

.sidebar-caption {
    margin-top: 4px;
    color: var(--bayworx-accent);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sidebar-header::after {
    content: '';
    display: none;
    width: 40px;
    height: 3px;
    margin-top: 10px;
    border-radius: 2px;
    background: var(--bayworx-accent);
}

.sidebar-nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: none;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    font-size: 0.9rem;
    text-align: left;
    text-decoration: none;
}

.sidebar-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.sidebar-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 3px 0 0 var(--bayworx-accent);
}

.sidebar-badge {
    min-width: 20px;
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--bayworx-accent);
    color: var(--bayworx-navy);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

.sidebar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-user {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-logout {
    display: flex;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.7);
}

.sidebar-logout:hover {
    color: #fff;
}

.app-main {
    flex: 1;
    min-width: 0;
    background: #f7f7f9;
}

.app-content {
    padding: 32px 40px;
}

/* Drawer handle, shown only below lg (the element also carries d-lg-none). */
.mobile-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--bayworx-navy);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.mobile-topbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px square: the smallest target a thumb hits reliably, and the one
       number in here that shouldn't be trimmed to make the bar shorter. */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
}

.mobile-topbar-toggle:active {
    background: rgba(255, 255, 255, 0.12);
}

.mobile-topbar-brand {
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-decoration: none;
}

/* The drawer wrapper around .sidebar (see base.html.twig for why the
   offcanvas classes live out here). Both variables are Bootstrap's own, set
   rather than overridden, so the drawer is the right width and the right
   colour even if this stylesheet is the only thing that loads. */
.sidebar-drawer {
    --bs-offcanvas-width: 260px;
    --bs-offcanvas-bg: var(--bayworx-navy);
}

/* From lg up the wrapper leaves the layout entirely, so .sidebar goes back
   to being the flex child of .app-shell it has always been - same 240px
   column, same styling, as though none of this existed. */
@media (min-width: 992px) {
    .sidebar-drawer {
        display: contents;
    }
}

/* Below lg the shell folds: the sidebar becomes an offcanvas drawer and the
   content column gets the whole screen. */
@media (max-width: 991.98px) {
    .sidebar-drawer .sidebar {
        /* Inside the drawer the sidebar is no longer positioning itself -
           the wrapper is fixed, and this just fills it. Height 100%, never
           100vh: on iOS that measures the viewport with the address bar
           retracted, which puts the footer below the fold. */
        position: static;
        width: 100%;
        height: 100%;
        flex: 1 1 auto;
    }

    .app-content {
        padding: 16px;
    }

    /* iOS Safari zooms the page in when a focused field is under 16px, and
       leaves the user scrolled sideways halfway through typing. Any control
       they can tap on a phone has to clear that bar. */
    .form-control,
    .form-select {
        font-size: 16px;
    }
}

/* Rounded, softer cards and tables to match the refreshed sidebar look. */
.card {
    border-color: #e5e5ea;
    border-radius: 10px;
}

.card.shadow-sm {
    box-shadow: 0 1px 3px rgba(15, 30, 48, 0.06) !important;
}

.table > thead > tr > th {
    color: #6c7480;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Secondary in-section tab strip (e.g. Assets / Customers / Sites / Monitoring). */
.nav-tabs .nav-link.active {
    color: var(--bayworx-navy);
    font-weight: 600;
    border-color: #dee2e6 #dee2e6 #fff;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--bs-secondary-color, #6c757d);
}

/*
 * Client logos (templates/components/_customer_logo.html.twig).
 *
 * A fixed square box at every size, with the image contained inside it: the
 * fetcher normalizes dimensions but not aspect ratio, and a wide wordmark and
 * a square app icon have to sit in the same column without the rows jumping.
 * The initials tile is the same box, so a list of clients where only some
 * have logos still lines up.
 */
.client-logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 6px;
    padding: 2px;
    vertical-align: middle;
}

.client-logo-xs { width: 24px; height: 24px; }
.client-logo-sm { width: 32px; height: 32px; }
.client-logo-md { width: 48px; height: 48px; }
.client-logo-lg { width: 72px; height: 72px; border-radius: 10px; }

.client-logo-initials {
    background: var(--bayworx-navy);
    border-color: var(--bayworx-navy);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    user-select: none;
}

.client-logo-initials.client-logo-xs { font-size: 0.6rem; }
.client-logo-initials.client-logo-sm { font-size: 0.75rem; }
.client-logo-initials.client-logo-md { font-size: 1rem; }
.client-logo-initials.client-logo-lg { font-size: 1.5rem; }