/* Inter font — https://fonts.google.com/specimen/Inter */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap");

/*
 * ============================================================
 *  Eye HMS SaaS — Design System CSS
 *  v2.0.0 — Phase 2+  (matches PRD Section 2 color palette)
 * ============================================================
 *
 *  Color Palette (Premium Healthcare — PRD v2.0):
 *    Primary:    #1B4F72  (Deep Healthcare Blue)
 *    Secondary:  #2980B9  (Clinical Blue)
 *    CTA/Success:#27AE60  (Health Green)
 *    Warning:    #E67E22  (Amber)
 *    Danger:     #C0392B  (Medical Red)
 *    Teal:       #1ABC9C  (Charts / Online)
 *    BG:         #F0F4F8  (Cool Gray)
 *    Sidebar:    #0D2137  (Midnight Blue)
 *
 * ============================================================
 */

/* ============================================================
   CSS Custom Properties (Variables)
============================================================ */
:root {
    /* Brand Colors — PRD §2.1 */
    --hms-primary: #1b4f72;
    --hms-primary-dark: #154160;
    --hms-primary-light: #d6eaf8;
    --hms-secondary: #2980b9;
    --hms-secondary-dark: #1f6391;
    --hms-teal: #1abc9c;
    --hms-teal-bg: #d1f2eb;

    /* Status Colors */
    --hms-success: #27ae60;
    --hms-success-bg: #d5f5e3;
    --hms-danger: #c0392b;
    --hms-danger-bg: #fadbd8;
    --hms-warning: #e67e22;
    --hms-warning-bg: #fdebd0;
    --hms-info: #2980b9;
    --hms-info-bg: #d6eaf8;

    /* Badge-Specific Status */
    --hms-badge-trial-bg: #d5f5e3;
    --hms-badge-trial-text: #1a6f5b;
    --hms-badge-active-bg: #d6eaf8;
    --hms-badge-active-text: #154360;
    --hms-badge-grace-bg: #fdebd0;
    --hms-badge-grace-text: #784212;
    --hms-badge-inactive-bg: #f4f6f7;
    --hms-badge-inactive-text: #2c3e50;
    --hms-badge-suspended-bg: #fadbd8;
    --hms-badge-suspended-text: #641e16;

    /* Neutral */
    --hms-text: #1a202c;
    --hms-text-muted: #4a5568;
    --hms-border: #e2e8f0;
    --hms-bg-white: #ffffff;
    --hms-bg: var(--hms-bg-white);
    --hms-shadow: none;
    --hms-shadow-md: none;
    --hms-shadow-lg: none;

    /* Sidebar — PRD §2.3 */
    --hms-sidebar-bg: #0d2137;
    --hms-sidebar-active: #1b4f72;
    --hms-sidebar-text: #a8d8ea;
    --hms-sidebar-hover: rgba(255, 255, 255, 0.08);
    --hms-sidebar-border: rgba(255, 255, 255, 0.06);

    /* Layout */
    --hms-navbar-h: 60px;
    --hms-sidebar-w: 260px;
    --hms-sidebar-w-collapsed: 72px;
    --hms-radius: 8px;
    --hms-radius-sm: 13px;
    --hms-radius-lg: 12px;
    --hms-radius-xl: 16px;

    /* Typography */
    --hms-font:
        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --hms-font-mono: "JetBrains Mono", "Fira Code", "Courier New", monospace;
    --hms-font-size: 14px;
    --hms-line-height: 1.6;
}

/* ============================================================
   Reset / Base
============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: var(--hms-font-size);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--hms-font);
    color: var(--hms-text);
    background-color: var(--hms-bg);
    margin: 0;
    padding: 0;
    line-height: var(--hms-line-height);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--hms-primary);
    text-decoration: none;
}
a:hover {
    color: var(--hms-primary-dark);
}

img,
svg {
    vertical-align: middle;
}

/* ============================================================
   Hospital App Layout
============================================================ */
.hms-body {
    background-color: var(--hms-bg);
}

/* --- Navbar --- */
.hms-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--hms-navbar-h);
    background: var(--hms-sidebar-bg);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    z-index: 1000;
    box-shadow: none;
}

.hms-navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    text-decoration: none;
}

.hms-brand-icon {
    font-size: 1.25rem;
}

.hms-brand-icon-lg {
    font-size: 2.5rem;
    color: var(--hms-primary);
}

