/* ==========================================================================
   Handles & More — Brand Skin
   Loaded LAST so it re-skins the ported theme without touching style.css.
   Palette pulled from the live storefront (handlesandmore.com.au):
     green #00AD4D (primary / "Green Truck" shipping brand), navy #051C42 (text),
     crimson #D12442 (danger), mint #EAF7EF / #F7FDFA (surfaces), sage borders.
   Font: Poppins (already loaded by the theme).
   ========================================================================== */

:root {
    --hm-green: #00ad4d;
    --hm-green-dark: #00873d;
    --hm-green-soft: #14c95e;
    --hm-navy: #051c42;
    --hm-navy-soft: #1b3563;
    --hm-crimson: #d12442;
    --hm-crimson-dark: #b01d37;
    --hm-mint: #eaf7ef;
    --hm-mint-2: #f7fdfa;
    --hm-sage: #aebfb4;
    --hm-border: #e4ece7;
    --hm-ink: #10241f;
    --hm-muted: #6b7c76;

    --hm-radius: 14px;
    --hm-radius-sm: 9px;
    --hm-shadow: 0 2px 10px rgba(5, 28, 66, .06);
    --hm-shadow-lg: 0 10px 30px rgba(5, 28, 66, .10);
    --hm-gradient: linear-gradient(135deg, #051c42 0%, #0a3b52 45%, #00ad4d 100%);

    /* Re-point Bootstrap's own primary so utility classes inherit the brand */
    --bs-primary: #00ad4d;
    --bs-primary-rgb: 0, 173, 77;
    --bs-link-color: #00873d;
    --bs-link-hover-color: #051c42;
}

/* ---- Base wash ------------------------------------------------------------ */
body {
    background: var(--hm-mint-2);
    color: var(--hm-ink);
}

/* Headings in brand navy for a considered, premium feel */
h1, h2, h3, h4, h5, h6,
.fw-bold, .modal-title {
    color: var(--hm-navy);
}

/* ---- Buttons -------------------------------------------------------------- */
/* !important needed: the ported theme paints .btn-primary navy with a
   higher-specificity selector, and brand primary must be the store green. */
.btn-primary,
.btn-primary.cstbtn,
.btn.btn-primary,
button.btn-primary,
.app-form .btn-primary {
    background: var(--hm-green) !important;
    border-color: var(--hm-green) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 135, 61, .25);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.cstbtn:hover {
    background: var(--hm-green-dark) !important;
    border-color: var(--hm-green-dark) !important;
    color: #fff !important;
}

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

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

.btn-secondary, .cancel-btn, .btn-light-primary {
    background: #eef2f0;
    border-color: var(--hm-border);
    color: var(--hm-navy);
}
.btn-secondary:hover, .btn-light-primary:hover {
    background: #e2e9e5 !important;
    color: var(--hm-navy) !important;
}

.btn { border-radius: var(--hm-radius-sm); font-weight: 500; }

/* ---- Links & primary text ------------------------------------------------- */
a { color: var(--hm-green-dark); }
a:hover { color: var(--hm-navy); }
.text-primary { color: var(--hm-green-dark) !important; }
.sort-link { color: var(--hm-navy); }

/* ---- Cards ---------------------------------------------------------------- */
.card {
    border: 1px solid var(--hm-border);
    border-radius: var(--hm-radius);
    box-shadow: var(--hm-shadow);
}
.card-header {
    background: var(--hm-mint);
    border-bottom: 1px solid var(--hm-border);
    border-radius: var(--hm-radius) var(--hm-radius) 0 0 !important;
}
.card-header h6, .card-header .mb-0 { color: var(--hm-navy); font-weight: 600; }
.cst-card-with-bg {
    background: var(--hm-mint-2);
    border: 1px solid var(--hm-border);
    border-radius: var(--hm-radius-sm);
}

/* ---- Top navigation ------------------------------------------------------- */
.header-main .card {
    box-shadow: var(--hm-shadow);
    border-bottom: 3px solid var(--hm-green);
}
.main-nav li a {
    color: var(--hm-navy);
    font-weight: 500;
    border-radius: var(--hm-radius-sm);
}
.main-nav li a:hover { color: var(--hm-green-dark); background: var(--hm-mint); }
.main-nav li a i { color: var(--hm-green); }
.main-nav li.active > a {
    background: var(--hm-mint);
    color: var(--hm-green-dark);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--hm-green);
}
.main-nav li.active > a i { color: var(--hm-green-dark); }
.menu-title span { color: var(--hm-muted); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.welcome-text { color: var(--hm-navy); font-weight: 600; }

/* ---- Forms ---------------------------------------------------------------- */
.form-control:focus,
.form-select:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--hm-green);
    box-shadow: 0 0 0 .2rem rgba(0, 173, 77, .15);
}
.form-check-input:checked {
    background-color: var(--hm-green);
    border-color: var(--hm-green);
}
.form-label { color: var(--hm-navy); font-weight: 500; }
.btn-check:checked + .btn-outline-primary {
    background: var(--hm-green);
    border-color: var(--hm-green);
    color: #fff;
}

