:root {
    --hms-bg: #eef4fb;
    --hms-surface: #ffffff;
    --hms-surface-soft: #f4f8fd;
    --hms-text: #1d2a3b;
    --hms-muted: #607287;
    --hms-border: #d8e2ef;
    --hms-primary: #1f6fb2;
    --hms-primary-deep: #124d86;
    --hms-accent: #11a59c;
    --hms-danger: #d65454;
    --hms-warning: #f2b843;
    --hms-shadow-sm: 0 8px 22px rgba(18, 41, 71, 0.08);
    --hms-shadow-md: 0 20px 40px rgba(17, 43, 76, 0.15);
    --hms-radius: 14px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    color: var(--hms-text);
    font-family: "Nunito Sans", "Segoe UI", sans-serif;
    background: radial-gradient(circle at 9% 2%, #f9fcff 0%, #eff5fb 38%, #e8eef7 100%);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Source Serif 4", Georgia, serif;
    color: #19314e;
    letter-spacing: 0.01em;
}

a {
    text-decoration: none;
}

.login-bg {
    min-height: 100vh;
    background:
        radial-gradient(560px 220px at 6% 6%, rgba(17, 126, 179, 0.28), transparent 70%),
        radial-gradient(720px 290px at 98% 0, rgba(31, 111, 178, 0.18), transparent 60%),
        linear-gradient(135deg, #edf5fe, #dce9f7 65%, #d2e2f3);
}

.login-bg .card {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(10px);
}

.hms-shell {
    min-height: 100vh;
    background:
        radial-gradient(400px 190px at 100% 0, rgba(17, 165, 156, 0.16), transparent 65%),
        radial-gradient(500px 220px at 0 100%, rgba(31, 111, 178, 0.15), transparent 70%);
}

.hms-topbar {
    position: sticky;
    top: 0;
    z-index: 1035;
    height: 72px;
    background: linear-gradient(95deg, var(--hms-primary-deep), var(--hms-primary) 55%, #159b96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 25px rgba(7, 30, 53, 0.24);
}

.hms-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hms-brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.12));
    border: 1px solid rgba(255, 255, 255, 0.38);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.hms-brand .h6 {
    color: #fff;
    font-size: 1rem;
    font-family: "Nunito Sans", "Segoe UI", sans-serif;
    font-weight: 800;
}

.hms-brand-sub {
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.73rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hms-topbar-time {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.82rem;
    padding: 0.34rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.1);
}

.hms-body {
    min-height: calc(100vh - 72px);
}

.hms-sidebar {
    width: 294px;
    background: linear-gradient(180deg, #163656, #102b45);
    color: #dbe7f4;
    min-height: calc(100vh - 72px);
    overflow-y: auto;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 18px;
}

.hms-sidebar .nav {
    padding-top: 0.6rem !important;
}

.hms-sidebar-tools {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.2rem 0.2rem 0.45rem;
    background: linear-gradient(180deg, #163656 82%, rgba(22, 54, 86, 0));
}

.hms-sidebar-search-wrap {
    position: relative;
}

.hms-sidebar-search-wrap .bi-search {
    position: absolute;
    left: 0.68rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9eb6ce;
    font-size: 0.85rem;
    pointer-events: none;
}

.hms-sidebar-search {
    width: 100%;
    min-height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.85rem;
    padding: 0.38rem 2rem 0.38rem 2rem;
    outline: none;
}

.hms-sidebar-search::placeholder {
    color: #aec4d9;
}

.hms-sidebar-search:focus {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.2);
}

.hms-sidebar-clear {
    position: absolute;
    right: 0.42rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #c5d6e8;
    padding: 0.12rem 0.2rem;
    line-height: 1;
    display: none;
}

.hms-sidebar-clear.show {
    display: inline-flex;
}

.hms-sidebar-search-empty {
    display: block;
    color: #bfd4e7;
    margin-top: 0.35rem;
    font-size: 0.74rem;
    padding-left: 0.1rem;
}

.hms-sidebar .nav-link,
.hms-sidebar .menu-toggle-btn {
    color: #dbe7f4;
    border-radius: 10px;
    padding: 0.58rem 0.68rem;
    margin-bottom: 0.22rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.56rem;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.hms-sidebar .menu-title {
    color: #dbe7f4;
    margin: 0.34rem 0;
    font-weight: 700;
    letter-spacing: 0.01em;
    font-size: 0.9rem;
}

.hms-sidebar .menu-toggle-btn {
    width: 100%;
    background: transparent;
}

.hms-sidebar .nav-link:hover,
.hms-sidebar .menu-toggle-btn:hover,
.hms-sidebar .nav-link.active {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.16);
    color: #fff;
    transform: translateX(1px);
}

.hms-sidebar .tree-submenu {
    display: none;
    margin: 0.15rem 0 0.42rem;
    padding-left: 0.78rem;
    border-left: 1px dashed rgba(255, 255, 255, 0.25);
}

.hms-sidebar .tree-menu.open > .tree-submenu {
    display: block;
}

.hms-sidebar .menu-hidden {
    display: none !important;
}

.hms-sidebar .menu-toggle-btn .bi-chevron-down {
    margin-left: auto;
    font-size: 0.82rem;
    transition: transform 0.2s ease;
}

.hms-sidebar .tree-menu.open .menu-toggle-btn .bi-chevron-down {
    transform: rotate(180deg);
}

.hms-sidebar .submenu-link {
    font-size: 0.86rem;
    padding: 0.5rem 0.56rem;
}

.hms-content {
    flex: 1;
    min-width: 0;
    padding: 1rem 1.15rem 1.2rem !important;
}

.hms-content > * {
    position: relative;
    z-index: 1;
}

.hms-content .hms-title-highlight {
    color: #11385f;
    font-family: "Nunito Sans", "Segoe UI", sans-serif;
    font-weight: 900;
    letter-spacing: 0.01em;
}

.hms-content .hms-title-highlight::after {
    content: "";
    display: block;
    width: 92px;
    height: 4px;
    margin-top: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, #1f6fb2, #11a59c);
    box-shadow: 0 4px 10px rgba(17, 76, 132, 0.2);
}

.hms-content .hms-title-row {
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(31, 111, 178, 0.08), rgba(17, 165, 156, 0.08));
    border: 1px solid rgba(31, 111, 178, 0.14);
}

.card {
    border-radius: var(--hms-radius);
    border: 1px solid var(--hms-border) !important;
    box-shadow: var(--hms-shadow-sm);
    overflow: hidden;
}

.card-header.bg-primary,
.bg-primary {
    background: linear-gradient(90deg, #5ea7e6, #5b9edf) !important;
    border: 0 !important;
}

.card-header h2,
.card-header h3 {
    color: #fff;
    font-family: "Nunito Sans", "Segoe UI", sans-serif;
    font-weight: 700;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: #f7fbff;
    border-color: var(--hms-border);
}

.table thead th {
    font-weight: 800;
    color: #243f60;
    border-bottom-width: 1px;
    background: #f4f9ff;
}

.hms-content .dataTables_wrapper {
    border: 1px solid #d8e2ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(18, 41, 71, 0.07);
    padding: 0.9rem 0.9rem 0.5rem;
}

.hms-content .dataTables_wrapper .table {
    margin-bottom: 0 !important;
}

.hms-content .dataTables_wrapper .dataTables_length label,
.hms-content .dataTables_wrapper .dataTables_filter label {
    font-size: 0.85rem;
    color: #526983;
    font-weight: 700;
}

.hms-content .dataTables_wrapper .dataTables_length select {
    min-width: 86px;
    border-radius: 10px;
    border: 1px solid #c9d8e8;
    padding: 0.2rem 1.8rem 0.2rem 0.6rem;
    background-color: #fff;
}

.hms-content .dataTables_wrapper .dataTables_filter input {
    border-radius: 10px;
    border: 1px solid #c9d8e8;
    min-height: 38px;
    margin-left: 0 !important;
    padding: 0.35rem 0.7rem;
    min-width: 240px;
}

.hms-content .dataTables_wrapper .dataTables_info {
    font-size: 0.82rem;
    color: #677d94;
    padding-top: 0.4rem;
}

.hms-content .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 9px !important;
    border: 1px solid #cde0f2 !important;
    background: #fff !important;
    color: #2f5f8d !important;
    padding: 0.25rem 0.7rem !important;
    margin-left: 0.2rem !important;
}

.hms-content .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.hms-content .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: linear-gradient(90deg, #1f6fb2, #2b8cca) !important;
    color: #fff !important;
    border-color: #1f6fb2 !important;
}

.hms-content table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
.hms-content table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    background-color: #1f6fb2 !important;
}

