/* =========================================================================
   AGILE-HRP® brand theme
   Palette from the supplied sign-in design:
     teal   #0a4f48  (panel, primary)     -> chrome and primary actions
     teal-d #063a35  (deep)               -> gradient base, sidebar
     gold   #d3a950  (seal filigree)      -> accents, rules, secondary titles
     cream  #f6f1e3  (seal interior)      -> logo plate
   Typeface: Inter (self-hosted), system-ui fallback.
   Loaded only when the "AgileHRP" backend theme is selected, layered over
   login.css for the sign-in page.
   ========================================================================= */

:root {
    --ag-teal:        #0a4f48;
    --ag-teal-dark:   #063a35;
    --ag-teal-deep:   #04302c;
    --ag-teal-soft:   #147066;
    --ag-teal-50:     #e9f2f0;
    --ag-gold:        #d3a950;
    --ag-gold-dark:   #a8842f;
    --ag-gold-50:     #faf4e6;
    --ag-cream:       #f6f1e3;
    --ag-ink:         #16201e;
    --ag-slate:       #5a6664;
    --ag-bg:          #f4f6f5;
    --ag-border:      #e0e6e4;
}

/* ---------- typography ------------------------------------------------- */

body,
h1, h2, h3, h4, h5, h6,
.btn, input, select, textarea, label,
.navbar, .form-control, .table, .box-title,
.dataTables_wrapper, .select2-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

