.sidebar-profile {
     /* position: relative; */
     /* background: transparent; */
     padding: 25px 20px 20px 20px;
     /* margin-bottom: 5px; */
     box-shadow: none;
 }


 .sidebar-profile::after {
     content: "";
     position: absolute;
     left: 20px;
     right: 20px;
     bottom: 0;
     height: 1px;
     background: #dfe4ea;
 }

 .profile-header {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 12px;
 }

 .profile-avatar {
     /* width: 40px;
     height: 40px; */
     /* border-radius: 50%; */
     object-fit: cover;
 }

 .profile-info h6 {
     margin: 0;
     font-size: 16px;
     line-height: 1.1;
     font-weight: 700;
     color: #30384f;
 }

 .profile-info span {
     font-size: 13px;
     color: #8d95a5;
 }

.app-header {
    padding: 20px;
}

 .dashboard-page {
            padding: 18px 22px;
        }

        .dashboard-page .dashboard-title {
            font-size: 22px;
            font-weight: 400;
        }

        .dashboard-page .section-title {
            font-size: 18px;
            font-weight: 300;
            margin-bottom: 18px;
        }

        .dashboard-page .date-box {
            width: 360px;
            height: 48px;
            border: 1px solid #d8e1f1;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 500;
        }

        .dashboard-page .status-card {
            /* height:150px; */
            border: 1px solid #d8e1f1;
            border-radius: 14px;
        }

        .dashboard-page .status-body {
            padding: 20px 24px 20px 24px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .dashboard-page .dash-icon {
            width: 56px;
            height: 56px;
            border-radius: 14px;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .dashboard-page .label-title {
            font-size: 15px;
            font-weight: 700;
        }

        .dashboard-page .number-main {
            font-size: 30px;
            line-height: 1;
            font-weight: 600;
            color: #101820;
        }

        .dashboard-page .list-text {
            font-size: 15px;
            color: #333842;
        }

        .dashboard-page .stage-card {
            height: 140px;
            border: 1px solid #d8e1f1;
            border-radius: 14px;
        }

        .dashboard-page .stage-body {
            padding: 18px;
            display: flex;
            gap: 14px;
            align-items: flex-start;
        }

        .dashboard-page .stage-icon {
            width: 48px;
            height: 58px;
            border-radius: 14px;
            font-size: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .dashboard-page .stage-name {
            font-size: 14px;
            line-height: 1.15;
            font-weight: 400;
            color: #30343b;
            margin-bottom: 20px;
        }

        .dashboard-page .number-stage {
            font-size: 26px;
            line-height: 1;
            font-weight: 800;
            color: #101820;
        }

        .dashboard-page .due-card {
            height: 140px;
            padding: 15px 28px 15px 28px;
            border-radius: 14px;
            position: relative;
            overflow: hidden;
        }

        .dashboard-page .due-title {
            font-size: 16px;
            font-weight: 500;
            /* margin-bottom:16px; */
        }

        .dashboard-page .due-number {
            font-size: 38px;
            line-height: 1;
            font-weight: 800;
        }

        .dashboard-page .due-bg-icon {
            position: absolute;
            right: -8px;
            bottom: -10px;
            font-size: 40px;
            opacity: .25;
        }

        .dashboard-page .bg-blue-soft {
            background: #eaf3ff;
        }

        .dashboard-page .bg-gray-soft {
            background: #e5e5e5;
        }

        .dashboard-page .bg-orange-soft {
            background: #fff0dc;
        }

        .dashboard-page .bg-green-soft {
            background: #bdf4df;
        }

        .dashboard-page .bg-red-soft {
            background: #f9e4e7;
        }

        .dashboard-page .bg-purple-soft {
            background: #fbf0ff;
        }

        .dashboard-page .bg-teal-soft {
            background: #e7fbf5;
        }

        .dashboard-page .text-orange {
            color: #ff7115;
        }

        .dashboard-page .text-brown {
            color: #9a3412;
        }

        .dashboard-page .text-dark-red {
            color: #991b1b;
        }

        .dashboard-page .due-upcoming {
            background: #fff7ed;
            border: 1px solid #ffc98f;
            color: #9a3412;
        }

        .dashboard-page .due-overdue {
            background: #fff1f2;
            border: 1px solid #ffc4c9;
            color: #991b1b;
        }

        @media (max-width:991px) {
            .dashboard-page .date-box {
                width: 100%;
            }

            .dashboard-page .status-card,
            .dashboard-page .stage-card,
            .dashboard-page .due-card {
                height: auto;
                min-height: 145px;
            }
        }

        .machine-table-card {
            background: #fff;
            border: 1px solid #e5e9f2;
            border-radius: 14px;
            padding: 18px;
        }

        .machine-filter label {
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 6px;
            display: block;
        }

        .machine-filter .form-control,
        .machine-filter .form-select {
            height: 42px;
            border-radius: 8px;
            border: 1px solid #d7dceb;
            box-shadow: none;
        }

        .machine-filter .input-group-text {
            background: #fff;
            border-right: none;
        }

        .machine-filter input {
            border-left: none;
        }

        .machine-table {
            margin-top: 20px;
        }

        .machine-table table {
            width: 100%;
            margin-bottom: 0;
        }

        .machine-table thead th {
            background: #5d89de;
            color: #fff;
            font-weight: 500;
            font-size: 15px;
            white-space: nowrap;
            border: none;
            padding: 12px;
        }

        .machine-table tbody td {
            vertical-align: top;
            padding: 12px;
            font-size: 14px;
            border-color: #edf1f7;
        }

        .machine-no {
            font-weight: 500;
            text-align: center;
        }

        .machine-code {
            font-weight: 500;
            color: #333;
        }

        .machine-date {
            color: #9aa3b2;
            font-size: 12px;
            margin-top: 3px;
        }

        .overdue {
            color: #ef4444;
            font-weight: 500;
        }

        .badge-process {
            background: #ffd95b;
            color: #8d5d00;
            border-radius: 20px;
            padding: 5px 14px;
            font-size: 11px;
        }

        .badge-complete {
            background: #4ade80;
            color: #fff;
            border-radius: 20px;
            padding: 5px 14px;
            font-size: 11px;
        }

        .badge-draft {
            background: #82a8ff;
            color: #fff;
            border-radius: 20px;
            padding: 5px 14px;
            font-size: 11px;
        }

        .badge-reject {
            background: #ff9b8b;
            color: #fff;
            border-radius: 20px;
            padding: 5px 14px;
            font-size: 11px;
        }

        .stage-text {
            margin-top: 5px;
            font-size: 12px;
        }

        .action-btn {
            width: 28px;
            height: 28px;
            border-radius: 4px;
            border: none;
            color: #fff;
        }

        .btn-orange {
            background: #ff7b57;
        }

        .btn-blue {
            background: #5d89de;
        }

        .action-group {
            display: flex;
            gap: 6px;
            justify-content: center;
        }

        .table-responsive {
            overflow-x: auto;
            overflow-y: hidden;
        }

#data-table-default {
            min-width: 1500px;
            /* Adjust to the number of columns. */
            white-space: nowrap;
            font-size: 13px;
            font-weight: 3400;
        }

/* ================================================================
   Denso shared management UI
   Common foundation used by Stock, Requisition, Course, Handheld,
   Template, Equipment, Inspection and Inspector modules.
   ================================================================ */
:root {
    --denso-primary: #0755cc;
    --denso-primary-soft: #edf2ff;
    --denso-page: #f7f8ff;
    --denso-border: #cbd4e5;
    --denso-text: #10213b;
    --denso-success: #04b983;
    --denso-warning: #ffc05b;
    --denso-danger: #ff747d;
    --denso-view: #6995f3;
}

:is(.stock-page,.course-dashboard,.course-catalog,.course-history-page,.course-history-detail,.hh-page,.tm-page,.eq-page,.im-page,.ir-page) {
    min-height: calc(100vh - 64px);
    background: var(--denso-page);
    color: var(--denso-text);
}

:is(.stock-crumb-icon,.hh-crumb>i,.tm-title>i,.eq-title>i,.im-title>i,.ir-title>i) {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    border-radius: 50%;
    background: #fff;
    color: var(--denso-primary);
}

:is(.stock-card,.hh-panel,.tm-panel,.eq-panel,.im-panel,.ir-panel) {
    border: 1px solid var(--denso-border);
    border-radius: 7px;
    background: #fff;
    overflow: hidden;
}

:is(.stock-tools,.hh-tools,.tm-tools,.eq-tools,.im-tools,.ir-tools) {
    display: flex;
    align-items: center;
    gap: 10px;
}

:is(.stock-search,.hh-search,.tm-search,.eq-search,.im-search,.ir-search) {
    display: flex;
    align-items: center;
    border: 1px solid var(--denso-border);
    border-radius: 4px;
    background: var(--denso-primary-soft);
}

:is(.stock-search,.hh-search,.tm-search,.eq-search,.im-search,.ir-search) input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
}

:is(.hh-primary,.tm-primary,.eq-primary,.im-primary) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 4px;
    background: var(--denso-primary);
    color: #fff;
    text-decoration: none;
}

:is(.hh-badge,.tm-badge,.eq-badge,.im-badge,.ir-status,.catalog-status,.history-status,.course-history-status) {
    display: inline-block;
    border-radius: 20px;
    color: #fff;
    text-align: center;
}

:is(.hh-footer,.tm-footer,.eq-footer,.im-footer,.ir-footer,.course-catalog-footer,.history-pagination) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--denso-primary-soft);
}

:is(.tm-modal,.eq-modal,.im-modal,.ir-modal) {
    position: fixed;
    z-index: 9999;
    inset: 0;
    align-items: flex-start;
    justify-content: center;
    background: rgba(0,0,0,.62);
}

@media (max-width: 767.98px) {
    :is(.stock-tools,.hh-tools,.tm-tools,.eq-tools,.im-tools,.ir-tools) {
        width: 100%;
        flex-wrap: wrap;
    }
}

/* ===== StockManagement ===== */


    .stock-page {
        padding: 20px;
        background: #f4f6fd;
        color: #17263d;
        min-height: calc(100vh - 86px)
    }

    .stock-crumb {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-bottom: 20px;
        font-size: 18px;
        color: #343943
    }

    .stock-crumb-icon {
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #fff;
        color: #3976eb;
        font-size: 18px
    }

    .stock-card {
        background: #fff;
        border: 1px solid #cad3e4;
        border-radius: 8px;
        overflow: hidden
    }

    .stock-card-head {
        min-height: 72px;
        padding: 15px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px
    }

    .stock-title {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #14233b
    }

    .stock-tools {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap
    }

    .stock-search {
        width: 235px;
        height: 38px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 12px;
        border: 1px solid #cbd4e5;
        border-radius: 5px;
        background: #fff
    }

    .stock-search input {
        width: 100%;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        font-size: 12px
    }

    .stock-select {
        height: 38px;
        min-width: 130px;
        padding: 0 30px 0 12px;
        border: 1px solid #cbd4e5;
        border-radius: 5px;
        background-color: #fff;
        color: #344056;
        font-size: 12px
    }

    .stock-primary {
        height: 38px;
        padding: 0 17px;
        border: 0;
        border-radius: 4px;
        color: #fff;
        background: #155bd7;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 7px
    }

    .stock-primary:hover {
        color: #fff;
        background: #104fbe
    }

    .stock-secondary {
        background: #fff;
        color: #334159;
        border: 1px solid #cbd4e5
    }

    .stock-secondary:hover {
        color: #1e5fd1;
        background: #f5f8ff
    }

    .stock-table {
        min-width: 850px;
        margin: 0 !important;
        width: 100% !important
    }

    .stock-table thead th {
        height: 49px;
        padding: 11px 14px !important;
        background: #edf2ff !important;
        border: 0 !important;
        color: #4d5668;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .35px;
        text-align: center;
        vertical-align: middle
    }

    .stock-table tbody td {
        height: 40px;
        padding: 10px 14px !important;
        border-color: #e5eaf3;
        color: #243248;
        font-size: 14px;
        vertical-align: middle
    }

    .stock-badge {
        min-width: 68px;
        display: inline-block;
        padding: 4px 7px;
        border-radius: 20px;
        color: #fff;
        font-size: 10px;
        text-align: center
    }

    .is-green {
        background: #48c995
    }

    .is-red {
        background: #ff747b
    }

    .is-yellow {
        background: #ffc45f
    }

    .is-blue {
        background: #6894f0
    }

    .stock-action {
        width: 27px;
        height: 27px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 3px;
        color: #fff;
        text-decoration: none;
        font-size: 12px
    }

    .stock-action:hover {
        color: #fff;
        opacity: .85
    }

    .action-view {
        background: #6995f5;
        font-size: 14px;
    }

    .action-edit {
        background: #ffbd55
    }

    .action-delete {
        background: #ff737b
    }

    .stock-panel-body {
        padding: 22px
    }

    .stock-section-title {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 20px;
        color: #1761d8;
        font-size: 15px;
        font-weight: 600
    }

    .stock-section-title i {
        font-size: 16px
    }

    .stock-label {
        display: block;
        margin-bottom: 7px;
        color: #3f4859;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .25px
    }

    .stock-input,
    .stock-textarea {
        width: 100%;
        border: 1px solid #d2d9e6;
        border-radius: 4px;
        background: #fff;
        color: #26344a;
        font-size: 12px
    }

    .stock-input {
        height: 40px;
        padding: 0 12px
    }

    .stock-textarea {
        min-height: 92px;
        padding: 12px;
        resize: vertical
    }

    .stock-input:focus,
    .stock-textarea:focus {
        border-color: #6b98ef;
        outline: 0;
        box-shadow: 0 0 0 3px rgba(74, 125, 230, .1)
    }

    .stock-upload {
        min-height: 150px;
        border: 1px dashed #bdc9dc;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #7a8495;
        background: #fbfcff;
        font-size: 12px
    }

    .stock-upload i {
        font-size: 28px;
        color: #3879ec;
        margin-bottom: 7px
    }

    .stock-form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        padding: 18px 22px;
        border-top: 1px solid #e2e7f0
    }

    .stock-empty {
        min-height: 650px
    }

    .stock-detail-grid {
        display: grid;
        grid-template-columns: 180px 1fr;
        gap: 13px 20px;
        font-size: 12px
    }

    .stock-detail-grid dt {
        color: #6a7485;
        font-weight: 500
    }

    .stock-detail-grid dd {
        margin: 0;
        color: #25334a
    }

    .stock-item-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border: 1px solid #e0e6f0;
        border-radius: 5px
    }

    .stock-item-thumb {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #eef3fc;
        border-radius: 5px;
        color: #6e7b90;
        font-size: 20px
    }

    .stock-card .dataTables_wrapper .stock-dt-footer {
        min-height: 60px;
        padding: 12px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid #e1e7f0
    }

    .stock-card .dataTables_info,
    .stock-card .dataTables_paginate {
        padding: 0 !important;
        font-size: 11px
    }

    .stock-card .pagination {
        margin: 0
    }

    .stock-card .page-link {
        font-size: 11px;
        color: #2965dc
    }

    .stock-card .page-item.active .page-link {
        background: #2864e8;
        border-color: #2864e8;
        color: #fff
    }

    @media(max-width:767.98px) {
        .stock-page {
            padding: 14px
        }

        .stock-crumb {
            font-size: 15px
        }

        .stock-card-head {
            align-items: stretch;
            flex-direction: column
        }

        .stock-tools {
            align-items: stretch;
            flex-direction: column
        }

        .stock-search,
        .stock-select,
        .stock-primary {
            width: 100%
        }

        .stock-detail-grid {
            grid-template-columns: 1fr
        }

        .stock-card .dataTables_wrapper .stock-dt-footer {
            align-items: flex-start;
            flex-direction: column
        }
    }

/* Stock Item CRUD */
.stock-items-page .denso-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: #4c566a;
    font-size: var(--denso-font-control);
}

.stock-items-page .denso-breadcrumb i {
    font-size: 10px;
}

.stock-items-page .denso-breadcrumb strong {
    color: #0755cc;
}

.stock-item-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.stock-item-form .stock-panel-body {
    padding: 26px 30px;
}

.stock-item-form .stock-card {
    overflow: visible;
}

.stock-item-form .stock-section-title {
    font-size: var(--denso-font-section-title);
}

.stock-readonly {
    color: #677185;
    background: #f7f9fd;
}

.required-mark {
    color: #ff6e61;
}

.stock-status-row {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding: 0 15px;
    border-radius: 4px;
    background: #e7efff;
    color: #23334b;
    font-size: var(--denso-font-control);
    font-weight: 600;
}

.stock-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #0755cc;
    cursor: pointer;
}

.stock-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.stock-switch-control {
    position: relative;
    width: 38px;
    height: 21px;
    border-radius: 20px;
    background: #a8b3c5;
    transition: background .18s ease;
}

.stock-switch-control::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    content: "";
    transition: transform .18s ease;
}

.stock-switch input:checked + .stock-switch-control {
    background: #0755cc;
}

.stock-switch input:checked + .stock-switch-control::after {
    transform: translateX(17px);
}

.stock-photo-card {
    margin-top: 0;
}

.stock-photo-sort-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    color: #798599;
    font-size: 10px;
    font-weight: 400;
}

.stock-photo-sort-hint i {
    margin: 0;
    color: #798599;
    font-size: 12px;
}

.stock-photo-dropzone {
    min-height: 260px;
    padding: 20px;
    border: 1px dashed #c4cee0;
    border-radius: 4px;
    background: #fcfdff;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.stock-photo-dropzone:hover,
.stock-photo-dropzone:focus,
.stock-photo-dropzone.is-dragging {
    border-color: #0755cc;
    outline: 0;
    background: #f6f9ff;
}

.stock-photo-placeholder {
    min-height: 218px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    color: #3f4859;
    text-align: center;
}

.stock-photo-placeholder strong {
    font-size: 12px;
    font-weight: 400;
}

.stock-photo-placeholder small {
    color: #7c8696;
    font-size: 10px;
}

.stock-photo-upload-icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    border-radius: 50%;
    background: #f0f2f4;
    color: #0755cc;
    font-size: 27px;
}

.stock-photo-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 15px;
}

.stock-photo-grid:empty {
    display: none;
}

.stock-photo-item {
    position: relative;
    min-width: 0;
    padding: 8px;
    border: 1px solid #dce3ef;
    border-radius: 5px;
    background: #fff;
}