.form-control,
.form-select {
    border-radius: 10px;
    border-color: #cfdceb;
    min-height: 42px;
    font-size: 0.95rem;
    box-shadow: none !important;
}

textarea.form-control {
    min-height: 96px;
}

.form-control:focus,
.form-select:focus {
    border-color: #78abd8;
    box-shadow: 0 0 0 0.2rem rgba(31, 111, 178, 0.15) !important;
}

.form-label,
label {
    color: #2f4663;
    font-weight: 700;
}

.btn {
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.btn-primary {
    background: linear-gradient(90deg, #1f6fb2, #2b8cca);
    border-color: #1f6fb2;
}

.btn-primary:hover {
    background: linear-gradient(90deg, #185f99, #247db6);
    border-color: #185f99;
}

.btn-success {
    background: linear-gradient(90deg, #1c9b6f, #19af7a);
    border-color: #1b9f72;
}

.btn-warning {
    background: linear-gradient(90deg, #ffce57, #f2b843);
    border-color: #f2b843;
    color: #4e3600;
}

.btn-outline-primary {
    border-color: #8bb6dd;
    color: #2a6ea8;
}

.alert {
    border-radius: 12px;
    border: 1px solid transparent;
}

.alert-success {
    background: #ecfbf4;
    color: #0f6a44;
    border-color: #a8e5c8;
}

.alert-danger {
    background: #fff1f1;
    color: #9a2e2e;
    border-color: #f1c3c3;
}

.badge.text-bg-primary {
    background: linear-gradient(90deg, #1f6fb2, #2b8cca) !important;
}

.stat-card {
    border: 1px solid #d9e8f8 !important;
    box-shadow: var(--hms-shadow-sm);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(244, 251, 255, 0.84)),
        radial-gradient(circle at 100% 0, rgba(17, 165, 156, 0.1), transparent 55%);
}

.stat-card .label {
    color: #57718d;
    font-size: 0.85rem;
    font-weight: 700;
}

.stat-card .value {
    color: #113f6b;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
}

.hms-sidebar-backdrop {
    position: fixed;
    inset: 72px 0 0 0;
    background: rgba(7, 24, 41, 0.45);
    display: none;
    z-index: 1040;
}

.hms-sidebar-backdrop.show {
    display: block;
}

.ipd-doc-row {
    border: 1px solid #d8e5f2 !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
    box-shadow: 0 4px 10px rgba(20, 54, 90, 0.07);
}

.ipd-doc-title {
    color: #234264 !important;
}

.hms-slot-day {
    color: #314a67;
    font-size: 1.05rem;
}

.hms-slot-group {
    margin-bottom: 1.2rem;
}

.hms-slot-group .h6 {
    color: #324d6a;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.05rem;
}

.hms-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.7rem;
}

.hms-slot-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0.58rem 0.72rem;
    border: 1px solid #cad8e8;
    border-radius: 10px;
    background: #fff;
    color: #23486f;
    cursor: pointer;
    transition: all 0.18s ease;
}

.hms-slot-option:hover {
    border-color: #8fb7dd;
    box-shadow: 0 4px 12px rgba(18, 65, 108, 0.08);
}

.hms-slot-input {
    margin: 0;
    flex-shrink: 0;
    accent-color: #1f6fb2;
}

.hms-slot-label {
    font-size: 1.03rem;
    font-weight: 800;
    line-height: 1.1;
    color: #234a72;
}

.hms-slot-input:checked + .hms-slot-label {
    color: #0f4f8b;
}

.hms-slot-option.is-booked {
    background: #f7f8fa;
    border-color: #e0e4ea;
    cursor: not-allowed;
}

.hms-slot-option.is-booked .hms-slot-label {
    color: #7a8998;
}

.hms-slot-option.is-booked .hms-slot-input {
    opacity: 0.6;
}

@media (max-width: 1199.98px) {
    .hms-content {
        padding: 0.95rem !important;
    }

    .hms-topbar-time {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .hms-topbar {
        height: 64px;
    }

    .hms-sidebar {
        position: fixed;
        top: 64px;
        left: -306px;
        z-index: 1045;
        transition: left 0.22s ease;
        height: calc(100vh - 64px);
    }

    .hms-sidebar.show {
        left: 0;
    }

    .hms-shell {
        min-height: 100svh;
    }

    .hms-content {
        padding: 0.8rem !important;
    }

    .card {
        border-radius: 12px;
    }
}

@media (max-width: 575.98px) {
    .hms-brand-sub {
        display: none;
    }

    .hms-topbar .h6 {
        font-size: 0.9rem;
    }

    .table {
        font-size: 0.85rem;
    }

    .hms-content .dataTables_wrapper {
        padding: 0.7rem 0.55rem 0.4rem;
    }

    .hms-content .dataTables_wrapper .dataTables_filter input {
        min-width: 100%;
    }

    .hms-content .hms-title-row {
        padding: 0.45rem 0.55rem;
    }

    .hms-slot-grid {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .hms-slot-option {
        min-height: 44px;
    }

    .hms-slot-label {
        font-size: 0.98rem;
    }
}