/*!
 * AST Theme — PT. AQYLA SAHLA TEKNOLOGI
 * -----------------------------------------------------------------------------
 * Override brand untuk style.bundle.css (Metronic 8 / Bootstrap 5.3).
 * Dimuat SETELAH style.bundle.css. Jangan mengedit style.bundle.css langsung:
 * file itu artefak hasil kompilasi, dan hampir seluruh komponen Metronic
 * meresolusi warnanya lewat var(--bs-primary), jadi cukup redefinisi variabel.
 *
 * Palet di-sampling langsung dari img/logo-AST.png.
 * -----------------------------------------------------------------------------
 */

:root {
    --ast-primary:       #0E5C75; /* teal wordmark "PT. AQYLA SAHLA" */
    --ast-primary-dark:  #095869;
    --ast-primary-light: #2987A1; /* cyan highlight perisai */
    --ast-navy-deep:     #052B52; /* dasar perisai — header & toolbar */
    --ast-steel:         #2B4961; /* wordmark "TEKNOLOGI" */
    --ast-silver:        #C0D0D6; /* krom perisai — border & muted */
}

/* =============================================================================
   1. LIGHT MODE
   Specificity (0,1,1) mengalahkan [data-bs-theme=light] (0,1,0) milik bundle.
   ========================================================================== */
:root[data-bs-theme="light"],
:root:not([data-bs-theme="dark"]) {
    --bs-primary:               #0E5C75;
    --bs-primary-active:        #095869;
    --bs-primary-light:         #E8F2F5;
    --bs-primary-inverse:       #ffffff;
    --bs-primary-rgb:           14, 92, 117;
    --bs-primary-active-rgb:    9, 88, 105;  /* dipakai bundle tapi tak pernah didefinisikan */
    --bs-primary-clarity:       rgba(14, 92, 117, 0.2);
    --bs-primary-text-emphasis: #062530;
    --bs-primary-bg-subtle:     #CFDEE3;
    --bs-primary-border-subtle: #9FBEC8;
    --bs-text-primary:          #0E5C75;

    /* Bundle menyetel --bs-body-color ke warna brand sehingga SELURUH teks
       body ikut berwarna. Kembalikan ke netral. */
    --bs-body-color:            #071437;
    --bs-body-color-rgb:        7, 20, 55;

    --bs-link-color:            #0E5C75;
    --bs-link-color-rgb:        14, 92, 117;
    --bs-link-hover-color:      #095869;
    --bs-link-hover-color-rgb:  9, 88, 105;

    --bs-component-active-bg:     #0E5C75;
    --bs-component-hover-color:   #0E5C75;
    --bs-component-checked-bg:    #0E5C75;

    --bs-menu-link-color-hover:  #0E5C75;
    --bs-menu-link-color-show:   #0E5C75;
    --bs-menu-link-color-here:   #0E5C75;
    --bs-menu-link-color-active: #0E5C75;

    --bs-ribbon-label-bg:           #0E5C75;
    --bs-ribbon-label-border-color: #052B52;

    --bs-toolbar-bg-color: #052B52;
}

/* =============================================================================
   2. DARK MODE
   Primary dinaikkan ke cyan perisai agar kontras di background gelap.
   ========================================================================== */
:root[data-bs-theme="dark"] {
    --bs-primary:               #2987A1;
    --bs-primary-active:        #34A0BE;
    --bs-primary-light:         #12252C;
    --bs-primary-inverse:       #ffffff;
    --bs-primary-rgb:           41, 135, 161;
    --bs-primary-active-rgb:    52, 160, 190;
    --bs-primary-clarity:       rgba(41, 135, 161, 0.2);
    --bs-primary-text-emphasis: #7FBACC;
    --bs-primary-bg-subtle:     #08222B;
    --bs-primary-border-subtle: #145367;
    --bs-text-primary:          #2987A1;

    --bs-link-color:            #2987A1;
    --bs-link-color-rgb:        41, 135, 161;
    --bs-link-hover-color:      #4FB3CE; /* bundle: #3733b5, tak terbaca di gelap */
    --bs-link-hover-color-rgb:  79, 179, 206;

    --bs-component-active-bg:     #2987A1;
    --bs-component-hover-color:   #2987A1;
    --bs-component-checked-bg:    #2987A1;

    --bs-menu-link-color-hover:  #2987A1;
    --bs-menu-link-color-show:   #2987A1;
    --bs-menu-link-color-here:   #2987A1;
    --bs-menu-link-color-active: #2987A1;

    --bs-scrolltop-bg-color:       #2987A1;
    --bs-scrolltop-bg-color-hover: #34A0BE;

    --bs-ribbon-label-bg:           #2987A1;
    --bs-ribbon-label-border-color: #0E5C75;
}

