/*
   Shared HMS theme
   Light sea-green palette with clean hospital surfaces.
*/
:root {
    --light-sea-green: #20B2AA;
    --light-sea-green-dark: #157d78;
    --light-sea-green-deep: #0f5f5b;
    --light-sea-green-soft: #dff7f5;
    --hospital-navy: #11615d;
    --hospital-navy-dark: #0b4a47;
    --hospital-teal: #20B2AA;
    --hospital-blue: #2b7fd3;
    --page-bg: #eefaf9;
    --work-bg: #dff5f3;
    --header: #11615d;
    --header-dark: #0b4a47;
    --surface: #ffffff;
    --surface-soft: #f7fffe;
    --field-bg: #ffffff;
    --field-focus: #e8fbfa;
    --button-bg: #20B2AA;
    --button-bg-hover: #157d78;
    --button-border: #0f6f68;
    --button-text: #ffffff;
    --field-border: #8bcfca;
    --grid-line: #acd3d0;
    --grid-bg: #d7ebe9;
    --selected-row: #20B2AA;
    --text: #123c3a;
    --text-main: #123c3a;
    --text-muted: #5f7e7b;
    --line: #c6ebe8;
    --mint: #e7fbfa;
    --mint-strong: #ccfbf1;
    --row-bg: #ffffff;
    --row-bg-alt: #f2fbfa;
    --row-selected: #c9f4f0;
}

