[data-bs-theme="dark"] {
--kt-body-bg:            #0f1a2b;
--kt-body-color:         #b5c0d3;
--kt-card-bg:            #1a2840;
--kt-card-border-color:  #243450;
--kt-card-box-shadow:    0 4px 40px rgba(0,0,0,.45);

--kt-input-bg:           #162035;
--kt-input-border-color: #2a3f5f;
--kt-input-color:        #d6e0f0;
--kt-input-placeholder:  #4a6080;
--kt-input-focus-border: #3e7bfa;
--kt-input-icon-color:   #4a6080;

--kt-primary:            #3e7bfa;
--kt-primary-hover:      #2d6ae8;
--kt-primary-light:      rgba(62,123,250,.12);

--kt-text-muted:         #6b80a0;
--kt-text-gray-400:      #8898aa;
--kt-text-gray-600:      #b5c0d3;
--kt-text-dark:          #e8edf5;
--kt-heading-color:      #f0f4ff;

--kt-badge-admin-bg:     #3e7bfa;
--kt-badge-admin-color:  #fff;
--kt-badge-manager-bg:   #f5a623;
--kt-badge-manager-color:#fff;
--kt-badge-operator-bg:  #2eb88a;
--kt-badge-operator-color:#fff;

--kt-separator-color:    #243450;
--kt-stat-bg:            #162035;
--kt-stat-border:        #243450;

--kt-grid-color:         rgba(255,255,255,.03);
--kt-dot-color:          rgba(62,123,250,.15);
}

/* ---------- LIGHT THEME ---------- */
[data-bs-theme="light"] {
--kt-body-bg:            #f1f5fb;
--kt-body-color:         #5e6e82;
--kt-card-bg:            #ffffff;
--kt-card-border-color:  #e2e8f0;
--kt-card-box-shadow:    0 4px 40px rgba(0,0,0,.08);

--kt-input-bg:           #f7f9fc;
--kt-input-border-color: #d8e0ec;
--kt-input-color:        #1e2d45;
--kt-input-placeholder:  #a0aec0;
--kt-input-focus-border: #3e7bfa;
--kt-input-icon-color:   #a0aec0;

--kt-primary:            #910505;
--kt-primary-hover:      #2b0404;
--kt-primary-light:      rgba(62,123,250,.08);

--kt-text-muted:         #90a0b8;
--kt-text-gray-400:      #a0aec0;
--kt-text-gray-600:      #5e6e82;
--kt-text-dark:          #1e2d45;
--kt-heading-color:      #0f1a2b;

--kt-badge-admin-bg:     #3e7bfa;
--kt-badge-admin-color:  #fff;
--kt-badge-manager-bg:   #f5a623;
--kt-badge-manager-color:#fff;
--kt-badge-operator-bg:  #2eb88a;
--kt-badge-operator-color:#fff;

--kt-separator-color:    #e8edf5;
--kt-stat-bg:            #f7f9fc;
--kt-stat-border:        #e2e8f0;

--kt-grid-color:         rgba(0,0,0,.03);
--kt-dot-color:          rgba(62,123,250,.12);
}

/* ============================================================
BASE / RESET (Metronic 8 style)
============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
font-family: 'Inter', sans-serif;
background-color: var(--kt-body-bg);
color: var(--kt-body-color);
min-height: 100vh;
transition: background-color .3s, color .3s;
overflow-x: hidden;

/* subtle animated dot-grid background (Metronic 8 auth pages use this) */
background-image:
    radial-gradient(var(--kt-dot-color) 1px, transparent 1px),
    radial-gradient(var(--kt-dot-color) 1px, transparent 1px);
background-size: 32px 32px;
background-position: 0 0, 16px 16px;
}

/* ============================================================
LAYOUT WRAPPER  (Metronic 8: d-flex flex-column flex-lg-row)
============================================================ */
.auth-wrapper {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 2rem 1rem;
gap: 3rem;
}

/* ============================================================
LEFT PANEL – marketing / feature list
============================================================ */
.auth-aside {
flex: 0 0 420px;
max-width: 420px;
}

/* brand */
.brand-logo {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--kt-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
color: #fff;
flex-shrink: 0;
}
.brand-name {
font-size: 1.25rem;
font-weight: 700;
color: var(--kt-heading-color);
letter-spacing: -.02em;
transition: color .3s;
}
.brand-tagline {
font-size: .65rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--kt-text-muted);
}

/* headline */
.auth-headline {
font-size: 2.4rem;
font-weight: 800;
line-height: 1.15;
color: var(--kt-heading-color);
letter-spacing: -.03em;
margin: 2rem 0 1rem;
transition: color .3s;
}
.auth-subtext {
font-size: .925rem;
color: var(--kt-text-muted);
line-height: 1.65;
margin-bottom: 2rem;
}

/* feature list */
.feature-list { list-style: none; padding: 0; margin: 0 0 2.5rem; }
.feature-list li {
display: flex;
align-items: center;
gap: .75rem;
padding: .5rem 0;
font-size: .9rem;
color: var(--kt-text-gray-600);
}
.feature-list li .feat-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--kt-primary-light);
display: flex;
align-items: center;
justify-content: center;
color: var(--kt-primary);
font-size: .95rem;
flex-shrink: 0;
transition: background .3s;
}



/* ============================================================
RIGHT PANEL – login card  (Metronic 8: card card-flush)
============================================================ */
.auth-card {
flex: 0 0 420px;
max-width: 420px;
background: var(--kt-card-bg);
border: 1px solid var(--kt-card-border-color);
border-radius: 20px;
box-shadow: var(--kt-card-box-shadow);
padding: 2.5rem;
transition: background .3s, border-color .3s;
}

