/* ─────────────────────────────────────────────────────────────────────────
   IQ Car Wash — App Layout & Theme
   Companion to Bootstrap 5. Provides the sidebar layout and utility
   classes used across all pages (replaces sb-admin-2.min.css).
───────────────────────────────────────────────────────────────────────── */

/* ── Page Layout ─────────────────────────────────────────────────────────── */

body {
    background-color: #f8f9fc;
}

[data-bs-theme="dark"] body {
    background-color: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .topbar {
    background-color: var(--bs-body-bg) !important;
    border-bottom: 1px solid var(--bs-border-color);
    box-shadow: none !important;
}

[data-bs-theme="dark"] footer {
    background-color: var(--bs-body-bg) !important;
    border-top-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .table-light {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--bs-secondary-bg);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: var(--bs-tertiary-bg);
    --bs-table-hover-bg: var(--bs-tertiary-bg);
}

html, body {
    height: 100%;
}

#wrapper {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.sidebar {
    width: 14rem;
    height: 100vh;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: width .1s;
}

.sidebar.toggled {
    overflow: visible;
    width: 6.5rem;
}

.sidebar.toggled .sidebar-brand-text {
    display: none;
}

.sidebar.toggled .sidebar-heading {
    text-align: center;
    padding: .625rem .25rem .15rem;
    font-size: .5rem;
    letter-spacing: .08rem;
}

.sidebar.toggled .nav-item {
    padding: 0 .375rem;
}

.sidebar.toggled .nav-item .nav-link {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: .5rem .25rem;
    text-align: center;
}

.sidebar.toggled .nav-item .nav-link i {
    margin-right: 0;
    margin-bottom: .2rem;
    font-size: 1.1rem;
}

.sidebar.toggled .nav-item .nav-link span {
    display: block;
    font-size: .58rem;
    line-height: 1.2;
    white-space: nowrap;
}

#content-wrapper {
    flex: 1 1 0;
    min-width: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#content {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* ── Topbar ──────────────────────────────────────────────────────────────── */

.topbar {
    height: 4.375rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.topbar .img-profile {
    height: 2rem;
    width: 2rem;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.sidebar-brand {
    height: 4.375rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.sidebar-brand-icon img {
    max-width: 2.75rem;
    transition: max-width .1s;
}

.sidebar.toggled .sidebar-brand-icon img {
    max-width: 3.75rem;
}

.sidebar-brand-text {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .07rem;
    text-transform: uppercase;
    color: #fff;
}

.sidebar-divider {
    border-top: 1px solid rgba(255, 255, 255, .07);
    margin: .375rem .75rem;
}

.sidebar-heading {
    padding: .875rem 1.25rem .25rem;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .12rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .28);
}

.sidebar .nav-item {
    padding: 0 .625rem;
    margin-bottom: .1rem;
}

.sidebar .nav-item .nav-link {
    color: rgba(255, 255, 255, .58);
    padding: .55rem .75rem;
    border-radius: .4rem;
    display: flex;
    align-items: center;
    transition: background .15s ease, color .15s ease;
}

.sidebar .nav-item .nav-link:hover {
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .07);
}

.sidebar .nav-item .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, .13);
}

.sidebar .nav-item .nav-link i {
    font-size: .95rem;
    margin-right: .6rem;
    opacity: .65;
    transition: opacity .15s ease;
}

.sidebar .nav-item .nav-link:hover i,
.sidebar .nav-item .nav-link.active i {
    opacity: 1;
}

.sidebar-bottom {
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-around;
}

.sidebar.toggled .sidebar-bottom {
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: .75rem;
}

/* ── Scroll to Top ───────────────────────────────────────────────────────── */

.scroll-to-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    text-align: center;
    color: #fff;
    background: rgba(90, 92, 105, .5);
    line-height: 2.75rem;
    border-radius: 50%;
    text-decoration: none;
    z-index: 1000;
    transition: background .15s ease;
}

.scroll-to-top:hover {
    background: rgba(90, 92, 105, .85);
    color: #fff;
}

/* ── Circular Buttons ────────────────────────────────────────────────────── */