.hms-navbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hms-navbar-user {
    font-size: 0.875rem;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.hms-nav-link {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.125rem;
    transition: color 0.15s;
}
.hms-nav-link:hover,
.hms-nav-link.active {
    color: #fff;
}

.hms-btn-logout {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 0.375rem 0.75rem;
    border-radius: var(--hms-radius-sm);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.15s;
}
.hms-btn-logout:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* --- Layout: Sidebar + Main --- */
.hms-layout {
    display: flex;
    padding-top: var(--hms-navbar-h);
    min-height: 100vh;
}

.hms-sidebar {
    position: fixed;
    top: var(--hms-navbar-h);
    left: 0;
    bottom: 0;
    width: var(--hms-sidebar-w);
    background: var(--hms-sidebar-bg);
    border-right: none;
    overflow: hidden;
    z-index: 900;
    display: flex;
    flex-direction: column;
}

.hms-sidenav-wrap {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.hms-sidebar-footer {
    flex-shrink: 0;
    padding: 0.5rem 0.5rem;
    border-top: 1px solid var(--hms-sidebar-border);
}

.hms-sidebar-logout {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.875rem;
    border-radius: var(--hms-radius-sm);
    background: transparent;
    border: none;
    color: rgba(255, 100, 100, 0.75);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
    text-align: left;
}
.hms-sidebar-logout:hover {
    background: rgba(220, 53, 69, 0.15);
    color: #ff6b6b;
}
.hms-sidebar-logout i {
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}

.hms-sidenav {
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.hms-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--hms-radius-sm);
    color: var(--hms-sidebar-text);
    font-size: 0.875rem;
    font-weight: 500;
    transition:
        background 0.15s,
        color 0.15s;
    text-decoration: none;
    margin: 1px 0;
}
.hms-nav-item:hover {
    background: var(--hms-sidebar-hover);
    color: #fff;
    text-decoration: none;
    padding-left: calc(0.875rem + 2px);
}
.hms-nav-item.active {
    background: linear-gradient(
        90deg,
        var(--hms-sidebar-active),
        rgba(27, 79, 114, 0.35)
    );
    color: #fff;
    border-left: 3px solid var(--hms-teal);
    padding-left: calc(0.875rem - 3px);
    box-shadow: inset 0 0 20px rgba(26, 188, 156, 0.06);
}
.hms-nav-item i {
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    font-size: 0.9rem;
    transition: transform 0.2s;
}
.hms-nav-item:hover i {
    transform: scale(1.1);
}
.hms-nav-item span {
    flex: 1;
}

.hms-nav-divider {
    height: 1px;
    background: var(--hms-sidebar-border);
    margin: 0.625rem 0.875rem;
}

.hms-nav-section-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(168, 216, 234, 0.4);
    padding: 0.75rem 0.875rem 0.25rem;
}

.hms-main {
    margin-left: var(--hms-sidebar-w);
    flex: 1;
    padding: 1.5rem;
    min-width: 0;
}

/* --- Grace Period Banner --- */
.hms-grace-banner {
    background: var(--hms-warning-bg);
    border-bottom: 2px solid var(--hms-warning);
    color: var(--hms-warning);
    text-align: center;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}
.hms-grace-link {
    margin-left: 1rem;
    background: var(--hms-warning);
    color: #fff;
    padding: 0.2rem 0.6rem;
    border-radius: var(--hms-radius-sm);
    font-size: 0.8rem;
}
.hms-grace-link:hover {
    background: #b45309;
    color: #fff;
    text-decoration: none;
}

/* ============================================================
   Page Header
============================================================ */
.hms-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--hms-border);
}
.hms-page-header h1 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--hms-text);
    margin: 0;
}
.hms-page-actions {
    display: flex;
    gap: 0.5rem;
}

/* ============================================================
   Alerts
============================================================ */
.hms-alert {
    padding: 0.875rem 1.25rem;
    border-radius: var(--hms-radius-lg);
    margin-bottom: 1rem;
    font-size: 0.875rem;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    border-left: 4px solid;
    animation: hmsAlertSlideIn 0.3s ease;
}
@keyframes hmsAlertSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.hms-alert-success {
    background: var(--hms-success-bg);
    color: var(--hms-success);
    border-color: var(--hms-success);
}
.hms-alert-danger {
    background: var(--hms-danger-bg);
    color: var(--hms-danger);
    border-color: var(--hms-danger);
}
.hms-alert-warning {
    background: var(--hms-warning-bg);
    color: var(--hms-warning);
    border-color: var(--hms-warning);
}
.hms-alert-info {
    background: var(--hms-info-bg);
    color: var(--hms-info);
    border-color: var(--hms-info);
}