/* =============================================================================
   3. Variabel komponen Bootstrap-core
   Rule ini berada di luar scope [data-bs-theme], jadi selectornya ditulis ulang
   agar mewarisi --bs-primary. Di bundle, hover/active .btn-primary bernilai
   HIJAU (#3acf6d / #45d175) dan warna teksnya hitam.
   ========================================================================== */
.btn-primary {
    --bs-btn-color:               #ffffff;
    --bs-btn-bg:                  var(--bs-primary);
    --bs-btn-border-color:        var(--bs-primary);
    --bs-btn-hover-color:         #ffffff;
    --bs-btn-hover-bg:            var(--bs-primary-active);
    --bs-btn-hover-border-color:  var(--bs-primary-active);
    --bs-btn-focus-shadow-rgb:    var(--bs-primary-rgb);
    --bs-btn-active-color:        #ffffff;
    --bs-btn-active-bg:           var(--bs-primary-active);
    --bs-btn-active-border-color: var(--bs-primary-active);
    --bs-btn-disabled-color:      #ffffff;
    --bs-btn-disabled-bg:         var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
    --bs-btn-color:                 var(--bs-primary);
    --bs-btn-border-color:          var(--bs-primary);
    --bs-btn-hover-color:           #ffffff;
    --bs-btn-hover-bg:              var(--bs-primary);
    --bs-btn-hover-border-color:    var(--bs-primary);
    --bs-btn-focus-shadow-rgb:      var(--bs-primary-rgb);
    --bs-btn-active-color:          #ffffff;
    --bs-btn-active-bg:             var(--bs-primary);
    --bs-btn-active-border-color:   var(--bs-primary);
    --bs-btn-disabled-color:        var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-primary);
}

/* =============================================================================
   4. Selector ber-hex literal
   Tujuh rule di bundle yang menuliskan #2e17c6 langsung, sehingga tidak bisa
   dijangkau dengan redefinisi variabel.
   ========================================================================== */
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-check.form-check-solid .form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--bs-primary);
}

.form-range::-webkit-slider-thumb { background-color: var(--bs-primary); }
.form-range::-moz-range-thumb     { background-color: var(--bs-primary); }

.separator.separator-content.border-primary::before,
.separator.separator-content.border-primary::after {
    border-color: var(--bs-primary) !important;
}

.landing-header .menu .menu-link.active,
[data-kt-sticky-landing-header="on"] .landing-header .menu .menu-link.active {
    color: var(--bs-primary);
}

/* =============================================================================
   5. Aksen AST
   ========================================================================== */
.toolbar {
    background-image: linear-gradient(120deg, var(--ast-navy-deep) 0%, var(--ast-primary-dark) 100%);
}

:root[data-bs-theme="dark"] .toolbar {
    background-image: none;
}

/* Tombol brand bergradasi — dipakai di halaman login dan CTA utama. */
.btn-ast {
    background: linear-gradient(135deg, var(--ast-primary-light), var(--ast-navy-deep));
    border: 0;
    color: #ffffff;
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    box-shadow: 0 12px 26px -10px rgba(14, 92, 117, .75);
}

.btn-ast:hover:not(:disabled),
.btn-ast:focus:not(:disabled) {
    color: #ffffff;
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 16px 32px -10px rgba(14, 92, 117, .8);
}

.btn-ast:disabled { opacity: .75; }

@media (prefers-reduced-motion: reduce) {
    .btn-ast { transition: none; }
}

/* =============================================================================
   6. Halaman login (application/views/template_login.php)
   ========================================================================== */