body {
    color: var(--ag-ink);
    background-color: var(--ag-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .box-title { font-weight: 600; letter-spacing: -0.01em; }

/* ---------- top bar ----------------------------------------------------- */

body > .header,
body > .header .navbar {
    background: #ffffff !important;
    border-bottom: 1px solid var(--ag-border);
}

body > .header .logo {
    background: #ffffff !important;
    color: var(--ag-teal) !important;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
    white-space: nowrap;
}
body > .header .logo img.aapscm-topbar-logo { height: 38px; width: auto; }

body > .header .navbar .sidebar-toggle .icon-bar { background: var(--ag-teal) !important; }
body > .header .navbar .nav > li > a,
body > .header .navbar .nav > li > a > .fa,
body > .header .navbar .nav > li > a > i { color: var(--ag-teal) !important; }
body > .header .navbar .nav > li > a:hover { background: var(--ag-teal-50) !important; }

/* ---------- sidebar ----------------------------------------------------- */

.left-side,
.left-side .sidebar {
    background: linear-gradient(180deg, var(--ag-teal) 0%, var(--ag-teal-deep) 100%) !important;
}

.left-side .sidebar .user-panel { background: rgba(255,255,255,0.06); }
.left-side .sidebar .user-panel .info,
.left-side .sidebar .user-panel .info p,
.left-side .sidebar .user-panel .info a { color: #ffffff !important; }

.sidebar .sidebar-menu > li > a {
    color: rgba(255,255,255,0.8) !important;
    border-left: 3px solid transparent;
    font-weight: 500;
}
.sidebar .sidebar-menu > li > a > .fa,
.sidebar .sidebar-menu > li > a > i { color: rgba(255,255,255,0.62) !important; }

.sidebar .sidebar-menu > li > a:hover,
.sidebar .sidebar-menu > li.active > a {
    color: #ffffff !important;
    background: rgba(255,255,255,0.09) !important;
    border-left-color: var(--ag-gold);
}
.sidebar .sidebar-menu > li > a:hover > .fa,
.sidebar .sidebar-menu > li.active > a > .fa,
.sidebar .sidebar-menu > li > a:hover > i,
.sidebar .sidebar-menu > li.active > a > i { color: var(--ag-gold) !important; }

.sidebar .sidebar-menu .treeview-menu { background: rgba(0,0,0,0.2) !important; }
.sidebar .sidebar-menu .treeview-menu > li > a { color: rgba(255,255,255,0.68) !important; }
.sidebar .sidebar-menu .treeview-menu > li > a:hover,
.sidebar .sidebar-menu .treeview-menu > li.active > a { color: #ffffff !important; }

/* ---------- buttons ----------------------------------------------------- */

.btn-primary, .btn-info {
    background-color: var(--ag-teal) !important;
    border-color: var(--ag-teal-dark) !important;
    color: #ffffff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-info:hover, .btn-info:focus, .btn-info:active { background-color: var(--ag-teal-dark) !important; }

.btn-success {
    background-color: var(--ag-gold) !important;
    border-color: var(--ag-gold-dark) !important;
    color: #26200c !important;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
    background-color: var(--ag-gold-dark) !important;
    color: #ffffff !important;
}

.btn-danger { background-color: #9c1c1c !important; border-color: #7d1616 !important; }
.btn-danger:hover { background-color: #7d1616 !important; }
.btn { border-radius: 4px; font-weight: 500; }

/* ---------- links, boxes ------------------------------------------------ */

a { color: var(--ag-teal); }
a:hover, a:focus { color: var(--ag-teal-dark); }
.text-aqua, .text-navy { color: var(--ag-teal) !important; }

.box { border-top-color: var(--ag-teal) !important; border-radius: 4px; }
.box.box-primary, .box.box-info { border-top-color: var(--ag-teal) !important; }
.box.box-success { border-top-color: var(--ag-gold) !important; }
.box.box-danger  { border-top-color: #9c1c1c !important; }

.box > .box-header,
.box.box-primary > .box-header,
.box.box-success > .box-header,
.box.box-info > .box-header { background: var(--ag-teal) !important; border-bottom: none; }
.box > .box-header .box-title,
.box > .box-header h3,
.box > .box-header h4,
.box > .box-header .box-title i,
.box > .box-header a { color: #ffffff !important; }
.box > .box-header .breadcrumb { background: transparent; }
.box > .box-header .breadcrumb > li > a,
.box > .box-header .breadcrumb > .active { color: rgba(255,255,255,0.85) !important; }

/* ---------- dashboard tiles --------------------------------------------- */

.small-box .bg-orange-dark, .small-box-footer.bg-orange-dark  { background-color: var(--ag-teal) !important; }
.small-box .bg-teal-light,  .small-box-footer.bg-teal-light   { background-color: var(--ag-gold) !important; }
.small-box .bg-pink-light,  .small-box-footer.bg-pink-light   { background-color: var(--ag-teal-deep) !important; }
.small-box .bg-purple-light,.small-box-footer.bg-purple-light { background-color: var(--ag-teal-soft) !important; }

.bg-aqua, .bg-blue, .bg-light-blue, .bg-navy { background-color: var(--ag-teal) !important; }
.bg-green, .bg-teal { background-color: var(--ag-gold) !important; }
.bg-red, .bg-maroon { background-color: #9c1c1c !important; }
.bg-purple, .bg-pink, .bg-fuchsia { background-color: var(--ag-teal-soft) !important; }
.profile-db-head, .bg-maroon-light { background-color: var(--ag-teal) !important; }

/* ---------- forms, tables ----------------------------------------------- */

.form-control { border-color: var(--ag-border); border-radius: 4px; color: var(--ag-ink); }
.form-control:focus {
    border-color: var(--ag-teal) !important;
    box-shadow: 0 0 0 2px rgba(10, 79, 72, 0.12) !important;
}

.table > thead > tr > th {
    background: var(--ag-teal-50);
    color: var(--ag-teal-dark);
    border-bottom: 2px solid var(--ag-teal) !important;
    font-weight: 600;
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
    background-color: var(--ag-teal) !important;
    border-color: var(--ag-teal) !important;
}
.pagination > li > a { color: var(--ag-teal); }

.label-success { background-color: var(--ag-gold) !important; color: #26200c !important; }
.label-danger  { background-color: #9c1c1c !important; }
.label-primary, .label-info { background-color: var(--ag-teal) !important; }

.progress-bar-success { background-color: var(--ag-gold) !important; }
.progress-bar-danger  { background-color: #9c1c1c !important; }
.progress-bar-info, .progress-bar-primary { background-color: var(--ag-teal) !important; }

.alert-success { background-color: var(--ag-gold) !important; border-color: var(--ag-gold-dark) !important; color: #26200c !important; }
.alert-danger, .alert-error { background-color: #9c1c1c !important; border-color: #7d1616 !important; }
.alert-info { background-color: var(--ag-teal) !important; border-color: var(--ag-teal-dark) !important; }

.main-footer { background: #ffffff; border-top: 1px solid var(--ag-border); color: var(--ag-slate); }

/* =========================================================================
   Sign-in page — AGILE-HRP®
   Layout comes from login.css; this repaints it and adds the curved divide.
   ========================================================================= */

:root {
    --login-primary:    #0a4f48;
    --login-primary-dk: #063a35;
    --login-panel-a:    #0a4f48;
    --login-panel-b:    #04302c;
    --login-accent:     #d3a950;
}

/* ---- brand panel: teal field, gold sweep, curved right edge ---- */

body.white-bg-login .aap-login__brand {
    flex: 0 0 58%;
    max-width: 58%;
    background:
        radial-gradient(120% 90% at 20% 15%, #0d6259 0%, rgba(13,98,89,0) 58%),
        linear-gradient(155deg, var(--ag-teal) 0%, var(--ag-teal-deep) 100%);
    /* a single convex sweep, meeting the top and bottom edges */
    border-radius: 0 16% 16% 0 / 0 48% 48% 0;
    padding-right: 6%;
    position: relative;
    overflow: hidden;
}

/* gold hairline tracing the curve */
body.white-bg-login .aap-login__brand::before {
    content: "";
    position: absolute;
    inset: 0;
    border-right: 3px solid var(--ag-gold);
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.9;
    z-index: 2;
}

/* faint dot field, as in the design */
body.white-bg-login .aap-login__brand::after {
    background-image: radial-gradient(circle, rgba(211,169,80,0.28) 1px, transparent 1.4px);
    background-size: 34px 34px;
    opacity: 0.5;
}


/* ---- gold ribbon sweeping the lower left, as in the design ---- */

body.white-bg-login .aap-login__brand-inner { position: relative; z-index: 3; }

body.white-bg-login .ag-wave {
    position: absolute;
    left: -6%;
    bottom: -6%;
    width: 78%;
    height: 26%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
}

/* keep the feature row clear of the ribbon */
body.white-bg-login .aap-login__brand { padding-bottom: 5%; }
body.white-bg-login .aap-login__features { margin-bottom: 8px; }

/* ---- logo on its cream plate ---- */

body.white-bg-login .aap-login__logo {
    background: none !important;
    padding: 0 !important;
    border: none;
    border-radius: 0;
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.34));
    width: 215px !important;
    max-width: 215px !important;
    max-height: none;
    margin-bottom: 30px;
}

/* ---- the two-line title lockup ---- */

body.white-bg-login .aap-login__sitename {
    font-size: 34px;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

body.white-bg-login .aap-login__titleline {
    margin: 0;
    font-size: 27px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--ag-gold);
    text-transform: uppercase;
}

/* gold rule with a diamond, echoing the seal's filigree */
body.white-bg-login .aap-login__rule {
    width: 260px;
    max-width: 80%;
    height: 1px;
    background: linear-gradient(90deg, rgba(211,169,80,0) 0%, var(--ag-gold) 25%, var(--ag-gold) 75%, rgba(211,169,80,0) 100%);
    position: relative;
    margin: 20px 0 26px 0;
    border-radius: 0;
}
body.white-bg-login .aap-login__rule::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    background: var(--ag-gold);
    transform: translate(-50%, -50%) rotate(45deg);
}

body.white-bg-login .aap-login__headline { font-size: 27px; }

/* ---- feature row: gold icons, uppercase labels ---- */

body.white-bg-login .aap-login__feature i { color: var(--ag-gold); }
body.white-bg-login .aap-login__feature strong {
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 12.5px;
}
body.white-bg-login .aap-login__feature { border-left-color: rgba(211,169,80,0.3); }

/* ---- form side ---- */

body.white-bg-login .aap-login__panel {
    background: #f7f8f8;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body.white-bg-login .aap-login__card {
    border-radius: 10px;
    padding-top: 38px;
    max-width: 452px;
    box-shadow: 0 20px 55px rgba(4, 48, 44, 0.12), 0 2px 8px rgba(4, 48, 44, 0.06);
}

/* globe-and-people mark above the greeting, drawn rather than an image file */
body.white-bg-login .aap-login__cardmark {
    display: block;
    width: 76px;
    height: 56px;
    margin: 0 auto 14px auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 56'>\
<g fill='%230a4f48'>\
<circle cx='38' cy='11' r='7'/>\
<circle cx='20' cy='16' r='6'/><circle cx='56' cy='16' r='6'/>\
<path d='M30 30c0-4.4 3.6-8 8-8s8 3.6 8 8v3H30z'/>\
<path d='M12 33c0-4.4 3.6-8 8-8 2.2 0 4.2.9 5.6 2.3A11 11 0 0 0 23 33z'/>\
<path d='M64 33c0-4.4-3.6-8-8-8-2.2 0-4.2.9-5.6 2.3A11 11 0 0 1 53 33z'/>\
</g>\
<g fill='none' stroke='%230a4f48' stroke-width='2.4'>\
<path d='M8 40c8 9 22 14 30 14s22-5 30-14'/>\
<path d='M22 43c5 6 11 8 16 8s11-2 16-8'/>\
<path d='M38 41v13'/>\
</g></svg>");
}

body.white-bg-login .aap-login__title { color: var(--ag-teal); }

body.white-bg-login .aap-login__submit {
    background: var(--ag-teal);
    letter-spacing: 0.08em;
}
body.white-bg-login .aap-login__submit:hover { background: var(--ag-teal-dark); }

body.white-bg-login .aap-login__forgot { color: var(--ag-teal); }
body.white-bg-login .aap-field__input:focus {
    border-color: var(--ag-teal);
    box-shadow: 0 0 0 3px rgba(10, 79, 72, 0.1);
}
body.white-bg-login .aap-field__reveal:hover { color: var(--ag-teal); background: var(--ag-teal-50); }

body.white-bg-login .aap-login__divider { color: var(--ag-gold); }
body.white-bg-login .aap-login__trust {
    white-space: nowrap;
    font-size: 12.5px;
}
body.white-bg-login .aap-login__trust i { color: var(--ag-teal); margin-right: 3px; }
body.white-bg-login .aap-login__trust span { color: #c9d2d0; }

/* ---- legal strip beneath the card ---- */

body.white-bg-login .aap-login__legal {
    margin: 18px auto 0 auto;
    max-width: 430px;
    text-align: center;
    font-size: 12.5px;
    color: var(--ag-slate);
}
body.white-bg-login .aap-login__legal p { margin: 4px 0; }
body.white-bg-login .aap-login__legal a { color: var(--ag-teal); text-decoration: none; }
body.white-bg-login .aap-login__legal a:hover { text-decoration: underline; }
body.white-bg-login .aap-login__legal span { color: #c9d2d0; margin: 0 8px; }

/* ---- responsive: the curve and 60% split only make sense side by side ---- */

@media (max-width: 991px) {
    body.white-bg-login .aap-login__brand {
        flex: 0 0 auto;
        max-width: 100%;
        border-radius: 0;
        padding-right: 28px;
    }
    body.white-bg-login .aap-login__brand::before { border-right: none; border-bottom: 3px solid var(--ag-gold); }
    body.white-bg-login .aap-login__sitename { font-size: 27px; }
    body.white-bg-login .aap-login__titleline { font-size: 21px; }
}