/* ============================================================
   Buttons
============================================================ */
.hms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: var(--hms-radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    line-height: 1.4;
}
.hms-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.hms-btn:focus {
    outline: 2px solid var(--hms-primary);
    outline-offset: 2px;
}
.hms-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.hms-btn-primary {
    background: var(--hms-primary);
    color: #fff;
    border-color: var(--hms-primary);
}
.hms-btn-primary:hover {
    background: var(--hms-primary-dark);
    border-color: var(--hms-primary-dark);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(27, 79, 114, 0.35);
}

.hms-btn-secondary {
    background: #fff;
    color: var(--hms-text);
    border-color: var(--hms-border);
}
.hms-btn-secondary:hover {
    background: var(--hms-bg);
}

.hms-btn-danger {
    background: var(--hms-danger);
    color: #fff;
    border-color: var(--hms-danger);
}
.hms-btn-danger:hover {
    background: #b91c1c;
    color: #fff;
    text-decoration: none;
}

.hms-btn-success {
    background: var(--hms-success);
    color: #fff;
    border-color: var(--hms-success);
}
.hms-btn-success:hover {
    background: #15803d;
    color: #fff;
    text-decoration: none;
}
/* 
.hms-btn-sm {
    padding: .25rem .625rem;
    font-size: .8rem;
} */

.hms-btn-block {
    width: 100%;
}

/* ============================================================
   Forms
============================================================ */
.hms-form-group {
    margin-bottom: 1rem;
}
.hms-form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
    color: var(--hms-text);
}

.hms-input,
.hms-select,
.hms-textarea {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-family: var(--hms-font);
    color: var(--hms-text);
    background: #fff;
    border: 1px solid var(--hms-border);
    border-radius: var(--hms-radius-sm);
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
    line-height: 1.5;
}
.hms-input:focus,
.hms-select:focus,
.hms-textarea:focus {
    outline: none;
    border-color: var(--hms-primary);
    box-shadow: 0 0 0 3px rgba(27, 79, 114, 0.12);
    background: #fafcff;
}
.hms-input.is-invalid,
.hms-select.is-invalid {
    border-color: var(--hms-danger);
}

.hms-textarea {
    min-height: 100px;
    resize: vertical;
}

.hms-error,
.hms-field-error {
    display: block;
    font-size: 0.8rem;
    color: var(--hms-danger);
    margin-top: 0.25rem;
}

/* Form grid helpers */
.hms-form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.hms-form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 768px) {
    .hms-form-grid-2,
    .hms-form-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Required asterisk */
.hms-required {
    color: var(--hms-danger);
    margin-left: 0.1rem;
}

/* Form hint text */
.hms-form-hint {
    font-size: 0.8rem;
    color: var(--hms-text-muted);
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* Checkbox label wrapper */
.hms-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--hms-text);
}

/* Permission pill checkboxes */
.hms-perm-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.75rem;
    border: 1.5px solid var(--hms-border);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition:
        border-color 0.15s,
        background 0.15s,
        color 0.15s;
    color: var(--hms-text-muted);
    background: #fff;
    user-select: none;
}
.hms-perm-pill:hover {
    border-color: var(--hms-secondary);
    color: var(--hms-secondary);
}
.hms-perm-pill:has(input:checked) {
    background: var(--hms-primary-light);
    border-color: var(--hms-primary);
    color: var(--hms-primary);
}
.hms-perm-pill input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--hms-primary);
    cursor: pointer;
}
.hms-perm-pill.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Permission module row */
.hms-perm-module {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 0;
}

.hms-form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}
.hms-checkbox {
    width: 1rem;
    height: 1rem;
    accent-color: var(--hms-primary);
}

/* ============================================================
   Cards
============================================================ */
.hms-card {
    background: var(--hms-bg-white);
    border: 1px solid var(--hms-border);
    border-radius: var(--hms-radius-lg);
    box-shadow: var(--hms-shadow);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    transition:
        box-shadow 0.25s ease,
        transform 0.25s ease;
}
.hms-card:hover {
    box-shadow: var(--hms-shadow-md);
}
.hms-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--hms-border);
}
.hms-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--hms-text);
}
.hms-card-subtitle {
    font-size: 0.8rem;
    color: var(--hms-text-muted);
    margin: 0.125rem 0 0;
}