.stock-photo-item a {
    display: block;
}

.stock-photo-item img {
    width: 100%;
    height: 145px;
    display: block;
    object-fit: contain;
    background: #f7f8fb;
    cursor: grab;
    user-select: none;
}

.stock-photo-item.is-sorting img {
    cursor: grabbing;
}

.stock-photo-item.is-sorting {
    opacity: .75;
    box-shadow: 0 10px 28px rgba(31, 58, 105, .18);
}

.stock-photo-sort-placeholder {
    min-height: 188px;
    border: 1px dashed #0755cc;
    border-radius: 5px;
    background: #edf3ff;
}

.stock-photo-item > span {
    display: block;
    margin-top: 7px;
    overflow: hidden;
    color: #687386;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-photo-delete {
    position: absolute;
    z-index: 2;
    top: 13px;
    right: 13px;
    width: 27px;
    height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 3px;
    background: #ff737b;
    color: #fff;
    font-size: 12px;
}

.stock-item-form .is-invalid {
    border-color: #ef3f4d !important;
    box-shadow: 0 0 0 4px rgba(239, 63, 77, .09);
}

.stock-item-form .invalid-feedback {
    margin-top: 5px;
    color: #ef3f4d;
    font-size: 11px;
}

.stock-item-form .stock-form-actions {
    border: 0;
    background: #edf2ff;
}

.swal-cancel-bordered {
    border: 1px solid #5a55554d !important;
    color: #596579 !important;
    background: #fff !important;
}

@media (max-width: 1199.98px) {
    .stock-photo-grid {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }
}

@media (max-width: 767.98px) {
    .stock-item-form .stock-panel-body {
        padding: 20px 16px;
    }

    .stock-status-row {
        margin-top: 0;
    }

    .stock-photo-grid {
        grid-template-columns: repeat(2, minmax(110px, 1fr));
    }
}




/* ===== RequisitionManagement ===== */


    .req-summary {
        border: 1px solid #cbd4e5;
        border-radius: 8px;
        overflow: hidden;
        background: #fff
    }

    .req-summary-body {
        min-height: 105px;
        padding: 18px 20px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between
    }

    .req-summary-icon {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-size: 21px
    }

    .req-summary-label {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .5px
    }

    .req-summary-number {
        font-size: 36px;
        line-height: 1.05;
        font-weight: 600;
        color: #122139
    }

    .req-summary-foot {
        min-height: 36px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 10px
    }

    .req-blue .req-summary-body {
        background: #e8effc
    }

    .req-blue .req-summary-icon,
    .req-blue .req-summary-label {
        color: #1260d9
    }

    .req-blue .req-summary-icon {
        background: #d5e3ff
    }

    .req-blue .req-summary-foot {
        background: #1260d9
    }

    .req-yellow .req-summary-body {
        background: #fff5df
    }

    .req-yellow .req-summary-icon,
    .req-yellow .req-summary-label {
        color: #a36a00
    }

    .req-yellow .req-summary-icon {
        background: #ffe8b9
    }

    .req-yellow .req-summary-foot {
        background: #a36a00
    }

    .req-green .req-summary-body {
        background: #e5f4ef
    }

    .req-green .req-summary-icon,
    .req-green .req-summary-label {
        color: #07805f
    }

    .req-green .req-summary-icon {
        background: #ccebe1
    }

    .req-green .req-summary-foot {
        background: #07805f
    }

    .req-red .req-summary-body {
        background: #ffe3e3
    }

    .req-red .req-summary-icon,
    .req-red .req-summary-label {
        color: #c52227
    }

    .req-red .req-summary-icon {
        background: #ffcaca
    }

    .req-red .req-summary-foot {
        background: #c52227
    }

    .req-stepper {
        display: flex;
        align-items: center;
        margin-bottom: 26px
    }

    .req-step {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #8790a0;
        font-size: 11px
    }

    .req-step-dot {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #e5eaf3;
        color: #6e788a;
        font-weight: 700
    }

    .req-step.active {
        color: #155fd7;
        font-weight: 600
    }

    .req-step.active .req-step-dot {
        background: #155fd7;
        color: #fff
    }

    .req-step-line {
        height: 1px;
        min-width: 55px;
        flex: 1;
        background: #d7deea;
        margin: 0 10px
    }

    .req-choice {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px;
        border: 1px solid #d9e0eb;
        border-radius: 6px
    }

    .req-choice input {
        width: 17px;
        height: 17px
    }

    .req-total {
        padding: 16px 20px;
        border-radius: 6px;
        background: #edf3ff;
        display: flex;
        justify-content: space-between;
        color: #164fbd;
        font-size: 13px;
        font-weight: 600
    }




/* ===== CourseManagement ===== */

