/* ==========================================================================
   ServMall brand
   Palette sampled from the ServMall logo artwork and the marketing site.
   Replaces the placeholder indigo "E" badge left by the previous build.
   ========================================================================== */

:root {
    --servmall-navy: #286090;        /* wordmark + dark wave — primary */
    --servmall-navy-deep: #254c6d;   /* hero ground, dark surfaces */
    --servmall-navy-ink: #1b3d5c;    /* pressed states, deep text */
    --servmall-blue: #48a0e8;        /* light wave — secondary */
    --servmall-blue-light: #58a8e0;  /* gradients, hover */
    --servmall-steel: #5f8eb6;       /* icon circles, muted accent */
    --servmall-steel-deep: #29699e;  /* overlay wash */
    --servmall-mist: #afc7db;        /* dividers, disabled */
    --servmall-cream: #f1decb;       /* the one warm note — use sparingly */
    --servmall-white: #fefefe;

    --servmall-font: "Raleway", "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Logo lockup
   Renders the real ServMall artwork. `compact` drops to the wave mark alone
   for the collapsed sidebar and small chrome.
   -------------------------------------------------------------------------- */

.servmall-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    line-height: 1;
    vertical-align: middle;
}

.servmall-mark__logo {
    display: block;
    width: auto;
    height: 34px;
    max-width: 100%;
}

.servmall-mark__badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
}

.servmall-mark__badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Text fallback — only renders when the artwork is unavailable */
.servmall-mark__text {
    font-family: var(--servmall-font);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: var(--servmall-navy);
}

.servmall-mark--light .servmall-mark__text {
    color: var(--servmall-white);
}

.servmall-mark--dark .servmall-mark__text {
    color: var(--servmall-navy-deep);
}

/* Sizes ------------------------------------------------------------------- */

.servmall-mark--sm .servmall-mark__logo,
.servmall-mark--sm .servmall-mark__badge {
    height: 28px;
}
.servmall-mark--sm .servmall-mark__badge { width: 28px; }
.servmall-mark--sm .servmall-mark__text { font-size: 18px; }

.servmall-mark--lg .servmall-mark__logo,
.servmall-mark--lg .servmall-mark__badge {
    height: 46px;
}
.servmall-mark--lg .servmall-mark__badge { width: 46px; }
.servmall-mark--lg .servmall-mark__text { font-size: 30px; }

.servmall-mark--compact { gap: 0; }

/* Placements -------------------------------------------------------------- */

a.navbar-brand { font-size: inherit !important; }

.page-sidebar .logo-wrapper .servmall-mark__logo { height: 32px; }
.page-sidebar .favicon-img .servmall-mark__badge { width: 36px; height: 36px; }

.auth-card .servmall-mark,
.login-main .servmall-mark { margin-bottom: 4px; }

.image-contain .servmall-mark.logo {
    height: auto;
    margin-bottom: 30px;
}

.footer-logo .servmall-mark__logo { height: 30px; }
.mobile-logo .servmall-mark__logo { height: 26px; }

/* --------------------------------------------------------------------------
   Brand utilities
   -------------------------------------------------------------------------- */

.servmall-bg-navy { background-color: var(--servmall-navy); }
.servmall-bg-navy-deep { background-color: var(--servmall-navy-deep); }
.servmall-bg-cream { background-color: var(--servmall-cream); }
.servmall-text-navy { color: var(--servmall-navy); }
.servmall-text-blue { color: var(--servmall-blue); }

.servmall-gradient {
    background: linear-gradient(135deg, var(--servmall-blue-light) 0%, var(--servmall-navy) 100%);
}

/* --------------------------------------------------------------------------
   Admin panel — brand primary
   Re-points the admin theme's interactive colour (was the template's indigo)
   to ServMall navy. Loads after the compiled admin CSS. The SCSS source is the
   canonical value; this also covers any dynamic var(--primary-color) usage.
   -------------------------------------------------------------------------- */
:root {
    --primary-color: var(--servmall-navy);
    --bg-sidebar: var(--servmall-navy-ink);
}

/* ==========================================================================
   ServMall admin — brand typography + refreshed card/widget patterns
   Loaded last, so it refines the compiled theme without a rebuild.
   Goal: distinct from the stock template, still calm and professional.
   ========================================================================== */

:root {
    --sm-radius: 12px;
    --sm-card-border: 1px solid rgba(40, 96, 144, 0.10);
    --sm-card-shadow: 0 1px 2px rgba(27, 61, 92, 0.04), 0 4px 14px rgba(27, 61, 92, 0.05);
    --sm-card-shadow-hover: 0 8px 22px rgba(27, 61, 92, 0.10);
    --sm-ink: #1b3d5c;
}

/* --- Typography: brand display face on headings, IBM Plex body --------- */
body.theme,
body.theme p,
body.theme .form-control,
body.theme table {
    font-family: "IBM Plex Sans", var(--font-family), "Helvetica Neue", Arial, sans-serif;
}

body.theme h1, body.theme h2, body.theme h3,
body.theme h4, body.theme h5, body.theme h6,
.page-title h3, .welcome h3,
.card .card-title, .card-header h3, .card-header h4, .card-header h5,
.total-box .top-box h4,
.datatable-header h3, .datatable-header h4 {
    font-family: "Raleway", "IBM Plex Sans", sans-serif !important;
    letter-spacing: -0.015em;
    font-weight: 700;
}

/* Sidebar section labels — brand face, a touch more presence */
.page-sidebar .sidebar-main-title h6 {
    font-family: "Raleway", sans-serif;
    letter-spacing: 0.08em;
}

/* --- Cards: hairline border + soft shadow + consistent radius ---------- */
.page-body .card {
    border: var(--sm-card-border);
    border-radius: var(--sm-radius);
    box-shadow: var(--sm-card-shadow);
}

/* --- Stat cards: unified metrics-strip pattern with left brand accent -- */
.total-box {
    border: var(--sm-card-border);
    border-left: 3px solid var(--servmall-navy);
    border-radius: var(--sm-radius);
    box-shadow: var(--sm-card-shadow);
    transition: box-shadow .2s ease, transform .2s ease;
}
.total-box:hover {
    box-shadow: var(--sm-card-shadow-hover);
    transform: translateY(-2px);
}
/* squarer, calmer icon tiles */
.total-box .top-box svg {
    border-radius: 9px;
}

/* --- Panels: clearer section headers ----------------------------------- */
.page-body .card .card-header {
    border-bottom: 1px solid rgba(40, 96, 144, 0.10);
    background: transparent;
}

/* English-only: hide leftover vendor language switcher rows */
body.theme .language-list,
body.theme .form-group:has(> .col-md-10 > .language-list) {
    display: none !important;
}

.sub-header,
.currency-btn,
.language-btn,
li.no-dropdown:has(.currency-btn),
li.no-dropdown:has(.language-btn),
li.currency-dropdown,
li.language-dropdown {
    display: none !important;
}
.page-body table.dataTable tbody tr:hover {
    background-color: rgba(40, 96, 144, 0.035);
}