/* ---- Progress (catalog sync) --------------------------------------------- */
.progress { background: var(--hm-mint); border-radius: 20px; }
.progress-bar { background: var(--hm-green); }
.progress-bar.bg-success { background: var(--hm-green) !important; }
.progress-bar.bg-danger { background: var(--hm-crimson) !important; }

/* ---- Tables --------------------------------------------------------------- */
.list-table-data thead th,
.table-header-bordered thead th {
    background: var(--hm-mint);
    color: var(--hm-navy);
    font-weight: 600;
    border-color: var(--hm-border);
}
.list-table-data tbody tr:hover { background: var(--hm-mint-2); }

/* ---- Badges / status pills ------------------------------------------------ */
.badge.bg-primary { background: var(--hm-green) !important; }
.badge.bg-success { background: var(--hm-green) !important; }
.badge.bg-danger { background: var(--hm-crimson) !important; }
.status-active, .badge-active { background: var(--hm-mint); color: var(--hm-green-dark); }

/* ---- Select2 -------------------------------------------------------------- */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--selected {
    background: var(--hm-green);
    color: #fff;
}
.select2-container--default .select2-selection--single { border-color: var(--hm-border); }

/* ---- Toasts / alerts ------------------------------------------------------ */
.alert-success { background: var(--hm-mint); border-color: #bfe6cd; color: var(--hm-green-dark); }
.alert-danger { background: #fdecef; border-color: #f6c9d1; color: var(--hm-crimson-dark); }

/* ---- Loader --------------------------------------------------------------- */
.loader, .spinner { border-top-color: var(--hm-green) !important; }

/* ==========================================================================
   Install / login page — branded split hero
   ========================================================================== */
.cst-bg-gradient,
.login-form-container.cst-bg-gradient { background: transparent; }
.login-form-container {
    min-height: 100vh;
    align-items: stretch !important;
    gap: 0 !important;
    background: var(--hm-mint-2);
}
.cst-login-image-div {
    background: var(--hm-gradient);
    color: #fff;
    padding: 3rem 2.5rem;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    width: 46%;
    position: relative;
    overflow: hidden;
}
.cst-login-image-div .image-logobox img { max-height: 52px; width: auto; }
.cst-login-image-div .hm-hero-copy h2 {
    color: #fff; font-weight: 700; font-size: 2rem; line-height: 1.15; margin: 0 0 .75rem;
}
.cst-login-image-div .hm-hero-copy p { color: rgba(255, 255, 255, .82); margin: 0; }
.cst-login-image-div .hm-hero-shot {
    border-radius: var(--hm-radius);
    box-shadow: var(--hm-shadow-lg);
    border: 4px solid rgba(255, 255, 255, .12);
    width: 100%; object-fit: cover; max-height: 300px;
}
.cst-login-image-div .hm-truck {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255, 255, 255, .14); color: #fff;
    padding: .4rem .85rem; border-radius: 30px; font-size: .82rem; font-weight: 500;
    backdrop-filter: blur(4px);
}
.cst-form-div {
    flex: 1; display: flex; flex-direction: column; justify-content: center;
    padding: 3rem clamp(1.5rem, 5vw, 4.5rem);
}
.cst-form-div .app-form { max-width: 420px; margin: 0 auto; width: 100%; }
.cst-form-div h1 { color: var(--hm-navy); font-weight: 700; }

@media (max-width: 991px) {
    .login-form-container { flex-direction: column; }
    .cst-form-div { padding: 2.5rem 1.5rem; }
}