.btn-circle {
    border-radius: 100%;
    height: 2.5rem;
    width: 2.5rem;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.btn-circle.btn-sm {
    height: 1.8rem;
    width: 1.8rem;
    font-size: .75rem;
}

/* ── Color Utilities ─────────────────────────────────────────────────────── */

.text-gray-100 { color: #f8f9fc !important; }
.text-gray-200 { color: #eaecf4 !important; }
.text-gray-300 { color: #dddfeb !important; }
.text-gray-400 { color: #d1d3e2 !important; }
.text-gray-500 { color: #b7b9cc !important; }
.text-gray-600 { color: #858796 !important; }
.text-gray-700 { color: #6e707e !important; }
.text-gray-800 { color: #5a5c69 !important; }
.text-gray-900 { color: #3a3b45 !important; }

/* ── Left-Border Status Utilities ────────────────────────────────────────── */

.border-left-primary   { border-left: .25rem solid #0d6efd !important; }
.border-left-success   { border-left: .25rem solid #198754 !important; }
.border-left-info      { border-left: .25rem solid #0dcaf0 !important; }
.border-left-warning   { border-left: .25rem solid #ffc107 !important; }
.border-left-danger    { border-left: .25rem solid #dc3545 !important; }
.border-left-secondary { border-left: .25rem solid #6c757d !important; }

/* ── Typography Utilities ────────────────────────────────────────────────── */

.text-xs { font-size: .7rem; }

/* ── Card ────────────────────────────────────────────────────────────────── */

.card.shadow {
    box-shadow: 0 .15rem 1.75rem 0 rgba(58, 59, 69, .15) !important;
}

/* ── Dropdown Animation ──────────────────────────────────────────────────── */

.animated--grow-in {
    animation-name: growIn;
    animation-duration: .2s;
    animation-timing-function: cubic-bezier(.18, 1.25, .4, 1);
}

@keyframes growIn {
    0%   { transform: scale(.9); opacity: 0; }
    100% { transform: scale(1);  opacity: 1; }
}

/* ── Card Scrollable Body ────────────────────────────────────────────────── */

.card-body-scroll {
    height: 22rem;
    overflow-y: auto;
}

/* ── Card Hover (clickable cards) ────────────────────────────────────────── */

.card-hover {
    transition: transform .15s ease, box-shadow .15s ease;
}

.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12) !important;
}

/* ── Login Page ──────────────────────────────────────────────────────────── */

body.login-page {
    background: linear-gradient(160deg, #fff 0%, #459bd8 50%, #6fc73f 100%);
}

[data-bs-theme="dark"] body.login-page {
    background: linear-gradient(160deg, #000 0%, #459bd8 50%, #6fc73f 100%);
}


/* ── EasyMDE Dark Mode ───────────────────────────────────────────────────── */

[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror-cursor {
    border-left-color: var(--bs-body-color);
}

[data-bs-theme="dark"] .EasyMDEContainer .editor-toolbar {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .EasyMDEContainer .editor-toolbar a {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .EasyMDEContainer .editor-toolbar a:hover,
[data-bs-theme="dark"] .EasyMDEContainer .editor-toolbar a.active {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .EasyMDEContainer .editor-toolbar i.separator {
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .EasyMDEContainer .editor-preview {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror-selected {
    background-color: var(--bs-primary-bg-subtle);
}

/* ── Parts Card Image Box ────────────────────────────────────────────────── */

.part-img-box {
    height: 160px;
    overflow: hidden;
}

/* ── Titration Chemical Row ──────────────────────────────────────────────── */

.chemical-row {
    border-left: 4px solid var(--bs-border-color);
    transition: border-color .2s;
}

.chemical-row.is-saved  { border-left-color: #198754; }
.chemical-row.is-saving { border-left-color: #ffc107; }
.chemical-row.is-error  { border-left-color: #dc3545; }

.chem-label {
    min-width: 120px;
    font-weight: 600;
    font-size: .85rem;
}

/* ── PM Checklist ────────────────────────────────────────────────────────── */

.pm-section-header {
    cursor: pointer;
    user-select: none;
    border-radius: .35rem;
    transition: background-color .15s;
}

.pm-section-header.state-locked {
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    cursor: not-allowed;
    opacity: .75;
}

.pm-section-header.state-active {
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
}

.pm-section-header.state-complete {
    background-color: #198754;
    color: #fff;
    border: 1px solid #198754;
    cursor: pointer;
}

.pm-section-header .section-title {
    font-weight: 600;
    font-size: .9rem;
}

.pm-section-header .section-badge {
    font-size: .75rem;
}

.pm-section-body {
    border: 1px solid var(--bs-border-color);
    border-top: none;
    border-radius: 0 0 .35rem .35rem;
    background: var(--bs-body-bg);
}

.pm-item-row {
    display: flex;
    align-items: flex-start;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    gap: .6rem;
}

.pm-item-row:last-child {
    border-bottom: none;
}

.pm-item-row input[type=checkbox] {
    margin-top: .2rem;
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}

.pm-item-label {
    font-size: .875rem;
    line-height: 1.4;
}

.pm-item-row.item-checked .pm-item-label {
    text-decoration: line-through;
    color: var(--bs-secondary-color);
}

.pm-notes-area {
    padding: .5rem .75rem;
    border-top: 1px solid var(--bs-border-color);
}

.pm-notes-area textarea {
    font-size: .82rem;
    resize: vertical;
}

.amp-table th {
    font-size: .78rem;
    white-space: nowrap;
}

.amp-table td {
    vertical-align: middle;
    font-size: .82rem;
}

.amp-table input[type=number] {
    font-size: .82rem;
    padding: .2rem .4rem;
    height: auto;
    width: 80px;
}

.amp-table .amp-over {
    background-color: var(--bs-warning-bg-subtle);
}

.amp-lr-pair {
    display: flex;
    gap: .25rem;
    align-items: center;
}

.amp-lr-pair .lr-label {
    font-size: .7rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
}

#pm-progress-bar {
    transition: width .3s ease;
}

.saved-flash {
    animation: savedFlash .8s ease;
}

@keyframes savedFlash {
    0%   { background-color: var(--bs-warning-bg-subtle); }
    100% { background-color: transparent; }
}