/* ============================================================
   Tables
============================================================ */
.hms-table-wrap {
    overflow-x: auto;
    border-radius: var(--hms-radius);
    border: 1px solid var(--hms-border);
}
.hms-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.hms-table th {
    background: var(--hms-bg);
    font-weight: 700;
    color: var(--hms-text-muted);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--hms-border);
    text-align: left;
}
.hms-table td {
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--hms-border);
    color: var(--hms-text);
}
.hms-table tbody tr:last-child td {
    border-bottom: none;
}
.hms-table tbody tr {
    transition: background 0.15s ease;
}
.hms-table tbody tr:hover {
    background: #f5f8fc;
}

/* ============================================================
   Badges / Status Pills
============================================================ */
.hms-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}
.hms-badge-info {
    background: var(--hms-info-bg);
    color: var(--hms-info);
}
.hms-badge-success {
    background: var(--hms-success-bg);
    color: var(--hms-success);
}
.hms-badge-warning {
    background: var(--hms-warning-bg);
    color: var(--hms-warning);
}
.hms-badge-danger {
    background: var(--hms-danger-bg);
    color: var(--hms-danger);
}
.hms-badge-purple {
    background: #f5f3ff;
    color: #7c3aed;
}
.hms-badge-dark {
    background: #e5e7eb;
    color: #374151;
}
.hms-badge-active {
    background: var(--hms-success-bg);
    color: var(--hms-success);
}
.hms-badge-inactive {
    background: #f3f4f6;
    color: var(--hms-text-muted);
}
.hms-badge-trial {
    background: var(--hms-info-bg);
    color: var(--hms-info);
}
.hms-badge-suspended {
    background: var(--hms-danger-bg);
    color: var(--hms-danger);
}
.hms-badge-grace {
    background: var(--hms-warning-bg);
    color: var(--hms-warning);
}

/* ============================================================
   Stats Grid (Dashboard)
============================================================ */
.hms-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.hms-stat-card {
    background: var(--hms-bg-white);
    border: 1px solid var(--hms-border);
    border-radius: var(--hms-radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    box-shadow: var(--hms-shadow);
}
.hms-stat-card i {
    font-size: 1.5rem;
    color: var(--hms-primary);
}
.hms-stat-card h4 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--hms-text-muted);
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0.05em;
}
.hms-stat-card strong {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--hms-text);
    line-height: 1;
}

/* ============================================================
   Auth Pages (Hospital Login)
============================================================ */
.hms-auth-body {
    min-height: 100vh;
    background: linear-gradient(
        135deg,
        var(--hms-primary) 0%,
        var(--hms-secondary) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.hms-auth-card {
    background: #fff;
    border-radius: var(--hms-radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    padding: 2.5rem;
    width: 100%;
    max-width: 400px;
}
.hms-auth-logo {
    text-align: center;
    margin-bottom: 2rem;
}
.hms-auth-logo h2 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--hms-text);
    margin: 0.5rem 0 0.25rem;
}
.hms-auth-form {
    display: flex;
    flex-direction: column;
}

.hms-text-muted {
    color: var(--hms-text-muted);
}

/* ============================================================
   Pagination
============================================================ */
.hms-pagination {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    margin-top: 1.25rem;
}
.hms-pagination a,
.hms-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--hms-radius-sm);
    font-size: 0.875rem;
    border: 1px solid var(--hms-border);
    color: var(--hms-text);
    text-decoration: none;
}
.hms-pagination .active {
    background: var(--hms-primary);
    color: #fff;
    border-color: var(--hms-primary);
}

/* ============================================================
   Utility Classes
============================================================ */
.d-inline {
    display: inline;
}
.d-flex {
    display: flex;
}
.align-center {
    align-items: center;
}
.gap-1 {
    gap: 0.25rem;
}
.gap-2 {
    gap: 0.5rem;
}
.gap-3 {
    gap: 0.75rem;
}
.mb-0 {
    margin-bottom: 0;
}
.mb-1 {
    margin-bottom: 0.25rem;
}
.mb-2 {
    margin-bottom: 0.5rem;
}
.mb-3 {
    margin-bottom: 0.75rem;
}
.mb-4 {
    margin-bottom: 1rem;
}
.mt-1 {
    margin-top: 0.25rem;
}
.mt-2 {
    margin-top: 0.5rem;
}
.mt-3 {
    margin-top: 0.75rem;
}
.mt-4 {
    margin-top: 1rem;
}
.text-right {
    text-align: right;
}
.text-center {
    text-align: center;
}
.text-sm {
    font-size: 0.8rem;
}
.fw-bold {
    font-weight: 700;
}
.text-danger {
    color: var(--hms-danger);
}
.text-success {
    color: var(--hms-success);
}
.text-warning {
    color: var(--hms-warning);
}
.text-muted {
    color: var(--hms-text-muted);
}

