/* ==========================================================================
   Eku HRIS — Arti Tech brand palette
   Sampled from "Arti Technologies Compro.pdf" (2026 Company Profile).

   Orange #FF551A is the signature/primary colour, blue #0067DB is the
   accent used for headings and links. Loaded AFTER custom-color.css so it
   wins over the stock lilac tints that ship with the template.
   ========================================================================== */

:root {
    /* --- primary: Arti Tech orange --- */
    --arti-orange: #ff551a;
    --arti-orange-dark: #d93f08;
    --arti-orange-deep: #b53105;
    --arti-orange-light: #ff8a5b;
    --arti-orange-tint: #ffe8de;
    --arti-orange-wash: #fff4ef;
    --arti-orange-rgb: 255, 85, 26;

    /* --- accent: Arti Tech blue / cyan --- */
    --arti-blue: #0067db;
    --arti-blue-dark: #0047a8;
    --arti-blue-tint: #e0edfd;
    --arti-blue-rgb: 0, 103, 219;
    --arti-cyan: #42c0e6;

    /* --- warm secondary (PDF gradient partner) --- */
    --arti-amber: #ffa726;

    /* --- neutrals --- */
    --arti-ink: #0b0e1a;
    --arti-slate: #3e4a5c;

    /* The template's own hook. Kept in sync so any rule that still reads
       --color-customColor picks up the brand orange even before the DB
       setting is read. */
    --color-customColor: var(--arti-orange);
}

/* --------------------------------------------------------------------------
   1. Brand tints — replace the template's lilac (#e9d5e7 / #922c88 family)
   -------------------------------------------------------------------------- */

body.custom-color .btn-light-primary,
body.custom-color .badge.bg-light-primary,
body.custom-color .dash-header .drp-company .theme-avtar {
    background: var(--arti-orange-tint);
    color: var(--arti-orange-dark);
    border-color: var(--arti-orange-tint);
}

body.custom-color .btn-light-primary:hover,
body.custom-color .btn-light-primary:focus,
body.custom-color .btn-light-primary.focus {
    background: var(--arti-orange);
    color: #fff;
    border-color: var(--arti-orange);
}

body.custom-color .alert-primary {
    --bs-alert-color: var(--arti-orange-deep);
    --bs-alert-bg: var(--arti-orange-wash);
    --bs-alert-border-color: var(--arti-orange-tint);
}

body.custom-color .alert-primary .alert-link {
    color: var(--arti-orange-deep);
}

body.custom-color pre[class*="language-"] > code {
    border-left-color: var(--arti-orange);
    background-image: linear-gradient(transparent 50%, rgba(var(--arti-orange-rgb), 0.04) 50%);
}

/* Focus rings: the stock rule paints a solid 0.2rem ring in the full brand
   colour, which reads as a thick orange halo. Soften it to a translucent one. */
body.custom-color .form-check-input:focus,
body.custom-color .form-select:focus,
body.custom-color .form-control:focus,
body.custom-color .custom-select:focus,
body.custom-color .dataTable-selector:focus,
body.custom-color .dataTable-input:focus {
    border-color: var(--arti-orange-light);
    box-shadow: 0 0 0 0.2rem rgba(var(--arti-orange-rgb), 0.2);
}

body.custom-color .btn-primary {
    --bs-btn-focus-shadow-rgb: var(--arti-orange-rgb);
}

body.custom-color .btn-outline-primary {
    --bs-btn-focus-shadow-rgb: var(--arti-orange-rgb);
}

/* --------------------------------------------------------------------------
   2. Sidebar — the template hardcodes a purple (#51459d) hover outside the
      .custom-color scope, so it leaks through on every theme. Rebrand it.
   -------------------------------------------------------------------------- */

.dash-sidebar .dash-navbar > .dash-item:hover > .dash-link,
.dash-sidebar.light-sidebar .dash-navbar > .dash-item:hover > .dash-link {
    background: rgba(var(--arti-orange-rgb), 0.1) !important;
    color: var(--arti-orange-dark) !important;
}

.dash-sidebar .dash-navbar > .dash-item:hover > .dash-link .dash-micon i,
.dash-sidebar .dash-navbar > .dash-item:hover > .dash-link .dash-micon svg,
.dash-sidebar.light-sidebar .dash-navbar > .dash-item:hover > .dash-link .dash-micon i,
.dash-sidebar.light-sidebar .dash-navbar > .dash-item:hover > .dash-link .dash-micon svg {
    color: var(--arti-orange-dark) !important;
}

