/* ==========================================================================
   Rooma Living — brand theme overrides
   Palette derived from the Rooma Living logo (navy base + blue-gradient mark).
   Loaded AFTER style.css so these rules win without touching the base theme.
   ========================================================================== */

:root {
    --rooma-navy: #0b1b2e;
    --rooma-navy-700: #102742;
    --rooma-navy-600: #16314f;
    --rooma-blue: #2b87e3;
    --rooma-blue-light: #69c4f5;
    --rooma-blue-dark: #1462c4;
    --rooma-living: #5aa0db;

    /* Re-point Bootstrap's primary to the brand blue */
    --bs-primary: #2b87e3;
    --bs-primary-rgb: 43, 135, 227;
    --bs-link-color: #1f74cf;
    --bs-link-color-rgb: 31, 116, 207;
    --bs-link-hover-color: #155aa3;
}

/* --- Sidebar / vertical menu : navy gradient like the logo background --- */
.hk-wrapper[data-layout="vertical"][data-menu="dark"] .hk-menu,
.hk-wrapper[data-layout="horizontal"][data-menu="dark"] .hk-menu {
    background: linear-gradient(180deg, var(--rooma-navy) 0%, var(--rooma-navy-700) 100%);
}

/* Active item: brand-blue tint instead of flat white overlay */
.hk-wrapper[data-layout="vertical"][data-menu="dark"]
    .hk-menu .menu-content-wrap .menu-group .navbar-nav > .nav-item.active > .nav-link {
    background: linear-gradient(90deg, rgba(43, 135, 227, 0.95), rgba(20, 98, 196, 0.95));
    color: #fff !important;
}

.hk-wrapper[data-layout="vertical"][data-menu="dark"]
    .hk-menu .menu-content-wrap .menu-group .navbar-nav .nav-item .nav-link:hover {
    color: var(--rooma-blue-light) !important;
}

/* Brand block in the sidebar header */
.hk-menu .menu-header .navbar-brand {
    display: inline-flex;
    align-items: center;
    padding: 0;
}
.hk-menu .menu-header .rooma-logo {
    height: 34px;
    width: auto;
}

/* --- Top navbar : keep light for readability, add a brand accent line --- */
.hk-navbar.navbar-light {
    border-bottom: 2px solid rgba(43, 135, 227, 0.18);
}

/* --- Buttons --- */
.btn-primary {
    --bs-btn-bg: var(--rooma-blue);
    --bs-btn-border-color: var(--rooma-blue);
    --bs-btn-hover-bg: var(--rooma-blue-dark);
    --bs-btn-hover-border-color: var(--rooma-blue-dark);
    --bs-btn-active-bg: var(--rooma-blue-dark);
    --bs-btn-active-border-color: var(--rooma-blue-dark);
    --bs-btn-disabled-bg: var(--rooma-blue);
    --bs-btn-disabled-border-color: var(--rooma-blue);
    background: linear-gradient(90deg, var(--rooma-blue), var(--rooma-blue-dark));
    border-color: var(--rooma-blue-dark);
}
.btn-outline-primary {
    --bs-btn-color: var(--rooma-blue);
    --bs-btn-border-color: var(--rooma-blue);
    --bs-btn-hover-bg: var(--rooma-blue);
    --bs-btn-hover-border-color: var(--rooma-blue);
    --bs-btn-active-bg: var(--rooma-blue);
    --bs-btn-active-border-color: var(--rooma-blue);
}
.btn-soft-primary {
    --bs-btn-color: var(--rooma-blue-dark);
    --bs-btn-bg: rgba(43, 135, 227, 0.12);
    --bs-btn-hover-bg: rgba(43, 135, 227, 0.2);
    --bs-btn-border-color: transparent;
}

/* --- Accents : text, links, badges, focus rings --- */
.text-primary { color: var(--rooma-blue) !important; }
.bg-primary { background-color: var(--rooma-blue) !important; }
.link-primary { color: var(--rooma-blue) !important; }
a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }

.badge.badge-soft-primary,
.badge-soft-primary {
    color: var(--rooma-blue-dark);
    background-color: rgba(43, 135, 227, 0.14);
}

.form-control:focus,
.form-select:focus,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--rooma-blue);
    box-shadow: 0 0 0 0.2rem rgba(43, 135, 227, 0.2);
}

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

/* Avatars / nav active dots that used the old primary */
.avatar-primary,
.avatar-soft-primary { background-color: var(--rooma-blue); }

/* --- Auth / login page --- */
.auth-split .rooma-auth-panel {
    background: linear-gradient(160deg, var(--rooma-navy) 0%, var(--rooma-navy-600) 100%) !important;
}
.rooma-auth-panel .rooma-logo {
    width: min(360px, 70%);
    height: auto;
}
.hk-pg-auth .btn-rooma {
    background: linear-gradient(90deg, var(--rooma-blue), var(--rooma-blue-dark));
    border: none;
    color: #fff;
}
.hk-pg-auth .btn-rooma:hover { color: #fff; opacity: 0.94; }