/* ============================================================
   Responsive
============================================================ */
@media (max-width: 768px) {
    .hms-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    .hms-sidebar.open {
        transform: translateX(0);
    }
    .hms-main {
        margin-left: 0;
        padding: 1rem;
    }
    .hms-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    .hms-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}
@media (max-width: 480px) {
    .hms-stats-grid {
        grid-template-columns: 1fr;
    }
    .hms-auth-card {
        padding: 1.5rem;
    }
}

/* ============================================================
   Coming Soon / Empty State
============================================================ */
.hms-coming-soon {
    text-align: center;
    padding: 3.5rem 2rem;
}
.hms-coming-soon-icon {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--hms-primary-light), #ebf5fb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
    color: var(--hms-primary);
    margin-bottom: 1.25rem;
    box-shadow: 0 8px 24px rgba(27, 79, 114, 0.1);
    transition: transform 0.3s ease;
}
.hms-coming-soon:hover .hms-coming-soon-icon {
    transform: scale(1.05) rotate(-3deg);
}
.hms-coming-soon h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--hms-text);
    margin: 0 0 0.5rem;
}
.hms-coming-soon p {
    font-size: 0.9rem;
    color: var(--hms-text-muted);
    max-width: 440px;
    margin: 0 auto 0.75rem;
    line-height: 1.7;
}
.hms-coming-soon-features {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0 1.5rem;
}
.hms-coming-soon-features span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--hms-bg);
    border: 1px solid var(--hms-border);
    border-radius: 999px;
    padding: 0.35rem 0.875rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--hms-text-muted);
    transition:
        border-color 0.2s,
        background 0.2s;
}
.hms-coming-soon-features span:hover {
    border-color: var(--hms-primary-light);
    background: var(--hms-primary-light);
    color: var(--hms-primary);
}
.hms-coming-soon-features span i {
    font-size: 0.7rem;
    color: var(--hms-teal);
}
.hms-coming-soon-phase {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hms-text-muted);
    background: var(--hms-bg);
    border: 1px dashed var(--hms-border);
    border-radius: 999px;
    padding: 0.3rem 0.875rem;
    margin-top: 0.25rem;
}

.hms-empty-state {
    text-align: center;
    padding: 3rem 2rem;
}
.hms-empty-state-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--hms-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--hms-text-muted);
    margin-bottom: 1rem;
    border: 2px dashed var(--hms-border);
}
.hms-empty-state h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--hms-text);
    margin: 0 0 0.375rem;
}
.hms-empty-state p {
    font-size: 0.875rem;
    color: var(--hms-text-muted);
    margin: 0 0 1rem;
}

/* ============================================================
   Section Groups (Collapsible Sidebar)
============================================================ */
.hms-nav-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    cursor: pointer;
    user-select: none;
}
.hms-nav-group-toggle .hms-nav-chevron {
    font-size: 0.625rem;
    color: rgba(168, 216, 234, 0.4);
    transition: transform 0.25s ease;
}
.hms-nav-group-toggle.collapsed .hms-nav-chevron {
    transform: rotate(-90deg);
}
.hms-nav-group-items {
    overflow: hidden;
    max-height: 500px;
    transition: max-height 0.3s ease;
}
.hms-nav-group-items.collapsed {
    max-height: 0;
}

/* ============================================================
   Mobile Sidebar Overlay
============================================================ */
.hms-sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 899;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.hms-sidebar-backdrop.show {
    display: block;
    opacity: 1;
}

/* Mobile Toggle Button */
.hms-sidebar-toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: color 0.15s;
}
.hms-sidebar-toggle:hover {
    color: var(--hms-teal);
}

@media (max-width: 768px) {
    .hms-sidebar-toggle {
        display: inline-flex;
    }
}