.dash-sidebar .dash-item .dash-submenu .dash-item:hover > .dash-link,
.dash-sidebar.light-sidebar .dash-item .dash-submenu .dash-item:hover > .dash-link {
    color: var(--arti-orange-dark) !important;
}

/* Active item keeps the solid orange fill from custom-color.css; only the
   drop shadow still carries the old lilac cast. */
body.custom-color .dash-sidebar .dash-navbar > .dash-item.active > .dash-link,
body.custom-color .dash-sidebar.light-sidebar .dash-navbar > .dash-item.active > .dash-link {
    box-shadow: 0 5px 7px -1px rgba(var(--arti-orange-rgb), 0.35);
}

/* --------------------------------------------------------------------------
   2b. Top menu — custom.css picked a green (#2f855a / #4ade80) for the active
       section and submenu marker, predating the brand. Bring it to orange.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
    body.menu-top .dash-navbar > .dash-item.active > .dash-link,
    body.menu-top .dash-navbar > .dash-item.dash-trigger > .dash-link {
        background: rgba(var(--arti-orange-rgb), 0.12);
        color: var(--arti-orange-dark);
    }

    body.menu-top .dash-submenu .dash-item.active > .dash-link {
        background: rgba(var(--arti-orange-rgb), 0.30);
        box-shadow: inset 2px 0 0 var(--arti-orange);
    }
}

/* --------------------------------------------------------------------------
   3. Blue accent — headings, links and info emphasis, per the PDF
   -------------------------------------------------------------------------- */

body.custom-color .text-info,
body.custom-color a.text-info {
    color: var(--arti-blue) !important;
}

body.custom-color .bg-light-info,
body.custom-color .badge.bg-light-info {
    background: var(--arti-blue-tint) !important;
    color: var(--arti-blue-dark) !important;
}

body.custom-color .btn-info {
    --bs-btn-bg: var(--arti-blue);
    --bs-btn-border-color: var(--arti-blue);
    --bs-btn-hover-bg: var(--arti-blue-dark);
    --bs-btn-hover-border-color: var(--arti-blue-dark);
    --bs-btn-active-bg: var(--arti-blue-dark);
    --bs-btn-active-border-color: var(--arti-blue-dark);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: var(--arti-blue-rgb);
}

body.custom-color .page-header h2,
body.custom-color .page-header .h2,
body.custom-color .card .card-header h5,
body.custom-color .card .card-header .h5 {
    color: var(--arti-ink);
}

/* --------------------------------------------------------------------------
   4. Login / auth screen
   -------------------------------------------------------------------------- */

body.custom-color .auth-main .auth-wrapper.v3 .auth-form,
.auth-main .auth-wrapper.v3 .auth-form {
    background: linear-gradient(160deg, var(--arti-orange) 0%, var(--arti-orange-dark) 55%, var(--arti-ink) 100%);
}

/* The hero artwork spans the full page, so the wash covers the full width
   rather than the template's right half, and fades rather than flooding. */
.custom-login .bg-login.brand-wash {
    left: 0;
    background: linear-gradient(
        105deg,
        rgba(var(--arti-orange-rgb), 0.06) 0%,
        rgba(var(--arti-orange-rgb), 0.14) 45%,
        rgba(var(--arti-orange-rgb), 0.30) 100%
    );
    pointer-events: none;
}

.auth-main .saprator span,
.auth-main .auth-form a:not(.btn) {
    color: var(--arti-blue);
}

.auth-main .auth-form a:not(.btn):hover {
    color: var(--arti-blue-dark);
}

/* --------------------------------------------------------------------------
   5. Misc chrome that reads the primary colour directly
   -------------------------------------------------------------------------- */

body.custom-color .loader-fill,
body.custom-color .loader-track .loader-fill {
    background: linear-gradient(90deg, var(--arti-orange), var(--arti-amber));
}

body.custom-color .dash-header .dash-head-link.head-link-secondary:hover,
body.custom-color .dash-header .dash-head-link:hover {
    color: var(--arti-orange);
}

body.custom-color ::selection {
    background: rgba(var(--arti-orange-rgb), 0.22);
}

/* Charts / progress that only ever used the template default */
body.custom-color .progress-bar.bg-primary {
    background: linear-gradient(90deg, var(--arti-orange), var(--arti-amber)) !important;
}