.course-heading-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.course-heading-row .course-section-heading{margin-bottom:0}.course-active-switch{min-width:260px}.course-active-switch b{margin-left:8px;color:#0755cc;font-size:13px}.course-label em{color:#ff6b5c;font-style:normal}.course-field>.invalid-feedback{display:none;margin-top:5px;color:#e73545;font-size:12px}.course-field .is-invalid~.invalid-feedback,.course-field .course-input-suffix:has(.is-invalid)~.invalid-feedback{display:block}.course-input.is-invalid,.course-input-suffix input.is-invalid,.course-editor textarea.is-invalid{border-color:#e73545!important;box-shadow:0 0 0 3px rgba(231,53,69,.09)}.course-dropzone.has-preview{position:relative;overflow:hidden}.course-dropzone.has-preview>img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.course-dropzone.has-preview>span{position:relative;z-index:1}.course-dropzone small{display:block;margin-top:6px;color:#7a8598;font-size:11px}.course-video-help{display:block;margin-top:6px;color:#e38b22}.course-video-preview{margin-top:12px;padding:12px;border:1px solid #d5ddeb;border-radius:6px;background:#f7f9fc}.course-video-preview.is-empty{padding:0;border-style:dashed;background:#fcfdff}.course-video-preview video{width:100%;max-height:430px;display:block;border-radius:4px;background:#101522}.course-video-preview-empty{min-height:220px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:#536176;text-align:center}.course-video-preview-empty>span{width:54px;height:54px;display:flex;align-items:center;justify-content:center;margin-bottom:5px;border-radius:50%;background:#eef3fb;color:#075dcc;font-size:25px}.course-video-preview-empty strong{font-size:12px;font-weight:500}.course-video-preview-empty small{color:#7c8696;font-size:10px}.course-video-preview-meta{display:flex;align-items:center;gap:8px;padding:10px 3px 0;color:#536176;font-size:11px}.course-video-preview-meta i{color:#075dcc;font-size:14px}.course-video-preview-meta span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.catalog-video-title{max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.course-empty-state{grid-column:1/-1;min-height:280px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#7a8598}.course-empty-state i{color:#2864e8;font-size:36px}.course-empty-state strong{color:#172943;font-size:18px}.course-empty-questions{min-height:110px;display:flex;align-items:center;justify-content:center;border-top:1px solid #d9e1ef;color:#7a8598;font-size:13px}.catalog-edit{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.course-catalog-footer button:disabled{cursor:not-allowed;opacity:.55}
@media(max-width:767.98px){.course-heading-row{align-items:flex-start;flex-direction:column}.course-active-switch{width:100%;min-width:0}.catalog-video-title{max-width:62%}}


    .course-page{--course-blue:#2864e8}.course-hero{padding:24px;border:1px solid #d9e1ef;border-radius:10px;background:linear-gradient(135deg,#eef4ff,#fff)}
    .course-stat{height:132px;padding:22px;border:1px solid #d7dfec;border-radius:9px;background:#fff;display:flex;justify-content:space-between}.course-stat i{font-size:30px;color:var(--course-blue)}
    .course-stat strong{display:block;font-size:34px;color:#13233a}.course-stat span{font-size:11px;color:#687386}.course-panel{padding:24px;border:1px solid #d2daea;border-radius:9px;background:#fff}
    .course-dashboard{padding:20px;background:#f7f8ff;min-height:calc(100vh - 64px)}.course-dashboard-crumb{gap:13px;margin-bottom:20px;color:#343943;font-size:18px;font-weight:400}.course-dashboard-crumb .stock-crumb-icon{width:42px;height:42px;color:#3976eb;font-size:18px}.course-stat-grid{margin-bottom:30px}.course-dashboard .course-stat{height:143px;padding:0;border:1px solid #cbd5e8;border-radius:8px;display:flex;flex-direction:column;overflow:hidden}.course-stat-main{min-height:103px;display:flex;align-items:flex-start;padding:20px 18px 12px}.course-stat-leading{width:34px;margin-top:2px;font-size:27px;line-height:1}.course-dashboard .course-stat-copy{flex:1;text-align:right}.course-dashboard .course-stat-copy span{display:block;margin:0 0 1px;font-size:11px;font-weight:700;letter-spacing:.35px}.course-dashboard .course-stat-copy strong{display:block;color:#0e203c;font-size:36px;font-weight:500;line-height:1}.course-stat-footer{height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;color:#fff;font-size:10px}.course-stat-footer i{font-size:12px}.course-stat-blue .course-stat-main{background:#e3ecfc}.course-stat-blue .course-stat-leading,.course-stat-blue .course-stat-copy span{color:#0759d3}.course-stat-blue .course-stat-footer{background:#0755cc}.course-stat-green .course-stat-main{background:#e4f2ee}.course-stat-green .course-stat-leading,.course-stat-green .course-stat-copy span{color:#00734f}.course-stat-green .course-stat-footer{background:#00734f}.course-stat-amber .course-stat-main{background:#f2eee5}.course-stat-amber .course-stat-leading,.course-stat-amber .course-stat-copy span{color:#8a5a00}.course-stat-amber .course-stat-footer{background:#8a5a00}.course-stat-red .course-stat-main{background:#fbd9d5}.course-stat-red .course-stat-leading,.course-stat-red .course-stat-copy span{color:#c61820}.course-stat-red .course-stat-footer{background:#c61820}.course-overview-panel{height:390px;border:1px solid #cbd5e8;border-radius:8px;background:#fff}
    @media(max-width:1199.98px){.course-overview-panel{height:360px}}
    @media(max-width:767.98px){.course-dashboard{padding:18px 14px}.course-dashboard-crumb{font-size:16px}.course-stat-grid{--bs-gutter-y:14px}.course-overview-panel{height:300px}}
    .course-catalog{padding:20px;background:#f7f8ff}.course-catalog-panel{border:1px solid #cbd5e8;border-radius:8px;background:#fff;overflow:hidden}.course-catalog-toolbar{min-height:91px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 25px;border-bottom:1px solid #cbd5e8}.course-catalog-toolbar h1{margin:0;color:#172943;font-size:20px;font-weight:600}.course-catalog-filters{display:flex;align-items:center;gap:12px}.catalog-search{width:370px;height:42px;display:flex;align-items:center;padding:0 16px;border:1px solid #bcc8dc;border-radius:4px;background:#edf2ff}.catalog-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#344056}.catalog-search i{font-size:17px}.course-catalog-filters select{width:192px;height:42px;padding:0 14px;border:1px solid #bcc8dc;border-radius:4px;background:#edf2ff;color:#20242d}.catalog-create{height:42px;min-width:112px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:4px;background:#0755cc;color:#fff;font-size:13px;font-weight:600;text-decoration:none}.catalog-create:hover{background:#0649af;color:#fff}.course-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:50px 30px;padding:30px 25px 50px}.catalog-card{min-width:0;border-radius:16px;background:#fff;box-shadow:0 2px 6px rgba(30,48,78,.18);overflow:hidden}.catalog-card>img{width:100%;height:191px;display:block;object-fit:cover}.catalog-card-body{padding:19px 19px 17px}.catalog-card-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:12px}.catalog-card-meta i{margin-right:4px}.catalog-status{min-width:70px;padding:4px 14px;border-radius:20px;color:#fff;font-size:10px;text-align:center}.catalog-status.active{background:#08b985}.catalog-status.inactive{background:#ff6978}.catalog-category{display:block;margin-bottom:10px;color:#0755cc;font-size:14px;text-decoration:none}.catalog-card h2{margin:0 0 14px;color:#2c2f34;font-size:16px;font-weight:600}.catalog-info{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;color:#2e333b;font-size:11px}.catalog-info strong{font-weight:400;text-align:right}.catalog-card-actions{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:14px;border-top:1px solid #cbd5e8}.catalog-card-actions button{width:30px;height:30px;margin-right:5px;border:0;border-radius:3px;color:#fff}.catalog-edit{background:#ffbd55}.catalog-delete{background:#ff6978}.catalog-card-actions>a{color:#003c9f;font-size:12px;font-weight:600;text-decoration:none}.catalog-card-actions>a i{font-size:12px}.course-catalog-footer{min-height:79px;display:flex;align-items:center;justify-content:space-between;padding:18px 25px;border-top:1px solid #cbd5e8;background:#edf2ff;color:#4d5668}.course-catalog-footer nav{display:flex}.course-catalog-footer button{height:34px;padding:0 14px;border:1px solid #c5cfe0;background:#fff;color:#4d5668}.course-catalog-footer button+button{border-left:0}.course-catalog-footer button.active{background:#0755cc;color:#fff}
    @media(max-width:1399.98px){.catalog-search{width:280px}.course-catalog-filters select{width:150px}.course-card-grid{gap:30px 22px}.catalog-card>img{height:165px}}
    @media(max-width:1199.98px){.course-catalog-toolbar{align-items:flex-start;flex-direction:column}.course-catalog-filters{width:100%;flex-wrap:wrap}.catalog-search{flex:1}.course-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media(max-width:767.98px){.course-catalog{padding:14px}.course-catalog-filters>*{width:100%!important}.course-card-grid{grid-template-columns:1fr;padding:20px 15px}.course-catalog-footer{align-items:flex-start;flex-direction:column;gap:15px}}
    .course-catalog .catalog-card{width:100%;max-width:360px;border:1px solid #edf0f5;border-radius:14px;box-shadow:0 3px 9px rgba(30,48,78,.13)}
    .course-catalog .catalog-card>img{height:180px;border-radius:13px 13px 0 0}
    .course-catalog .catalog-card-body{padding:17px 20px 18px}
    .course-catalog .catalog-card-meta{margin-bottom:11px;font-size:12px}
    .course-catalog .catalog-status{min-width:84px;padding:5px 14px;font-size:11px}
    .course-catalog .catalog-duration{display:inline-flex;align-items:center;gap:5px;color:#303744;font-size:12px;font-weight:600;white-space:nowrap}
    .course-catalog .catalog-duration i{margin:0;font-size:14px}
    .course-catalog .catalog-category{margin-bottom:7px;font-size:14px;line-height:1.3}
    .course-catalog .catalog-card h2{margin-bottom:12px;font-size:16px;line-height:1.35}
    .course-catalog .catalog-info{margin-bottom:8px;font-size:11px;line-height:1.35}
    .course-catalog .catalog-info span{white-space:nowrap}
    .course-catalog .catalog-info strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .course-catalog .catalog-card-actions{margin-top:13px;padding-top:13px}
    .course-catalog .catalog-card-actions>div{display:flex;align-items:center;gap:10px}
    .course-catalog .catalog-card-actions .catalog-edit,
    .course-catalog .catalog-card-actions button{width:31px;min-width:31px;height:31px;margin:0;border-radius:4px;font-size:13px}
    .course-catalog .catalog-card-actions .catalog-edit,
    .course-catalog .catalog-card-actions .catalog-edit:hover{color:#fff}
    .course-catalog .catalog-card-actions>a:last-child{display:inline-flex;align-items:center;gap:5px;font-size:12px}
    .course-catalog .catalog-card-actions>a:last-child i{font-size:13px}
    @media(max-width:1399.98px){.course-catalog .catalog-card>img{height:165px}.course-catalog .catalog-card-body{padding:16px 18px}.course-catalog .catalog-info{font-size:10px}}
    @media(max-width:767.98px){.course-catalog .catalog-card{max-width:none}.course-catalog .catalog-card>img{height:190px}.course-catalog .catalog-card-body{padding:18px}.course-catalog .catalog-info{align-items:flex-start;flex-direction:column;gap:2px}.course-catalog .catalog-info strong{text-align:left}}
    .my-course-panel{margin-bottom:40px}.my-course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;padding:30px 25px 40px}.my-course-grid .catalog-card{max-width:350px}.my-course-actions>button{width:auto;height:42px;margin:0;padding:0 24px;border:0;border-radius:4px;color:#fff;font-size:12px;font-weight:600}.my-course-actions .register{background:#0755cc}.my-course-actions .training{background:#ffbd55}.registration-history .course-catalog-toolbar h1{font-size:19px}.registration-table{min-width:1050px;margin:0}.registration-table thead th{height:64px;padding:15px 20px;background:#edf2ff;color:#303744;font-size:12px;font-weight:600;letter-spacing:.5px;text-align:left;white-space:nowrap}.registration-table tbody td{height:69px;padding:15px 20px;border-bottom:1px solid #e4e9f2;color:#172943;font-size:12px;vertical-align:middle}.history-status{min-width:70px;display:inline-block;padding:4px 12px;border-radius:20px;color:#fff;font-size:10px;text-align:center}.history-status.valid{background:#08b985}.history-status.expired{background:#ff6978}.history-action{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;background:#5688e8;color:#fff;text-decoration:none}.history-action:hover{color:#fff}.registration-history .course-catalog-footer{min-height:73px}
    .my-course-actions.single-action{justify-content:flex-start}.my-course-actions .my-course-action{width:auto!important;min-width:130px!important;height:42px!important;display:inline-flex!important;align-items:center;justify-content:center;padding:0 24px!important;border-radius:4px;color:#fff!important;font-size:12px!important;font-weight:600;text-decoration:none}.register-course-actions .course-registration-button{width:auto!important;min-width:125px!important;height:42px!important;margin:0!important;padding:0 20px!important;border:0;border-radius:4px;background:#0755cc;color:#fff!important;-webkit-text-fill-color:#fff;font-size:12px;font-weight:600}.register-course-actions .course-registration-button.is-registered{background:#08b985;color:#fff!important;-webkit-text-fill-color:#fff}.register-course-actions .course-registration-button.is-unregister{background:#ff6978}.register-course-actions .course-registration-button.is-unregister:hover{background:#e95364}.register-course-actions .course-registration-button.is-unavailable{background:#aab4c5}.register-course-actions .course-registration-button i{margin-right:6px;color:#fff!important}.register-course-actions .course-registration-button:disabled{cursor:default;color:#fff!important;-webkit-text-fill-color:#fff;opacity:1!important}
    @media(max-width:1199.98px){.my-course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media(max-width:767.98px){.my-course-grid{grid-template-columns:1fr;padding:20px 15px}.my-course-grid .catalog-card{max-width:none}}
    .course-history-page,.course-history-detail{padding:20px;background:#f7f8ff}.course-history-breadcrumb{display:flex;align-items:center;gap:8px;margin:10px 0 36px;padding-left:25px;color:#3d4657;font-size:14px}.course-history-breadcrumb i{font-size:10px}.course-history-breadcrumb strong{color:#0755cc}.history-list-panel{border:1px solid #cbd5e8;border-radius:8px;background:#fff;overflow:hidden}.history-list-toolbar{min-height:90px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 25px;border-bottom:1px solid #cbd5e8}.history-list-toolbar h1{margin:0;color:#172943;font-size:20px;font-weight:600}.history-filters{display:flex;align-items:center;gap:12px}.history-filters label{width:330px;height:42px;display:flex;align-items:center;padding:0 16px;border:1px solid #bcc8dc;border-radius:4px;background:#edf2ff}.history-filters input{min-width:0;flex:1;border:0;outline:0;background:transparent}.history-filters select{width:192px;height:42px;padding:0 14px;border:1px solid #bcc8dc;border-radius:4px;background:#edf2ff}.history-filters>button{height:42px;padding:0 25px;border:0;border-radius:4px;background:#0755cc;color:#fff;font-size:12px;font-weight:600;letter-spacing:.3px}.course-history-table{min-width:1050px;margin:0}.course-history-table thead th{height:76px;padding:15px 20px;background:#edf2ff;color:#303744;font-size:12px;font-weight:600;letter-spacing:.5px;text-align:left;vertical-align:middle}.course-history-table tbody td{height:68px;padding:15px 20px;border-bottom:1px solid #e3e8f1;color:#424b5e;font-size:14px;vertical-align:middle}.course-history-status{min-width:76px;display:inline-block;padding:4px 11px;border-radius:20px;color:#fff;font-size:10px;text-align:center}.course-history-status.passed{background:#08b985}.course-history-status.in-progress{background:#ffc45f}.course-history-status.failed{background:#ff6978}.course-history-status.register{background:#6894f0}.course-history-view{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;background:#6995f5;color:#fff;text-decoration:none}.course-history-view:hover{color:#fff}.history-pagination{min-height:83px;display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding:18px 25px;background:#edf2ff;color:#4d5668}.history-pagination nav{display:flex}.history-pagination button{height:34px;padding:0 14px;border:1px solid #c5cfe0;background:#fff;color:#4d5668}.history-pagination button+button{border-left:0}.history-pagination button.active{background:#0755cc;color:#fff}.history-owner{margin-bottom:20px;padding:22px 30px;background:#fff;color:#333;font-size:14px;letter-spacing:.4px}.history-detail-panel{padding:24px;border:1px solid #cbd5e8;border-radius:8px;background:#fff}.history-congratulations{min-height:252px;display:flex;align-items:center;justify-content:space-between;padding:45px 48px;border-radius:16px;background:linear-gradient(115deg,#0755cc,#2347ad);color:#fff;box-shadow:0 8px 15px rgba(23,62,144,.2)}.history-passed{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;padding:7px 18px;border-radius:20px;background:#08c486;font-size:13px;font-weight:600;letter-spacing:.8px}.history-congratulations h1{margin:0 0 10px;color:#fff;font-size:31px;font-weight:600}.history-congratulations p{margin:0;color:#dce7ff;font-size:17px;line-height:1.55}.history-score{width:228px;padding:26px 25px;border:1px solid rgba(255,255,255,.25);border-radius:16px;background:rgba(255,255,255,.1);text-align:center}.history-score>span{display:block;margin-bottom:4px;color:#dce7ff;font-size:12px}.history-score strong{display:block;font-size:44px;line-height:1.1}.history-score small{font-size:17px}.history-score>div{height:6px;margin-top:18px;border-radius:10px;background:rgba(255,255,255,.45);overflow:hidden}.history-score>div i{display:block;width:92%;height:100%;background:#fff}.history-detail-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:22px;margin-top:20px}.certificate-card{min-height:382px;padding:46px 34px;border-radius:10px;background:#fff;box-shadow:0 3px 12px rgba(30,48,78,.12)}.certificate-card h2{margin:0 0 45px;color:#172943;font-size:19px;font-weight:600}.certificate-card dl{margin:0}.certificate-card dl>div{display:flex;justify-content:space-between;padding:24px 0;border-bottom:1px solid #e2e7ef}.certificate-card dl>div:last-child{border-bottom:0}.certificate-card dt{color:#50586a;font-weight:400}.certificate-card dd{margin:0;color:#102443;font-weight:700}.history-course-card{border-radius:9px;background:#fff;box-shadow:0 3px 10px rgba(30,48,78,.15);overflow:hidden}.history-course-card>img{width:100%;height:190px;object-fit:cover}.history-course-card>div{padding:18px}.history-course-card>div>a{display:block;margin:10px 0;color:#0755cc;font-size:13px;text-decoration:none}.history-course-card h2{font-size:16px;font-weight:600}.history-course-card p{display:flex;justify-content:space-between;gap:8px;margin:12px 0 0;font-size:11px}.history-course-card p strong{font-weight:400;text-align:right}
    @media(max-width:1399.98px){.history-filters label{width:260px}.history-filters select{width:150px}.history-congratulations{padding:35px}.history-congratulations p{font-size:14px}}
    @media(max-width:1199.98px){.history-list-toolbar{align-items:flex-start;flex-direction:column}.history-filters{width:100%;flex-wrap:wrap}.history-filters label{flex:1}.history-detail-grid{grid-template-columns:1fr}.history-course-card{max-width:430px}}
    @media(max-width:767.98px){.history-filters>*{width:100%!important}.history-pagination{align-items:flex-start;flex-direction:column;gap:15px}.history-congratulations{align-items:flex-start;flex-direction:column;gap:28px}.history-score{width:100%}.history-detail-panel{padding:14px}.certificate-card{padding:30px 20px}}
    .course-cover{height:145px;border-radius:9px;background:linear-gradient(135deg,#1b5be2,#7aa7ff);display:flex;align-items:center;justify-content:center;color:#fff;font-size:44px}
    .course-card{height:100%;padding:12px;border:1px solid #d8e0ec;border-radius:9px;background:#fff}.course-card h3{font-size:14px;margin:13px 0 6px;color:#15243a}.course-meta{font-size:11px;color:#7a8494}
    .course-progress{height:7px;border-radius:10px;background:#e7ecf5;overflow:hidden}.course-progress span{display:block;height:100%;background:#2864e8}.course-upload{min-height:160px;border:1px dashed #aebbd0;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#778399}.course-upload i{font-size:35px;color:#2864e8}
    .course-label{font-size:12px;font-weight:600;color:#26354c;margin-bottom:7px}.course-input{width:100%;height:42px;padding:0 13px;border:1px solid #cad4e5;border-radius:6px;background:#fff}.course-input.textarea{height:110px;padding-top:11px;resize:none}
    .course-score{width:150px;height:150px;border-radius:50%;background:#2864e8;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:auto}.course-score strong{font-size:42px}.course-score span{font-size:11px}

    .course-builder{--course-blue:#075dcc;padding-bottom:0}.course-builder .stock-crumb{margin-bottom:22px}.course-breadcrumb{margin:0 0 18px;font-size:12px;color:#4d5668}.course-breadcrumb i{margin:0 7px;font-size:10px}.course-breadcrumb strong{color:#075dcc}.course-form-card{padding:26px 30px;background:#fff;border:1px solid #d5ddeb;border-radius:7px}.course-section-heading{display:flex;align-items:center;gap:8px;margin:0 0 22px;color:#075dcc;font-size:16px;font-weight:600}.course-section-heading i{font-size:16px}.course-builder .course-label{display:block;margin-bottom:7px;color:#303744;font-size:11px;font-weight:600;letter-spacing:.3px}.course-builder .course-input,.course-input-suffix{width:100%;height:42px;border:1px solid #cfd8e8;border-radius:4px;background:#fff;color:#3b4658;font-size:12px}.course-builder .course-input{padding:0 14px}.course-builder select.course-input{appearance:auto}.course-input-suffix{display:flex;align-items:center;overflow:hidden}.course-input-suffix input{height:100%;min-width:0;flex:1;padding:0 14px;border:0;outline:0}.course-input-suffix span{padding:0 14px;font-size:11px;white-space:nowrap}.course-dropzone{height:270px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;border:1px dashed #cfd8e8;border-radius:4px;background:#fff;color:#3e4653;font-size:11px;cursor:pointer}.course-dropzone input{display:none}.course-upload-icon{width:54px;height:54px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#f0f4fb;color:#075dcc;font-size:27px}.course-dropzone-video{height:240px}.course-editor{border:1px solid #cfd8e8;border-radius:5px;overflow:hidden}.course-editor-toolbar{height:45px;display:flex;align-items:center;gap:15px;padding:0 14px;background:#f0f2f5;color:#35445b}.course-editor textarea{width:100%;height:145px;padding:16px;border:0;outline:0;resize:none;font-size:12px}.course-switch-row{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;background:#e8f0ff;color:#23334b;font-size:11px;font-weight:600;cursor:pointer}.course-switch-row input{display:none}.course-switch-row span{position:relative;width:36px;height:20px;border-radius:20px;background:#d5deed}.course-switch-row span:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.2s}.course-switch-row input:checked+span{background:#075dcc}.course-switch-row input:checked+span:after{left:19px}.course-question-list{padding:0;overflow:hidden}.course-table-toolbar{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px}.course-table-toolbar h2{margin:0;font-size:15px;font-weight:600}.course-question-list .stock-search{background:#edf2ff}.course-form-actions{display:flex;justify-content:flex-end;gap:14px;margin-top:18px;padding:18px 25px;background:#edf3ff}.course-cancel{min-width:110px;height:38px;border:0;border-radius:4px;background:#c4d8fb;color:#34445f;font-size:12px;display:inline-flex;align-items:center;justify-content:center}.course-confirm-modal .modal-dialog{max-width:750px}.course-confirm-modal .modal-content{border:0;border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.28)}.course-confirm-modal .btn-close{position:absolute;top:24px;right:25px;z-index:2}.course-confirm-modal .modal-body{padding:72px 45px 58px}.course-confirm-icon{width:78px;height:78px;display:flex;align-items:center;justify-content:center;margin:0 auto 34px;border-radius:50%;background:#f0f2f4;color:#38bb5b;font-size:37px}.course-confirm-modal h3{margin-bottom:13px;font-size:25px}.course-confirm-modal p{margin-bottom:38px;color:#075dcc;font-size:14px}.course-modal-cancel,.course-modal-confirm{width:180px;height:42px;border-radius:3px;font-size:12px}.course-modal-cancel{border:1px solid #9aa9bf;background:#fff}.course-modal-confirm{background:#5688e8;color:#fff}.question-block{position:relative}.question-block .course-dropzone{height:300px}.course-options{display:flex;flex-direction:column;gap:12px}.course-option{display:grid;grid-template-columns:24px minmax(0,1fr) 35px;align-items:center;gap:12px}.course-option>input[type=radio]{width:17px;height:17px;accent-color:#075dcc}.course-add-option{margin-top:16px;padding:0;border:0;background:transparent;color:#075dcc;font-size:12px}.course-add-option i{margin-right:9px;font-size:16px}.course-question-tools{display:flex;justify-content:flex-end;gap:20px;margin-top:25px;padding-top:18px;border-top:1px solid #edf0f5}.course-question-tools button{border:0;background:transparent;color:#075dcc}.course-question-tools .delete{color:#ff747b}
    .question-photo-dropzone{position:relative;overflow:hidden}.question-builder-page .question-photo-dropzone{width:min(100%,680px);height:180px!important;margin:0;border:1px dashed #b9c9df;border-radius:10px;background:linear-gradient(145deg,#f9fbff 0%,#f4f7fc 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.72);transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease,transform .18s ease}.question-builder-page .question-photo-dropzone:hover{border-color:#4f88de;background:#f4f8ff;box-shadow:0 7px 20px rgba(38,83,145,.1);transform:translateY(-1px)}.question-builder-page .question-photo-dropzone.has-preview{background:#f2f6fc;border-style:solid}.question-photo-preview{width:100%;height:100%;object-fit:contain;padding:10px;border-radius:9px}.question-photo-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#3b4658}.question-builder-page .question-photo-placeholder .course-upload-icon{width:46px;height:46px;margin-bottom:2px;background:#e8f0ff;box-shadow:0 4px 12px rgba(7,93,204,.1);font-size:23px}.question-photo-placeholder>span:nth-child(2){font-size:12px;font-weight:600}.question-photo-placeholder small{color:#7f899b;font-size:10px}.course-breadcrumb a{color:inherit;text-decoration:none}.course-question-list{border-color:#d9e2f1;box-shadow:0 4px 16px rgba(26,56,96,.04)}.course-question-list .course-table-toolbar{min-height:82px;padding:17px 24px;border-bottom:1px solid #e4eaf4}.course-question-list-heading{display:flex;align-items:baseline;gap:10px;white-space:nowrap}.course-question-list-heading span{color:#8a95a8;font-size:11px;font-weight:500}.course-question-list .stock-tools{flex-wrap:nowrap;gap:10px}.course-question-list .stock-search{width:250px;height:42px;border-color:#cfdaec;background:#f3f6fd}.course-question-list .stock-select{width:145px;height:42px;border-color:#cfdaec}.course-question-list .stock-primary{min-width:156px;height:42px;justify-content:center;border-radius:5px;box-shadow:0 4px 10px rgba(7,93,204,.14)}.course-question-list .stock-primary:disabled{opacity:.55;cursor:not-allowed}.course-question-list .denso-table{table-layout:fixed}.course-question-list .question-col-no{width:9%}.course-question-list .question-col-date{width:19%}.course-question-list .question-col-title{width:35%}.course-question-list .question-col-status{width:17%}.course-question-list .question-col-actions{width:20%}.course-question-list .denso-table th{height:58px;padding:15px 22px;vertical-align:middle;background:#edf3ff;color:#26334a;font-size:11px;font-weight:700;letter-spacing:.25px}.course-question-list .denso-table td{height:66px;padding:14px 22px;vertical-align:middle;color:#26334a;font-size:12px;border-color:#e4eaf3}.course-question-list .denso-table tbody tr{transition:background-color .18s ease}.course-question-list .denso-table tbody tr:hover td{background:#f9fbff}.course-question-list .question-title-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}.course-question-list .stock-badge{min-width:76px;padding:5px 12px;text-align:center;border-radius:999px}.course-question-actions{display:flex;align-items:center;gap:7px}.course-question-actions .stock-action{width:34px;height:34px;border-radius:6px;box-shadow:0 3px 7px rgba(35,55,90,.08);transition:transform .15s ease,box-shadow .15s ease}.course-question-actions .stock-action:hover{transform:translateY(-1px);box-shadow:0 5px 10px rgba(35,55,90,.14)}
    .question-builder-page .question-photo-dropzone{width:100%;max-width:none}
    @media(max-width:767.98px){.course-form-card{padding:20px 16px}.course-dropzone,.question-block .course-dropzone{height:190px}.question-builder-page .question-photo-dropzone{height:155px!important}.course-table-toolbar{align-items:flex-start;flex-direction:column}.course-table-toolbar .stock-tools{width:100%}.course-table-toolbar .stock-search{width:100%}.course-question-list .stock-tools{flex-wrap:wrap}.course-question-list .stock-search{width:100%}.course-question-list .stock-select{width:calc(45% - 5px)}.course-question-list .stock-primary{width:calc(55% - 5px);min-width:0}.course-question-list .table-responsive{overflow-x:auto}.course-question-list .denso-table{min-width:720px}.course-confirm-modal .modal-body{padding:58px 22px 38px}.course-modal-cancel,.course-modal-confirm{width:130px}}




/* ===== HandheldManagement ===== */


.hh-page{padding:20px;background:#f7f8ff}.hh-crumb{display:flex;align-items:center;gap:12px;margin-bottom:24px;font-size:18px}.hh-crumb i{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;color:#2864e8}.hh-breadcrumb{margin-bottom:18px;font-size:12px}.hh-breadcrumb strong{color:#0755cc}.hh-panel{border:1px solid #ccd5e6;border-radius:7px;background:#fff;overflow:hidden}.hh-toolbar{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 20px}.hh-toolbar h1{margin:0;font-size:18px;font-weight:600}.hh-tools{display:flex;gap:10px}.hh-search{width:300px;height:38px;display:flex;align-items:center;padding:0 12px;border:1px solid #cbd4e5;border-radius:4px;background:#edf2ff}.hh-search input{min-width:0;flex:1;border:0;outline:0;background:transparent}.hh-tools select{height:38px;min-width:145px;padding:0 12px;border:1px solid #cbd4e5;border-radius:4px;background:#edf2ff}.hh-primary{height:38px;display:inline-flex;align-items:center;gap:7px;padding:0 18px;border:0;border-radius:4px;background:#0755cc;color:#fff;text-decoration:none}.hh-table{min-width:900px;margin:0}.hh-table th{height:52px;padding:12px 16px;background:#edf2ff;font-size:11px;text-align:left}.hh-table td{height:50px;padding:12px 16px;border-bottom:1px solid #e5eaf2;font-size:12px}.hh-badge{min-width:65px;display:inline-block;padding:4px 9px;border-radius:20px;color:#fff;font-size:9px;text-align:center}.hh-green{background:#48c995}.hh-red{background:#ff747b}.hh-yellow{background:#ffc45f}.hh-blue{background:#6894f0}.hh-gray{background:#aaa}.hh-action{width:27px;height:27px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:3px;color:#fff;text-decoration:none}.hh-edit{background:#ffbd55}.hh-delete{background:#ff737b}.hh-view{background:#6995f5}.hh-footer{min-height:62px;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:#edf2ff;font-size:12px}.hh-footer nav{display:flex}.hh-footer button{height:30px;border:1px solid #c7d0df;background:#fff}.hh-footer .active{background:#0755cc;color:#fff}.hh-form{padding:24px}.hh-section-title{margin-bottom:20px;color:#0755cc;font-size:15px;font-weight:600}.hh-label{display:block;margin-bottom:7px;font-size:11px;font-weight:600}.hh-input{width:100%;height:42px;padding:0 13px;border:1px solid #cbd4e5;border-radius:4px}.hh-upload{height:210px;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px dashed #cbd4e5;background:#f8faff}.hh-upload i{font-size:30px;color:#0755cc}.hh-form-actions{display:flex;justify-content:flex-end;gap:10px;padding:18px 24px;background:#edf2ff}.hh-device-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:24px}.hh-device{border:1px solid #d2daea;border-radius:6px;background:#fff;overflow:hidden}.hh-device img{width:100%;height:165px;object-fit:contain;background:#f3f5fa}.hh-device div{padding:12px}.hh-device h3{font-size:13px}.hh-device p{font-size:10px}.hh-device button{width:100%;height:34px;border:0;background:#0755cc;color:#fff}.hh-detail-grid{display:grid;grid-template-columns:320px 1fr;gap:24px;padding:24px}.hh-product-photo{width:100%;height:260px;object-fit:contain;background:#f3f5fa}.hh-detail-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.hh-detail-fields div{padding:12px;background:#f6f8fc}.hh-detail-fields span{display:block;font-size:10px}.hh-detail-fields strong{font-size:12px}@media(max-width:991px){.hh-toolbar{align-items:flex-start;flex-direction:column}.hh-tools{width:100%;flex-wrap:wrap}.hh-search{flex:1}.hh-device-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:767px){.hh-tools>*{width:100%!important}.hh-device-grid{grid-template-columns:1fr}.hh-detail-grid{grid-template-columns:1fr}.hh-detail-fields{grid-template-columns:1fr}}




/* ===== TemplateManagement ===== */


.tm-page{padding:20px;background:#f7f8ff;min-height:100vh}.tm-title{display:flex;align-items:center;gap:12px;margin-bottom:28px;font-size:18px}.tm-title i{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;color:#1760e8}.tm-breadcrumb{margin:0 0 18px 2px;font-size:12px}.tm-breadcrumb strong{color:#0755cc}.tm-panel{border:1px solid #cbd4e5;border-radius:7px;background:#fff;overflow:hidden}.tm-toolbar{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px}.tm-toolbar h1{margin:0;color:#12233d;font-size:18px;font-weight:600}.tm-tools{display:flex;gap:10px}.tm-search{width:310px;height:38px;display:flex;align-items:center;padding:0 12px;border:1px solid #c8d1e2;border-radius:4px;background:#edf2ff}.tm-search input{min-width:0;flex:1;border:0;outline:0;background:transparent}.tm-tools select{height:38px;min-width:150px;padding:0 12px;border:1px solid #c8d1e2;border-radius:4px;background:#edf2ff}.tm-primary,.tm-secondary{height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 20px;border:0;border-radius:4px;text-decoration:none}.tm-primary{background:#0755cc;color:#fff}.tm-secondary{border:1px solid #bfc9da;background:#fff;color:#354052}.tm-table{min-width:980px;margin:0}.tm-table th{height:54px;padding:12px 16px;background:#edf2ff;color:#303743;font-size:11px}.tm-table td{height:57px;padding:12px 16px;border-bottom:1px solid #e4e9f2;font-size:12px}.tm-code{color:#0755cc;font-weight:600}.tm-badge{min-width:66px;display:inline-block;padding:4px 10px;border-radius:20px;color:#fff;font-size:9px;text-align:center}.tm-active{background:#03b981}.tm-inactive{background:#ff737f}.tm-action{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;margin-right:5px;border-radius:3px;color:#fff;text-decoration:none}.tm-view{background:#6d98f4}.tm-edit{background:#ffc05e}.tm-delete{background:#ff737f}.tm-footer{min-height:64px;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:#edf2ff;font-size:12px}.tm-pagination{display:flex}.tm-pagination button{height:30px;border:1px solid #c7d0df;background:#fff}.tm-pagination .active{background:#0755cc;color:#fff}.tm-form{padding:24px}.tm-section{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid #e3e8f1}.tm-section h2{margin:0 0 18px;color:#0755cc;font-size:15px}.tm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 22px}.tm-field.full{grid-column:1/-1}.tm-label{display:block;margin-bottom:7px;color:#2f3742;font-size:11px;font-weight:600}.tm-input,.tm-select,.tm-textarea{width:100%;padding:0 13px;border:1px solid #c8d1e2;border-radius:4px;background:#fff}.tm-input,.tm-select{height:42px}.tm-textarea{height:82px;padding-top:10px;resize:none}.tm-question{display:grid;grid-template-columns:45px 1fr 170px 40px;gap:10px;align-items:center;margin-bottom:10px}.tm-number{height:42px;display:flex;align-items:center;justify-content:center;border-radius:4px;background:#edf2ff;color:#0755cc;font-weight:600}.tm-remove{height:40px;border:0;border-radius:4px;background:#ff737f;color:#fff}.tm-add{height:38px;padding:0 18px;border:1px solid #0755cc;border-radius:4px;background:#fff;color:#0755cc}.tm-actions{display:flex;justify-content:flex-end;gap:10px;padding:18px 24px;background:#edf2ff}@media(max-width:991px){.tm-toolbar{align-items:flex-start;flex-direction:column}.tm-tools{width:100%;flex-wrap:wrap}.tm-search{flex:1}.tm-grid{grid-template-columns:1fr}.tm-field.full{grid-column:auto}}@media(max-width:767px){.tm-tools>*{width:100%!important}.tm-question{grid-template-columns:38px 1fr 38px}.tm-question .tm-select{grid-column:2/3}}


.tm-calendar-panel{padding:24px 12px 36px;margin-bottom:20px;border:1px solid #cbd4e5;background:#fff}.tm-calendar-head{min-height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 14px 24px;border-bottom:1px solid #ccd5e5}.tm-calendar-head h2{margin:0;font-size:17px;font-weight:600}.tm-calendar-head select{width:128px;height:43px;padding:0 17px;border:1px solid #c7d0e0;border-radius:4px;background:#edf2ff}.tm-calendar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:12px}.tm-month{min-height:210px;padding:16px;border:1px solid #bfc9dc;border-radius:12px;background:#fff}.tm-month h3{margin:0 0 10px;color:#10213e;font-size:12px;font-weight:700}.tm-week,.tm-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.tm-week b{padding-bottom:4px;color:#687386;font-size:8px;text-align:center}.tm-days span,.tm-days button{height:28px;border:0;background:#edf1ff;color:#303a4c;font-size:9px;text-align:center}.tm-days .empty{background:transparent}.tm-days button{cursor:pointer}.tm-days button:nth-child(7n+1),.tm-days button:nth-child(7n+7){color:#0755cc}.tm-days button.selected{background:#6c98f2;color:#073b9f}.tm-days button:focus{outline:2px solid #0755cc;outline-offset:-2px}.tm-month:has(.tm-days button:focus){box-shadow:0 7px 15px rgba(20,42,80,.18)}@media(max-width:1200px){.tm-calendar-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:900px){.tm-calendar-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.tm-calendar-grid{grid-template-columns:1fr}.tm-calendar-head{align-items:flex-start;flex-direction:column;gap:14px}.tm-calendar-head select{width:100%}}


.tm-page{padding:24px 20px 80px}.tm-title{margin-bottom:28px}.tm-title i{font-size:17px}.tm-breadcrumb{display:flex;gap:8px;margin:0 0 34px 22px;font-size:13px}.tm-list-panel{overflow:hidden}.tm-list-panel .tm-toolbar{min-height:90px}.tm-toolbar{padding:16px 24px}.tm-tools{align-items:center}.tm-list-panel .tm-search{width:520px}.tm-tools select{min-width:190px}.tm-primary{min-width:90px;font-size:12px;font-weight:600}.tm-table th{height:66px;padding:16px 24px;font-size:13px}.tm-table td{height:68px;padding:15px 24px;font-size:14px}.tm-list-panel .tm-table th:first-child{width:19%}.tm-list-panel .tm-table th:nth-child(2){width:43%}.tm-list-panel .tm-table th:nth-child(3){width:16%}.tm-list-panel .tm-table th:nth-child(4){width:11%}.tm-badge{min-width:75px}.tm-list-footer{margin-top:20px}.tm-basic{padding:21px 34px 28px;margin-bottom:20px}.tm-basic h1{margin:0 0 20px;color:#0755cc;font-size:18px}.tm-basic h1 i{font-size:17px}.tm-basic .tm-grid{gap:18px 20px}.tm-label{font-size:13px;letter-spacing:.4px}.tm-date-wrap{position:relative;display:block}.tm-date-wrap i{position:absolute;right:14px;top:12px;color:#647087;font-size:17px}.tm-status{height:50px;display:flex;align-items:center;margin-top:25px;padding:0 18px;background:#e2ebff;color:#132039;font-size:13px}.tm-status>span{margin-right:auto}.tm-status strong{margin-left:12px;color:#0755cc;font-weight:500}.tm-switch input{display:none}.tm-switch i{position:relative;display:block;width:44px;height:25px;border-radius:20px;background:#0755cc}.tm-switch i:after{content:'';position:absolute;top:3px;right:3px;width:19px;height:19px;border-radius:50%;background:#fff}.tm-textarea{height:80px}.tm-check-panel{padding:32px 34px 35px;margin-bottom:20px}.tm-check-head{display:flex;align-items:center;justify-content:space-between;padding:0 24px 24px;border-bottom:1px solid #d8deea}.tm-check-head h2{margin:0;font-size:18px}.tm-check-head .tm-search{width:635px}.tm-check-table{margin-top:19px}.tm-check-table th{height:64px;padding:18px 24px;background:#edf2ff;font-size:13px}.tm-check-table td{height:69px;padding:11px 24px;vertical-align:middle;border-bottom:1px solid #e3e8f1;font-size:13px}.tm-check-table th:first-child{width:7%}.tm-check-table th:nth-child(2){width:40%}.tm-check-table th:nth-child(3){width:17%;text-align:center}.tm-check-table td:nth-child(3){text-align:center}.tm-check-table input{width:100%;height:45px;padding:0 12px;border:1px solid #d2daea}.tm-camera{position:relative;border:0;background:transparent;color:#0755cc;font-size:28px}.tm-camera b{position:absolute;right:-1px;top:-4px;font-size:17px}.tm-savebar{display:flex;justify-content:flex-end;gap:16px;padding:16px 32px;background:#edf2ff}.tm-cancel{min-width:95px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:4px;background:#bad2f8;color:#26374e;text-decoration:none;font-size:12px}.tm-savebar .tm-primary{min-width:165px}.tm-modal{position:fixed;z-index:9999;inset:0;display:none;align-items:flex-start;justify-content:center;padding-top:202px;background:rgba(0,0,0,.62)}.tm-modal.show{display:flex}.tm-dialog{position:relative;width:750px;min-height:448px;padding:74px 70px 58px;border-radius:18px;background:#fff;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.2)}.tm-close{position:absolute;right:35px;top:20px;border:0;background:none;color:#9aa7bb;font-size:44px;font-weight:200}.tm-confirm-icon{width:120px;height:120px;display:flex;align-items:center;justify-content:center;margin:0 auto 28px;border-radius:50%;background:#f0f0f0}.tm-confirm-icon i{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#34b953;color:#fff;font-size:34px}.tm-dialog h2{margin:0 0 4px;font-size:30px;font-weight:400}.tm-dialog p{margin:0 0 50px;color:#0755cc;font-size:19px}.tm-dialog>div:last-child{display:flex;justify-content:center;gap:20px}.tm-modal-cancel,.tm-modal-confirm{width:196px;height:41px;border-radius:3px}.tm-modal-cancel{border:1px solid #8190a8;background:#fff;color:#8190a8}.tm-modal-confirm{border:0;background:#5688e7;color:#fff}@media(max-width:1200px){.tm-list-panel .tm-search,.tm-check-head .tm-search{width:360px}}@media(max-width:767px){.tm-breadcrumb{margin-left:0}.tm-basic,.tm-check-panel{padding:20px 15px}.tm-status{margin-top:0}.tm-check-head{align-items:flex-start;flex-direction:column;gap:15px;padding:0 0 20px}.tm-dialog{width:calc(100% - 30px);padding:70px 25px}.tm-modal{padding-top:80px}}




/* ===== EquipmentManagement ===== */


.eq-page{min-height:100vh;padding:22px;background:#f7f8ff;color:#10213b}.eq-title{display:flex;align-items:center;gap:13px;margin-bottom:30px;font-size:18px}.eq-title i{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;color:#0755cc}.eq-breadcrumb{display:flex;gap:8px;margin:0 0 28px 22px;font-size:12px}.eq-breadcrumb strong{color:#0755cc}.eq-panel{border:1px solid #c9d3e5;border-radius:7px;background:#fff;overflow:hidden}.eq-toolbar{min-height:78px;display:flex;align-items:center;justify-content:space-between;padding:14px 22px}.eq-toolbar h1{margin:0;font-size:18px}.eq-tools{display:flex;gap:10px}.eq-search{width:390px;height:40px;display:flex;align-items:center;padding:0 13px;border:1px solid #c8d1e2;border-radius:4px;background:#edf2ff}.eq-search input{min-width:0;flex:1;border:0;outline:0;background:transparent}.eq-tools select{min-width:155px;height:40px;padding:0 12px;border:1px solid #c8d1e2;border-radius:4px;background:#edf2ff}.eq-primary,.eq-secondary{height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 20px;border-radius:4px;text-decoration:none}.eq-primary{border:0;background:#0755cc;color:#fff}.eq-secondary{border:1px solid #aeb9ca;background:#fff;color:#516078}.eq-table{min-width:900px;margin:0}.eq-table th{height:58px;padding:15px 22px;background:#edf2ff;font-size:11px}.eq-table td{height:60px;padding:14px 22px;border-bottom:1px solid #e5eaf2;font-size:12px}.eq-badge{min-width:76px;display:inline-block;padding:5px 9px;border-radius:20px;color:#fff;font-size:9px;text-align:center}.eq-blue{background:#6591ee}.eq-yellow{background:#ffc15e}.eq-green{background:#05b981}.eq-red{background:#ff717c}.eq-view{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;background:#6995f3;color:#fff;text-decoration:none}.eq-footer{min-height:64px;display:flex;align-items:center;justify-content:space-between;padding:14px 22px;background:#edf2ff;font-size:12px}.eq-footer nav{display:flex}.eq-footer button{height:30px;border:1px solid #c7d0df;background:#fff}.eq-footer .active{background:#0755cc;color:#fff}.eq-basic{padding:20px;margin-bottom:20px}.eq-basic h2,.eq-section h2{margin:0 0 18px;color:#0755cc;font-size:15px}.eq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 20px}.eq-field label{display:block;margin-bottom:6px;font-size:10px;font-weight:600}.eq-field div{min-height:39px;padding:11px 12px;border:1px solid #d3dbea;border-radius:3px;font-size:11px}.eq-field .passed{background:#d7f5e7}.eq-product{display:grid;grid-template-columns:190px 1fr;gap:18px;margin-top:18px}.eq-photo{height:210px;display:flex;align-items:center;justify-content:center;border:1px dashed #cbd5e5;background:#fafbfe;color:#e34949;font-size:80px}.eq-section{padding:22px;margin-bottom:20px;border:1px solid #c9d3e5;background:#fff}.eq-months details{margin-bottom:9px;border:1px solid #d5ddea;border-radius:3px}.eq-months summary{padding:13px;cursor:pointer;font-size:11px}.eq-months summary span{margin-left:12px;padding:4px 9px;background:#edf2ff;color:#52627a;font-size:8px}.eq-flow{width:100%;margin-top:18px}.eq-flow th{padding:10px;background:#edf2ff;font-size:9px}.eq-flow td{padding:10px;border-bottom:1px solid #e6ebf3;font-size:9px}.eq-actions{display:flex;justify-content:flex-end;gap:10px;padding:18px;background:#edf2ff}.eq-modal{position:fixed;z-index:9999;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.62)}.eq-dialog{position:relative;width:650px;padding:64px 60px 55px;border-radius:15px;background:#fff;text-align:center}.eq-dialog .close{position:absolute;right:25px;top:15px;border:0;background:none;color:#9ba8ba;font-size:34px}.eq-ok{width:100px;height:100px;display:flex;align-items:center;justify-content:center;margin:0 auto 25px;border-radius:50%;background:#f0f0f0}.eq-ok i{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#34b953;color:#fff;font-size:28px}.eq-dialog h2{font-size:28px;font-weight:400}.eq-dialog p{color:#0755cc;font-size:17px}.eq-dialog footer{display:flex;justify-content:center;gap:18px;margin-top:42px}.eq-dialog footer a{width:190px}.eq-danger-card{display:grid;grid-template-columns:110px 1fr 140px;gap:18px;align-items:center;padding:20px;border-bottom:1px solid #e2e8f1}.eq-danger-icon{height:90px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:#fff1f2;color:#e34651;font-size:45px}.eq-danger-card h3{font-size:14px}.eq-danger-card p{margin:4px 0;font-size:11px;color:#657086}@media(max-width:900px){.eq-toolbar{align-items:flex-start;flex-direction:column;gap:14px}.eq-tools{width:100%;flex-wrap:wrap}.eq-search{flex:1}.eq-grid{grid-template-columns:1fr}.eq-product{grid-template-columns:1fr}}@media(max-width:600px){.eq-tools>*{width:100%!important}.eq-danger-card{grid-template-columns:1fr}.eq-dialog{width:calc(100% - 30px);padding:55px 25px}}


.eq-year-panel .eq-table th:nth-last-child(3),.eq-year-panel .eq-table th:nth-last-child(2){width:14%}.eq-year-panel .eq-table th:last-child{width:10%}.eq-reject,.eq-approve{min-width:112px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:3px;color:#fff;text-decoration:none}.eq-reject{background:#ff737c}.eq-approve{background:#03b985}.eq-ok.danger i{background:#f4414c}.eq-reject-dialog{min-height:525px}.eq-comment{display:block;width:440px;margin:10px auto 0;text-align:left}.eq-comment span{display:block;margin-bottom:7px;color:#252b34;font-size:12px;font-weight:600}.eq-comment em{color:#e7434b}.eq-comment textarea{width:100%;height:120px;border:1px solid #ccd5e4;resize:none}.eq-reject-dialog footer{margin-top:38px}@media(max-width:700px){.eq-comment{width:100%}}


.eq-year-panel .eq-table th:nth-child(2){width:65%}.eq-year-panel .eq-table th:nth-child(3){width:12%}.eq-year-panel .eq-toolbar{min-height:90px}.eq-year-footer{margin-top:20px}.eq-edit{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;margin-right:7px;border-radius:3px;background:#ffbf59;color:#fff;text-decoration:none}.eq-edit.disabled{background:#c6cad8}.eq-plan-panel{padding:20px;border:1px solid #c9d3e5;border-radius:7px;background:#fff}.eq-plan-head{min-height:58px;display:flex;align-items:flex-start;justify-content:space-between;padding:4px 20px 18px;border-bottom:1px solid #d3dbea}.eq-plan-head h1{font-size:17px}.eq-month{margin-top:16px;border:1px solid #c7d1e2;border-radius:5px}.eq-month summary{min-height:67px;display:flex;align-items:center;padding:0 20px;cursor:pointer;list-style:none}.eq-month summary strong{font-size:16px}.eq-month summary span{margin-left:28px;padding:8px 18px;border-radius:3px;background:#e3eaff;color:#4c5b74;font-size:10px}.eq-month summary i{margin-left:auto}.eq-month[open] summary i{transform:rotate(180deg)}.eq-month-table{min-width:920px;margin:0 14px 18px;width:calc(100% - 28px)}.eq-month-table th{height:50px;padding:13px 12px;border-bottom:1px solid #cfd7e5;font-size:10px}.eq-month-table td{height:54px;padding:12px;border-bottom:1px solid #dbe2ed;font-size:10px}.eq-flow-wrap{margin-top:20px;padding-top:22px;border-top:1px solid #d4dce9}.eq-flow-title{display:flex;align-items:center;justify-content:space-between}.eq-flow-title em{color:#f34b54}.eq-flow-title .eq-primary{min-width:155px}.eq-flow select{width:100%;height:35px;border:1px solid #ccd5e4;background:#fff}.eq-actions{margin-top:20px}.eq-cancel{height:40px;display:flex;align-items:center;justify-content:center;padding:0 28px;border-radius:4px;background:#bdd5fb;color:#263850;text-decoration:none}.eq-basic{padding:25px 34px}.eq-basic h2{font-size:18px}.eq-basic .eq-field div{height:50px;padding:14px;font-size:13px}.eq-label{font-size:12px;font-weight:600}.eq-photo{height:310px}.eq-check{padding:35px}.eq-check h2{padding:10px 8px 25px;border-bottom:1px solid #d9e0eb;color:#0755cc;font-size:18px}.eq-check-table{margin-top:20px}.eq-check-table th{height:64px;padding:18px 24px;background:#edf2ff;font-size:13px}.eq-check-table td{height:68px;padding:11px 24px;vertical-align:middle;border-bottom:1px solid #e1e7f0;font-size:13px}.eq-check-table th:first-child{width:7%}.eq-check-table th:nth-child(2){width:40%}.eq-check-table th:nth-child(3){width:17%;text-align:center}.eq-check-table td:nth-child(3){text-align:center}.eq-check-table button{position:relative;border:0;background:none;color:#0755cc;font-size:27px}.eq-check-table button b{position:absolute;right:-2px;top:-5px}.eq-check-table input{width:100%;height:45px;padding:0 12px;border:1px solid #d1dae9}.eq-dialog{width:630px}.eq-dialog p{margin-bottom:0}@media(max-width:900px){.eq-plan-head{align-items:flex-start;flex-direction:column;gap:14px}.eq-year-panel .eq-table th:nth-child(2){width:auto}}




/* ===== InspectionManagement ===== */


.im-page{min-height:100vh;padding:22px;background:#f7f8ff;color:#10213b}.im-title{display:flex;align-items:center;gap:13px;margin-bottom:30px;font-size:18px}.im-title i{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;color:#0755cc}.im-breadcrumb{display:flex;gap:8px;margin:0 0 28px 22px;font-size:12px}.im-breadcrumb strong{color:#0755cc}.im-panel{border:1px solid #c9d3e5;border-radius:7px;background:#fff;overflow:hidden}.im-toolbar{min-height:90px;display:flex;align-items:center;justify-content:space-between;padding:15px 24px}.im-toolbar h1{margin:0;font-size:18px}.im-tools{display:flex;gap:10px}.im-search{width:520px;height:42px;display:flex;align-items:center;padding:0 14px;border:1px solid #c8d1e2;border-radius:4px;background:#edf2ff}.im-search input{min-width:0;flex:1;border:0;outline:0;background:transparent}.im-tools select{width:190px;height:42px;padding:0 14px;border:1px solid #c8d1e2;border-radius:4px;background:#edf2ff}.im-primary,.im-cancel{height:42px;display:inline-flex;align-items:center;justify-content:center;padding:0 22px;border-radius:4px;text-decoration:none}.im-primary{border:0;background:#0755cc;color:#fff}.im-cancel{background:#bdd4fa;color:#27364d}.im-table{margin:0}.im-table th{height:66px;padding:18px 24px;background:#edf2ff;font-size:12px}.im-table td{height:68px;padding:16px 24px;border-bottom:1px solid #e2e8f1;font-size:13px}.im-badge{min-width:75px;display:inline-block;padding:5px 10px;border-radius:20px;color:#fff;font-size:9px;text-align:center}.im-active{background:#02b985}.im-inactive{background:#ff747e}.im-view{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;background:#6995f4;color:#fff;text-decoration:none}.im-footer{min-height:64px;display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding:14px 22px;background:#edf2ff;font-size:12px}.im-footer nav{display:flex}.im-footer button{height:30px;border:1px solid #c7d0df;background:#fff}.im-footer .active{background:#0755cc;color:#fff}.im-form{padding:22px 34px 32px}.im-form h2{margin:0 0 20px;color:#0755cc;font-size:18px}.im-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}.im-field label,.im-radio>span{display:block;margin-bottom:7px;font-size:12px;font-weight:600}.im-input,.im-select{width:100%;height:50px;padding:0 14px;border:1px solid #c9d2e2;border-radius:4px;background:#fff}.im-radio div{height:50px;display:flex;align-items:center;gap:20px}.im-radio input{width:18px;height:18px;accent-color:#0755cc}.im-status{height:56px;display:flex;align-items:center;padding:0 18px;background:#e2ebff}.im-status span{margin-right:auto;font-size:13px}.im-switch{width:44px;height:25px;position:relative;border-radius:20px;background:#0755cc}.im-switch:after{content:'';position:absolute;right:3px;top:3px;width:19px;height:19px;border-radius:50%;background:#fff}.im-status strong{margin-left:12px;color:#0755cc}.im-actions{display:flex;justify-content:flex-end;gap:16px;margin-top:20px;padding:16px 32px;background:#edf2ff}.im-modal{position:fixed;z-index:9999;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:200px;background:rgba(0,0,0,.62)}.im-dialog{position:relative;width:750px;padding:64px 80px 54px;border-radius:18px;background:#fff;text-align:center}.im-close{position:absolute;right:28px;top:14px;color:#9ba8b9;font-size:40px;text-decoration:none}.im-plus,.im-check{width:60px;height:60px;display:flex;align-items:center;justify-content:center;margin:0 auto 15px;border-radius:50%;background:#f0f0f0}.im-plus i{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#0755cc;color:#fff;font-size:22px}.im-check{width:120px;height:120px;margin-bottom:26px}.im-check i{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#34b953;color:#fff;font-size:32px}.im-dialog h2{font-size:28px}.im-dialog p{color:#0755cc;font-size:18px}.im-modal-field{display:block;width:430px;margin:34px auto;text-align:left}.im-modal-field span{display:block;margin-bottom:7px;font-size:12px}.im-modal-field input{width:100%;height:50px;padding:0 12px;border:1px solid #ccd5e5}.im-dialog footer{display:flex;justify-content:center;gap:12px;margin-top:34px}.im-dialog footer a{min-width:100px}.im-confirm-dialog{padding-top:72px}@media(max-width:950px){.im-toolbar{align-items:flex-start;flex-direction:column;gap:15px}.im-tools{width:100%;flex-wrap:wrap}.im-search{flex:1}.im-grid{grid-template-columns:1fr}}@media(max-width:650px){.im-tools>*{width:100%!important}.im-dialog{width:calc(100% - 30px);padding:60px 25px}.im-modal-field{width:100%}}




/* ===== InspectorManagement ===== */


.ir-page{min-height:100vh;padding:22px;background:#f7f8ff;color:#10213b}.ir-title{display:flex;align-items:center;gap:13px;margin-bottom:30px;font-size:18px}.ir-title i{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;color:#0755cc}.ir-breadcrumb{display:flex;gap:8px;margin:0 0 28px 22px;font-size:12px}.ir-breadcrumb strong{color:#0755cc}.ir-panel{border:1px solid #c9d3e5;border-radius:7px;background:#fff;overflow:hidden}.ir-toolbar{min-height:88px;display:flex;align-items:center;justify-content:space-between;padding:15px 24px}.ir-toolbar h1{margin:0;font-size:18px}.ir-tools{display:flex;gap:10px}.ir-search{width:390px;height:42px;display:flex;align-items:center;padding:0 14px;border:1px solid #c8d1e2;border-radius:4px;background:#edf2ff}.ir-search input{min-width:0;flex:1;border:0;outline:0;background:transparent}.ir-tools select{width:170px;height:42px;padding:0 14px;border:1px solid #c8d1e2;border-radius:4px;background:#edf2ff}.ir-table{min-width:900px;margin:0}.ir-table th{height:64px;padding:17px 22px;background:#edf2ff;font-size:11px}.ir-table td{height:68px;padding:13px 22px;border-bottom:1px solid #e2e8f1;font-size:12px}.ir-status{display:inline-block;min-width:80px;padding:5px 8px;border-radius:18px;color:#fff;font-size:9px;text-align:center}.ir-status small{display:block;margin-top:4px;color:#7e8797}.ir-green{background:#04b983}.ir-red{background:#ff747d}.ir-yellow{background:#ffc05b}.ir-view{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;background:#6995f3;color:#fff;text-decoration:none}.ir-footer{min-height:64px;display:flex;align-items:center;justify-content:space-between;padding:14px 22px;background:#edf2ff;font-size:12px}.ir-footer nav{display:flex}.ir-footer button{height:30px;border:1px solid #c7d0df;background:#fff}.ir-footer .active{background:#0755cc;color:#fff}.ir-detail{padding:25px 34px}.ir-detail h2{margin:0 0 22px;color:#0755cc;font-size:18px}.ir-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}.ir-field label{display:block;margin-bottom:7px;font-size:11px;font-weight:600}.ir-field div{height:48px;padding:14px;border:1px solid #ccd5e4;border-radius:4px;font-size:12px}.ir-check{margin-top:20px;padding:30px 34px}.ir-check h2{padding-bottom:22px;border-bottom:1px solid #d7deea}.ir-check table{margin-top:18px}.ir-check th{height:60px;padding:16px 22px;background:#edf2ff;font-size:11px}.ir-check td{height:62px;padding:12px 22px;border-bottom:1px solid #e1e7f0;font-size:12px}.ir-check input{width:100%;height:40px;padding:0 10px;border:1px solid #ccd5e4}.ir-actions{display:flex;justify-content:flex-end;gap:14px;margin-top:20px;padding:17px 30px;background:#edf2ff}.ir-approve,.ir-reject{min-width:115px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:4px;color:#fff;text-decoration:none}.ir-approve{background:#04b983}.ir-reject{background:#ff747d}.ir-modal{position:fixed;z-index:9999;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:190px;background:rgba(0,0,0,.62)}.ir-dialog{position:relative;width:650px;padding:62px 70px 52px;border-radius:17px;background:#fff;text-align:center}.ir-close{position:absolute;right:26px;top:12px;color:#9aa7b8;font-size:40px;text-decoration:none}.ir-symbol{width:105px;height:105px;display:flex;align-items:center;justify-content:center;margin:0 auto 25px;border-radius:50%;background:#f0f0f0}.ir-symbol i{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#34b953;color:#fff;font-size:29px}.ir-symbol.danger i{background:#f4424e}.ir-dialog h2{font-size:28px}.ir-dialog p{color:#0755cc;font-size:17px}.ir-comment{display:block;text-align:left;margin-top:18px}.ir-comment span{display:block;margin-bottom:6px;font-size:12px}.ir-comment textarea{width:100%;height:105px;border:1px solid #ccd5e4}.ir-dialog footer{display:flex;justify-content:center;gap:15px;margin-top:35px}.ir-dialog footer a{width:180px}@media(max-width:900px){.ir-toolbar{align-items:flex-start;flex-direction:column;gap:14px}.ir-tools{width:100%;flex-wrap:wrap}.ir-search{flex:1}.ir-grid{grid-template-columns:1fr}}@media(max-width:650px){.ir-tools>*{width:100%!important}.ir-dialog{width:calc(100% - 30px);padding:55px 25px}}




/* ===== Global sidebar ===== */
#sidebar.denso-sidebar {
        background: #eef3ff;
        border-right: 1px solid #e5eaf5;
        color: #30343b;
    }

    #sidebar .denso-profile {
        min-height: 106px;
        padding: 24px 20px;
        display: flex;
        align-items: center;
        gap: 13px;
        background: #f4f4f4;
        border-bottom: 0;
    }

    #sidebar .denso-profile::after { display: none; }

    #sidebar .denso-profile-avatar {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        border-radius: 50%;
        border: 1px solid #d4dae6;
        object-fit: cover;
        background: #fff;
    }

    #sidebar .denso-profile-name {
        margin: 0 0 2px;
        color: #303030;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #sidebar .denso-profile-role {
        color: #6f737c;
        font-size: 11px;
        line-height: 1.2;
    }

    #sidebar .sidebarMenuScroll { padding-top: 18px; }

    #sidebar .denso-menu {
        margin: 0;
        padding: 0 10px 20px;
    }

    #sidebar .denso-menu > li {
        margin: 0 0 7px;
    }

    #sidebar .denso-menu > li::before,
    #sidebar .denso-menu > li::after { display: none; }

    #sidebar .denso-menu > li > a {
        min-height: 48px;
        padding: 6px 10px;
        color: #3d424b;
        border-radius: 9px;
        font-size: 13px;
        font-weight: 400;
        background: transparent;
        transition: background-color .18s ease, color .18s ease;
    }

    #sidebar .denso-menu > li > a > i {
        width: 35px;
        height: 35px;
        margin-right: 10px;
        border-radius: 9px;
        color: #fff;
        background: #2864e8;
        font-size: 17px;
        box-shadow: 0 3px 8px rgba(40, 100, 232, .16);
    }

    #sidebar .denso-menu > li > a .menu-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #sidebar .denso-menu > li > a .denso-menu-arrow {
        margin-left: auto;
        font-size: 13px;
        color: #343a45;
        transition: transform .2s ease;
    }

    #sidebar .denso-menu > li > a[aria-expanded="false"] .denso-menu-arrow {
        transform: rotate(-90deg);
    }

    #sidebar .denso-menu > li:hover > a,
    #sidebar .denso-menu > li.active > a,
    #sidebar .denso-menu > li.current-page > a {
        color: #165ce7;
        background: #e4ecff;
        border-radius: 9px;
    }

    #sidebar .denso-menu > li.active > a > i,
    #sidebar .denso-menu > li.current-page > a > i {
        color: #fff;
        background: #2864e8;
    }

    #sidebar .denso-menu .denso-stock-menu {
        margin: 0 0 7px;
        padding: 5px 0 6px 29px;
        list-style: none;
    }

    #sidebar .denso-menu .denso-stock-menu > li > a {
        display: block;
        padding: 7px 7px 7px 10px;
        border-left: 1px solid #c9d5ec;
        border-radius: 0;
        color: #3d424b;
        font-size: 12.5px;
        text-decoration: none;
        white-space: nowrap;
    }

    #sidebar .denso-menu .denso-stock-menu > li > a:hover,
    #sidebar .denso-menu .denso-stock-menu > li > a.active-sub {
        color: #1260ee;
        background: transparent;
        font-weight: 500;
    }

    @media (max-width: 991.98px) {
        #sidebar .denso-profile { min-height: 88px; padding: 18px 20px; }
    }


/* ===== Stock dashboard ===== */
.stock-dashboard {
        --stock-border: #c8d1e4;
        --stock-text: #102039;
        padding: 20px;
        background: #f4f6fd;
    }

    .stock-breadcrumb {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 2px 0 20px;
        color: #383838;
        font-size: 18px;
    }

    .stock-home-icon {
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
        border-radius: 50%;
        color: #4e83f1;
        background: #fff;
        font-size: 19px;
    }

    .stock-summary-card {
        min-height: 145px;
        overflow: hidden;
        border: 1px solid var(--stock-border);
        border-radius: 8px;
        box-shadow: none;
    }

    .stock-summary-main {
        min-height: 104px;
        padding: 17px 20px 13px;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 15px;
    }

    .stock-summary-icon { font-size: 27px; line-height: 1; }
    .stock-summary-content { text-align: right; }
    .stock-summary-label {
        margin-bottom: 1px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .5px;
    }
    .stock-summary-number {
        color: #0b1b32;
        font-size: clamp(35px, 3vw, 50px);
        font-weight: 500;
        line-height: 1;
    }

    .stock-summary-footer {
        min-height: 40px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
        font-size: 12px;
    }

    .summary-blue .stock-summary-main { background: #e7eefb; }
    .summary-blue .stock-summary-icon,
    .summary-blue .stock-summary-label { color: #0758c9; }
    .summary-blue .stock-summary-footer { background: #0757ca; }

    .summary-green .stock-summary-main { background: #e5f1ef; }
    .summary-green .stock-summary-icon,
    .summary-green .stock-summary-label { color: #087e61; }
    .summary-green .stock-summary-footer { background: #087e61; }

    .summary-amber .stock-summary-main { background: #f4f0e7; }
    .summary-amber .stock-summary-icon,
    .summary-amber .stock-summary-label { color: #8e5b00; }
    .summary-amber .stock-summary-footer { background: #915d00; }

    .summary-red .stock-summary-main { background: #ffdfdc; }
    .summary-red .stock-summary-icon,
    .summary-red .stock-summary-label { color: #c71e22; }
    .summary-red .stock-summary-footer { background: #c91d22; }

    .stock-panel {
        overflow: hidden;
        background: #fff;
        border: 1px solid var(--stock-border);
        border-radius: 8px;
    }

    .stock-chart-placeholder { min-height: 400px; }

    .stock-table-heading {
        min-height: 86px;
        padding: 18px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .stock-table-title {
        margin: 0;
        color: var(--stock-text);
        font-size: 20px;
        font-weight: 600;
    }

    .stock-table-tools { display: flex; gap: 12px; }
    .stock-search {
        width: 240px;
        height: 40px;
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 0 13px;
        border: 1px solid var(--stock-border);
        border-radius: 8px;
    }
    .stock-search input {
        min-width: 0;
        width: 100%;
        border: 0;
        outline: 0;
        color: #6e7788;
        background: transparent;
        font-size: 13px;
    }
    .stock-filter {
        height: 40px;
        padding: 0 14px;
        border: 1px solid var(--stock-border);
        border-radius: 8px;
        color: #253047;
        background: #fff;
        font-size: 13px;
    }

    .stock-table { min-width: 820px; margin: 0; }
    .stock-table thead th {
        height: 49px;
        padding: 12px 24px;
        border: 0;
        background: #edf2ff;
        color: #51596b;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .45px;
        text-align: center;
        vertical-align: middle;
    }
    .stock-table tbody td {
        height: 40px;
        padding: 14px 24px;
        color: #17263d;
        border-color: #e3e8f2;
        font-size: 14px;
        vertical-align: middle;
    }

    .stock-status {
        min-width: 90px;
        display: inline-block;
        padding: 4px 12px;
        border-radius: 20px;
        color: #fff;
        font-size: 10px;
        line-height: 1.2;
        text-align: center;
    }
    .status-approved { background: #00b988; }
    .status-pending { background: #ffc35d; }
    .status-rejected { background: #ff7079; }

    .stock-view-button {
        width: 29px;
        height: 29px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 3px;
        color: #fff;
        background: #6995f5;
        font-size: 14px;
    }

    .stock-panel .dataTables_wrapper .stock-dt-footer {
        min-height: 64px;
        padding: 14px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        border-top: 1px solid #e3e8f2;
    }
    .stock-panel .dataTables_info {
        padding: 0 !important;
        color: #717a8d;
        font-size: 12px;
    }
    .stock-panel .dataTables_paginate { padding: 0 !important; }
    .stock-panel .dataTables_paginate .pagination { margin: 0; }
    .stock-panel .page-link {
        color: #2864e8;
        border-color: #d8dfed;
        font-size: 12px;
    }
    .stock-panel .page-item.active .page-link {
        color: #fff;
        background: #2864e8;
        border-color: #2864e8;
    }
    .stock-panel table.dataTable { width: 100% !important; margin: 0 !important; }
    .stock-panel table.dataTable thead .sorting,
    .stock-panel table.dataTable thead .sorting_asc,
    .stock-panel table.dataTable thead .sorting_desc {
        background-position: right 9px center;
    }

    @media (max-width: 767.98px) {
        .stock-dashboard { padding: 14px; }
        .stock-breadcrumb { font-size: 16px; }
        .stock-chart-placeholder { min-height: 260px; }
        .stock-table-heading { align-items: stretch; flex-direction: column; }
        .stock-table-tools { flex-direction: column; }
        .stock-search { width: 100%; }
        .stock-panel .dataTables_wrapper .stock-dt-footer {
            align-items: flex-start;
            flex-direction: column;
        }
    }


/* ===== Requisition product selector ===== */
.req-product {
            height: 210px;
            padding: 12px;
            border: 1px solid #d6deec;
            border-radius: 6px;
            background: #fff;
            display: flex;
            flex-direction: column
        }

        .req-product.selected {
            border: 2px solid #2369df
        }

        .req-product-image {
            height: 105px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f7f9fd;
            border-radius: 4px;
            color: #8b97a9;
            font-size: 52px
        }

        .req-product-name {
            margin-top: 9px;
            font-size: 11px;
            font-weight: 600
        }

        .req-product-detail {
            font-size: 10px;
            color: #7b8596
        }

        .req-product button {
            margin-top: auto;
            height: 28px;
            border: 0;
            background: #eef3ff;
            color: #185dce;
            font-size: 10px;
            font-weight: 600
        }

.req-product.selected button {
            background: #1c63d8;
            color: #fff
        }

/* ================================================================
   Shared DataTable
   One visual language for every table across all management modules.
   ================================================================ */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table.denso-table,
table.denso-table.dataTable {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
    color: var(--denso-text);
    background: #fff;
}

table.denso-table > thead > tr > th,
table.denso-table.dataTable > thead > tr > th {
    height: 45px;
    padding: 15px 22px;
    border: 0;
    border-bottom: 1px solid #dce3ef;
    color: #303743;
    background: var(--denso-primary-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .35px;
    line-height: 1.35;
    vertical-align: middle;
    white-space: nowrap;
}

table.denso-table > tbody > tr > td,
table.denso-table.dataTable > tbody > tr > td {
    height: 40px;
    padding: 14px 22px;
    border-top: 0;
    border-bottom: 1px solid #e5eaf2;
    color: var(--denso-text);
    background: #fff;
    font-size: 13px;
    line-height: 1.45;
    vertical-align: middle;
}

table.denso-table > tbody > tr:hover > td,
table.denso-table.dataTable > tbody > tr:hover > td {
    background: #f8faff;
}

table.denso-table.dataTable thead .sorting,
table.denso-table.dataTable thead .sorting_asc,
table.denso-table.dataTable thead .sorting_desc {
    background-position: right 8px center;
}

.dataTables_wrapper {
    width: 100%;
}

.denso-dt-footer {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 22px;
    border-top: 1px solid #dce3ef;
    background: var(--denso-primary-soft);
}

.denso-dt-footer .dataTables_info,
.denso-dt-footer .dataTables_paginate {
    padding: 0 !important;
    color: #4c566a;
    font-size: 12px;
}

.denso-dt-footer .pagination {
    margin: 0;
}

.denso-dt-footer .page-link {
    min-width: 36px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: #c7d0df;
    color: #354052;
    background: #fff;
    font-size: 12px;
    box-shadow: none !important;
}

.denso-dt-footer .page-item.active .page-link {
    border-color: var(--denso-primary);
    color: #fff;
    background: var(--denso-primary);
}

.denso-dt-footer .page-item.disabled .page-link {
    color: #9aa5b6;
    background: #f8f9fc;
}

.denso-legacy-table-footer {
    display: none !important;
}

@media (max-width: 767.98px) {
    table.denso-table > thead > tr > th,
    table.denso-table.dataTable > thead > tr > th,
    table.denso-table > tbody > tr > td,
    table.denso-table.dataTable > tbody > tr > td {
        padding-right: 15px;
        padding-left: 15px;
    }

    .denso-dt-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ================================================================
   Denso typography system
   A single type scale shared by every management module.
   ================================================================ */
:root {
    --denso-font-family: "Noto Sans Thai", "Segoe UI", Tahoma, Arial, sans-serif;
    --denso-font-body: 14px;
    --denso-font-page-title: 18px;
    --denso-font-panel-title: 18px;
    --denso-font-section-title: 16px;
    --denso-font-control: 13px;
    --denso-font-label: 12px;
    --denso-font-table-head: 12px;
    --denso-font-table-body: 13px;
    --denso-font-meta: 12px;
    --denso-font-badge: 10px;
    --denso-line-body: 1.5;
    --denso-line-heading: 1.3;
}

body,
button,
input,
select,
textarea {
    font-family: var(--denso-font-family);
}

.app-body {
    font-size: var(--denso-font-body);
    line-height: var(--denso-line-body);
}

/* Page titles */
:is(
    .stock-crumb,
    .stock-breadcrumb,
    .course-dashboard-crumb,
    .hh-crumb,
    .tm-title,
    .eq-title,
    .im-title,
    .ir-title
) {
    font-size: var(--denso-font-page-title);
    font-weight: 400;
    line-height: var(--denso-line-heading);
}

/* Breadcrumbs */
:is(
    .course-breadcrumb,
    .course-history-breadcrumb,
    .hh-breadcrumb,
    .tm-breadcrumb,
    .eq-breadcrumb,
    .im-breadcrumb,
    .ir-breadcrumb
) {
    font-size: var(--denso-font-control);
    line-height: var(--denso-line-body);
}

/* Main titles inside cards and toolbars */
:is(
    .stock-title,
    .stock-table-title,
    .course-catalog-toolbar h1,
    .history-list-toolbar h1,
    .hh-toolbar h1,
    .tm-toolbar h1,
    .eq-toolbar h1,
    .eq-plan-head h1,
    .im-toolbar h1,
    .ir-toolbar h1
) {
    font-size: var(--denso-font-panel-title);
    font-weight: 500;
    line-height: var(--denso-line-heading);
}

/* Section titles */
:is(
    .course-section-heading,
    .course-table-toolbar h2,
    .hh-section-title,
    .tm-section h2,
    .tm-basic h1,
    .tm-check-head h2,
    .eq-basic h2,
    .eq-section h2,
    .eq-check h2,
    .im-form h2,
    .ir-detail h2,
    .ir-check h2
) {
    font-size: var(--denso-font-section-title);
    font-weight: 600;
    line-height: var(--denso-line-heading);
}

/* Form labels */
:is(
    .stock-label,
    .course-label,
    .course-builder .course-label,
    .hh-label,
    .tm-label,
    .eq-label,
    .eq-field label,
    .im-field label,
    .im-radio > span,
    .ir-field label
) {
    font-size: var(--denso-font-label);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .25px;
}

/* Inputs, selects, textareas and search fields */
:is(
    .stock-input,
    .stock-select,
    .stock-textarea,
    .stock-search input,
    .stock-filter,
    .course-input,
    .catalog-search input,
    .course-catalog-filters select,
    .history-filters input,
    .history-filters select,
    .hh-input,
    .hh-select,
    .hh-textarea,
    .hh-search input,
    .hh-tools select,
    .tm-input,
    .tm-select,
    .tm-textarea,
    .tm-search input,
    .tm-tools select,
    .eq-search input,
    .eq-tools select,
    .eq-flow select,
    .im-input,
    .im-select,
    .im-search input,
    .im-tools select,
    .ir-search input,
    .ir-tools select
) {
    font-size: var(--denso-font-control);
    line-height: var(--denso-line-body);
}

/* Primary, secondary and action buttons */
:is(
    .stock-primary,
    .stock-secondary,
    .catalog-create,
    .history-filters > button,
    .course-cancel,
    .course-modal-cancel,
    .course-modal-confirm,
    .hh-primary,
    .hh-secondary,
    .tm-primary,
    .tm-secondary,
    .tm-cancel,
    .eq-primary,
    .eq-secondary,
    .eq-cancel,
    .eq-approve,
    .eq-reject,
    .im-primary,
    .im-cancel,
    .ir-approve,
    .ir-reject
) {
    font-size: var(--denso-font-control);
    font-weight: 600;
    line-height: 1;
}

/* Tables */
table.denso-table > thead > tr > th,
table.denso-table.dataTable > thead > tr > th {
    font-size: var(--denso-font-table-head);
    font-weight: 600;
    line-height: 1.35;
}

table.denso-table > tbody > tr > td,
table.denso-table.dataTable > tbody > tr > td {
    font-size: var(--denso-font-table-body);
    font-weight: 400;
    line-height: var(--denso-line-body);
}

/* Status badges */
:is(
    .stock-badge,
    .stock-status,
    .catalog-status,
    .history-status,
    .course-history-status,
    .hh-badge,
    .tm-badge,
    .eq-badge,
    .im-badge,
    .ir-status
) {
    font-size: var(--denso-font-badge);
    font-weight: 500;
    line-height: 1.2;
}

/* Supporting text, pagination and metadata */
:is(
    .catalog-card-meta,
    .catalog-info,
    .course-catalog-footer,
    .history-pagination,
    .hh-footer,
    .tm-footer,
    .eq-footer,
    .im-footer,
    .ir-footer,
    .denso-dt-footer,
    .denso-dt-footer .dataTables_info,
    .denso-dt-footer .dataTables_paginate
) {
    font-size: var(--denso-font-meta);
    line-height: var(--denso-line-body);
}

/* Card titles and dashboard statistic captions */
:is(
    .catalog-card h2,
    .history-course-card h2,
    .certificate-card h2,
    .eq-danger-card h3
) {
    font-size: var(--denso-font-section-title);
    font-weight: 600;
    line-height: var(--denso-line-heading);
}

:is(
    .stock-summary-label,
    .course-dashboard .course-stat-copy span,
    .stock-summary-footer,
    .course-stat-footer
) {
    font-size: var(--denso-font-meta);
    line-height: 1.35;
}

/* Dialog typography remains prominent, but is consistent across modules. */
:is(
    .course-confirm-modal h3,
    .tm-dialog h2,
    .eq-dialog h2,
    .im-dialog h2,
    .ir-dialog h2
) {
    font-size: 28px;
    font-weight: 400;
    line-height: var(--denso-line-heading);
}

:is(
    .course-confirm-modal p,
    .tm-dialog p,
    .eq-dialog p,
    .im-dialog p,
    .ir-dialog p
) {
    font-size: 17px;
    line-height: var(--denso-line-body);
}

/* Sidebar hierarchy */
#sidebar .denso-profile-name {
    font-size: 16px;
}

#sidebar .denso-profile-role,
#sidebar .denso-menu .denso-stock-menu > li > a {
    font-size: var(--denso-font-meta);
}

#sidebar .denso-menu > li > a {
    font-size: var(--denso-font-control);
}

@media (max-width: 767.98px) {
    :is(
        .stock-crumb,
        .stock-breadcrumb,
        .course-dashboard-crumb,
        .hh-crumb,
        .tm-title,
        .eq-title,
        .im-title,
        .ir-title
    ) {
        font-size: 17px;
    }
}



/* ================================================================
   Denso form controls
   Shared dimensions and interaction states for every module.
   ================================================================ */
:root {
    --denso-control-height: 44px;
    --denso-control-radius: 5px;
    --denso-control-border: #c8d2e3;
    --denso-control-border-focus: #3976eb;
    --denso-control-bg: #fff;
    --denso-control-bg-soft: #edf2ff;
    --denso-control-text: #26354c;
    --denso-control-placeholder: #7b8596;
    --denso-control-focus-ring: 0 0 0 3px rgba(57, 118, 235, .14);
}

:is(.app-body, .tm-modal, .eq-modal, .im-modal, .ir-modal)
    :is(
        input:not([type]),
        input[type="text"],
        input[type="number"],
        input[type="date"],
        input[type="email"],
        input[type="password"],
        input[type="search"],
        input[type="tel"],
        input[type="url"],
        select
    ) {
    max-width: 100%;
    height: var(--denso-control-height);
    min-height: var(--denso-control-height);
    padding: 0 13px;
    border: 1px solid var(--denso-control-border);
    border-radius: var(--denso-control-radius);
    outline: 0;
    color: var(--denso-control-text);
    background-color: var(--denso-control-bg);
    font-size: var(--denso-font-control);
    font-weight: 400;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

:is(.app-body, .tm-modal, .eq-modal, .im-modal, .ir-modal) select {
    padding-right: 36px;
    cursor: pointer;
}

:is(.app-body, .tm-modal, .eq-modal, .im-modal, .ir-modal) textarea {
    width: 100%;
    height: 96px;
    min-height: 96px;
    padding: 11px 13px;
    border: 1px solid var(--denso-control-border);
    border-radius: var(--denso-control-radius);
    outline: 0;
    color: var(--denso-control-text);
    background: var(--denso-control-bg);
    font-size: var(--denso-font-control);
    font-weight: 400;
    line-height: var(--denso-line-body);
    resize: vertical;
    box-shadow: none;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

:is(.app-body, .tm-modal, .eq-modal, .im-modal, .ir-modal)
    :is(input, select, textarea)::placeholder {
    color: var(--denso-control-placeholder);
    opacity: 1;
}

:is(.app-body, .tm-modal, .eq-modal, .im-modal, .ir-modal)
    :is(
        input:not([type]),
        input[type="text"],
        input[type="number"],
        input[type="date"],
        input[type="email"],
        input[type="password"],
        input[type="search"],
        input[type="tel"],
        input[type="url"],
        select,
        textarea
    ):focus {
    border-color: var(--denso-control-border-focus);
    box-shadow: var(--denso-control-focus-ring);
}

:is(.app-body, .tm-modal, .eq-modal, .im-modal, .ir-modal)
    :is(input, select, textarea):disabled,
:is(.app-body, .tm-modal, .eq-modal, .im-modal, .ir-modal)
    :is(input, textarea)[readonly] {
    color: #667085;
    border-color: #d9e0eb;
    background: #f3f6fb;
    cursor: not-allowed;
    opacity: 1;
}

/* Search controls share the same outer field; the inner input stays borderless. */
:is(
    .stock-search,
    .catalog-search,
    .history-filters label,
    .hh-search,
    .tm-search,
    .eq-search,
    .im-search,
    .ir-search
) {
    height: var(--denso-control-height);
    min-height: var(--denso-control-height);
    padding: 0 13px;
    border: 1px solid var(--denso-control-border);
    border-radius: var(--denso-control-radius);
    color: var(--denso-control-text);
    background: var(--denso-control-bg-soft);
    transition: border-color .16s ease, box-shadow .16s ease;
}

:is(
    .stock-search,
    .catalog-search,
    .history-filters label,
    .hh-search,
    .tm-search,
    .eq-search,
    .im-search,
    .ir-search
):focus-within {
    border-color: var(--denso-control-border-focus);
    box-shadow: var(--denso-control-focus-ring);
}

:is(
    .stock-search,
    .catalog-search,
    .history-filters label,
    .hh-search,
    .tm-search,
    .eq-search,
    .im-search,
    .ir-search
) input {
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Composite fields keep one outer border. */
.course-input-suffix {
    height: var(--denso-control-height);
    min-height: var(--denso-control-height);
    border: 1px solid var(--denso-control-border);
    border-radius: var(--denso-control-radius);
    background: var(--denso-control-bg);
}

.course-input-suffix:focus-within {
    border-color: var(--denso-control-border-focus);
    box-shadow: var(--denso-control-focus-ring);
}

.course-input-suffix input {
    height: 100% !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Compact choice controls are standardized separately from text fields. */
:is(.app-body, .tm-modal, .eq-modal, .im-modal, .ir-modal)
    input:is([type="checkbox"], [type="radio"]) {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    margin: 0;
    border: 1px solid var(--denso-control-border);
    accent-color: var(--denso-primary);
    cursor: pointer;
}

:is(.app-body, .tm-modal, .eq-modal, .im-modal, .ir-modal)
    input[type="file"]:not([hidden]) {
    width: 100%;
    min-height: var(--denso-control-height);
    padding: 6px;
    border: 1px solid var(--denso-control-border);
    border-radius: var(--denso-control-radius);
    color: var(--denso-control-text);
    background: var(--denso-control-bg);
    font-size: var(--denso-font-control);
}

:is(.app-body, .tm-modal, .eq-modal, .im-modal, .ir-modal)
    input[type="file"]::file-selector-button {
    height: 30px;
    margin-right: 10px;
    padding: 0 14px;
    border: 0;
    border-radius: 4px;
    color: #fff;
    background: var(--denso-primary);
    font-weight: 600;
}

/* Table form fields follow the same height without changing column width. */
table.denso-table :is(input:not([type="checkbox"]):not([type="radio"]), select) {
    height: var(--denso-control-height);
    min-height: var(--denso-control-height);
}

/* ================================================================
   Denso button system
   Consistent text, semantic, icon and pagination controls.
   ================================================================ */
:root {
    --denso-button-height: 44px;
    --denso-button-min-width: 100px;
    --denso-button-radius: 5px;
    --denso-button-primary: #0755cc;
    --denso-button-primary-hover: #0649af;
    --denso-button-secondary-bg: #fff;
    --denso-button-secondary-text: #516078;
    --denso-button-secondary-border: #98a4b5;
    --denso-button-success: #08b985;
    --denso-button-success-hover: #079d72;
    --denso-button-danger: #ff7079;
    --denso-button-danger-hover: #e65d66;
    --denso-button-warning: #ffbd55;
    --denso-button-icon-size: 30px;
}

:is(
    .stock-primary,
    .catalog-create,
    .hh-primary,
    .hh-secondary,
    .tm-primary,
    .tm-secondary,
    .tm-cancel,
    .eq-primary,
    .eq-secondary,
    .eq-cancel,
    .eq-approve,
    .eq-reject,
    .im-primary,
    .im-cancel,
    .ir-approve,
    .ir-reject,
    .course-cancel,
    .course-modal-cancel,
    .course-modal-confirm,
    .denso-btn-primary,
    .denso-btn-secondary,
    .denso-btn-success,
    .denso-btn-danger,
    .app-body .btn:not(.btn-close)
) {
    min-width: var(--denso-button-min-width);
    height: var(--denso-button-height);
    min-height: var(--denso-button-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--denso-button-radius);
    font-size: var(--denso-font-control);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

:is(
    .stock-primary:not(.stock-secondary),
    .catalog-create,
    .hh-primary,
    .tm-primary,
    .eq-primary,
    .im-primary,
    .course-modal-confirm,
    .denso-btn-primary,
    .app-body .btn-primary
) {
    border-color: var(--denso-button-primary);
    color: #fff;
    background: var(--denso-button-primary);
}

:is(
    .stock-primary:not(.stock-secondary),
    .catalog-create,
    .hh-primary,
    .tm-primary,
    .eq-primary,
    .im-primary,
    .course-modal-confirm,
    .denso-btn-primary,
    .app-body .btn-primary
):hover {
    border-color: var(--denso-button-primary-hover);
    color: #fff;
    background: var(--denso-button-primary-hover);
}

:is(
    .stock-secondary,
    .hh-secondary,
    .tm-secondary,
    .tm-cancel,
    .eq-secondary,
    .eq-cancel,
    .im-cancel,
    .course-cancel,
    .course-modal-cancel,
    .denso-btn-secondary,
    .app-body .btn-light
) {
    border-color: #aeb9ca;
    color: var(--denso-button-secondary-text);
    background: var(--denso-button-secondary-bg);
}

:is(
    .stock-secondary,
    .hh-secondary,
    .tm-secondary,
    .tm-cancel,
    .eq-secondary,
    .eq-cancel,
    .im-cancel,
    .course-cancel,
    .course-modal-cancel,
    .denso-btn-secondary,
    .app-body .btn-light
):hover {
    border-color: #8f9db2;
    color: #344056;
    background: #f3f6fb;
}

:is(.eq-approve, .ir-approve, .denso-btn-success) {
    border-color: var(--denso-button-success);
    color: #fff;
    background: var(--denso-button-success);
}

:is(.eq-approve, .ir-approve, .denso-btn-success):hover {
    border-color: var(--denso-button-success-hover);
    color: #fff;
    background: var(--denso-button-success-hover);
}

:is(.eq-reject, .ir-reject, .denso-btn-danger) {
    border-color: var(--denso-button-danger);
    color: #fff;
    background: var(--denso-button-danger);
}

:is(.eq-reject, .ir-reject, .denso-btn-danger):hover {
    border-color: var(--denso-button-danger-hover);
    color: #fff;
    background: var(--denso-button-danger-hover);
}

/* Compact action buttons used in tables and cards. */
:is(
    .stock-action,
    .stock-view-button,
    .hh-action,
    .tm-action,
    .eq-view,
    .eq-edit,
    .im-view,
    .ir-view,
    .history-action,
    .course-history-view,
    .catalog-card-actions button
) {
    width: var(--denso-button-icon-size);
    min-width: var(--denso-button-icon-size);
    height: var(--denso-button-icon-size);
    min-height: var(--denso-button-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}

:is(
    .stock-action,
    .stock-view-button,
    .hh-action,
    .tm-action,
    .eq-view,
    .eq-edit,
    .im-view,
    .ir-view,
    .history-action,
    .course-history-view,
    .catalog-card-actions button
):hover {
    color: #fff;
    filter: brightness(.92);
}

:is(.stock-action, .hh-action, .tm-action, .eq-view, .eq-edit, .im-view, .ir-view):active,
:is(
    .stock-primary,
    .catalog-create,
    .hh-primary,
    .tm-primary,
    .eq-primary,
    .im-primary,
    .denso-btn-primary,
    .denso-btn-secondary,
    .denso-btn-success,
    .denso-btn-danger
):active {
    transform: translateY(1px);
}

:is(
    .stock-primary,
    .catalog-create,
    .hh-primary,
    .tm-primary,
    .eq-primary,
    .im-primary,
    .denso-btn-primary,
    .denso-btn-secondary,
    .denso-btn-success,
    .denso-btn-danger,
    .stock-action,
    .hh-action,
    .tm-action,
    .eq-view,
    .eq-edit,
    .im-view,
    .ir-view
):focus-visible {
    outline: 0;
    box-shadow: var(--denso-control-focus-ring);
}

:is(button, .btn, .stock-primary, .hh-primary, .tm-primary, .eq-primary, .im-primary)[disabled],
:is(.disabled, [aria-disabled="true"]):is(.stock-primary, .hh-primary, .tm-primary, .eq-primary, .eq-edit, .im-primary) {
    pointer-events: none;
    color: #8994a6;
    border-color: #d7deea;
    background: #e9edf4;
    opacity: 1;
}

/* Card selection buttons are smaller than form actions but consistent together. */
:is(.req-product button, .hh-device button, .my-course-action) {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--denso-button-radius);
    font-size: var(--denso-font-control);
    font-weight: 600;
    line-height: 1;
}

.denso-pagination {
    display: inline-flex;
    align-items: center;
}

.denso-page-button {
    min-width: 36px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid #c7d0df;
    border-radius: 0;
    color: #354052;
    background: #fff;
    font-size: var(--denso-font-meta);
    line-height: 1;
}

.denso-page-button:first-child {
    border-radius: 4px 0 0 4px;
}

.denso-page-button:last-child {
    border-radius: 0 4px 4px 0;
}

.denso-page-button + .denso-page-button {
    margin-left: -1px;
}

.denso-page-button.active {
    position: relative;
    z-index: 1;
    border-color: var(--denso-button-primary);
    color: #fff;
    background: var(--denso-button-primary);
}

/* Shared page heading and breadcrumb rhythm. */
:root {
    --denso-page-title-gap: 6px;
    --denso-page-content-gap: 16px;
}

:is(
    .stock-crumb,
    .stock-breadcrumb,
    .course-dashboard-crumb,
    .hh-crumb,
    .tm-title,
    .eq-title,
    .im-title,
    .ir-title
) {
    margin-top: 0;
    margin-bottom: var(--denso-page-content-gap);
}

:is(
    .stock-crumb,
    .stock-breadcrumb,
    .course-dashboard-crumb,
    .hh-crumb,
    .tm-title,
    .eq-title,
    .im-title,
    .ir-title
):has(+ :is(
    .denso-breadcrumb,
    .course-breadcrumb,
    .course-history-breadcrumb,
    .hh-breadcrumb,
    .tm-breadcrumb,
    .eq-breadcrumb,
    .im-breadcrumb,
    .ir-breadcrumb
)) {
    margin-bottom: var(--denso-page-title-gap);
}

:is(
    .denso-breadcrumb,
    .course-breadcrumb,
    .course-history-breadcrumb,
    .hh-breadcrumb,
    .tm-breadcrumb,
    .eq-breadcrumb,
    .im-breadcrumb,
    .ir-breadcrumb
) {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--denso-page-content-gap);
    padding: 0;
    color: #4d5668;
    font-size: var(--denso-font-meta);
    line-height: 1.4;
}

:is(
    .denso-breadcrumb,
    .course-breadcrumb,
    .course-history-breadcrumb,
    .hh-breadcrumb,
    .tm-breadcrumb,
    .eq-breadcrumb,
    .im-breadcrumb,
    .ir-breadcrumb
) :is(strong, .text-primary) {
    color: var(--denso-button-primary) !important;
    font-weight: 600;
}

/* Keep the sidebar scroller flush with the viewport and its content. */
#sidebar.denso-sidebar {
    height: 100dvh;
    min-height: 100vh;
    overflow: hidden;
}

#sidebar.denso-sidebar .sidebarMenuScroll {
    height: calc(100vh - 106px);
    height: calc(100dvh - 106px);
    padding-top: 18px;
    padding-bottom: 0;
    overscroll-behavior: contain;
}

#sidebar.denso-sidebar .denso-menu {
    padding-bottom: 30px;
}

#sidebar.denso-sidebar .denso-menu > li:last-child,
#sidebar.denso-sidebar .denso-menu > li:last-child > .denso-stock-menu {
    margin-bottom: 0;
}

#sidebar.denso-sidebar :is(.active-sub, .current-page > a, .active > a) {
    scroll-margin-block: 72px;
}

@media (max-width: 991.98px) {
    #sidebar.denso-sidebar .sidebarMenuScroll {
        height: calc(100vh - 88px);
        height: calc(100dvh - 88px);
    }
}

/* Form save bars use the same outlined Cancel action. */
:is(
    .stock-form-actions .stock-secondary,
    .course-form-actions .course-cancel,
    .hh-form-actions .btn-light,
    .tm-savebar .tm-cancel,
    .eq-actions .eq-cancel,
    .im-actions .im-cancel
) {
    border: 1px solid var(--denso-button-secondary-border);
    color: var(--denso-button-secondary-text);
    background: #fff;
}

:is(
    .stock-form-actions .stock-secondary,
    .course-form-actions .course-cancel,
    .hh-form-actions .btn-light,
    .tm-savebar .tm-cancel,
    .eq-actions .eq-cancel,
    .im-actions .im-cancel
):hover {
    border-color: #7d899c;
    color: #344056;
    background: #f5f7fa;
}

:is(
    .stock-form-actions .stock-secondary,
    .course-form-actions .course-cancel,
    .hh-form-actions .btn-light,
    .tm-savebar .tm-cancel,
    .eq-actions .eq-cancel,
    .im-actions .im-cancel
):focus-visible {
    outline: 3px solid rgba(7, 85, 204, .18);
    outline-offset: 2px;
}

/* Border standard applied only to buttons whose action is Cancel. */
:is(
    button.stock-secondary,
    button.tm-cancel,
    button.tm-modal-cancel,
    button.eq-cancel,
    button.eq-secondary,
    button.im-cancel,
    button.denso-btn-secondary,
    .hh-form-actions button.btn-light,
    .course-form-actions button.course-cancel[onclick],
    button.course-modal-cancel
) {
    border: 1px solid #5a55554d !important;
}

/* Handheld stock item form states. */
.hh-upload {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.hh-upload:not(.hh-upload-existing) input[type="file"] {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.hh-upload-existing {
    cursor: pointer;
}

.hh-upload-existing input[type="file"] {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.hh-upload-actions {
    position: absolute;
    z-index: 3;
    right: 6px;
    top: 6px;
    display: flex;
}

.hh-photo-action {
    width: 22px;
    height: 22px;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #111;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
    text-decoration: none;
}

.hh-upload .hh-photo-action i {
    color: #111;
    font-size: 16px;
    line-height: 1;
}

.hh-photo-action:hover {
    background: rgba(0, 0, 0, .08);
    color: #111;
}

.hh-upload .hh-photo-action:hover i {
    color: #111;
}

/* Development login selector and authenticated user summary. */
.denso-login-page {
    min-height: 100vh;
    margin: 0;
    background: radial-gradient(circle at top left, #e5efff 0, transparent 42%), #f5f7ff;
    color: #10213b;
}

.denso-login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.denso-login-card {
    width: min(100%, 480px);
    padding: 38px;
    border: 1px solid #d4deef;
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 20px 55px rgba(31, 59, 107, .12);
}

.denso-login-brand {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 32px;
}

.denso-login-logo {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 13px;
    background: #0755cc;
    color: #fff;
    font-size: 24px;
}

.denso-login-brand h1 {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 700;
}

.denso-login-brand p,
.denso-login-note {
    margin: 0;
    color: #718096;
    font-size: 12px;
}

.denso-login-label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
}

.denso-login-select {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #c7d3e7;
    border-radius: 6px;
    background: #fff;
    color: #10213b;
    font-size: 13px;
}

.denso-login-select.is-invalid {
    border-color: #dc3545;
}

.denso-login-error {
    margin-top: 6px;
    color: #dc3545;
    font-size: 11px;
}

.denso-login-button {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 18px;
    border: 0;
    border-radius: 6px;
    background: #0755cc;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.denso-login-note {
    margin-top: 22px;
    text-align: center;
}

.denso-user-permissions {
    display: flex;
    gap: 5px;
}

.denso-user-permissions span {
    padding: 3px 7px;
    border-radius: 20px;
    background: #eef1f6;
    color: #9099a8;
    font-size: 9px;
}

.denso-user-permissions span.active {
    background: #dff7ec;
    color: #087b56;
}


.hh-upload:focus-within {
    border-color: #0755cc;
    box-shadow: 0 0 0 3px rgba(7, 85, 204, .12);
}

.hh-upload-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

.hh-photo-preview {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hh-stock-photo-column .hh-upload {
    height: 314px;
    background: #edf3ff;
}

.hh-stock-fields-column .hh-input {
    height: 50px;
}

.hh-status-toggle-row {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-radius: 6px;
    background: #e3edff;
}

.hh-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.hh-switch input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.hh-switch-control {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 20px;
    background: #aab6c8;
    transition: background .2s ease;
}

.hh-switch-control::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s ease;
}

.hh-switch input:checked + .hh-switch-control {
    background: #0755cc;
}

.hh-switch-control-active {
    background: #0755cc;
}

.hh-switch-control-active::after {
    transform: translateX(20px);
}

.hh-booking-photo {
    height: 312px;
    padding: 12px;
    border: 1px dashed #cbd4e5;
    background: #f8faff;
}

.hh-booking-photo img,
.hh-booking-photo .hh-device-placeholder {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hh-booking-detail .hh-input {
    background: #f8faff;
}

.hh-booking-detail .hh-input[readonly] {
    background: #f2f5fb;
    color: #647089;
}

.hh-switch input:checked + .hh-switch-control::after {
    transform: translateX(20px);
}

.hh-switch-label {
    color: #0755cc;
    font-size: 14px;
    font-weight: 600;
}

.swal2-actions .swal-cancel-bordered {
    border: 1px solid #5a55554d !important;
    color: #4b5563 !important;
}

.hh-success { min-width: 120px; background: #05ba82; color: #fff; }
.hh-danger { min-width: 130px; background: #ff6973; color: #fff; }
.hh-textarea { min-height: 90px; padding-top: 12px; resize: vertical; }

.hh-upload-file-name {
    display: block;
    margin-top: 7px;
    overflow: hidden;
    color: #667085;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hh-form :is(input, select).is-invalid,
.hh-upload:has(input.is-invalid) {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .1);
}

.hh-form .invalid-feedback {
    margin-top: 5px;
    color: #dc3545;
    font-size: var(--denso-font-meta);
}

.hh-device-placeholder {
    width: 100%;
    height: 165px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f5fa;
    color: #8b98ab;
    font-size: 48px;
}

.hh-product-photo.hh-device-placeholder {
    height: 260px;
}

.hh-empty-state {
    grid-column: 1 / -1;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    color: #7b8799;
}

.hh-empty-state i {
    color: #9ba8ba;
    font-size: 38px;
}

.hh-empty-state strong {
    color: #263850;
    font-size: 14px;
}

.hh-empty-state span {
    font-size: 11px;
}

/* Stock requisition */
.stock-requisition-page .stock-panel-body {
    padding: 28px 34px;
}

.stock-requisition-form {
    display: grid;
    gap: 18px;
}

.stock-requisition-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.stock-field {
    min-width: 0;
}

.stock-field.is-full {
    grid-column: 1 / -1;
}

.stock-field label {
    display: block;
    margin-bottom: 7px;
    color: #343943;
    font-size: var(--denso-font-label);
    font-weight: 700;
    letter-spacing: .035em;
}

.stock-field label span {
    color: #ff6b52;
}

.stock-input {
    width: 100%;
    min-height: var(--denso-control-height);
    padding: 0 15px;
    border: 1px solid #c8d2e5;
    border-radius: var(--denso-control-radius);
    background: #fff;
    color: #10213a;
    font: inherit;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.stock-input:focus {
    border-color: #0755cc;
    box-shadow: 0 0 0 3px rgba(7, 85, 204, .1);
}

.stock-input.is-readonly,
.stock-input[readonly] {
    background: #f7f9fd;
    color: #556278;
}

.stock-textarea {
    min-height: 94px;
    padding-top: 12px;
    resize: vertical;
}

.stock-field .is-invalid,
.stock-requested-table.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .08);
}

.stock-field .invalid-feedback,
.stock-requested-row .invalid-feedback,
.stock-items-error {
    margin-top: 5px;
    color: #dc3545;
    font-size: var(--denso-font-meta);
}

.stock-requested-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 24px;
    margin-bottom: 14px;
}

.stock-requested-head .stock-section-title {
    margin: 0;
}

.stock-available-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 24px;
    margin-bottom: 14px;
}

.stock-available-head .stock-section-title {
    margin: 0;
}

.stock-item-grid-search {
    width: min(360px, 38vw);
}

.stock-available-filters {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stock-available-filters .stock-select {
    width: 190px;
}

.stock-available-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 190px));
    grid-auto-flow: row;
    justify-content: start;
    gap: 12px;
    padding: 15px;
    overflow: hidden;
    border: 1px solid #cbd5e6;
    border-radius: var(--denso-card-radius);
    background: #f8faff;
}

.stock-available-item {
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid #d2daea;
    border-radius: 8px;
    background: #fff;
    color: #11233c;
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.stock-available-item:hover {
    border-color: #75a5ed;
    box-shadow: 0 5px 16px rgba(26, 67, 130, .1);
    transform: translateY(-1px);
}

.stock-available-item.is-selected {
    border: 2px solid #0755cc;
    box-shadow: 0 0 0 2px rgba(7, 85, 204, .1);
}

.stock-available-photo {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 8px;
    background: #fff;
}

.stock-available-photo > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.stock-available-photo > .stock-requested-placeholder {
    width: 100%;
    height: 100%;
    background: #eef3fb;
}

.stock-available-check {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 22px;
    height: 22px;
    display: none;
    place-items: center;
    border-radius: 50%;
    background: #0755cc;
    color: #fff;
    font-size: 13px;
}

.stock-available-item.is-selected .stock-available-check {
    display: grid;
}

.stock-available-info {
    min-width: 0;
    display: block;
    padding: 8px 10px 9px;
}

.stock-available-info strong,
.stock-available-info small,
.stock-available-info > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-available-info strong {
    font-size: 13px;
    line-height: 1.35;
}

.stock-available-info small {
    margin-top: 3px;
    color: #68758a;
    font-size: 11px;
    line-height: 1.35;
}

.stock-available-info > span {
    margin-top: 5px;
    color: #0755cc;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 600;
}

.stock-selected-count {
    padding: 6px 11px;
    border-radius: 999px;
    background: #e8f0ff;
    color: #0755cc;
    font-size: var(--denso-font-meta);
    font-weight: 600;
}

.stock-available-grid .is-grid-empty {
    grid-column: 1 / -1;
}

.stock-requested-table {
    overflow: hidden;
    border: 1px solid #cbd5e6;
    border-radius: var(--denso-card-radius);
}

.stock-requested-table-head,
.stock-requested-row {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) 170px 150px 48px;
    align-items: center;
    gap: 18px;
    padding: 14px 20px;
}

.stock-requested-table-head {
    background: #edf3ff;
    color: #343943;
    font-size: var(--denso-font-table-head);
    font-weight: 700;
    letter-spacing: .04em;
}

.stock-requested-row {
    border-top: 1px solid #e2e7f0;
}

.stock-requested-product {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.stock-requested-product > span:last-child {
    min-width: 0;
}

.stock-requested-product strong,
.stock-requested-product small {
    display: block;
}

.stock-requested-product strong {
    overflow: hidden;
    color: #11233c;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-requested-product small {
    margin-top: 3px;
    color: #6c788a;
    font-size: var(--denso-font-meta);
}

.stock-requested-thumb {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: #f2f5fb;
}

.stock-requested-thumb img,
.stock-requested-placeholder {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.stock-requested-placeholder {
    display: grid;
    place-items: center;
    color: #8090a7;
    font-size: 22px;
}

.stock-requested-balance {
    color: #556278;
}

.stock-quantity {
    min-height: 40px;
}

.stock-requested-empty {
    min-height: 126px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    color: #7b8799;
}

.stock-requested-empty i {
    font-size: 28px;
}

.stock-requisition-remark {
    margin-top: 0;
}

.stock-detail-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.stock-requested-title {
    margin-top: 26px;
}

.stock-requested-table-head.is-detail,
.stock-requested-row.is-detail {
    grid-template-columns: minmax(300px, 1fr) 180px;
}

.stock-requested-row.is-detail > strong {
    text-align: left;
}

@media (max-width: 991px) {
    .stock-requisition-grid {
        grid-template-columns: 1fr;
    }

    .stock-field.is-full {
        grid-column: auto;
    }

    .stock-requested-head,
    .stock-available-head {
        align-items: stretch;
        flex-direction: column;
    }

    .stock-item-grid-search {
        width: 100%;
    }

    .stock-available-filters {
        align-items: stretch;
        flex-direction: column;
    }

    .stock-available-filters .stock-select {
        width: 100%;
    }

    .stock-available-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stock-requested-table {
        overflow-x: auto;
    }

    .stock-requested-table-head,
    .stock-requested-row {
        min-width: 760px;
    }
}

@media (min-width: 992px) and (max-width: 1350px) {
    .stock-available-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
/* Setting management */
.setting-page {
    padding: 18px 22px 40px;
}

.setting-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.setting-heading h1 {
    margin: 0;
    color: #343842;
    font-size: 22px;
    font-weight: 500;
}

.setting-home {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #1765df;
    font-size: 20px;
}

.setting-panel {
    overflow: hidden;
    padding: 32px 34px 20px;
    border: 1px solid #d6deed;
    border-radius: 12px;
    background: #fff;
}

.setting-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    gap: 14px;
    margin-bottom: 20px;
}

.setting-search {
    width: 100%;
    max-width: none;
}

.setting-table {
    width: 100% !important;
}

.setting-table th:first-child,
.setting-table td:first-child {
    width: 1% !important;
    padding-right: 14px !important;
    padding-left: 14px !important;
    text-align: center;
    white-space: nowrap;
}

.setting-table th:last-child,
.setting-table td:last-child {
    width: 150px;
    text-align: center;
}

.setting-actions {
    display: inline-flex;
    gap: 8px;
}

.setting-actions button {
    border: 0;
}

.setting-modal .modal-dialog {
    max-width: 750px;
}

.setting-modal .modal-content {
    position: relative;
    padding: 60px 80px 42px;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgb(14 30 60 / 30%);
}

.setting-modal-close {
    position: absolute;
    top: 18px;
    right: 28px;
    border: 0;
    background: transparent;
    color: #aab4c3;
    font-size: 40px;
    font-weight: 300;
    line-height: 1;
}

.setting-modal-icon {
    display: flex;
    width: 60px;
    height: 60px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #f0f1f3;
    color: #0755cc;
    font-size: 28px;
}

.setting-modal h2 {
    margin: 0 0 30px;
    color: #0d1117;
    font-size: 28px;
    font-weight: 600;
    text-align: center;
}

.setting-field {
    display: block;
    margin-bottom: 18px;
}

.setting-field > span {
    display: block;
    margin-bottom: 7px;
    font-weight: 600;
}

.setting-field b {
    color: #ff5f6d;
}

.setting-field input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #cfd9eb;
    border-radius: 6px;
    background: #fff;
}

.course-video-upload {
    min-height: 132px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 20px;
    border: 1px dashed #b9c7dd;
    border-radius: 7px;
    color: #526078;
    background: #f7f9fd;
    text-align: center;
    cursor: pointer;
}

.course-video-upload:hover {
    border-color: #0755cc;
    background: #f0f5ff;
}

.course-video-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.course-video-upload i {
    color: #0755cc;
    font-size: 28px;
}

.course-video-upload strong {
    max-width: 100%;
    overflow: hidden;
    color: #13243e;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.course-video-upload small {
    color: #748198;
}

.course-video-progress {
    margin-top: 14px;
}

.course-video-progress-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    color: #344054;
    font-size: 13px;
}

.course-video-progress .progress {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #e7eefb;
}

.course-video-progress .progress-bar {
    border-radius: inherit;
    background: #0755cc;
    transition: width .18s ease;
}

.setting-modal footer {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.setting-modal footer .stock-primary {
    min-width: 150px;
}

.quiz-heading-meta{display:flex;align-items:center;gap:18px}.quiz-timer{min-width:92px;padding:7px 12px;border-radius:6px;background:#edf3ff;color:#075dcc;font-size:13px;font-weight:700;text-align:center}.quiz-timer.is-warning{background:#fff0f1;color:#e64e5c}
.history-export-button,.history-search-button{height:42px;display:inline-flex;align-items:center;justify-content:center;padding:0 20px;border:0;border-radius:4px;background:#0755cc;color:#fff!important;font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap}.history-search-button{padding:0 16px}.course-history-status.expired{background:#8792a7}.course-history-status i{margin-right:5px}.history-pagination nav a,.history-pagination nav span{height:34px;display:inline-flex;align-items:center;padding:0 14px;border:1px solid #c5cfe0;background:#fff;color:#4d5668;text-decoration:none}.history-pagination nav>*+*{border-left:0}.history-pagination nav .active{background:#0755cc;color:#fff}.history-pagination nav .disabled{pointer-events:none;opacity:.5}.course-history-breadcrumb a{color:inherit;text-decoration:none}

/* Course learner flow */
.learning-page .learning-panel{padding:26px;background:#fff;border:1px solid #cfd9ea;border-radius:8px}.learning-panel>header h1{margin:0 0 6px;color:#17233a;font-size:26px}.learning-panel>header p{margin:0 0 14px;color:#667085}.learning-panel>header>div{display:flex;gap:24px;flex-wrap:wrap;color:#344054;font-size:13px}.locked-video-wrap{max-width:1060px;margin:28px auto 0}.locked-video-wrap video{display:block;width:100%;max-height:600px;background:#000;border-radius:6px}.video-progress-note{display:flex;align-items:center;gap:8px;margin-top:10px;color:#64748b;font-size:12px}.video-progress-note i{color:#075dcc}.learning-panel>footer{display:flex;align-items:center;justify-content:space-between;margin-top:24px;padding:16px 20px;background:#edf3ff}.learning-panel>footer .disabled{pointer-events:auto;opacity:.45}.quiz-heading{position:relative;display:flex;align-items:flex-end;justify-content:space-between;padding:12px 0 20px;border-bottom:5px solid #e5e7eb}.quiz-heading>div{display:flex;flex-direction:column;gap:5px}.quiz-heading>div strong{font-size:13px}.quiz-heading>div span,.quiz-heading small{color:#8490a3;font-size:12px}.quiz-heading>b{color:#075dcc}.quiz-heading>i{position:absolute;left:0;bottom:-5px;height:5px;border-radius:5px;background:#075dcc}.quiz-question-list{display:grid;gap:16px;margin-top:28px}.quiz-question{padding:24px;border:1px solid #cfe0f8;border-radius:6px}.quiz-question h2{margin:0 0 18px;font-size:17px}.quiz-question>img{display:block;max-width:500px;max-height:260px;margin:0 0 20px;object-fit:contain;border-radius:6px}.quiz-question>div{display:grid;gap:15px}.quiz-question label{display:flex;align-items:center;gap:13px;cursor:pointer}.quiz-question input{width:20px;height:20px;accent-color:#075dcc}.quiz-actions,.result-actions{display:flex;justify-content:flex-end;gap:14px;margin-top:18px;padding:18px 28px;background:#edf3ff}.quiz-actions .course-cancel,.result-actions .course-cancel,.result-actions .stock-primary{min-width:130px}.result-hero{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:42px 48px;border-radius:12px;background:linear-gradient(125deg,#0755cc,#264bb8);color:#fff;box-shadow:0 12px 22px rgba(7,85,204,.2)}.result-status{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:12px}.result-status.passed{background:#0bc795}.result-status.failed{background:#ff6f7e}.result-hero h1{margin:18px 0 8px;font-size:28px}.result-hero p{margin:0;font-size:15px}.result-score{width:200px;padding:20px;text-align:center;border:1px solid rgba(255,255,255,.25);border-radius:12px;background:rgba(255,255,255,.1)}.result-score>span{display:block;font-size:11px}.result-score strong{display:block;margin:5px 0 10px;font-size:46px}.result-score small{font-size:18px}.result-score>i{display:block;height:6px;border-radius:8px;background:rgba(255,255,255,.35)}.result-score>i b{display:block;height:100%;border-radius:inherit;background:#fff}.result-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:20px;margin-top:20px}.result-grid .certificate-card{padding:28px;border:1px solid #e0e6ef;border-radius:10px;box-shadow:0 7px 18px rgba(22,45,80,.08)}.certificate-card h2{font-size:18px}.certificate-card dl{margin:28px 0 0}.certificate-card dl div{display:flex;justify-content:space-between;padding:20px 0;border-bottom:1px solid #e7ebf1}.certificate-card dl div:last-child{border-bottom:0}.certificate-card dd{font-weight:700}.result-course-card{overflow:hidden;border:1px solid #e0e6ef;border-radius:10px;box-shadow:0 7px 18px rgba(22,45,80,.08)}.result-course-card img{width:100%;height:190px;object-fit:cover}.result-course-card>div{padding:18px}.result-course-card h2{margin:15px 0 8px;font-size:17px}.my-course-actions .my-course-action{width:auto!important;min-width:112px!important;height:40px!important;min-height:40px!important;flex:0 0 auto;padding:0 18px!important;border:0;border-radius:5px;color:#fff!important;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.my-course-actions .my-course-action:hover{color:#fff!important;filter:brightness(.94)}.history-status.in-progress{background:#ffbf55;color:#fff}.history-status.failed{background:#ff7580;color:#fff}

@media (max-width: 767px) {
    .setting-page {
        padding: 14px;
    }

    .setting-panel {
        padding: 20px 16px;
    }

    .setting-toolbar {
        grid-template-columns: 1fr;
    }

    .setting-modal .modal-content {
        padding: 56px 24px 30px;
    }

    .learning-page .learning-panel{padding:18px 14px}.learning-panel>header h1{font-size:21px}.locked-video-wrap{margin-top:20px}.learning-panel>footer{align-items:flex-start;flex-direction:column;gap:12px}.result-hero{align-items:stretch;flex-direction:column;padding:28px 22px}.result-score{width:100%}.result-grid{grid-template-columns:1fr}.quiz-question{padding:18px}.quiz-actions,.result-actions{padding:15px;flex-wrap:wrap}
}
.stock-requisition-page .requisition-reason-heading{min-width:210px}.stock-requisition-page .requisition-reason-cell{min-width:210px;max-width:340px;white-space:normal;overflow-wrap:anywhere;line-height:1.45}
.question-form-actions{justify-content:space-between}.question-form-actions-right{display:flex;align-items:center;gap:14px}.question-back-button{gap:8px;text-decoration:none}@media(max-width:575.98px){.question-form-actions{align-items:stretch;flex-direction:column}.question-form-actions-right{display:grid;grid-template-columns:1fr 1fr}.question-form-actions .question-back-button{align-self:flex-start}}
.course-detail-panel{padding:28px 30px;background:#fff;border:1px solid #cfd9ea;border-radius:8px}.course-detail-header h1{margin:0 0 6px;color:#202630;font-size:28px;font-weight:600}.course-detail-header>p{margin:0 0 20px;color:#4d5665;font-size:13px}.course-detail-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px;color:#303744;font-size:12px}.course-detail-meta strong{font-weight:500}.course-detail-meta i{margin-right:4px;font-size:16px}.course-detail-image-wrap{width:min(100%,1120px);margin:28px auto 0;overflow:hidden;background:#f3f6fb;border-radius:3px}.course-detail-image-wrap img{display:block;width:100%;max-height:620px;object-fit:contain}.course-detail-description{width:min(100%,1120px);margin:30px auto 5px}.course-detail-description h2{margin:0 0 8px;color:#202630;font-size:24px;font-weight:600}.course-detail-description p{margin:0;color:#4d5665;font-size:13px;line-height:1.7}@media(max-width:767.98px){.course-detail-panel{padding:20px 16px}.course-detail-header h1{font-size:23px}.course-detail-meta{align-items:flex-start;flex-direction:column;gap:7px}.course-detail-image-wrap{margin-top:20px}.course-detail-description{margin-top:22px}.course-detail-description h2{font-size:20px}}
.my-course-grid{align-items:stretch}.my-course-grid .catalog-card{height:100%;display:flex;flex-direction:column}.my-course-grid .catalog-card-body{display:flex;flex:1;flex-direction:column}.my-course-grid .catalog-category{min-height:19px}.my-course-grid .catalog-card h2{min-height:44px;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}.my-course-grid .catalog-card-actions{margin-top:auto}
.my-course-actions .my-course-unregister{width:auto!important;min-width:0!important;height:auto!important;margin:0!important;padding:8px 0!important;border:0!important;background:transparent!important;color:#e5484d!important;-webkit-text-fill-color:#e5484d;font-size:10px!important;font-weight:600!important;text-decoration:none}.my-course-actions .my-course-unregister:hover{color:#c9343a!important;-webkit-text-fill-color:#c9343a;text-decoration:underline}.my-course-actions .my-course-unregister:disabled{opacity:.55}
.my-course-text-actions{display:flex!important;align-items:center;justify-content:flex-end;gap:14px}.my-course-actions .my-course-details{display:inline-flex!important;align-items:center;gap:4px;color:#0755cc!important;font-size:11px!important;font-weight:600;text-decoration:none;white-space:nowrap}.my-course-actions .my-course-details:hover{text-decoration:underline}.my-course-actions .my-course-details i{font-size:10px}
.swal2-popup.stock-loading-alert{width:360px;padding:22px 24px 20px}.swal2-popup .stock-loading-alert-title{padding:0;font-size:25px;font-weight:600;line-height:1.35}.swal2-popup .stock-loading-alert-text{margin:8px 0 0;padding:0;font-size:17px;line-height:1.55}