/* ============================================================
   Select2 Custom Theme Overrides
============================================================ */
.select2-container--default .select2-selection--single {
    border: 1px solid var(--hms-border) !important;
    border-radius: var(--hms-radius-sm) !important;
    height: 38px !important;
    font-family: var(--hms-font) !important;
    font-size: 0.875rem !important;
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--hms-primary) !important;
    box-shadow: 0 0 0 3px rgba(27, 79, 114, 0.12) !important;
    outline: none !important;
}
.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    line-height: 36px !important;
    color: var(--hms-text) !important;
    padding-left: 0.75rem !important;
}
.select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    height: 36px !important;
}
.select2-dropdown {
    border: 1px solid var(--hms-border) !important;
    border-radius: var(--hms-radius-sm) !important;
    box-shadow: var(--hms-shadow-md) !important;
    font-family: var(--hms-font) !important;
    font-size: 0.875rem !important;
}
.select2-container--default
    .select2-results__option--highlighted[aria-selected] {
    background: var(--hms-primary) !important;
}
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--hms-border) !important;
    border-radius: var(--hms-radius-sm) !important;
    font-family: var(--hms-font) !important;
    min-height: 38px !important;
}
.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
    background: var(--hms-primary-light) !important;
    border: 1px solid rgba(27, 79, 114, 0.2) !important;
    border-radius: 999px !important;
    color: var(--hms-primary) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 0.125rem 0.5rem !important;
}

/* ============================================================
   Flatpickr Custom Overrides
============================================================ */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--hms-primary) !important;
    border-color: var(--hms-primary) !important;
}
.flatpickr-day:hover {
    background: var(--hms-primary-light) !important;
}

/* ============================================================
   Button Outline Variants
============================================================ */
.hms-btn-outline {
    background: transparent;
    color: var(--hms-primary);
    border: 1.5px solid var(--hms-primary);
}
.hms-btn-outline:hover {
    background: var(--hms-primary);
    color: #fff;
    text-decoration: none;
}
.hms-btn-outline-danger {
    background: transparent;
    color: var(--hms-danger);
    border: 1.5px solid var(--hms-danger);
}
.hms-btn-outline-danger:hover {
    background: var(--hms-danger);
    color: #fff;
    text-decoration: none;
}

/* ============================================================
   Action Icon Buttons (for tables)
============================================================ */
.hms-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--hms-radius-sm);
    border: 1px solid var(--hms-border);
    background: #fff;
    color: var(--hms-text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}
.hms-btn-icon:hover {
    border-color: var(--hms-primary);
    color: var(--hms-primary);
    background: var(--hms-primary-light);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(27, 79, 114, 0.1);
}
.hms-btn-icon.danger:hover,
.hms-btn-icon-danger:hover {
    border-color: var(--hms-danger);
    color: var(--hms-danger);
    background: var(--hms-danger-bg);
}
.hms-btn-icon-success:hover {
    border-color: var(--hms-success);
    color: var(--hms-success);
    background: var(--hms-success-bg);
}