body.auth-bg {
    background-image: url('../../../img/auth/ast-bg.svg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

[data-bs-theme="dark"] body.auth-bg {
    background-image: url('../../../img/auth/ast-bg-dark.svg');
}

/* ---------- Panel brand (kolom kiri) ---------- */
.auth-brand {
    max-width: 560px;
}

/* Logo AST nyaris persegi (860 x 802), berbeda dari lockup lebar
   sebelumnya, jadi lebarnya dibatasi agar tagline + fitur tetap
   terlihat tanpa scroll. */
.auth-brand__logo {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

@media (min-height: 900px) {
    .auth-brand__logo { max-width: 260px; }
}

.auth-brand__tagline {
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 470px;
}

.auth-feature {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1.1rem;
    border-radius: .85rem;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(14, 92, 117, .14);
    backdrop-filter: blur(8px);
    transition: transform .18s ease, box-shadow .18s ease;
}

.auth-feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(5, 43, 82, .12);
}

[data-bs-theme="dark"] .auth-feature {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .10);
}

.auth-feature__icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: .7rem;
    background: linear-gradient(135deg, var(--ast-primary-light), var(--ast-navy-deep));
    color: #fff;
}

.auth-feature__icon i {
    color: #fff;
    font-size: 1.15rem;
}

/* ---------- Kartu form (kolom kanan) ---------- */
.auth-shell .bg-body {
    background: rgba(255, 255, 255, .82) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, .65);
    box-shadow: 0 26px 70px -22px rgba(5, 43, 82, .38);
}

[data-bs-theme="dark"] .auth-shell .bg-body {
    background: rgba(20, 30, 52, .86) !important;
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 26px 70px -22px rgba(0, 0, 0, .65);
}

/* ---------- Input ---------- */
.auth-shell .form-control {
    border: 1px solid var(--bs-gray-300);
    border-radius: .75rem;
    padding-top: .85rem;
    padding-bottom: .85rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-shell .form-control:focus {
    border-color: var(--ast-primary-light);
    box-shadow: 0 0 0 .22rem rgba(41, 135, 161, .20);
}

.auth-shell .input-icon {
    position: relative;
}

.auth-shell .input-icon > i {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    color: var(--bs-gray-500);
    font-size: 1.15rem;
    pointer-events: none;
}

.auth-shell .input-icon > .form-control {
    padding-left: 2.9rem;
}

.auth-shell .btn-toggle-password {
    position: absolute;
    top: 50%;
    right: .4rem;
    transform: translateY(-50%);
    color: var(--bs-gray-500);
    z-index: 3;
}

/* ---------- Tombol ---------- */
/* Gradasi, warna, dan transisi diwarisi dari .btn-ast (bagian 5). */
.auth-shell .btn-ast {
    border-radius: .75rem;
    padding: .95rem 1rem;
    letter-spacing: .01em;
}

.auth-shell .btn-ast:hover:not(:disabled),
.auth-shell .btn-ast:focus:not(:disabled) {
    filter: brightness(1.06);
}

/* ---------- Captcha ---------- */
.captcha-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.captcha-row > .form-control {
    flex: 1 1 110px;
    min-width: 0;
}

.captcha-box {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem;
    border: 1px dashed var(--bs-gray-300);
    border-radius: .75rem;
    background: var(--bs-gray-100);
}

.captcha-box__img {
    flex: 0 0 auto;
    height: 44px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: .5rem;
    background: #fff;
    user-select: none;
    -webkit-user-select: none;
}

.captcha-box__refresh {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--bs-gray-600);
    transition: background-color .15s ease, color .15s ease, transform .3s ease;
}

.captcha-box__refresh:hover {
    background: var(--bs-gray-200);
    color: var(--ast-primary);
}

.captcha-box__refresh.is-spinning i {
    animation: ast-spin .6s linear;
}

@keyframes ast-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

#loginCaptcha::placeholder {
    letter-spacing: normal;
    font-weight: 500;
}

@media (max-width: 575.98px) {
    /* Ringkas supaya captcha + input tetap satu baris di layar HP */
    .captcha-row { gap: .5rem; }
    .captcha-box {
        padding: 0;
        border: 0;
        background: transparent;
        gap: .25rem;
    }
    .captcha-box__img { height: 42px; }
    .captcha-box__refresh { width: 28px; height: 28px; }
    .auth-shell .captcha-row > .form-control {
        flex: 1 1 90px;
        letter-spacing: .2em;
        padding-left: .5rem;
        padding-right: .5rem;
    }
}

@media (max-width: 991.98px) {
    .auth-brand { text-align: center; }
    .auth-brand__logo { max-width: 190px; }
    .auth-brand__tagline,
    .auth-brand__features { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-feature { transition: none; }
    .captcha-box__refresh.is-spinning i { animation: none; }
}