html,
body {
    background: linear-gradient(180deg, #f9ffff 0%, #eefaf9 100%);
    color: var(--text-main);
}

.screen,
.main-content,
.content-area {
    background: linear-gradient(180deg, #f9ffff 0%, #eefaf9 100%);
}

[class$="-window"],
.item-shell,
.login-shell,
.admin-shell,
.payroll-shell,
.report-shell,
.doctors-shell {
    background: var(--work-bg);
    border-color: #9de9e5;
    box-shadow: 0 14px 34px rgba(32, 178, 170, 0.14);
}

.title-bar,
.top-bar,
.modal-header,
.sidebar-header,
.login-brand,
.admin-header,
.page-header,
.report-header {
    background: linear-gradient(90deg, var(--hospital-navy) 0%, var(--light-sea-green) 100%);
    border-color: var(--hospital-navy-dark);
    color: #ffffff;
}

.title-bar a,
.top-bar a,
.header a,
.dashboard-link {
    border-color: rgba(255, 255, 255, 0.72);
}

fieldset,
.supplier-panel,
.entry-box,
.master-panel,
.search-panel,
.ops-panel,
.welcome-card,
.metric-card,
.module-card,
.department-card,
.login-box,
.form-card,
.card,
.panel,
.report-card,
.table-panel {
    background: rgba(255, 255, 255, 0.72);
    border-color: #9de9e5;
}

legend,
label,
.dashboard-section-title,
.panel-title,
.modal-item-content h6,
.module-card h4,
.welcome-card h3 {
    color: var(--text-main);
}

input,
select,
textarea,
.form-control {
    background: var(--field-bg);
    border-color: var(--field-border);
    color: var(--text-main);
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    background: var(--field-focus);
    border-color: var(--light-sea-green);
    box-shadow: 0 0 0 0.18rem rgba(32, 178, 170, 0.14);
    outline-color: rgba(32, 178, 170, 0.28);
}

.btn-action,
.action-button,
.btn-login,
.new-patient-btn,
.btn-primary,
button.primary,
.action-button.primary {
    background: var(--button-bg);
    border-color: var(--button-border);
    color: #ffffff;
}

.btn-action:hover,
.action-button:hover,
.btn-login:hover,
.new-patient-btn:hover,
.btn-primary:hover,
button.primary:hover,
.action-button.primary:hover {
    background: var(--button-bg-hover);
    border-color: var(--hospital-navy-dark);
    color: #ffffff;
}

.btn-muted,
.btn-secondary,
.action-button.danger {
    background: #eef7f6;
    border-color: #9ebebb;
    color: #123c3a;
}

.btn-muted:hover,
.btn-secondary:hover {
    background: #dff2f0;
    color: #123c3a;
}

.grid-wrap,
.table-responsive,
.data-grid {
    background: var(--grid-bg);
    border-color: #8fc9c4;
}

table {
    background: #ffffff;
}

thead th,
.table thead th {
    background: #f3fffe;
    border-color: var(--grid-line);
    color: #123c3a;
}

tbody td,
.table td {
    background: #ffffff;
    border-color: var(--grid-line);
    color: #3b0909;
}

tbody tr:nth-child(even) td {
    background: #f8fffe;
}

tbody tr:hover td,
tbody tr.selected td,
.table-active,
.selected td {
    background: var(--selected-row);
    color: #ffffff;
}

.status-line.ok,
.status-line {
    color: var(--light-sea-green-deep);
}

.status-line.error,
.alert-danger {
    color: #7f1d1d;
}

.sidebar,
.sidebar .menu-section-title {
    background: #f7fffe;
}

.menu-item:hover,
.menu-item.dropdown-open,
.menu-subitem:hover,
.modal-item:hover {
    background: var(--light-sea-green-soft);
    color: var(--light-sea-green-deep);
}

.module-icon,
.modal-item-icon,
.toolbar-icon:hover {
    background: linear-gradient(135deg, var(--light-sea-green) 0%, var(--light-sea-green-dark) 100%);
}

.dept-pharmacy,
.dept-store,
.dept-opd,
.dept-ipd,
.dept-patient {
    --accent: var(--light-sea-green);
    --accent-soft: var(--light-sea-green-soft);
}

/* Dashboard sidebar: lightest sea-green hospital menu system. */
.sidebar {
    background: linear-gradient(180deg, #fbffff 0%, #e7fbfa 48%, #d7f7f4 100%) !important;
    border-right: 1px solid #9de9e5;
    box-shadow: 5px 0 26px rgba(11, 74, 71, 0.14);
}

.sidebar-header {
    background: #d7f7f4 !important;
    color: #0b4a47 !important;
    border-bottom: 1px solid #9de9e5;
}

.sidebar .user-profile {
    background: #f8fffe;
    border-bottom: 1px solid #b7ebe7;
}

.sidebar .user-avatar {
    background: linear-gradient(135deg, #20B2AA 0%, #14b8a6 100%);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(20, 184, 166, 0.28);
}

.sidebar .user-name {
    color: #0b4a47 !important;
}

.sidebar .user-role {
    background: #e7fbfa;
    border-color: #9de9e5;
    color: #11615d !important;
}

.sidebar .menu-section-title {
    background: transparent !important;
    color: #11615d !important;
    letter-spacing: 0.09em;
}

.sidebar .menu-item {
    color: #0b4a47 !important;
}

.sidebar .menu-item i,
.sidebar .menu-caret {
    color: #157d78;
}

.sidebar .menu-item:hover,
.sidebar .menu-item.active,
.sidebar .menu-item.dropdown-open {
    background: #20B2AA !important;
    color: #ffffff !important;
    border-left-color: #20B2AA;
}

.sidebar .menu-item:hover i,
.sidebar .menu-item.active i,
.sidebar .menu-item.dropdown-open i,
.sidebar .menu-item:hover .menu-caret,
.sidebar .menu-item.active .menu-caret,
.sidebar .menu-item.dropdown-open .menu-caret {
    color: #ffffff !important;
}

.sidebar .sidebar-dropdown {
    background: #f3fffe !important;
    border-left-color: #20B2AA;
}

.sidebar .menu-subitem {
    color: #0b4a47 !important;
}

.sidebar .menu-subitem i {
    color: #157d78;
}

.sidebar .menu-subitem:hover {
    background: #20B2AA !important;
    color: #ffffff !important;
}

.sidebar .menu-subitem:hover i,
.sidebar .menu-subitem:hover .submenu-caret {
    color: #ffffff !important;
}

.sidebar .menu-subitem.nested-open {
    background: #20B2AA !important;
    color: #ffffff !important;
}

.sidebar .menu-subitem.nested-open i,
.sidebar .menu-subitem.nested-open .submenu-caret {
    color: #ffffff !important;
}

.sidebar .nested-menu-panel {
    background: #f8fffe !important;
    border-color: #9de9e5;
}

.sidebar .nested-menu-panel .menu-subitem {
    color: #0b4a47 !important;
}

.sidebar .nested-menu-panel .menu-subitem i,
.sidebar .nested-menu-panel .submenu-caret {
    color: #157d78 !important;
}

.sidebar .nested-menu-panel .menu-subitem:hover {
    background: #20B2AA !important;
    color: #ffffff !important;
}

.sidebar .nested-menu-panel .menu-subitem:hover i,
.sidebar .nested-menu-panel .menu-subitem:hover .submenu-caret {
    color: #ffffff !important;
}

.sidebar .menu-subitem.is-muted {
    color: #6a8f8b !important;
}

.sidebar .menu-subitem.is-danger {
    color: #9f1239 !important;
}

.sidebar .menu-subitem.is-danger:hover {
    background: #fee2e2 !important;
    color: #7f1d1d !important;
}

/* Legacy form background requested for all menu/submenu forms. */
:root {
    --hms-legacy-form-bg: #25b2a8;
}

.dashboard-page .sidebar,
.dashboard-page .sidebar-header,
.dashboard-page .sidebar .user-profile,
.dashboard-page .sidebar .sidebar-menu,
.dashboard-page .sidebar .menu-section,
.dashboard-page .sidebar .menu-section-title,
.dashboard-page .sidebar .sidebar-dropdown,
.dashboard-page .sidebar .nested-menu-panel,
.dashboard-page .sidebar .menu-item,
.dashboard-page .sidebar .menu-subitem {
    background: var(--hms-legacy-form-bg) !important;
}

.dashboard-page .sidebar {
    border-right-color: #b8f2ed !important;
    box-shadow: none !important;
}

.dashboard-page .sidebar-header,
.dashboard-page .sidebar .user-profile {
    border-bottom-color: #b8f2ed !important;
}

.dashboard-page .sidebar .sidebar-dropdown,
.dashboard-page .sidebar .nested-menu-panel {
    border-color: #b8f2ed !important;
}

.dashboard-page .sidebar .menu-item:hover,
.dashboard-page .sidebar .menu-item.active,
.dashboard-page .sidebar .menu-item.dropdown-open,
.dashboard-page .sidebar .menu-subitem:hover,
.dashboard-page .sidebar .menu-subitem.nested-open {
    background: #1a9d94 !important;
}

body:not(.dashboard-page):not(.login-page) {
    background: var(--hms-legacy-form-bg) !important;
}

body:not(.dashboard-page):not(.login-page) .screen,
body:not(.dashboard-page):not(.login-page) .main-content,
body:not(.dashboard-page):not(.login-page) .content-area,
body:not(.dashboard-page):not(.login-page) .page-shell,
body:not(.dashboard-page):not(.login-page) .ward-shell,
body:not(.dashboard-page):not(.login-page) .bed-shell,
body:not(.dashboard-page):not(.login-page) .report-shell,
body:not(.dashboard-page):not(.login-page) .admin-shell,
body:not(.dashboard-page):not(.login-page) .payroll-shell,
body:not(.dashboard-page):not(.login-page) .doctors-shell,
body:not(.dashboard-page):not(.login-page) .pathology-shell,
body:not(.dashboard-page):not(.login-page) .store-shell,
body:not(.dashboard-page):not(.login-page) .item-shell,
body:not(.dashboard-page):not(.login-page) .po-shell,
body:not(.dashboard-page):not(.login-page) .stock-details-screen,
body:not(.dashboard-page):not(.login-page) .opd-window,
body:not(.dashboard-page):not(.login-page) [class$="-window"],
body:not(.dashboard-page):not(.login-page) .ward-panel,
body:not(.dashboard-page):not(.login-page) .bed-panel,
body:not(.dashboard-page):not(.login-page) .procedure-panel,
body:not(.dashboard-page):not(.login-page) .entry-area,
body:not(.dashboard-page):not(.login-page) .form-band,
body:not(.dashboard-page):not(.login-page) .content-card,
body:not(.dashboard-page):not(.login-page) .dashboard-card,
body:not(.dashboard-page):not(.login-page) .report-card,
body:not(.dashboard-page):not(.login-page) .table-panel,
body:not(.dashboard-page):not(.login-page) .master-panel,
body:not(.dashboard-page):not(.login-page) .search-panel,
body:not(.dashboard-page):not(.login-page) .ops-panel,
body:not(.dashboard-page):not(.login-page) .supplier-panel,
body:not(.dashboard-page):not(.login-page) .entry-box,
body:not(.dashboard-page):not(.login-page) .field-card,
body:not(.dashboard-page):not(.login-page) .field-group,
body:not(.dashboard-page):not(.login-page) .page-card,
body:not(.dashboard-page):not(.login-page) .calculator-shell,
body:not(.dashboard-page):not(.login-page) .barcode-shell,
body:not(.dashboard-page):not(.login-page) .company-shell,
body:not(.dashboard-page):not(.login-page) .rack-shell,
body:not(.dashboard-page):not(.login-page) .ledger-shell,
body:not(.dashboard-page):not(.login-page) .tax-shell,
body:not(.dashboard-page):not(.login-page) .unit-shell,
body:not(.dashboard-page):not(.login-page) .group-shell,
body:not(.dashboard-page):not(.login-page) .department-page,
body:not(.dashboard-page):not(.login-page) .rate-page,
body:not(.dashboard-page):not(.login-page) .forward-page,
body:not(.dashboard-page):not(.login-page) .method-page,
body:not(.dashboard-page):not(.login-page) .parameter-page,
body:not(.dashboard-page):not(.login-page) .technology-page,
body:not(.dashboard-page):not(.login-page) .xray-page,
body:not(.dashboard-page):not(.login-page) .report-page,
body:not(.dashboard-page):not(.login-page) [class$="-page"],
body:not(.dashboard-page):not(.login-page) [class$="-shell"],
body:not(.dashboard-page):not(.login-page) [class$="-panel"],
body:not(.dashboard-page):not(.login-page) [class$="-card"],
body:not(.dashboard-page):not(.login-page) [class$="-area"],
body:not(.dashboard-page):not(.login-page) fieldset,
body:not(.dashboard-page):not(.login-page) .form-card,
body:not(.dashboard-page):not(.login-page) .card,
body:not(.dashboard-page):not(.login-page) .panel,
body:not(.dashboard-page):not(.login-page) .department-card {
    background: var(--hms-legacy-form-bg) !important;
    box-shadow: none !important;
}

/* Project-wide responsive layout safety net for standalone HMS forms. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 0;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    min-width: 0;
}

body:not(.dashboard-page) img,
body:not(.dashboard-page) svg,
body:not(.dashboard-page) canvas,
body:not(.dashboard-page) iframe {
    max-width: 100%;
}

body:not(.dashboard-page) form,
body:not(.dashboard-page) fieldset,
body:not(.dashboard-page) .screen,
body:not(.dashboard-page) .main-content,
body:not(.dashboard-page) .content-area,
body:not(.dashboard-page) .page-shell,
body:not(.dashboard-page) .report-shell,
body:not(.dashboard-page) .admin-shell,
body:not(.dashboard-page) .payroll-shell,
body:not(.dashboard-page) .doctors-shell,
body:not(.dashboard-page) .pathology-shell,
body:not(.dashboard-page) .store-shell,
body:not(.dashboard-page) .item-shell,
body:not(.dashboard-page) [class$="-window"],
body:not(.dashboard-page) [class$="-shell"],
body:not(.dashboard-page) [class$="-page"],
body:not(.dashboard-page) [class$="-panel"],
body:not(.dashboard-page) [class$="-card"],
body:not(.dashboard-page) [class$="-area"] {
    max-width: 100%;
    min-width: 0;
}

body:not(.dashboard-page) input:not([type="checkbox"]):not([type="radio"]),
body:not(.dashboard-page) select,
body:not(.dashboard-page) textarea,
body:not(.dashboard-page) .form-control,
body:not(.dashboard-page) .input-control,
body:not(.dashboard-page) .select-control {
    max-width: 100%;
    min-width: 0;
}

body:not(.dashboard-page) button,
body:not(.dashboard-page) .btn,
body:not(.dashboard-page) .action-button,
body:not(.dashboard-page) .btn-action,
body:not(.dashboard-page) input[type="button"],
body:not(.dashboard-page) input[type="submit"],
body:not(.dashboard-page) input[type="reset"] {
    max-width: 100%;
}

body:not(.dashboard-page) .grid-wrap,
body:not(.dashboard-page) .table-responsive,
body:not(.dashboard-page) .data-grid,
body:not(.dashboard-page) .table-panel,
body:not(.dashboard-page) .grid-panel,
body:not(.dashboard-page) .report-grid,
body:not(.dashboard-page) .result-grid,
body:not(.dashboard-page) [class$="-grid-wrap"],
body:not(.dashboard-page) [class$="-table-wrap"],
body:not(.dashboard-page) [class$="-grid-panel"] {
    max-width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

body:not(.dashboard-page) table {
    max-width: 100%;
}

body:not(.dashboard-page) th,
body:not(.dashboard-page) td {
    overflow-wrap: anywhere;
}

.dashboard-page .main-content,
.dashboard-page .content-area,
.dashboard-page .ops-dashboard,
.dashboard-page .dashboard-view-frame,
.dashboard-page .dashboard-view-track,
.dashboard-page .dashboard-view-slide,
.dashboard-page .metric-grid,
.dashboard-page .insight-grid,
.dashboard-page .pharmacy-dashboard,
.dashboard-page .ward-board {
    min-width: 0;
}

.dashboard-page .content-area {
    width: 100%;
    max-width: none;
}

@media screen and (min-width: 1440px) {
    .dashboard-page .content-area {
        padding-left: clamp(30px, 3vw, 56px);
        padding-right: clamp(30px, 3vw, 56px);
    }
}

@media screen and (max-width: 1180px) {
    body:not(.dashboard-page):not(.login-page) {
        overflow-x: auto;
    }

    body:not(.dashboard-page) .form-row,
    body:not(.dashboard-page) .field-row,
    body:not(.dashboard-page) .search-row,
    body:not(.dashboard-page) .filter-row,
    body:not(.dashboard-page) .toolbar,
    body:not(.dashboard-page) .button-row,
    body:not(.dashboard-page) .actions,
    body:not(.dashboard-page) .action-row,
    body:not(.dashboard-page) [class$="-row"] {
        max-width: 100%;
        min-width: 0;
    }

    body:not(.dashboard-page) .form-grid,
    body:not(.dashboard-page) .field-grid,
    body:not(.dashboard-page) .search-grid,
    body:not(.dashboard-page) .filter-grid,
    body:not(.dashboard-page) .summary-grid,
    body:not(.dashboard-page) .details-grid,
    body:not(.dashboard-page) .entry-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
    }
}

@media screen and (max-width: 1024px) {
    .dashboard-page .sidebar {
        width: min(86vw, 320px) !important;
        transform: translateX(-100%) !important;
        z-index: 1001 !important;
    }

    .dashboard-page .sidebar.mobile-open {
        transform: translateX(0) !important;
    }

    .dashboard-page .sidebar.collapsed {
        width: min(86vw, 320px) !important;
    }

    .dashboard-page .sidebar.collapsed .sidebar-header h3,
    .dashboard-page .sidebar.collapsed .user-name,
    .dashboard-page .sidebar.collapsed .user-role,
    .dashboard-page .sidebar.collapsed .menu-section-title,
    .dashboard-page .sidebar.collapsed .menu-item span,
    .dashboard-page .sidebar.collapsed .menu-item .badge,
    .dashboard-page .sidebar.collapsed .menu-caret {
        display: flex !important;
    }

    .dashboard-page .sidebar.collapsed .menu-section-title {
        display: block !important;
    }

    .dashboard-page .main-content,
    .dashboard-page .main-content.expanded {
        margin-left: 0 !important;
    }

    .dashboard-page .mobile-menu-btn {
        display: inline-flex !important;
    }

    .dashboard-page .header {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 16px 18px;
        gap: 12px;
    }

    .dashboard-page .header-clock {
        justify-self: end;
        min-width: 0;
    }

    .dashboard-page .header-actions {
        grid-column: 1 / -1;
        justify-self: stretch;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
    }

    .dashboard-page .content-area {
        padding: clamp(16px, 2vw, 24px);
    }
}

@media screen and (max-width: 760px) {
    body:not(.dashboard-page) {
        font-size: 14px;
    }

    body:not(.dashboard-page):not(.login-page) .screen,
    body:not(.dashboard-page):not(.login-page) .main-content,
    body:not(.dashboard-page):not(.login-page) .content-area,
    body:not(.dashboard-page):not(.login-page) .page-shell,
    body:not(.dashboard-page):not(.login-page) .report-shell,
    body:not(.dashboard-page):not(.login-page) .admin-shell,
    body:not(.dashboard-page):not(.login-page) .payroll-shell,
    body:not(.dashboard-page):not(.login-page) .doctors-shell,
    body:not(.dashboard-page):not(.login-page) .pathology-shell,
    body:not(.dashboard-page):not(.login-page) .store-shell,
    body:not(.dashboard-page):not(.login-page) .item-shell,
    body:not(.dashboard-page):not(.login-page) [class$="-window"],
    body:not(.dashboard-page):not(.login-page) [class$="-shell"],
    body:not(.dashboard-page):not(.login-page) [class$="-page"],
    body:not(.dashboard-page):not(.login-page) [class$="-panel"],
    body:not(.dashboard-page):not(.login-page) [class$="-card"],
    body:not(.dashboard-page):not(.login-page) [class$="-area"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body:not(.dashboard-page) fieldset,
    body:not(.dashboard-page) .panel,
    body:not(.dashboard-page) .card,
    body:not(.dashboard-page) .form-card,
    body:not(.dashboard-page) .report-card,
    body:not(.dashboard-page) .table-panel {
        padding-left: clamp(8px, 3vw, 14px);
        padding-right: clamp(8px, 3vw, 14px);
    }

    body:not(.dashboard-page) input:not([type="checkbox"]):not([type="radio"]),
    body:not(.dashboard-page) select,
    body:not(.dashboard-page) textarea,
    body:not(.dashboard-page) .form-control {
        width: 100%;
    }

    body:not(.dashboard-page) table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body:not(.dashboard-page) thead,
    body:not(.dashboard-page) tbody,
    body:not(.dashboard-page) tr {
        min-width: max-content;
    }

    .dashboard-page .header {
        grid-template-columns: 1fr;
    }

    .dashboard-page .header-clock,
    .dashboard-page .header-actions {
        justify-self: stretch;
        width: 100%;
    }

    .dashboard-page .dashboard-view-switch {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: 92px;
    }
}

@media screen and (max-width: 480px) {
    body:not(.dashboard-page) {
        font-size: 13px;
    }

    body:not(.dashboard-page) button,
    body:not(.dashboard-page) .btn,
    body:not(.dashboard-page) .action-button,
    body:not(.dashboard-page) .btn-action,
    body:not(.dashboard-page) input[type="button"],
    body:not(.dashboard-page) input[type="submit"],
    body:not(.dashboard-page) input[type="reset"] {
        min-height: 34px;
        white-space: normal;
    }

    .dashboard-page .toolbar-icon {
        width: 38px;
        height: 38px;
    }
}