.auth-card .card-title {
font-size: 1.6rem;
font-weight: 700;
color: var(--kt-heading-color);
letter-spacing: -.025em;
margin-bottom: .35rem;
}
.auth-card .card-subtitle {
font-size: .875rem;
color: var(--kt-text-muted);
margin-bottom: 2rem;
}

/* ── Metronic 8 form controls ── */
.form-label {
font-size: .75rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--kt-text-gray-400);
margin-bottom: .45rem;
}
.input-group-kt {
position: relative;
display: flex;
align-items: center;
}
.input-icon {
position: absolute;
left: 1rem;
color: var(--kt-input-icon-color);
font-size: 1rem;
pointer-events: none;
z-index: 2;
transition: color .2s;
}
.input-icon-right {
left: auto;
right: 1rem;
cursor: pointer;
pointer-events: all;
}
.form-control-kt {
width: 100%;
background: var(--kt-input-bg);
border: 1.5px solid var(--kt-input-border-color);
border-radius: 10px;
color: var(--kt-input-color);
font-size: .925rem;
padding: .75rem 1rem .75rem 2.75rem;
outline: none;
transition: border-color .2s, background .3s, box-shadow .2s;
font-family: inherit;
}
.form-control-kt::placeholder { color: var(--kt-input-placeholder); }
.form-control-kt:focus {
border-color: var(--kt-input-focus-border);
box-shadow: 0 0 0 3px rgba(62,123,250,.15);
}
.form-control-kt:focus + .input-icon,
.input-group-kt:focus-within .input-icon { color: var(--kt-primary); }

/* password field has right icon padding */
.form-control-kt.has-right-icon { padding-right: 2.75rem; }

/* ── Sign In Button (Metronic 8: btn btn-primary) ── */
.btn-kt-primary {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
width: 100%;
padding: .875rem;
background: var(--kt-primary);
color: #fff;
font-size: .95rem;
font-weight: 600;
border: none;
border-radius: 10px;
cursor: pointer;
letter-spacing: .01em;
transition: background .2s, transform .15s, box-shadow .2s;
font-family: inherit;
margin-top: .5rem;
}
.btn-kt-primary:hover {
background: var(--kt-primary-hover);
box-shadow: 0 4px 20px rgba(250, 84, 62, 0.4);
transform: translateY(-1px);
    color: #fff;
}
.btn-kt-primary:active { transform: translateY(0); }

/* ── Separator ── */
.kt-separator {
display: flex;
align-items: center;
gap: .75rem;
font-size: .75rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--kt-text-muted);
margin: 1.5rem 0 1rem;
}
.kt-separator::before, .kt-separator::after {
content: '';
flex: 1;
height: 1px;
background: var(--kt-separator-color);
}

/* ── Demo credentials panel ── */
.demo-panel {
background: var(--kt-input-bg);
border: 1px solid var(--kt-stat-border);
border-radius: 12px;
padding: 1rem;
transition: background .3s, border-color .3s;
}
.demo-panel-label {
font-size: .65rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--kt-text-muted);
margin-bottom: .75rem;
}
.role-row {
display: flex;
align-items: center;
gap: .75rem;
padding: .55rem .6rem;
border-radius: 8px;
cursor: pointer;
transition: background .15s;
}
.role-row:hover { background: var(--kt-primary-light); }
.role-row + .role-row { margin-top: .25rem; }

/* Metronic 8 badge */
.badge-kt {
display: inline-flex;
align-items: center;
padding: .25em .65em;
font-size: .7rem;
font-weight: 700;
border-radius: 6px;
letter-spacing: .04em;
flex-shrink: 0;
min-width: 64px;
justify-content: center;
}
.badge-admin    { background: var(--kt-badge-admin-bg);    color: var(--kt-badge-admin-color); }
.badge-manager  { background: var(--kt-badge-manager-bg);  color: var(--kt-badge-manager-color); }
.badge-operator { background: var(--kt-badge-operator-bg); color: var(--kt-badge-operator-color); }

.role-info { flex: 1; min-width: 0; }
.role-title {
font-size: .8rem;
font-weight: 600;
color: var(--kt-text-dark);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.role-creds {
font-size: .75rem;
color: var(--kt-text-muted);
font-family: 'Courier New', monospace;
margin-top: .1rem;
}

/* ============================================================
THEME TOGGLE (top-right corner)
============================================================ */
.theme-toggle {
position: fixed;
top: 1.25rem;
right: 1.25rem;
z-index: 100;
background: var(--kt-card-bg);
border: 1px solid var(--kt-card-border-color);
border-radius: 10px;
padding: .5rem .75rem;
display: flex;
align-items: center;
gap: .5rem;
font-size: .8rem;
font-weight: 600;
color: var(--kt-text-muted);
cursor: pointer;
transition: background .3s, border-color .3s, color .2s;
box-shadow: var(--kt-card-box-shadow);
user-select: none;
}
.theme-toggle:hover { color: var(--kt-heading-color); }
.theme-toggle i { font-size: 1rem; }

/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 900px) {
.auth-wrapper {
    flex-direction: column;
    gap: 2rem;
    padding: 5rem 1rem 2rem;
}
.auth-aside, .auth-card {
    flex: none;
    max-width: 100%;
    width: 100%;
}
}

/* ============================================================
ENTRANCE ANIMATION
============================================================ */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to   { opacity: 1; transform: translateY(0); }
}
.auth-aside  { animation: fadeUp .6s ease both; }
.auth-card   { animation: fadeUp .6s .15s ease both; }