/* ============================================================
   Tooltip (lightweight)
============================================================ */
[data-tooltip] {
    position: relative;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--hms-sidebar-bg);
    color: #fff;
    padding: 0.25rem 0.625rem;
    border-radius: var(--hms-radius-sm);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.2s,
        transform 0.2s;
    z-index: 50;
}
[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   HERO SECTION OVERRIDE - Clean & Professional Eye Hospital Design
   FIXED: Text visibility issues
============================================================ */

/* Main Hero Container - Override existing */
.hero-section {
    position: relative;
    min-height: 80vh;
    background: linear-gradient(135deg, #f8fafc 0%, #ebf5fb 100%) !important;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 6rem 0 4rem;
}

/* Fix: Ensure all text has proper contrast on light background */
.hero-section .hero-title,
.hero-section .hero-title * {
    color: #1e293b !important;
    -webkit-text-fill-color: #1e293b !important;
}

.hero-section .hero-subtitle {
    color: #475569 !important;
}

.hero-section .hero-badge {
    color: #1b4f72 !important;
    background: rgba(27, 79, 114, 0.08) !important;
}

.hero-section .hero-badge span {
    color: #1b4f72 !important;
}

.hero-section .hero-trust-item {
    color: #475569 !important;
}

.hero-section .hero-trust-item i {
    color: #27ae60 !important;
}

.hero-section .btn-hero-primary {
    color: white !important;
    background: #1b4f72 !important;
}

.hero-section .btn-hero-outline {
    color: #1b4f72 !important;
    border-color: rgba(27, 79, 114, 0.25) !important;
}

/* Text gradient fix */
.hero-section .text-gradient-primary {
    background: linear-gradient(120deg, #1b4f72, #2980b9) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Disable any white text from parent */
.hero-section * {
    color: inherit;
}

/* Keep your existing particles but style them softer */
.hero-medical-particles {
    opacity: 0.3 !important;
}

.hero-medical-particles .hmp-dot {
    background: #1b4f72 !important;
    opacity: 0.15 !important;
    box-shadow: none !important;
}

.hero-medical-particles .hmp-dot::after {
    display: none !important;
}

/* Keep your rings but make them subtle */
.hmp-ring {
    border-color: rgba(27, 79, 114, 0.1) !important;
    opacity: 0.4 !important;
}

/* Keep eyes but subtle */
.hmp-eye {
    opacity: 0.15 !important;
    color: #1b4f72 !important;
}

/* Disable heartbeat line (too medical) */
.hero-heartbeat {
    display: none !important;
}

/* Keep grid overlay but softer */
.hero-grid-overlay {
    background-image:
        linear-gradient(to right, rgba(27, 79, 114, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(27, 79, 114, 0.03) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
    animation: none !important;
    opacity: 1 !important;
}

/* Blobs - make them softer medical blue */
.hero-blob {
    filter: blur(80px) !important;
    opacity: 0.12 !important;
}

.hero-blob-1 {
    background: radial-gradient(circle, #2980b9, transparent 70%) !important;
    width: 500px;
    height: 500px;
}

.hero-blob-2 {
    background: radial-gradient(circle, #1b4f72, transparent 70%) !important;
    width: 450px;
    height: 450px;
}

.hero-blob-3 {
    background: radial-gradient(circle, #27ae60, transparent 70%) !important;
    width: 350px;
    height: 350px;
    opacity: 0.08 !important;
}

/* Container - preserve your existing structure */
.hero-section .land-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* ===== Hero Content - Clean & Professional ===== */
.hero-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    z-index: 2;
}

/* Remove the orb animations from hero-content */
.hero-content::before,
.hero-content::after {
    display: none !important;
}

/* Badge - Professional */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(27, 79, 114, 0.08) !important;
    border: 1px solid rgba(27, 79, 114, 0.15) !important;
    border-radius: 100px;
    padding: 0.5rem 1.25rem;
    width: fit-content;
    font-size: 0.875rem;
    font-weight: 500;
    backdrop-filter: none !important;
}

.hero-badge::before,
.hero-badge::after {
    display: none !important;
}

.badge-pulse {
    width: 8px;
    height: 8px;
    background: #27ae60;
    border-radius: 50%;
    animation: heroPulse 1.8s ease-in-out infinite;
    box-shadow: none;
}

@keyframes heroPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
}

/* Title */
.hero-title {
    font-size: 3.25rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    text-shadow: none !important;
}

/* Remove cursor */
.hero-cursor {
    display: none !important;
}

/* Subtitle */
.hero-subtitle {
    font-size: 1.125rem !important;
    line-height: 1.6 !important;
    max-width: 90% !important;
    margin: 0 !important;
    text-shadow: none !important;
}

/* CTA Buttons */
.hero-ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.btn-pulse-ring-wrap {
    position: relative;
    display: inline-flex;
}

.btn-pulse-ring {
    display: none !important;
}

.btn-hero-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: #1b4f72 !important;
    color: white !important;
    font-weight: 600 !important;
    padding: 0.875rem 2rem !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    border: none !important;
    cursor: pointer;
    font-size: 0.9375rem !important;
    box-shadow: none !important;
}

.btn-hero-primary:hover {
    background: #0f3b56 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(27, 79, 114, 0.25) !important;
    color: white !important;
    text-decoration: none !important;
}

.btn-hero-primary::before,
.btn-hero-primary::after {
    display: none !important;
}

.btn-hero-outline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: transparent !important;
    color: #1b4f72 !important;
    font-weight: 600 !important;
    padding: 0.875rem 2rem !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    border: 2px solid rgba(27, 79, 114, 0.25) !important;
    transition: all 0.25s ease !important;
    font-size: 0.9375rem !important;
}

.btn-hero-outline:hover {
    background: rgba(27, 79, 114, 0.05) !important;
    border-color: #1b4f72 !important;
    transform: translateY(-2px);
    color: #1b4f72 !important;
    text-decoration: none !important;
}

/* Trust Items */
.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.hero-trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.hero-trust-item i {
    font-size: 0.875rem;
}

/* ===== Dashboard Mockup - Professional ===== */
.hero-dashboard-mockup {
    position: relative;
}

.hero-dashboard-mockup::before,
.hero-dashboard-mockup::after {
    display: none !important;
}

.mockup-glow {
    display: none !important;
}

.mockup-browser {
    background: #ffffff !important;
    border-radius: 20px !important;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(27, 79, 114, 0.1) !important;
}

.mockup-chrome {
    background: #f1f5f9 !important;
    padding: 0.875rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.mockup-dots {
    display: flex;
    gap: 0.5rem;
}

.mockup-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.mockup-dots .md-red {
    background: #ef4444;
}
.mockup-dots .md-amber {
    background: #f59e0b;
}
.mockup-dots .md-green {
    background: #22c55e;
}

.mockup-urlbar {
    flex: 1;
    background: #ffffff;
    border-radius: 8px;
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
    font-family: monospace;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.mockup-app {
    display: grid;
    grid-template-columns: 64px 1fr;
    background: #f8fafc;
}

.mockup-sidebar {
    background: #ffffff;
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-right: 1px solid #e2e8f0;
}

.mock-nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 8px;
    opacity: 0.6;
}
.mock-nav-item.active {
    background: #ebf5fb !important;
    opacity: 1;
}
.mock-nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: #94a3b8;
}
.mock-nav-item.active .mock-nav-dot {
    background: #1b4f72;
}
.mock-nav-bar {
    flex: 1;
    height: 6px;
    border-radius: 4px;
    background: #e2e8f0;
}
.mock-nav-item.active .mock-nav-bar {
    background: #1b4f72;
    opacity: 0.2;
}

.mockup-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mock-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.mock-stat-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.mock-stat-top {
    height: 8px;
    width: 40%;
    background: #1b4f72;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    opacity: 0.7;
}
.mock-stat-top.g {
    background: #27ae60;
}
.mock-stat-top.o {
    background: #f59e0b;
}
.mock-stat-top.t {
    background: #2980b9;
}

.mock-stat-val {
    height: 16px;
    width: 60%;
    background: #e2e8f0;
    border-radius: 4px;
    margin-bottom: 0.25rem;
}
.mock-stat-lbl {
    height: 8px;
    width: 80%;
    background: #f1f5f9;
    border-radius: 4px;
}

.mock-chart-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
}

.mock-chart-header {
    height: 12px;
    width: 30%;
    background: #e2e8f0;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.mock-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 80px;
}

.mock-bar {
    flex: 1;
    background: #d6eaf8;
    border-radius: 4px 4px 0 0;
}
.mock-bar:nth-child(2),
.mock-bar:nth-child(4),
.mock-bar:nth-child(6) {
    background: #2980b9;
}
.mock-bar:nth-child(7) {
    background: #27ae60;
}

.mock-table-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.mock-table-head {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.mock-th {
    height: 8px;
    background: #cbd5e1;
    border-radius: 4px;
}

.mock-table-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.mock-td {
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
}

/* Floating Elements */
.mockup-float {
    position: absolute;
    background: #ffffff;
    padding: 0.625rem 1rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1e293b;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgba(27, 79, 114, 0.1);
}

.mockup-float i {
    color: #2980b9;
    font-size: 0.875rem;
}

.mockup-float-tl {
    top: -1rem;
    left: -1rem;
}

.mockup-float-br {
    bottom: -1rem;
    right: -1rem;
}

/* Hide health chips and notif ping */
.mockup-health-chip,
.mockup-notif-ping,
.mockup-scan-line,
.mock-live-indicator {
    display: none !important;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .hero-section .land-container {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 2rem !important;
    }

    .hero-content {
        align-items: center !important;
    }

    .hero-subtitle {
        max-width: 100% !important;
    }

    .hero-ctas,
    .hero-trust {
        justify-content: center !important;
    }

    .hero-title {
        font-size: 2.5rem !important;
    }

    .hero-dashboard-mockup {
        max-width: 550px;
        margin: 0 auto;
    }

    .hero-blob {
        opacity: 0.06 !important;
    }

    .hero-medical-particles {
        opacity: 0.15 !important;
    }
}

@media (max-width: 640px) {
    .hero-section {
        padding: 5rem 0 3rem !important;
    }

    .hero-section .land-container {
        padding: 0 1rem !important;
    }

    .hero-title {
        font-size: 2rem !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
    }

    .btn-hero-primary,
    .btn-hero-outline {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.875rem !important;
    }

    .mockup-float {
        display: none !important;
    }

    .hero-blob {
        display: none !important;
    }

    .hero-medical-particles .hmp-dot-4,
    .hero-medical-particles .hmp-dot-5 {
        display: none !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .badge-pulse {
        animation: none !important;
    }
}