* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', 'Segoe UI', sans-serif;
        }
        
        :root {
            --primary: #1481ff;
            --primary-dark: #0d6efd;
            --primary-light: #3d9bff;
            --primary-very-light: #e3f2ff;
            --secondary: #06b6d4;
            --accent: #10b981;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --info: #0ea5e9;
            --light: #f8fafc;
            --dark: #1e293b;
            --gray: #64748b;
            --border: #e2e8f0;
            --sidebar-width: 280px;
            --header-height: 80px;
            --stats-bg: #ffffff;
            --stats-text: #1e293b;
        }
        
        body {
            background-color: #f0f9ff;
            color: var(--dark);
            transition: opacity 0.3s ease;
        }
        
        .page-transition {
            opacity: 0;
        }
        
        .page-visible {
            opacity: 1;
        }
        
        /* ===== HIPAA BADGE STYLES ===== */
        .hipaa-badge {
            display: inline-flex;
            align-items: center;
            background: #10b981;
            color: white;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.7rem;
            font-weight: 600;
            margin-left: 8px;
            vertical-align: middle;
            white-space: nowrap;
        }
        
        .hipaa-badge i {
            margin-right: 4px;
            font-size: 0.6rem;
        }
        
        .hipaa-badge-small {
            padding: 2px 6px;
            font-size: 0.6rem;
            margin-left: 5px;
        }
        
        .hipaa-badge-large {
            padding: 6px 12px;
            font-size: 0.8rem;
            margin-left: 10px;
        }
        
        .hipaa-compliant {
            border-left: 3px solid #10b981;
            padding-left: 10px;
            margin: 10px 0;
        }
        
        .hipaa-section {
            background: rgba(16, 185, 129, 0.05);
            border: 1px solid rgba(16, 185, 129, 0.2);
            border-radius: 10px;
            padding: 15px;
            margin: 15px 0;
        }
        
        .hipaa-status {
            display: inline-flex;
            align-items: center;
            background: #10b981;
            color: white;
            padding: 8px 15px;
            border-radius: 8px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-left: 15px;
        }
        
        .hipaa-status i {
            margin-right: 8px;
        }
        
        /* ===== LOGIN PAGE ===== */
        .login-page {
            background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            opacity: 1;
            transition: opacity 0.3s ease;
        }
        
        .login-container {
            width: 1200px;
            max-width: 95%;
            height: auto;
            min-height: 750px;
            background: white;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(20, 129, 255, 0.15);
            display: flex;
            flex-direction: column;
        }
        
        @media (min-width: 992px) {
            .login-container {
                flex-direction: row;
                height: 800px;
            }
        }
        
        .login-left {
            flex: 1.3;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            color: white;
            padding: 40px 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        
        @media (min-width: 768px) {
            .login-left {
                padding: 60px 50px;
            }
        }
        
        .login-left::before {
            content: '';
            position: absolute;
            top: -100px;
            right: -100px;
            width: 80px;
            height: 80px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }
        
        .login-left::after {
            content: '';
            position: absolute;
            bottom: -150px;
            left: -150px;
            width: 400px;
            height: 400px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 50%;
        }
        
        .brand-hero {
            position: relative;
            z-index: 2;
            text-align: center;
        }
        
        @media (min-width: 768px) {
            .brand-hero {
                text-align: left;
            }
        }
        
        .logo-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 30px;
        }
        
        @media (min-width: 768px) {
            .logo-container {
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
            }
        }
        
        .logo-img {
            width: 500px;
            min-height: 500px;
            align-items: center;
            justify-content: center;
            display: flex;

            
            
        }
        
        @media (min-width: 768px) {
            .logo-img {
                margin-bottom: 0;
                margin-right: 20px;
            }
        }
        
        .logo-img img {
            width: 100%;
            height: auto;
        }
        
        .logo-text-large {
            font-size: 36px;
            font-weight: 800;
            color: white;
            line-height: 1;
            text-align: center;
        }
        
        @media (min-width: 768px) {
            .logo-text-large {
                text-align: left;
                font-size: 42px;
            }
        }
        
        .logo-text-large .ai {
            color: #00ffcc;
            font-weight: 700;
            background: rgba(0, 255, 204, 0.2);
            padding: 2px 8px;
            border-radius: 6px;
            margin-left: 5px;
        }
        
        .tagline {n            margin-top: -15px;
            font-size: 1.3rem;
            opacity: 0.95;
            line-height: 1.6;
            margin-bottom: 40px;
            font-weight: 500;
            max-width: 500px;
            text-align: center;
        }
        
        @media (min-width: 768px) {
            .tagline {n            margin-top: -15px;
                text-align: left;
                font-size: 1.5rem;
            }
        }
        
        .ai-features {
            margin-top: 30px;
        }
        
        .ai-feature {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 25px;
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 12px;
            backdrop-filter: blur(10px);
            text-align: center;
        }
        
        @media (min-width: 768px) {
            .ai-feature {
                flex-direction: row;
                text-align: left;
                align-items: center;
            }
        }
        
        .ai-feature-icon {
            background: white;
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0;
            margin-bottom: 15px;
            color: var(--primary);
            font-size: 22px;
        }
        
        @media (min-width: 768px) {
            .ai-feature-icon {
                margin-right: 20px;
                margin-bottom: 0;
            }
        }
        
        .ai-feature-content h3 {
            font-size: 1.2rem;
            margin-bottom: 5px;
            font-weight: 600;
        }
        
        .ai-feature-content p {
            font-size: 0.95rem;
            opacity: 0.9;
        }
        
        .login-right {
            flex: 1;
            padding: 40px 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: white;
        }
        
        @media (min-width: 768px) {
            .login-right {
                padding: 60px 50px;
            }
        }
        
        .login-form-container {
            max-width: 400px;
            margin: 0 auto;
            width: 100%;
        }
        
        .login-form-header {
            margin-bottom: 30px;
            text-align: center;
        }
        
        .login-form-header h2 {
            font-size: 2rem;
            margin-bottom: 10px;
            color: var(--dark);
            font-weight: 700;
        }
        
        @media (min-width: 768px) {
            .login-form-header h2 {
                font-size: 2.5rem;
            }
        }
        
        .login-form-header p {
            color: var(--gray);
            font-size: 1rem;
        }
        
        @media (min-width: 768px) {
            .login-form-header p {
                font-size: 1.1rem;
            }
        }
        
        .hipaa-login-badge {
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid rgba(16, 185, 129, 0.3);
            border-radius: 10px;
            padding: 10px;
            margin-top: 20px;
            text-align: center;
            font-size: 0.85rem;
            color: var(--dark);
        }
        
        .user-role-selector {
            margin-bottom: 25px;
        }
        
        .user-role-selector label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: var(--dark);
        }
        
        .role-dropdown {
            width: 100%;
            padding: 16px 20px;
            border: 2px solid var(--border);
            border-radius: 12px;
            font-size: 16px;
            background: white;
            color: var(--dark);
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 20px center;
            background-size: 20px;
        }
        
        .role-dropdown:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 4px rgba(20, 129, 255, 0.1);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--dark);
            font-size: 1rem;
        }
        
        .input-with-icon {
            position: relative;
        }
        
        .input-with-icon i {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray);
            font-size: 18px;
        }
        
        .input-with-icon input {
            width: 100%;
            padding: 16px 18px 16px 55px;
            border: 2px solid var(--border);
            border-radius: 12px;
            font-size: 16px;
            transition: all 0.3s;
            background: white;
        }
        
        .input-with-icon input:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 4px rgba(20, 129, 255, 0.1);
        }
        
        .remember-forgot {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-bottom: 25px;
        }
        
        @media (min-width: 480px) {
            .remember-forgot {
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
            }
        }
        
        .remember {
            display: flex;
            align-items: center;
        }
        
        .remember input {
            margin-right: 8px;
            width: 18px;
            height: 18px;
        }
        
        .forgot-link {
            color: var(--primary);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .forgot-link:hover {
            text-decoration: underline;
        }
        
        .login-btn {
            width: 100%;
            padding: 16px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            margin-bottom: 20px;
            box-shadow: 0 10px 20px rgba(20, 129, 255, 0.2);
            min-height: 44px;
        }
        
        .login-btn:hover {
            transform: translateY(-2px);
            background: var(--primary-dark);
            box-shadow: 0 15px 25px rgba(20, 129, 255, 0.3);
        }
        
        .demo-credentials {
            background: var(--primary-very-light);
            padding: 15px;
            border-radius: 10px;
            margin-top: 20px;
            font-size: 0.9rem;
            color: var(--dark);
            border-left: 4px solid var(--primary);
        }
        
        .demo-credentials strong {
            color: var(--primary);
        }
        
        /* ===== DASHBOARD LAYOUT ===== */
        .dashboard-page {
            display: none;
            min-height: 100vh;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .dashboard-page.page-visible {
            opacity: 1;
        }
        
        /* Header */
        .header {
            height: var(--header-height);
            background: white;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }
        
        .header-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .menu-toggle {
            background: var(--primary-very-light);
            border: none;
            font-size: 20px;
            color: var(--dark);
            cursor: pointer;
            width: 45px;
            height: 45px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            min-width: 44px;
            min-height: 44px;
        }
        
        .menu-toggle:hover {
            background: var(--primary);
            color: white;
        }
        
        .header-brand {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .brand-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
        }
        
        .brand-logo-img {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            
            
            
            overflow: hidden;
            
        }
        
        .brand-logo-img img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        
        .header-logo-text {
            font-size: 22px;
            font-weight: 800;
            color: var(--dark);
            display: none;
        }
        
        @media (min-width: 768px) {
            .header-logo-text {
                display: block;
                font-size: 26px;
            }
        }
        
        .header-logo-text .ai {
            color: var(--primary);
            background: rgba(20, 129, 255, 0.1);
            padding: 2px 6px;
            border-radius: 6px;
            margin-left: 5px;
        }
        
        .header-center {
            display: none;
        }
        
        @media (min-width: 992px) {
            .header-center {
                display: block;
                flex: 1;
                max-width: 500px;
                margin: 0 20px;
            }
        }
        
        @media (min-width: 1200px) {
            .header-center {
                max-width: 600px;
            }
        }
        
        .search-box {
            position: relative;
        }
        
        .search-box i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray);
            font-size: 18px;
        }
        
        .search-box input {
            width: 80%;
            padding: 14px 15px 14px 50px;
            border: 2px solid var(--border);
            border-radius: 10px;
            font-size: 16px;
            background: var(--primary-very-light);
            transition: all 0.3s;
        }
        
        .search-box input:focus {
            border-color: var(--primary);
            outline: none;
            background: white;
        }
        
        .header-right {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .header-hipaa {
            display: none;
            align-items: center;
            background: rgba(16, 185, 129, 0.1);
            border-radius: 8px;
            padding: 8px 12px;
            font-size: 0.8rem;
            color: #10b981;
            font-weight: 600;
        }
        
        @media (min-width: 768px) {
            .header-hipaa {
                display: flex;
            }
        }
        
        .header-hipaa i {
            margin-right: 6px;
        }
        
        .header-action {
            display: none;
        }
        
        @media (min-width: 480px) {
            .header-action {
                display: flex;
                position: relative;
                font-size: 20px;
                color: var(--gray);
                cursor: pointer;
                width: 45px;
                height: 45px;
                border-radius: 10px;
                align-items: center;
                justify-content: center;
                transition: all 0.3s;
                background: var(--primary-very-light);
                min-width: 44px;
                min-height: 44px;
            }
        }
        
        .header-action:hover {
            background: var(--primary);
            color: white;
        }
        
        .notification-badge {
            position: absolute;
            top: 5px;
            right: 5px;
            background: var(--danger);
            color: white;
            font-size: 11px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }
        
        .view-as-dropdown {
            position: relative;
        }
        
        .view-as-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 15px;
            background: var(--primary-very-light);
            border: 2px solid var(--border);
            border-radius: 10px;
            font-weight: 600;
            color: var(--dark);
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
            white-space: nowrap;
            min-height: 44px;
        }
        
        @media (min-width: 768px) {
            .view-as-btn {
                padding: 12px 20px;
                font-size: 16px;
            }
        }
        
        .view-as-btn:hover {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .view-as-btn i:last-child {
            font-size: 12px;
        }
        
        .view-as-menu {
            position: absolute;
            top: 100%;
            right: 0;
            width: 280px;
            max-width: 90vw;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            z-index: 1000;
            display: none;
            margin-top: 10px;
            overflow: hidden;
        }
        
        .view-as-menu.show {
            display: block;
        }
        
        .view-as-item {
            padding: 15px 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            color: var(--dark);
            text-decoration: none;
            transition: all 0.3s;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            min-height: 44px;
        }
        
        .view-as-item:hover {
            background: var(--primary-very-light);
            color: var(--primary);
        }
        
        .view-as-item.active {
            background: var(--primary-very-light);
            color: var(--primary);
            font-weight: 600;
        }
        
        .view-as-item i {
            width: 20px;
            font-size: 18px;
        }
        
        .user-dropdown {
            position: relative;
        }
        
        .user-profile {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            padding: 8px 12px;
            border-radius: 10px;
            transition: all 0.3s;
            background: var(--primary-very-light);
            min-height: 44px;
        }
        
        @media (min-width: 480px) {
            .user-profile {
                padding: 10px 15px;
                gap: 12px;
            }
        }
        
        .user-profile:hover {
            background: var(--primary);
            color: white;
        }
        
        .user-profile:hover .user-name,
        .user-profile:hover .user-role {
            color: white;
        }
        
        .user-avatar {
            width: 40px;
            height: 40px;
            background: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 16px;
            min-width: 40px;
            min-height: 40px;
        }
        
        .user-info {
            display: none;
        }
        
        @media (min-width: 768px) {
            .user-info {
                display: flex;
                flex-direction: column;
            }
        }
        
        .user-name {
            font-weight: 600;
            color: var(--dark);
            font-size: 0.9rem;
        }
        
        @media (min-width: 768px) {
            .user-name {
                font-size: 1rem;
            }
        }
        
        .user-role {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        .dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            width: 250px;
            max-width: 90vw;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            z-index: 1000;
            display: none;
            margin-top: 10px;
            overflow: hidden;
        }
        
        .dropdown-menu.show {
            display: block;
        }
        
        .dropdown-header {
            padding: 20px;
            background: var(--primary-very-light);
            border-bottom: 1px solid var(--border);
        }
        
        .dropdown-item {
            padding: 15px 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            color: var(--dark);
            text-decoration: none;
            transition: all 0.3s;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            min-height: 44px;
        }
        
        .dropdown-item:hover {
            background: var(--primary-very-light);
            color: var(--primary);
        }
        
        .dropdown-item i {
            width: 20px;
            font-size: 18px;
        }
        
        /* Sidebar - Mobile First */
        .sidebar {
            width: 100%;
            padding-top: 40px;
            max-width: var(--sidebar-width);
            background: white;
            border-right: 1px solid var(--border);
            position: fixed;
            top: var(--header-height);
            left: 0;
            bottom: 0;
            overflow-y: auto;
            transition: transform 0.3s ease;
            z-index: 999;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
            transform: translateX(-100%);
        }
        
        .sidebar.mobile-open {
            transform: translateX(0);
        }
        
        .sidebar-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 998;
            display: none;
        }
        
        .sidebar-backdrop.active {
            display: block;
        }
        
        @media (min-width: 992px) {
            .sidebar {
                transform: translateX(0);
            }
            
            .sidebar.collapsed {
                transform: translateX(-100%);
            }
            
            .sidebar-backdrop {
                display: none !important;
            }
        }
        
        .sidebar-menu {
            padding: 20px 0;
        }
        
        .menu-section {
            margin-bottom: 25px;
            padding: 0 15px;
        }
        
        @media (min-width: 768px) {
            .menu-section {
                padding: 0 20px;
            }
        }
        
        .menu-title {
            font-size: 12px;
            font-weight: 600;
            color: var(--gray);
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 0 0 10px;
            margin-bottom: 12px;
            border-bottom: 1px solid var(--border);
        }
        
        .menu-items {
            list-style: none;
        }
        
        .menu-item {
            margin-bottom: 6px;
        }
        
        .menu-link {
            display: flex;
            align-items: center;
            padding: 14px 15px;
            color: var(--dark);
            text-decoration: none;
            transition: all 0.3s;
            border-radius: 8px;
            position: relative;
            min-height: 44px;
        }
        
        @media (min-width: 768px) {
            .menu-link {
                padding: 16px 20px;
            }
        }
        
        .menu-link:hover {
            background: rgba(20, 129, 255, 0.05);
            color: var(--primary);
            transform: translateX(5px);
        }
        
        .menu-link.active {
            background: rgba(20, 129, 255, 0.1);
            color: var(--primary);
            font-weight: 600;
        }
        
        .menu-link.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: var(--primary);
            border-radius: 0 4px 4px 0;
        }
        
        .menu-icon {
            width: 24px;
            margin-right: 12px;
            font-size: 18px;
            text-align: center;
        }
        
        @media (min-width: 768px) {
            .menu-icon {
                font-size: 20px;
                margin-right: 15px;
            }
        }
        
        .menu-text {
            flex: 1;
            font-size: 0.95rem;
        }
        
        @media (min-width: 768px) {
            .menu-text {
                font-size: 1rem;
            }
        }
        
        .menu-badge {
            background: var(--primary);
            color: white;
            font-size: 11px;
            padding: 3px 8px;
            border-radius: 20px;
            font-weight: 600;
        }
        
        /* Main Content */
        .main-content {
            margin-left: 0;
            margin-top: var(--header-height);
            padding: 20px;
            min-height: calc(100vh - var(--header-height));
            transition: margin-left 0.3s ease;
            background: #f0f9ff;
        }
        
       @media (min-width: 992px) {
    .main-content {
        margin-left: var(--sidebar-width);
        padding: 30px;
    }
    
    .main-content.expanded {
        margin-left: 0;
    }
}
        
        /* ===== DASHBOARD COMPONENTS ===== */
        .dashboard-header {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 25px;
        }
        
        @media (min-width: 768px) {
            .dashboard-header {
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
            }
        }
        
        .dashboard-title-section h1 {
            font-size: 28px;
            color: var(--dark);
            font-weight: 700;
            margin-bottom: 5px;
        }
        
        @media (min-width: 768px) {
            .dashboard-title-section h1 {
                font-size: 32px;
            }
        }
        
        .dashboard-subtitle {
            color: var(--gray);
            font-size: 1rem;
        }
        
        .dashboard-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 18px;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            font-size: 15px;
            flex: 1;
            min-width: 140px;
            justify-content: center;
            min-height: 44px;
        }
        
        @media (min-width: 480px) {
            .action-btn {
                flex: 0 1 auto;
            }
        }
        
        .primary-btn {
            background: var(--primary);
            color: white;
        }
        
        .primary-btn:hover {
            transform: translateY(-2px);
            background: var(--primary-dark);
            box-shadow: 0 10px 20px rgba(20, 129, 255, 0.3);
        }
        
        .secondary-btn {
            background: white;
            color: var(--dark);
            border: 2px solid var(--border);
        }
        
        .secondary-btn:hover {
            background: var(--primary-very-light);
            border-color: var(--primary);
        }
        
        .hero-welcome {
            background: var(--primary);
            color: white;
            border-radius: 16px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 15px 30px rgba(20, 129, 255, 0.2);
        }
        
        @media (min-width: 768px) {
            .hero-welcome {
                padding: 35px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }
        
        .hero-content h1 {
            font-size: 1.8rem;
            margin-bottom: 10px;
            font-weight: 700;
        }
        
        @media (min-width: 768px) {
            .hero-content h1 {
                font-size: 2.2rem;
            }
        }
        
        .hero-content p {
            font-size: 1rem;
            opacity: 0.9;
            max-width: 600px;
        }
        
        @media (min-width: 768px) {
            .hero-content p {
                font-size: 1.2rem;
            }
        }
        
        .hero-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 25px;
            background: var(--stats-bg);
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            border: 1px solid var(--border);
        }
        
        @media (min-width: 768px) {
            .hero-stats {
                margin-top: 0;
                margin-left: 30px;
                min-width: 80px;
            }
        }
        
        .hero-stat {
            text-align: center;
        }
        
        .hero-stat-value {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 5px;
            color: var(--dark);
        }
        
        @media (min-width: 768px) {
            .hero-stat-value {
                font-size: 2.2rem;
            }
        }
        
        .hero-stat-label {
            font-size: 0.85rem;
            opacity: 0.9;
            color: var(--gray);
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            margin-bottom: 30px;
        }
        
        @media (min-width: 640px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (min-width: 1024px) {
            .stats-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        
        .stat-card {
            background: white;
            border-radius: 14px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s;
            border-top: 4px solid var(--primary);
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .stat-card.ai {
            border-top-color: var(--secondary);
        }
        
        .stat-card.patient {
            border-top-color: var(--accent);
        }
        
        .stat-card.billing {
            border-top-color: var(--warning);
        }
        
        .stat-card.tele {
            border-top-color: var(--info);
        }
        
        .stat-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .stat-icon {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            color: white;
        }
        
        .stat-icon.ai {
            background: var(--secondary);
        }
        
        .stat-icon.patient {
            background: var(--accent);
        }
        
        .stat-icon.billing {
            background: var(--warning);
        }
        
        .stat-icon.tele {
            background: var(--info);
        }
        
        .stat-value {
            font-size: 28px;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 5px;
        }
        
        @media (min-width: 768px) {
            .stat-value {
                font-size: 32px;
            }
        }
        
        .stat-label {
            color: var(--gray);
            font-size: 0.95rem;
        }
        
        .stat-change {
            font-size: 0.85rem;
            font-weight: 600;
        }
        
        .stat-change.positive {
            color: var(--accent);
        }
        
        .stat-change.negative {
            color: var(--danger);
        }
        
        .dashboard-sections {
            display: grid;
            grid-template-columns: 1fr;
            gap: 25px;
            margin-bottom: 30px;
        }
        
        @media (min-width: 1024px) {
            .dashboard-sections {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        .dashboard-section {
            background: white;
            border-radius: 16px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        @media (min-width: 768px) {
            .dashboard-section {
                padding: 30px;
            }
        }
        
        .section-header {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--primary-very-light);
        }
        
        @media (min-width: 480px) {
            .section-header {
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
            }
        }
        
        .section-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--dark);
        }
        
        @media (min-width: 768px) {
            .section-title {
                font-size: 1.5rem;
            }
        }
        
        .view-all {
            color: var(--primary);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            white-space: nowrap;
        }
        
        .ai-assistant {
            background: linear-gradient(135deg, var(--dark) 0%, #334155 100%);
            color: white;
            border-radius: 16px;
            padding: 25px;
            margin-bottom: 30px;
        }
        
        @media (min-width: 768px) {
            .ai-assistant {
                padding: 30px;
            }
        }
        
        .ai-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            margin-bottom: 25px;
        }
        
        @media (min-width: 768px) {
            .ai-header {
                flex-direction: row;
                text-align: left;
                align-items: center;
            }
        }
        
        .ai-avatar {
            width: 60px;
            height: 60px;
            background: var(--secondary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            margin-right: 0;
            margin-bottom: 15px;
        }
        
        @media (min-width: 768px) {
            .ai-avatar {
                margin-right: 20px;
                margin-bottom: 0;
            }
        }
        
        .ai-title {
            font-size: 1.6rem;
            font-weight: 700;
        }
        
        @media (min-width: 768px) {
            .ai-title {
                font-size: 1.8rem;
            }
        }
        
        .ai-subtitle {
            opacity: 0.8;
            font-size: 1rem;
        }
        
        .ai-actions {
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
        }
        
        @media (min-width: 640px) {
            .ai-actions {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (min-width: 1024px) {
            .ai-actions {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        
        .ai-action {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 20px;
            cursor: pointer;
            transition: all 0.3s;
            backdrop-filter: blur(10px);
            min-height: 44px;
        }
        
        .ai-action:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-3px);
        }
        
        .ai-action-icon {
            font-size: 22px;
            margin-bottom: 12px;
            color: #22d3ee;
        }
        
        .intake-options {
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
        }
        
        @media (min-width: 640px) {
            .intake-options {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (min-width: 1024px) {
            .intake-options {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        
        .intake-option {
            background: var(--primary-very-light);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s;
            cursor: pointer;
            border: 2px solid transparent;
            min-height: 44px;
        }
        
        .intake-option:hover {
            background: var(--primary);
            color: white;
            transform: translateY(-5px);
            border-color: var(--primary);
        }
        
        .intake-option:hover .intake-icon,
        .intake-option:hover .intake-title,
        .intake-option:hover .intake-desc {
            color: white;
        }
        
        .intake-icon {
            font-size: 28px;
            margin-bottom: 12px;
            color: var(--primary);
        }
        
        .intake-title {
            font-weight: 600;
            margin-bottom: 6px;
            color: var(--dark);
            font-size: 1rem;
        }
        
        .intake-desc {
            font-size: 0.85rem;
            color: var(--gray);
        }
        
        .billing-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }
        
        @media (min-width: 768px) {
            .billing-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        .billing-card {
            background: white;
            border-radius: 14px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .billing-amount {
            font-size: 32px;
            font-weight: 700;
            color: var(--dark);
            margin: 15px 0;
        }
        
        .process-payment-btn {
            width: 100%;
            padding: 14px;
            background: var(--accent);
            color: white;
            border: none;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 15px;
            min-height: 44px;
        }
        
        .process-payment-btn:hover {
            transform: translateY(-2px);
            background: #0da271;
            box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
        }
        
        .telemedicine-suite {
            background: white;
            border-radius: 16px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        @media (min-width: 768px) {
            .telemedicine-suite {
                padding: 30px;
            }
        }
        
        .tele-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-top: 20px;
        }
        
        @media (min-width: 640px) {
            .tele-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        @media (min-width: 1024px) {
            .tele-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        
        .tele-feature {
            background: var(--primary-very-light);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s;
            cursor: pointer;
            border: 2px solid transparent;
            min-height: 44px;
        }
        
        .tele-feature:hover {
            background: var(--primary);
            color: white;
            transform: translateY(-5px);
            border-color: var(--primary);
        }
        
        .tele-feature:hover .tele-feature-icon,
        .tele-feature:hover .tele-feature-title,
        .tele-feature:hover .tele-feature-desc {
            color: white;
        }
        
        .tele-feature-icon {
            font-size: 28px;
            margin-bottom: 12px;
            color: var(--primary);
        }
        
        .tele-feature-title {
            font-weight: 600;
            margin-bottom: 6px;
            color: var(--dark);
            font-size: 0.95rem;
        }
        
        .tele-feature-desc {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        .mco-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        
        @media (min-width: 640px) {
            .mco-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        
        .mco-card {
            background: white;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            border: 2px solid var(--border);
            transition: all 0.3s;
            min-height: 44px;
        }
        
        .mco-card:hover {
            border-color: var(--primary);
            transform: translateY(-5px);
        }
        
        .mco-logo {
            height: 30px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .mco-name {
            font-weight: 600;
            text-align: center;
            color: var(--dark);
            font-size: 0.85rem;
        }
        
        .stats-chart {
            height: 250px;
            display: flex;
            align-items: flex-end;
            gap: 10px;
            margin-top: 25px;
            padding: 0 10px;
        }
        
        @media (min-width: 768px) {
            .stats-chart {
                height: 80px;
                gap: 20px;
                padding: 0 20px;
            }
        }
        
        .chart-bar {
            flex: 1;
            background: var(--primary);
            border-radius: 6px 6px 0 0;
            position: relative;
            min-height: 20px;
        }
        
        .chart-label {
            position: absolute;
            bottom: -25px;
            left: 0;
            right: 0;
            text-align: center;
            color: var(--gray);
            font-size: 0.8rem;
        }
        
        .onboarding-section, .subscription-section {
            background: white;
            border-radius: 16px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            display: none;
        }
        
        .onboarding-steps, .subscription-plans {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            margin-top: 20px;
        }
        
        @media (min-width: 768px) {
            .onboarding-steps, .subscription-plans {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (min-width: 1024px) {
            .subscription-plans {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        .onboarding-step, .subscription-plan {
            background: var(--primary-very-light);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            min-height: 44px;
        }
        
        .step-number {
            width: 35px;
            height: 35px;
            background: var(--primary);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
            font-weight: 600;
        }
        
        .subscription-section {
            background: white;
            border-radius: 16px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            display: none;
        }
        
        .subscription-plans {
            display: grid;
            grid-template-columns: 1fr;
            gap: 25px;
            margin-top: 20px;
        }
        
        @media (min-width: 768px) {
            .subscription-plans {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (min-width: 1200px) {
            .subscription-plans {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        .subscription-plan {
            background: white;
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            border: 2px solid var(--border);
            position: relative;
            overflow: hidden;
            min-height: 44px;
        }
        
        .subscription-plan:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(20, 129, 255, 0.15);
            border-color: var(--primary);
        }
        
        .subscription-plan.featured {
            border-color: var(--primary);
            background: linear-gradient(135deg, #f8fafc 0%, #e3f2ff 100%);
            border-width: 3px;
            position: relative;
        }
        
        .subscription-plan.featured::before {
            content: '⭐ RECOMMENDED';
            position: absolute;
            top: 15px;
            right: -35px;
            background: var(--primary);
            color: white;
            padding: 5px 35px;
            font-size: 0.8rem;
            font-weight: 700;
            transform: rotate(45deg);
            transform-origin: center;
            z-index: 2;
        }
        
        .subscription-plan.featured-enterprise {
            border-color: var(--secondary);
            background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
            border-width: 3px;
        }
        
        .plan-badge {
            display: inline-block;
            background: var(--primary);
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 15px;
        }
        
        .plan-badge.enterprise {
            background: var(--secondary);
        }
        
        .plan-name {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--dark);
            margin-bottom: 10px;
        }
        
        .plan-price {
            font-size: 2.8rem;
            font-weight: 800;
            color: var(--primary);
            margin-bottom: 5px;
            line-height: 1;
        }
        
        .subscription-plan.featured .plan-price {
            color: var(--primary);
        }
        
        .subscription-plan.featured-enterprise .plan-price {
            color: var(--secondary);
        }
        
        .plan-period {
            font-size: 1rem;
            color: var(--gray);
            margin-bottom: 20px;
        }
        
        .plan-setup-fee {
            font-size: 1rem;
            color: var(--warning);
            font-weight: 600;
            margin-bottom: 20px;
            padding: 10px;
            background: rgba(245, 158, 11, 0.1);
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .plan-setup-fee .free {
            color: var(--success);
        }
        
        .plan-message {
            font-size: 0.95rem;
            color: var(--dark);
            font-weight: 500;
            margin-bottom: 25px;
            padding: 12px;
            background: rgba(20, 129, 255, 0.08);
            border-radius: 8px;
            border-left: 4px solid var(--primary);
        }
        
        .plan-features-section {
            margin-bottom: 25px;
        }
        
        .section-title-small {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--dark);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .plan-features-list {
            list-style: none;
            margin-bottom: 20px;
        }
        
        .plan-feature {
            padding: 10px 0;
            color: var(--dark);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            font-size: 0.95rem;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            line-height: 1.4;
        }
        
        .plan-feature i {
            color: var(--success);
            margin-top: 3px;
            font-size: 0.9rem;
        }
        
        .plan-highlight {
            background: rgba(20, 129, 255, 0.1);
            padding: 12px;
            border-radius: 8px;
            margin: 15px 0;
            font-weight: 600;
            color: var(--primary);
            font-size: 0.9rem;
            border-left: 3px solid var(--primary);
        }
        
        .plan-timeline {
            background: var(--primary-very-light);
            border-radius: 10px;
            padding: 20px;
            margin-top: 20px;
            border-left: 4px solid var(--primary);
        }
        
        .timeline-title {
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--dark);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .timeline-days {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 10px;
        }
        
        .timeline-feature {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
            font-size: 0.9rem;
        }
        
        .timeline-feature i {
            color: var(--primary);
            font-size: 0.8rem;
        }
        
        .timeline-comparison {
            margin-top: 25px;
        }
        
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
            font-size: 0.85rem;
        }
        
        .comparison-table th {
            background: var(--primary-very-light);
            padding: 10px;
            text-align: left;
            font-weight: 600;
            color: var(--dark);
            border-bottom: 2px solid var(--border);
        }
        
        .comparison-table td {
            padding: 10px;
            border-bottom: 1px solid var(--border);
        }
        
        .comparison-table tr:hover {
            background: rgba(20, 129, 255, 0.03);
        }
        
        .comparison-highlight {
            background: rgba(20, 129, 255, 0.1);
            font-weight: 600;
        }
        
        .plan-cta {
            margin-top: 25px;
            padding-top: 25px;
            border-top: 2px solid var(--border);
        }
        
        .cta-button {
            width: 100%;
            padding: 16px;
            border-radius: 10px;
            font-weight: 700;
            font-size: 1.1rem;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 44px;
        }
        
        .cta-button.primary {
            background: var(--primary);
            color: white;
        }
        
        .cta-button.primary:hover {
            background: var(--primary-dark);
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(20, 129, 255, 0.3);
        }
        
        .cta-button.secondary {
            background: white;
            color: var(--dark);
            border: 2px solid var(--border);
        }
        
        .cta-button.secondary:hover {
            background: var(--primary-very-light);
            border-color: var(--primary);
            transform: translateY(-3px);
        }
        
        .cta-button.enterprise {
            background: var(--secondary);
            color: white;
        }
        
        .cta-button.enterprise:hover {
            background: #06a5c4;
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(6, 182, 212, 0.3);
        }
        
        .setup-checklist {
            background: rgba(16, 185, 129, 0.05);
            border-radius: 10px;
            padding: 20px;
            margin-top: 25px;
            border: 1px solid rgba(16, 185, 129, 0.2);
        }
        
        .checklist-title {
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--dark);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .checklist-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 10px;
            font-size: 0.9rem;
        }
        
        .checklist-item i {
            color: var(--success);
            margin-top: 2px;
            font-size: 0.9rem;
        }
        
        .plan-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 2000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .plan-modal.active {
            display: flex;
        }
        
        .modal-content {
            background: white;
            border-radius: 16px;
            max-width: 800px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            padding: 30px;
            position: relative;
        }
        
        .modal-close {
            position: absolute;
            top: 20px;
            right: 20px;
            background: var(--primary-very-light);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 20px;
            color: var(--dark);
            transition: all 0.3s;
            z-index: 10;
        }
        
        .modal-close:hover {
            background: var(--primary);
            color: white;
        }
        
        .modal-header {
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid var(--primary-very-light);
        }
        
        .modal-title {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 10px;
        }
        
        .modal-subtitle {
            color: var(--gray);
            font-size: 1.1rem;
        }
        
        .document-container {
            background: white;
            border-radius: 16px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            margin-bottom: 25px;
        }
        
        @media (min-width: 768px) {
            .document-container {
                padding: 35px;
            }
        }
        
        .document-header {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border);
        }
        
        @media (min-width: 768px) {
            .document-header {
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
            }
        }
        
        .document-title {
            font-size: 24px;
            color: var(--dark);
            font-weight: 700;
        }
        
        @media (min-width: 768px) {
            .document-title {
                font-size: 28px;
            }
        }
        
        .document-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        @media (min-width: 480px) {
            .document-actions {
                flex-direction: row;
            }
        }
        
        .document-logo {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--primary);
            text-align: center;
        }
        
        @media (min-width: 768px) {
            .document-logo {
                flex-direction: row;
                text-align: left;
            }
        }
        
        .document-logo-icon {
            width: 60px;
            height: 60px;
            background: var(--primary);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 28px;
            font-weight: 800;
            margin-right: 0;
            margin-bottom: 15px;
        }
        
        @media (min-width: 768px) {
            .document-logo-icon {
                margin-right: 20px;
                margin-bottom: 0;
            }
        }
        
        .document-logo-text {
            font-size: 28px;
            font-weight: 800;
            color: var(--dark);
        }
        
        @media (min-width: 768px) {
            .document-logo-text {
                font-size: 36px;
            }
        }
        
        .document-logo-text .ai {
            color: var(--primary);
            background: rgba(20, 129, 255, 0.1);
            padding: 2px 8px;
            border-radius: 6px;
        }
        
        /* ===== NEW PAGES STYLES ===== */
        .page-content {
            background: white;
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            margin-bottom: 30px;
        }
        
        .page-header {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--primary-very-light);
        }
        
        @media (min-width: 768px) {
            .page-header {
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
            }
        }
        
        .page-title {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--dark);
        }
        
        .page-subtitle {
            color: var(--gray);
            font-size: 1.1rem;
            margin-bottom: 25px;
        }
        
        .export-button {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 50px;
            padding: 15px 25px;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 10px 25px rgba(20, 129, 255, 0.3);
            z-index: 100;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s;
            min-width: 44px;
            min-height: 44px;
        }
        
        .export-button:hover {
            transform: translateY(-3px);
            background: var(--primary-dark);
            box-shadow: 0 15px 30px rgba(20, 129, 255, 0.4);
        }
        
        .export-menu {
            position: absolute;
            bottom: 70px;
            right: 0;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            display: none;
            flex-direction: column;
            min-width: 200px;
            overflow: hidden;
            z-index: 101;
        }
        
        .export-menu.show {
            display: flex;
        }
        
        .export-option {
            padding: 15px 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--dark);
            text-decoration: none;
            transition: all 0.3s;
            border-bottom: 1px solid var(--border);
            min-height: 44px;
        }
        
        .export-option:hover {
            background: var(--primary-very-light);
            color: var(--primary);
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            margin-bottom: 25px;
        }
        
        @media (min-width: 768px) {
            .form-row {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        .form-group-full {
            margin-bottom: 25px;
        }
        
        .form-group-full label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: var(--dark);
        }
        
        .form-group-full input,
        .form-group-full select,
        .form-group-full textarea {
            width: 100%;
            padding: 14px 18px;
            border: 2px solid var(--border);
            border-radius: 10px;
            font-size: 16px;
            transition: all 0.3s;
            background: white;
            min-height: 44px;
        }
        
        .form-group-full input:focus,
        .form-group-full select:focus,
        .form-group-full textarea:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 4px rgba(20, 129, 255, 0.1);
        }
        
        .form-section {
            margin-bottom: 35px;
            padding-bottom: 25px;
            border-bottom: 2px solid var(--primary-very-light);
        }
        
        .form-section-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--dark);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .checkbox-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 15px;
        }
        
        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 44px;
        }
        
        .checkbox-item input {
            width: 20px;
            height: 20px;
            min-width: 20px;
            min-height: 20px;
        }
        
        .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            margin-bottom: 20px;
        }
        
        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            min-width: 600px;
        }
        
        .data-table th {
            background: var(--primary-very-light);
            padding: 15px;
            text-align: left;
            font-weight: 600;
            color: var(--dark);
            border-bottom: 2px solid var(--border);
            white-space: nowrap;
        }
        
        .data-table td {
            padding: 15px;
            border-bottom: 1px solid var(--border);
            white-space: nowrap;
        }
        
        .data-table tr:hover {
            background: rgba(20, 129, 255, 0.02);
        }
        
        .table-actions {
            display: flex;
            gap: 10px;
        }
        
        .action-icon {
            width: 44px;
            height: 44px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            min-width: 44px;
            min-height: 44px;
        }
        
        .action-icon.download {
            background: rgba(20, 129, 255, 0.1);
            color: var(--primary);
        }
        
        .action-icon.print {
            background: rgba(20, 129, 255, 0.1);
            color: var(--primary);
        }
        
        .action-icon.edit {
            background: rgba(245, 158, 11, 0.1);
            color: var(--warning);
        }
        
        .action-icon.delete {
            background: rgba(239, 68, 68, 0.1);
            color: var(--danger);
        }
        
        .action-icon:hover {
            transform: translateY(-2px);
        }
        
        .cards-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            margin-top: 20px;
        }
        
        @media (min-width: 768px) {
            .cards-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (min-width: 1024px) {
            .cards-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        @media (min-width: 768px) and (max-width: 1023px) {
            .tablet-grid-2 {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .tablet-grid-3 {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        .feature-card {
            background: white;
            border-radius: 14px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            border-top: 4px solid var(--primary);
            transition: all 0.3s;
            min-height: 44px;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
            width: 60px;
            height: 60px;
            background: var(--primary);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            margin-bottom: 20px;
        }
        
        @media print {
            .header, .sidebar, .dashboard-actions, .menu-toggle, .header-actions, .user-profile, .view-as-dropdown, .export-button {
                display: none !important;
            }
            
            .main-content {
                margin: 0 !important;
                padding: 0 !important;
            }
            
            .document-container, .page-content {
                box-shadow: none !important;
                padding: 0 !important;
            }
            
            .no-print {
                display: none !important;
            }
            
            .print-logo {
                display: block !important;
                text-align: center;
                margin-bottom: 20px;
                padding-bottom: 20px;
                border-bottom: 2px solid var(--primary);
            }
            
            .print-logo-img {
                max-width: 120px;
                height: auto;
                margin: 0 auto 10px;
            }
            
            .print-logo-text {
                font-size: 24px;
                font-weight: 800;
                color: var(--dark);
            }
        }
        
        .mobile-chart {
            width: 100%;
            height: 250px;
            position: relative;
        }
        
        @media (max-width: 767px) {
            .mobile-chart {
                height: 200px;
            }
        }
        
        .ehr-integration-section {
            background: white;
            border-radius: 16px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .ehr-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            margin-top: 20px;
        }
        
        @media (min-width: 768px) {
            .ehr-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (min-width: 1024px) {
            .ehr-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        .ehr-system-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            border: 2px solid var(--border);
            transition: all 0.3s;
            text-align: center;
            min-height: 44px;
        }
        
        .ehr-system-card:hover {
            border-color: var(--primary);
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .ehr-system-card.hipaa-compliant {
            border-color: #10b981;
            background: rgba(16, 185, 129, 0.05);
        }
        
        .ehr-system-icon {
            width: 50px;
            height: 50px;
            background: var(--primary);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            margin: 0 auto 15px;
        }
        
        .api-doc-section {
            background: white;
            border-radius: 16px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .api-endpoint {
            background: var(--primary-very-light);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            border-left: 4px solid var(--primary);
        }
        
        .api-method {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 6px;
            font-weight: 600;
            font-size: 0.8rem;
            margin-right: 10px;
        }
        
        .api-method.get {
            background: rgba(16, 185, 129, 0.2);
            color: #10b981;
        }
        
        .api-method.post {
            background: rgba(20, 129, 255, 0.2);
            color: var(--primary);
        }
        
        .api-method.put {
            background: rgba(245, 158, 11, 0.2);
            color: var(--warning);
        }
        
        .api-method.delete {
            background: rgba(239, 68, 68, 0.2);
            color: var(--danger);
        }
        
        .recent-docs-section {
            background: white;
            border-radius: 16px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .docs-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
            margin-top: 20px;
        }
        
        @media (min-width: 768px) {
            .docs-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (min-width: 1024px) {
            .docs-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        .doc-card {
            background: var(--primary-very-light);
            border-radius: 12px;
            padding: 20px;
            border: 2px solid transparent;
            transition: all 0.3s;
            min-height: 44px;
        }
        
        .doc-card:hover {
            border-color: var(--primary);
            transform: translateY(-5px);
        }
        
        .doc-icon {
            width: 50px;
            height: 50px;
            background: var(--primary);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            margin-bottom: 15px;
        }
        
        .doc-actions {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        
        .doc-action-btn {
            padding: 8px 15px;
            background: white;
            border: 2px solid var(--border);
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            flex: 1;
            text-align: center;
            min-height: 44px;
        }
        
        .doc-action-btn:hover {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .settings-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 25px;
            border-bottom: 2px solid var(--primary-very-light);
            padding-bottom: 15px;
        }
        
        .settings-tab {
            padding: 12px 20px;
            background: var(--primary-very-light);
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid transparent;
            min-height: 44px;
        }
        
        .settings-tab.active {
            background: var(--primary);
            color: white;
        }
        
        .settings-tab:hover:not(.active) {
            background: rgba(20, 129, 255, 0.2);
            border-color: var(--primary);
        }
        
        .settings-content {
            display: none;
        }
        
        .settings-content.active {
            display: block;
        }
        
        .mfa-section {
            background: rgba(16, 185, 129, 0.05);
            border-radius: 12px;
            padding: 20px;
            margin: 20px 0;
            border: 1px solid rgba(16, 185, 129, 0.2);
        }
        
        .mfa-status {
            display: inline-flex;
            align-items: center;
            padding: 8px 15px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.9rem;
            margin-left: 15px;
        }
        
        .mfa-status.active {
            background: rgba(16, 185, 129, 0.2);
            color: #10b981;
        }
        
        .mfa-status.inactive {
            background: rgba(239, 68, 68, 0.2);
            color: var(--danger);
        }
        
        .delete-account-warning {
            background: rgba(239, 68, 68, 0.05);
            border: 2px solid rgba(239, 68, 68, 0.2);
            border-radius: 12px;
            padding: 25px;
            margin: 25px 0;
        }
        
        .delete-btn {
            background: var(--danger);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            min-height: 44px;
        }
        
        .delete-btn:hover {
            background: #dc2626;
            transform: translateY(-2px);
        }
        
        .hipaa-footer {
            background: white;
            border-top: 1px solid var(--border);
            padding: 20px;
            text-align: center;
            color: var(--gray);
            font-size: 0.9rem;
            margin-top: 30px;
        }
        
        .hipaa-footer-badge {
            display: inline-flex;
            align-items: center;
            background: #10b981;
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        
        .recent-patients-section {
            background: white;
            border-radius: 16px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .patients-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
            margin-top: 20px;
        }
        
        @media (min-width: 768px) {
            .patients-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (min-width: 1024px) {
            .patients-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        .patient-card {
            background: var(--primary-very-light);
            border-radius: 12px;
            padding: 20px;
            border: 2px solid transparent;
            transition: all 0.3s;
        }
        
        .patient-card:hover {
            border-color: var(--primary);
            transform: translateY(-5px);
        }
        
        .patient-icon {
            width: 50px;
            height: 50px;
            background: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            margin-bottom: 15px;
        }
        
        .patient-actions {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        
        .patient-action-btn {
            padding: 8px 15px;
            background: white;
            border: 2px solid var(--border);
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            flex: 1;
            text-align: center;
            font-size: 0.85rem;
        }
        
        .patient-action-btn:hover {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .patient-action-btn.download {
            background: rgba(20, 129, 255, 0.1);
            border-color: var(--primary);
            color: var(--primary);
        }
        
        .patient-action-btn.download:hover {
            background: var(--primary);
            color: white;
        }
        
        .recent-appointments-section {
            background: white;
            border-radius: 16px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .appointments-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
            margin-top: 20px;
        }
        
        @media (min-width: 768px) {
            .appointments-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (min-width: 1024px) {
            .appointments-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        .appointment-card {
            background: var(--primary-very-light);
            border-radius: 12px;
            padding: 20px;
            border: 2px solid transparent;
            transition: all 0.3s;
        }
        
        .appointment-card:hover {
            border-color: var(--primary);
            transform: translateY(-5px);
        }
        
        .appointment-icon {
            width: 50px;
            height: 50px;
            background: var(--primary);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            margin-bottom: 15px;
        }
        
        .appointment-actions {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        
        .appointment-action-btn {
            padding: 8px 15px;
            background: white;
            border: 2px solid var(--border);
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            flex: 1;
            text-align: center;
            font-size: 0.85rem;
        }
        
        .appointment-action-btn:hover {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .appointment-action-btn.start-call {
            background: rgba(16, 185, 129, 0.1);
            border-color: #10b981;
            color: #10b981;
        }
        
        .appointment-action-btn.start-call:hover {
            background: #10b981;
            color: white;
        }
        
        .appointment-action-btn.reschedule {
            background: rgba(245, 158, 11, 0.1);
            border-color: var(--warning);
            color: var(--warning);
        }
        
        .appointment-action-btn.reschedule:hover {
            background: var(--warning);
            color: white;
        }
        
        .status-badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-left: 10px;
        }
        
        .status-badge.completed {
            background: rgba(16, 185, 129, 0.1);
            color: #10b981;
        }
        
        .status-badge.pending {
            background: rgba(245, 158, 11, 0.1);
            color: var(--warning);
        }
        
        .status-badge.upcoming {
            background: rgba(20, 129, 255, 0.1);
            color: var(--primary);
        }
        
        .status-badge.urgent {
            background: rgba(239, 68, 68, 0.1);
            color: var(--danger);
        }
        
        .brand-logo-img {
            width: 80px;
            height: 80px;
            
            
            display: flex;
            align-items: center;
            justify-content: center;
            
            
            
            overflow: hidden;
        }
        
        .brand-logo-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .logo-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 2000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .logo-modal.active {
            display: flex;
        }
        
        .logo-modal-content {
            background: white;
            border-radius: 16px;
            max-width: 500px;
            width: 100%;
            padding: 30px;
            position: relative;
        }
        
        .logo-modal-close {
            position: absolute;
            top: 20px;
            right: 20px;
            background: var(--primary-very-light);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 20px;
            color: var(--dark);
            transition: all 0.3s;
            z-index: 10;
        }
        
        .logo-modal-close:hover {
            background: var(--primary);
            color: white;
        }
        
        .logo-preview {
            width: 150px;
            height: 150px;
            background: var(--primary-very-light);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            border: 2px dashed var(--border);
            overflow: hidden;
        }
        
        .logo-preview img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        .logo-preview-text {
            font-size: 48px;
            font-weight: 800;
            color: var(--primary);
        }
        
        .print-logo {
            display: none;
        }
        
        /* Notification System */
        .notification {
            position: fixed;
            top: 90px;
            right: 20px;
            left: 20px;
            background: var(--primary);
            color: white;
            padding: 15px 20px;
            border-radius: 10px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            z-index: 10000;
            display: flex;
            align-items: center;
            gap: 12px;
            max-width: 100%;
            animation: slideIn 0.3s ease;
        }
        
        .notification.success {
            background: #10b981;
        }
        
        .notification.error {
            background: #ef4444;
        }
        
        .notification.info {
            background: #0ea5e9;
        }
        
        .notification.warning {
            background: #f59e0b;
        }
        
        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        /* Session timeout warning */
        .session-warning {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 20000;
        }
        
        .session-warning-content {
            background: white;
            border-radius: 16px;
            padding: 30px;
            max-width: 400px;
            width: 90%;
            text-align: center;
        }
        
        .session-warning h2 {
            color: var(--danger);
            margin-bottom: 15px;
        }
        
        .session-warning p {
            color: var(--gray);
            margin-bottom: 25px;
        }
        
        .session-timer {
            font-size: 2rem;
            font-weight: 700;
            color: var(--danger);
            margin: 20px 0;
        }
      /* Add this to your existing CSS */
.onboarding-step {
    position: relative;
    overflow: hidden;
}

.onboarding-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s;
}

.onboarding-step:hover::before {
    left: 100%;
}

.onboarding-step.completed {
    background: #f0f9ff !important;
    border-color: #bfdbfe !important;
    opacity: 0.8;
}
      /* ONBOARDING BUTTON EFFECTS - ADD TO YOUR STYLE SECTION */
.onboarding-step {
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

.onboarding-step:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.2) !important;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: white !important;
}

.onboarding-step:hover .step-number {
    background: white !important;
    color: #3b82f6 !important;
}

.onboarding-step:hover h3,
.onboarding-step:hover p {
    color: white !important;
}

.onboarding-step:hover .hipaa-badge {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border-color: white !important;
}

.onboarding-step:active {
    transform: translateY(0) !important;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3) !important;
}
      /* BILLING HISTORY & SUBSCRIPTION MODAL STYLES */
.billing-modal-content {
    max-height: 80vh;
    overflow-y: auto;
}

.billing-summary-card {
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    color: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.current-plan-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    margin-bottom: 12px;
}

.plan-price {
    font-size: 36px;
    font-weight: 700;
    margin: 8px 0;
}

.plan-price span {
    font-size: 16px;
    opacity: 0.9;
    font-weight: 400;
}

.billing-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.billing-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.billing-table th {
    background: #f8fafc;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: #475569;
    border-bottom: 2px solid #e2e8f0;
}

.billing-table td {
    padding: 16px;
    border-bottom: 1px solid #f1f5f9;
}

.billing-table tr:hover {
    background: #f8fafc;
}

.status-paid {
    background: #d1fae5;
    color: #065f46;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-pending {
    background: #fef3c7;
    color: #92400e;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.plan-card {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin: 10px 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.plan-card:hover {
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.1);
}

.plan-card.selected {
    border-color: #3b82f6;
    background: #f0f9ff;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.plan-features li {
    padding: 6px 0;
    color: #64748b;
    display: flex;
    align-items: center;
}

.plan-features li:before {
    content: "✓";
    color: #10b981;
    margin-right: 10px;
    font-weight: bold;
}

.upgrade-btn, .cancel-btn {
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    width: 100%;
    margin-top: 10px;
}

.upgrade-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.upgrade-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(16, 185, 129, 0.3);
}

.cancel-btn {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.cancel-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.billing-details {
    background: #f8fafc;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

.payment-method {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding: 16px;
    border-radius: 8px;
    margin: 10px 0;
    border: 1px solid #e2e8f0;
}

.credit-card-icon {
    width: 40px;
    height: 40px;
    background: #3b82f6;
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
}

.download-btn:hover {
    background: #e2e8f0;
}

/* Modal animations */
@keyframes billingModalSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.billing-modal {
    animation: billingModalSlideUp 0.3s ease-out;
}
      @keyframes slideInTop {
    from {
        transform: translate(-50%, -30px);
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}
      /* ===== MOBILE HEADER & DASHBOARD FIXES ===== */
@media (max-width: 768px) {
    /* HEADER FIXES */
    .header {
        flex-wrap: wrap !important;
        padding: 12px 16px !important;
        height: auto !important;
        min-height: 70px;
    }
    
    .header-left {
        width: auto !important;
        flex: 0 0 auto;
    }
    
    .header-hipaa span {
        display: none;
    }
    
    .header-hipaa i {
        margin-right: 0;
        font-size: 1.1rem;
    }
    
    .header-center {
        order: 3;
        width: 100% !important;
        margin: 10px 0 0 0 !important;
        padding: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .search-box {
        width: 100% !important;
        max-width: 100% !important;
        background: white !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
    }
    
    .search-box input {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .header-right {
        margin-left: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    .view-as-btn span {
        display: none;
    }
    
    .user-info {
        display: none !important;
    }
    
    .user-avatar {
        width: 35px !important;
        height: 35px !important;
    }
    
    .notification-bell {
        margin-right: 4px !important;
    }
    
    /* NOTIFICATION BADGE FIX */
    .notification-badge {
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 18px;
        height: 18px;
        font-size: 11px;
        padding: 0 4px;
    }
    
    /* STATS CARDS FIX */
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 0 4px !important;
    }
    
    .stat-card {
        padding: 16px !important;
        margin: 0 !important;
    }
    
    .stat-value {
        font-size: 1.5rem !important;
    }
    
    /* TABLE FIX */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        min-width: 600px !important;
    }
    
    /* DASHBOARD SECTIONS FIX */
    .dashboard-section {
        padding: 16px !important;
        margin: 12px 8px !important;
    }
    
    .section-header {
        flex-wrap: wrap !important;
    }
    
    .section-header h2 {
        font-size: 1.1rem !important;
    }
    
    /* BUTTON FIX */
    .action-buttons {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .btn {
        padding: 10px 16px !important;
        font-size: 0.9rem !important;
    }
    
    /* TEXT OVERFLOW FIX */
    .stat-label, 
    .card-title, 
    .patient-name {
        white-space: normal !important;
        word-break: break-word !important;
    }
}
      /* ===== DASHBOARD MOBILE FIXES ===== */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: -280px;
        transition: left 0.3s ease;
        z-index: 1000;
    }
    
    .sidebar.mobile-open {
        left: 0;
    }
    
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 15px !important;
    }
    
    .header {
        padding: 10px 15px !important;
    }
    
    .header-center {
        display: none; /* Hide search on mobile */
    }
    
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
    
    .menu-toggle {
        display: block !important;
    }
}
      /* ===== HEADER BUTTONS FIX ===== */
@media (max-width: 768px) {
    /* Fix header layout */
    .header {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 12px !important;
        width: 100% !important;
        overflow: visible !important;
    }
    
    /* Hide non-essential elements */
    .header-hipaa {
        display: none !important;
    }
    
    .view-as-btn span {
        display: none !important;
    }
    
    .view-as-btn i {
        margin-right: 0 !important;
    }
    
    .user-info {
        display: none !important;
    }
    
    /* Make header right section fit */
    .header-right {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }
    
    /* Compact user avatar */
    .user-avatar {
        width: 35px !important;
        height: 35px !important;
        font-size: 14px !important;
    }
    
    /* Ensure menu toggle is visible */
    .menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        background: var(--primary) !important;
        color: white !important;
        border-radius: 8px !important;
        border: none !important;
        font-size: 18px !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }
    
    /* Make brand/logo smaller if needed */
    .header-brand {
        max-width: 120px !important;
        overflow: hidden !important;
    }
    
    .header-brand img {
        max-height: 30px !important;
        width: auto !important;
    }
}
      /* ===== MOBILE HEADER FIXES ===== */
@media (max-width: 768px) {
    /* Hide view-as dropdown on mobile only */
    .view-as-dropdown {
        display: none !important;
    }
    
    /* Keep search bar visible */
    .header-center {
        display: block !important;
        width: 100% !important;
        order: 3;
        margin-top: 10px;
        padding: 0 10px !important;
    }
    
    .search-box {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .search-box input {
        width: 100% !important;
        font-size: 14px !important;
        padding: 10px 15px !important;
    }
    
    /* Keep user dropdown compact */
    .user-info {
        display: none !important;
    }
    
    .user-avatar {
        width: 35px !important;
        height: 35px !important;
    }
}

/* Keep view-as visible on desktop */
@media (min-width: 769px) {
    .view-as-dropdown {
        display: block !important;
    }
}
      /* ===== DASHBOARD MOBILE OPTIMIZATION ===== */
/* iPhone 12 mini, SE (small screens) */
@media (max-width: 375px) {
    .header {
        padding: 8px 10px !important;
    }
    
    .header-brand img {
        max-height: 25px !important;
    }
    
    .header-hipaa span {
        display: none !important;
    }
    
    .header-hipaa i {
        font-size: 14px !important;
    }
    
    .user-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }
    
    .user-info {
        display: none !important;
    }
    
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    .stat-card {
        padding: 12px !important;
    }
    
    .menu-text {
        font-size: 13px !important;
    }
}

/* iPhone 11, larger phones */
@media (min-width: 376px) and (max-width: 428px) {
    .header {
        padding: 10px 15px !important;
    }
    
    .header-brand img {
        max-height: 35px !important;
    }
    
    .user-avatar {
        width: 38px !important;
        height: 38px !important;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Tablets */
@media (min-width: 429px) and (max-width: 768px) {
    .header-brand img {
        max-height: 40px !important;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Hide view-as dropdown on mobile (you already have this) */
@media (max-width: 768px) {
    .view-as-dropdown {
        display: none !important;
    }
}
      /* ===== DASHBOARD FIX FOR IPHONE 12 MINI ===== */
@media (max-width: 375px) {
    /* Fix stats grid - make them stack vertically */
    .stats-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 5px !important;
    }
    
    /* Make stat cards full width */
    .stat-card {
        width: 100% !important;
        margin: 0 !important;
        padding: 15px !important;
    }
    
    /* Adjust stat values to fit */
    .stat-value {
        font-size: 20px !important;
    }
    
    .stat-label {
        font-size: 12px !important;
    }
    
    /* Fix header */
    .header {
        padding: 8px 10px !important;
    }
    
    .header-brand img {
        max-height: 25px !important;
    }
    
    /* Hide less important elements */
    .header-hipaa span {
        display: none !important;
    }
    
    .user-info {
        display: none !important;
    }
    
    /* Make user avatar smaller */
    .user-avatar {
        width: 30px !important;
        height: 30px !important;
        font-size: 11px !important;
    }
    
    /* Adjust menu items if needed */
    .menu-item a {
        padding: 10px !important;
    }
    
    .menu-text {
        font-size: 13px !important;
    }
}

/* Keep iPhone 11 layout as is */
@media (min-width: 376px) and (max-width: 428px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
      /* ===== DASHBOARD TOP STATS FIX FOR IPHONE 12 MINI ===== */
@media (max-width: 375px) {
    /* Target the stats container */
    .stats-grid,
    .dashboard-stats,
    [class*="stat"] {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Stack vertically */
        gap: 10px !important;
    }
    
    /* Make each stat card full width */
    .stat-card,
    [class*="stat-card"] {
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    /* Adjust the numbers */
    .stat-value,
    [class*="stat-value"] {
        font-size: 22px !important;
        font-weight: 700 !important;
    }
    
    /* Adjust labels */
    .stat-label,
    [class*="stat-label"] {
        font-size: 14px !important;
    }
    
    /* Make icons smaller if needed */
    .stat-icon,
    [class*="stat-icon"] {
        width: 40px !important;
        height: 40px !important;
    }
    
    .stat-icon i {
        font-size: 18px !important;
    }
}

/* Keep 2 columns for iPhone 11 */
@media (min-width: 376px) and (max-width: 428px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
}
      /* MAKE AI INTAKE MODAL MATCH ONBOARDING */
#aiIntakeModal {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
}

#aiIntakeModal .modal-content {
    background: white !important;
    border-radius: 16px !important;
    padding: 30px !important;
    max-width: 600px !important;
    width: 90% !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    border: none !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
}

/* Style the form inside */
#aiIntakeModal .modal-header {
    margin-bottom: 25px !important;
}

#aiIntakeModal .modal-title {
    color: #1e293b !important;
    font-size: 24px !important;
    font-weight: 700 !important;
}

#aiIntakeModal .modal-subtitle {
    color: #64748b !important;
    font-size: 16px !important;
}

/* Style form elements to match */
#aiIntakeModal input,
#aiIntakeModal select,
#aiIntakeModal textarea {
    width: 100% !important;
    padding: 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    margin-top: 5px !important;
}

#aiIntakeModal label {
    font-weight: 500 !important;
    color: #1e293b !important;
    display: block !important;
    margin-bottom: 5px !important;
}

/* Style buttons */
#aiIntakeModal .action-btn {
    background: #3b82f6 !important;
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

#aiIntakeModal .action-btn:hover {
    background: #2563eb !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

/* Photo upload section */
#aiIntakeModal #intakePhotoPreview {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    background: #f0f9ff !important;
    border: 3px solid #3b82f6 !important;
    margin: 0 auto 15px !important;
}

/* Close button */
#aiIntakeModal .modal-close {
    position: absolute !important;
    top: 20px !important;
    right: -5px !important;
    font-size: 28px !important;
    color: #94a3b8 !important;
    background: none !important;
    border: none !important;
}

#aiIntakeModal .modal-close:hover {
    color: #1e293b !important;
}
      /* Detailed Chart Styles */
.chart-detailed {
    background: #f8fafc;
    border-radius: 20px;
    padding: 25px;
    margin: 20px 0;
    border: 1px solid #e2e8f0;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.chart-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.chart-legend {
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: #64748b;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.chart-container-detailed {
    display: flex;
    gap: 10px;
    height: 200px;
    margin-bottom: 10px;
}

.chart-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 11px;
    color: #64748b;
    text-align: right;
    padding-right: 10px;
    width: 40px;
}

.chart-bars-detailed {
    display: flex;
    flex: 1;
    justify-content: space-around;
    align-items: flex-end;
    gap: 5px;
}

.bar-group-detailed {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.bars {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 3px;
    height: 100%;
    align-items: flex-end;
}

.bar {
    width: 30px;
    border-radius: 6px 6px 0 0;
    transition: height 0.3s;
    cursor: pointer;
    position: relative;
}

.bar.current {
    background: linear-gradient(180deg, #3b82f6, #2563eb);
}

.bar.previous {
    background: #cbd5e1;
}

.bar:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

.bar:hover::after {
    content: attr(title);
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 10;
}

.bar-label {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.bar-value {
    font-size: 11px;
    color: #3b82f6;
    font-weight: 600;
}

.chart-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
    font-size: 13px;
    color: #64748b;
}

.chart-footer i {
    margin-right: 5px;
    color: #3b82f6;
}
      /* Target the actual export button class */
.export-button {
    width: auto !important;
    min-width: 100px !important;
    max-width: 150px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    background: #3b82f6 !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    display: inline-block !important;
    white-space: nowrap !important;
}

/* Also target by ID just in case */
#exportButton {
    width: auto !important;
    min-width: 100px !important;
    max-width: 150px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
}
      /* FORCE EXPORT BUTTON SIZE */
button.export-button,
#exportButton,
button[id="exportButton"],
button[class*="export"] {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: 40px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    background-color: #3b82f6 !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    line-height: normal !important;
}

/* Fix any parent that might be stretching it */
.dashboard-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
}
     /* TELEMEDICINE MODALS - COMPLETE OVERRIDE */
#telemedicineSuite .modal,
.telemedicine-modal,
div[id*="telemedicine"] .modal,
div[class*="telemedicine"] .modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#telemedicineSuite .modal > div,
.telemedicine-modal > div,
div[id*="telemedicine"] .modal > div,
div[class*="telemedicine"] .modal > div {
    background: white !important;
    border-radius: 20px !important;
    width: 90% !important;
    max-width: 550px !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    position: relative !important;
}

/* Modal Header */
#telemedicineSuite .modal-header,
.telemedicine-modal .modal-header {
    position: sticky !important;
    top: 0 !important;
    background: white !important;
    border-bottom: 2px solid #f1f5f9 !important;
    padding: 20px 25px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    z-index: 10 !important;
}

#telemedicineSuite .modal-header h2,
.telemedicine-modal .modal-header h2 {
    margin: 0 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Close Button */
#telemedicineSuite .modal-close,
.telemedicine-modal .modal-close {
    background: none !important;
    border: none !important;
    font-size: 28px !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.2s !important;
}

#telemedicineSuite .modal-close:hover,
.telemedicine-modal .modal-close:hover {
    background: #f1f5f9 !important;
    color: #1e293b !important;
}

/* Modal Body */
#telemedicineSuite .modal-body,
.telemedicine-modal .modal-body {
    padding: 25px !important;
}

/* Modal Footer */
#telemedicineSuite .modal-footer,
.telemedicine-modal .modal-footer {
    padding: 20px 25px !important;
    border-top: 2px solid #f1f5f9 !important;
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important;
}

/* Buttons */
#telemedicineSuite .modal-btn,
.telemedicine-modal .modal-btn {
    padding: 12px 24px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

#telemedicineSuite .modal-btn.primary,
.telemedicine-modal .modal-btn.primary {
    background: #3b82f6 !important;
    color: white !important;
}

#telemedicineSuite .modal-btn.primary:hover,
.telemedicine-modal .modal-btn.primary:hover {
    background: #2563eb !important;
    transform: translateY(-2px) !important;
}

#telemedicineSuite .modal-btn.secondary,
.telemedicine-modal .modal-btn.secondary {
    background: white !important;
    color: #1e293b !important;
    border: 2px solid #e2e8f0 !important;
}

#telemedicineSuite .modal-btn.secondary:hover,
.telemedicine-modal .modal-btn.secondary:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
}

/* Mobile Responsive */
@media screen and (max-width: 640px) {
    #telemedicineSuite .modal > div,
    .telemedicine-modal > div,
    div[id*="telemedicine"] .modal > div,
    div[class*="telemedicine"] .modal > div {
        width: 95% !important;
        max-height: 85vh !important;
    }
    
    #telemedicineSuite .modal-header,
    .telemedicine-modal .modal-header {
        padding: 15px 20px !important;
    }
    
    #telemedicineSuite .modal-header h2,
    .telemedicine-modal .modal-header h2 {
        font-size: 18px !important;
    }
    
    #telemedicineSuite .modal-body,
    .telemedicine-modal .modal-body {
        padding: 20px !important;
    }
    
    #telemedicineSuite .modal-footer,
    .telemedicine-modal .modal-footer {
        padding: 15px 20px !important;
        flex-direction: column !important;
    }
    
    #telemedicineSuite .modal-btn,
    .telemedicine-modal .modal-btn {
        width: 100% !important;
    }
}

/* Feature Cards Inside Modals */
#telemedicineSuite .modal-feature,
.telemedicine-modal .modal-feature {
    background: #f8fafc !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 15px !important;
}

#telemedicineSuite .modal-feature h3,
.telemedicine-modal .modal-feature h3 {
    margin: 0 0 10px 0 !important;
    font-size: 18px !important;
    color: #1e293b !important;
}

#telemedicineSuite .modal-feature p,
.telemedicine-modal .modal-feature p {
    margin: 0 !important;
    color: #475569 !important;
    font-size: 14px !important;
}
      /* TELEPSYCHIATRY MODALS - PROFESSIONAL STYLE */
.telepsych-modal,
.modal[id*="telepsych"],
.modal[class*="telepsych"],
div[data-feature*="telepsych"] + .modal,
button[onclick*="telepsych"] + .modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Modal content box */
.telepsych-modal > div,
.modal[id*="telepsych"] > div,
.modal[class*="telepsych"] > div {
    background: white !important;
    border-radius: 16px !important;
    padding: 30px !important;
    max-width: 500px !important;
    width: 90% !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    position: relative !important;
    animation: modalFadeIn 0.3s ease !important;
}

/* Modal titles */
.telepsych-modal h2,
.telepsych-modal h3,
.modal[id*="telepsych"] h2,
.modal[class*="telepsych"] h2 {
    color: #1e293b !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

/* Modal buttons */
.telepsych-modal button,
.modal[id*="telepsych"] button,
.modal[class*="telepsych"] button {
    background: #3b82f6 !important;
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    margin: 5px !important;
}

.telepsych-modal button:hover,
.modal[id*="telepsych"] button:hover {
    background: #2563eb !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

/* Close button */
.telepsych-modal .close,
.telepsych-modal .modal-close,
.modal[id*="telepsych"] .close,
.modal[class*="telepsych"] .close {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    background: none !important;
    border: none !important;
    font-size: 28px !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    padding: 0 !important;
}

.telepsych-modal .close:hover,
.modal[id*="telepsych"] .close:hover {
    color: #1e293b !important;
}

/* Animation */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
 /* TELEPSYCHIATRY MODALS - PROFESSIONAL STYLE */
.telepsych-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.telepsych-modal.show {
    opacity: 1;
}

.telepsych-modal-content {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.telepsych-modal.show .telepsych-modal-content {
    transform: translateY(0);
}

.telepsych-modal .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 28px;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    z-index: 10;
}

.telepsych-modal .modal-close:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.telepsych-modal .modal-header {
    padding: 30px 30px 15px;
    text-align: center;
}

.telepsych-modal .modal-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.telepsych-modal h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px;
}

.telepsych-modal .modal-subtitle {
    color: #64748b;
    font-size: 14px;
    margin: 0;
}

.telepsych-modal .modal-body {
    padding: 15px 30px 30px;
}

/* Modal Sections */
.telepsych-modal .modal-section {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.telepsych-modal .modal-feature {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
}

.telepsych-modal .modal-feature:last-child {
    border-bottom: none;
}

.telepsych-modal .feature-icon {
    width: 40px;
    height: 40px;
    background: #e0f2fe;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0284c7;
    font-size: 18px;
}

/* Assessment Grid */
.assessment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.assessment-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.assessment-card:hover {
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.1);
}

.assessment-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.assessment-card h4 {
    font-size: 14px;
    margin: 0 0 5px;
}

.assessment-card p {
    font-size: 11px;
    color: #64748b;
    margin: 0 0 8px;
}

.assessment-card .badge {
    background: #e0f2fe;
    color: #0284c7;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
}

/* Crisis Section */
.crisis-section {
    background: #fee2e2;
}

.crisis-alert {
    background: white;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    margin-bottom: 15px;
    border: 2px solid #ef4444;
}

.crisis-alert i {
    font-size: 32px;
    color: #ef4444;
    margin-bottom: 10px;
}

.crisis-resource {
    display: flex;
    align-items: center;
    gap: 15px;
    background: white;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
}

/* Session List */
.session-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.session-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border-radius: 10px;
    padding: 12px;
}

.session-item p {
    font-size: 12px;
    color: #64748b;
    margin: 2px 0 0;
}

.small-btn {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}

/* Medication List */
.med-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.med-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border-radius: 10px;
    padding: 12px;
}

.med-item p {
    font-size: 12px;
    color: #64748b;
    margin: 2px 0 0;
}

.badge.active {
    background: #dcfce7;
    color: #166534;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 11px;
}

.badge.warning {
    background: #fef3c7;
    color: #92400e;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 11px;
}

/* Schedule List */
.schedule-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.schedule-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: white;
    border-radius: 10px;
    padding: 12px;
}

.schedule-time {
    background: #e0f2fe;
    color: #0284c7;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    min-width: 80px;
}

/* Billing Summary */
.billing-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.billing-item {
    background: white;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}

.billing-item span {
    font-size: 11px;
    color: #64748b;
    display: block;
    margin-bottom: 5px;
}

.billing-item strong {
    font-size: 18px;
    color: #1e293b;
}

/* Compliance Status */
.compliance-status {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    border-radius: 10px;
    padding: 12px;
}

/* Settings List */
.settings-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
}

.setting-item select {
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
}

.setting-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

/* Modal Actions */
.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.modal-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.modal-btn.primary {
    background: #3b82f6;
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.modal-btn.primary:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

.modal-btn.secondary {
    background: white;
    color: #1e293b;
    border: 2px solid #e2e8f0;
}

.modal-btn.secondary:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

/* Note Preview */
.note-preview {
    background: white;
    border-radius: 10px;
    padding: 15px;
}

.note-meta {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    font-size: 12px;
    color: #64748b;
}

/* Outcome Chart */
.outcome-chart {
    background: white;
    border-radius: 10px;
    padding: 15px;
}

.outcome-chart p {
    margin-top: 10px;
    font-size: 13px;
    color: #1e293b;
}

/* Responsive */
@media screen and (max-width: 480px) {
    .assessment-grid {
        grid-template-columns: 1fr;
    }
    
    .billing-summary {
        grid-template-columns: 1fr;
    }
    
    .modal-actions {
        flex-direction: column;
    }
}
      /* FORCE ALL TELEMEDICINE MODALS TO 550px */
.hipaa-modal-content,
.modal-content,
[id*="modal"] > div,
[class*="modal"] > div,
div[style*="max-width"] {
    max-width: 550px !important;
    width: 90% !important;
}

/* Mobile override */
@media screen and (max-width: 640px) {
    .hipaa-modal-content,
    .modal-content,
    [id*="modal"] > div,
    [class*="modal"] > div {
        max-width: 95% !important;
        width: 95% !important;
    }
}
      /* Force all intake modals to correct size */
#aiIntakeModal .modal-content,
#aiIntakeModal > div,
#aiIntakeModal [class*="modal-content"] {
    max-width: 550px !important;
    width: 90% !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    border-radius: 24px !important;
}

/* Mobile optimization */
@media screen and (max-width: 640px) {
    #aiIntakeModal > div {
        width: 95% !important;
        max-height: 85vh !important;
    }
}
/* Page-specific styles */
#facilityBillingSection {
    width: 100%;
    max-width: 100%;
    padding: 30px;
}

.status {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}
.status.pending { background: #f59e0b20; color: #f59e0b; }
.status.paid { background: #10b98120; color: #10b981; }
.status.denied { background: #ef444420; color: #ef4444; }

.payer-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    color: #1e293b;
}
.progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 30px;
    margin-bottom: 20px;
}
.progress-bar div {
    height: 100%;
    border-radius: 30px;
}

.alert-item {
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.alert-item.high { background: #fef2f2; border-left: 4px solid #ef4444; }
.alert-item.medium { background: #fffbeb; border-left: 4px solid #f59e0b; }
.alert-item.low { background: #f0f9ff; border-left: 4px solid #3b82f6; }
.alert-item button {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
}

.quick-action {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.quick-action:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}
 .page-content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 30px !important;
    box-sizing: border-box !important;
}
      /* ===== SYSTEM SETTINGS PAGE STYLES - LIKE EHR ===== */
#settingsPage {
    width: 100% !important;
    max-width: 100% !important;
    padding: 30px !important;
    box-sizing: border-box !important;
}

/* Main sections - exactly like .ehr-integration-section */
#settingsPage .settings-section {
    background: white;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    width: 100%;
    box-sizing: border-box;
}

/* Grid layouts - exactly like .ehr-grid */
#settingsPage .settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
    width: 100%;
}

@media (min-width: 768px) {
    #settingsPage .settings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    #settingsPage .settings-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Cards - exactly like .ehr-system-card */
#settingsPage .settings-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s;
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
}

#settingsPage .settings-card:hover {
    border-color: #3b82f6;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

#settingsPage .settings-card.hipaa-compliant {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

/* Icons - exactly like .ehr-system-icon */
#settingsPage .settings-icon {
    width: 50px;
    height: 50px;
    background: #3b82f6;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    margin: 0 0 15px;
}

/* API documentation section - exactly like .api-doc-section */
#settingsPage .api-doc-section {
    background: white;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    width: 100%;
    box-sizing: border-box;
}

/* Endpoints - exactly like .api-endpoint */
#settingsPage .api-endpoint {
    background: #e3f2ff;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    border-left: 4px solid #3b82f6;
}

/* Method badges - exactly like .api-method */
#settingsPage .api-method {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    margin-right: 10px;
}

#settingsPage .api-method.get {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

#settingsPage .api-method.post {
    background: rgba(20, 129, 255, 0.2);
    color: #3b82f6;
}

#settingsPage .api-method.put {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

#settingsPage .api-method.delete {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Recent documents section - exactly like .recent-docs-section */
#settingsPage .recent-docs-section {
    background: white;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    width: 100%;
    box-sizing: border-box;
}

/* Documents grid - exactly like .docs-grid */
#settingsPage .docs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-top: 20px;
}

@media (min-width: 768px) {
    #settingsPage .docs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    #settingsPage .docs-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Document cards - exactly like .doc-card */
#settingsPage .doc-card {
    background: #e3f2ff;
    border-radius: 12px;
    padding: 20px;
    border: 2px solid transparent;
    transition: all 0.3s;
    min-height: 44px;
}

#settingsPage .doc-card:hover {
    border-color: #3b82f6;
    transform: translateY(-5px);
}

/* Document icon - exactly like .doc-icon */
#settingsPage .doc-icon {
    width: 50px;
    height: 50px;
    background: #3b82f6;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    margin-bottom: 15px;
}

/* Document actions - exactly like .doc-actions */
#settingsPage .doc-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

/* Action buttons - exactly like .doc-action-btn */
#settingsPage .doc-action-btn {
    padding: 8px 15px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    flex: 1;
    text-align: center;
    min-height: 44px;
}

#settingsPage .doc-action-btn:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* ===== ADDITIONAL SETTINGS-SPECIFIC STYLES ===== */

/* Form elements */
#settingsPage input[type="text"],
#settingsPage input[type="number"],
#settingsPage input[type="email"],
#settingsPage input[type="password"],
#settingsPage select,
#settingsPage textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s;
    box-sizing: border-box;
}

#settingsPage input[type="text"]:focus,
#settingsPage input[type="number"]:focus,
#settingsPage input[type="email"]:focus,
#settingsPage input[type="password"]:focus,
#settingsPage select:focus,
#settingsPage textarea:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Labels */
#settingsPage label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
}

/* Checkbox groups */
#settingsPage .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#settingsPage .checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

#settingsPage .checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

#settingsPage .checkbox-item label {
    margin-bottom: 0;
    font-weight: 500;
    cursor: pointer;
}

/* Radio groups */
#settingsPage .radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#settingsPage .radio-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

#settingsPage .radio-item input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Buttons - Primary */
#settingsPage .primary-btn {
    padding: 12px 24px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#settingsPage .primary-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.3);
}

#settingsPage .primary-btn:active {
    transform: translateY(0);
}

/* Buttons - Secondary */
#settingsPage .secondary-btn {
    padding: 12px 24px;
    background: white;
    color: #1e293b;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#settingsPage .secondary-btn:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    transform: translateY(-2px);
}

/* Buttons - Success */
#settingsPage .success-btn {
    padding: 12px 24px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#settingsPage .success-btn:hover {
    background: #059669;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3);
}

/* Buttons - Warning */
#settingsPage .warning-btn {
    padding: 12px 24px;
    background: #f59e0b;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#settingsPage .warning-btn:hover {
    background: #d97706;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(245, 158, 11, 0.3);
}

/* Danger Zone */
#settingsPage .danger-zone {
    background: #fef2f2;
    border: 2px solid #ef4444;
    border-radius: 16px;
    padding: 25px;
    margin-top: 30px;
    width: 100%;
    box-sizing: border-box;
}

#settingsPage .danger-zone h4 {
    color: #991b1b;
    margin: 0 0 15px 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#settingsPage .danger-zone .delete-btn {
    background: #ef4444;
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#settingsPage .danger-zone .delete-btn:hover {
    background: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(220, 38, 38, 0.3);
}

/* Progress bars */
#settingsPage .progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 30px;
    overflow: hidden;
    margin: 15px 0;
    width: 100%;
}

#settingsPage .progress-bar-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 30px;
    transition: width 0.3s;
}

/* Stats */
#settingsPage .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
}

#settingsPage .stat-item:last-child {
    border-bottom: none;
}

#settingsPage .stat-label {
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
}

#settingsPage .stat-value {
    font-weight: 600;
    color: #1e293b;
    font-size: 16px;
}

/* Status badges */
#settingsPage .status-badge {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

#settingsPage .status-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

#settingsPage .status-badge.inactive {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

#settingsPage .status-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

/* Headers */
#settingsPage .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}

#settingsPage .section-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

#settingsPage .section-subtitle {
    color: #64748b;
    font-size: 14px;
    margin: 5px 0 0;
}

/* AI Banner */
#settingsPage .ai-banner {
    background: linear-gradient(135deg, #f0f9ff, #e6f0fa);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    border-left: 6px solid #3b82f6;
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

/* Form rows */
#settingsPage .form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

@media (min-width: 640px) {
    #settingsPage .form-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive */
@media screen and (max-width: 768px) {
    #settingsPage {
        padding: 20px !important;
    }
    
    #settingsPage .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #settingsPage .danger-zone > div {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    #settingsPage .danger-zone .delete-btn {
        width: 100%;
    }
}
      /* ===== SUPPORT CENTER PAGE STYLES - LIKE EHR & FACILITY BILLING ===== */

/* Main container - EXACT same as Facility Billing */
#supportCenterPage {
    width: 100% !important;
    max-width: 100% !important;
    padding: 30px !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

/* Section containers - EXACT same as .ehr-integration-section */
#supportCenterPage .settings-section {
    background: white;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
}

/* Section headers - Like Facility Billing */
#supportCenterPage .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}

#supportCenterPage .section-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Grid layouts - EXACT same as .ehr-grid */
#supportCenterPage .settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 10px;
    width: 100%;
}

@media (min-width: 640px) {
    #supportCenterPage .settings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    #supportCenterPage .settings-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Cards - EXACT same as .ehr-system-card */
#supportCenterPage .settings-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
}

#supportCenterPage .settings-card:hover {
    border-color: #3b82f6;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Status badges - EXACT same as Facility Billing */
#supportCenterPage .status-badge {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

#supportCenterPage .status-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

#supportCenterPage .status-badge.inactive {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

#supportCenterPage .status-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

#supportCenterPage .status-badge.info {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

#supportCenterPage .status-badge.purple {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

/* API method badges - Like EHR */
#supportCenterPage .api-method {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    margin-right: 10px;
}

/* API endpoints - Like EHR */
#supportCenterPage .api-endpoint {
    background: #f8fafc;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    border-left: 4px solid #3b82f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    transition: all 0.2s ease;
}

#supportCenterPage .api-endpoint:hover {
    background: #f1f5f9;
    transform: translateX(5px);
}

/* Form elements */
#supportCenterPage input[type="text"],
#supportCenterPage input[type="email"],
#supportCenterPage input[type="password"],
#supportCenterPage input[type="number"],
#supportCenterPage select,
#supportCenterPage textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    background: white;
    color: #1e293b;
}

#supportCenterPage input[type="text"]:focus,
#supportCenterPage input[type="email"]:focus,
#supportCenterPage input[type="password"]:focus,
#supportCenterPage input[type="number"]:focus,
#supportCenterPage select:focus,
#supportCenterPage textarea:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Labels */
#supportCenterPage label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
}

/* Buttons - Primary (Like Facility Billing) */
#supportCenterPage .primary-btn {
    padding: 12px 24px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid transparent;
}

#supportCenterPage .primary-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.3);
}

#supportCenterPage .primary-btn:active {
    transform: translateY(0);
}

/* Buttons - Secondary (Like Facility Billing) */
#supportCenterPage .secondary-btn {
    padding: 12px 24px;
    background: white;
    color: #1e293b;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#supportCenterPage .secondary-btn:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    color: #3b82f6;
    transform: translateY(-2px);
}

/* Document action buttons - Like EHR */
#supportCenterPage .doc-action-btn {
    padding: 8px 15px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

#supportCenterPage .doc-action-btn:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* AI Banner - Like Facility Billing */
#supportCenterPage .ai-banner {
    background: linear-gradient(135deg, #f0f9ff, #e6f0fa);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    border-left: 6px solid #3b82f6;
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

/* Settings icon */
#supportCenterPage .settings-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
}

/* Stat items - Like Facility Billing */
#supportCenterPage .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
}

#supportCenterPage .stat-item:last-child {
    border-bottom: none;
}

#supportCenterPage .stat-label {
    color: #64748b;
    font-size: 14px;
}

#supportCenterPage .stat-value {
    font-weight: 600;
    color: #1e293b;
    font-size: 16px;
}

/* Progress bars - Like Facility Billing */
#supportCenterPage .progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 30px;
    overflow: hidden;
    margin: 15px 0;
    width: 100%;
}

#supportCenterPage .progress-bar-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 30px;
    transition: width 0.3s ease;
}

/* Chat styles */
#supportCenterPage .chat-message {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

#supportCenterPage .chat-message.ai {
    flex-direction: row;
}

#supportCenterPage .chat-message.user {
    flex-direction: row-reverse;
}

#supportCenterPage .chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#supportCenterPage .chat-avatar.ai {
    background: #3b82f6;
}

#supportCenterPage .chat-avatar.user {
    background: #f59e0b;
}

#supportCenterPage .chat-bubble {
    padding: 15px;
    border-radius: 18px;
    max-width: 70%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

#supportCenterPage .chat-bubble.ai {
    background: white;
}

#supportCenterPage .chat-bubble.user {
    background: #3b82f6;
    color: white;
}

#supportCenterPage .chat-time {
    color: #64748b;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

#supportCenterPage .chat-time.user {
    text-align: right;
}

/* Responsive */
@media screen and (max-width: 768px) {
    #supportCenterPage {
        padding: 20px !important;
    }
    
    #supportCenterPage .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #supportCenterPage .ai-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #supportCenterPage .settings-grid {
        grid-template-columns: 1fr !important;
    }
    
    #supportCenterPage .chat-bubble {
        max-width: 85%;
    }
}

/* Animation keyframes */
@keyframes slideInNotification {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutNotification {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}
      /* ===== SECURITY SETTINGS PAGE STYLES - LIKE EHR & FACILITY BILLING ===== */

/* Main container - EXACT same as Facility Billing */
#securitySettingsPage {
    width: 100% !important;
    max-width: 100% !important;
    padding: 30px !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

/* Section containers - EXACT same as .ehr-integration-section */
#securitySettingsPage .settings-section {
    background: white;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
}

/* Section headers - Like Facility Billing */
#securitySettingsPage .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}

#securitySettingsPage .section-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Grid layouts - EXACT same as .ehr-grid */
#securitySettingsPage .settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 10px;
    width: 100%;
}

@media (min-width: 640px) {
    #securitySettingsPage .settings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    #securitySettingsPage .settings-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Cards - EXACT same as .ehr-system-card */
#securitySettingsPage .settings-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
}

#securitySettingsPage .settings-card:hover {
    border-color: #3b82f6;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Status badges - EXACT same as Facility Billing */
#securitySettingsPage .status-badge {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

#securitySettingsPage .status-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

#securitySettingsPage .status-badge.inactive {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

#securitySettingsPage .status-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

#securitySettingsPage .status-badge.info {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

#securitySettingsPage .status-badge.purple {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

/* API endpoints - Like EHR */
#securitySettingsPage .api-endpoint {
    background: #f8fafc;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    border-left: 4px solid #3b82f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    transition: all 0.2s ease;
}

#securitySettingsPage .api-endpoint:hover {
    background: #f1f5f9;
    transform: translateX(5px);
}

/* Form elements */
#securitySettingsPage input[type="text"],
#securitySettingsPage input[type="email"],
#securitySettingsPage input[type="password"],
#securitySettingsPage input[type="number"],
#securitySettingsPage select,
#securitySettingsPage textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    background: white;
    color: #1e293b;
}

#securitySettingsPage input[type="text"]:focus,
#securitySettingsPage input[type="email"]:focus,
#securitySettingsPage input[type="password"]:focus,
#securitySettingsPage input[type="number"]:focus,
#securitySettingsPage select:focus,
#securitySettingsPage textarea:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

#securitySettingsPage input[type="range"] {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #e2e8f0;
    outline: none;
    -webkit-appearance: none;
}

#securitySettingsPage input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Labels */
#securitySettingsPage label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
}

/* Checkbox groups */
#securitySettingsPage .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#securitySettingsPage .checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

#securitySettingsPage .checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: #3b82f6;
}

#securitySettingsPage .checkbox-item label {
    margin-bottom: 0;
    font-weight: 500;
    cursor: pointer;
    flex: 1;
}

/* Buttons - Primary (Like Facility Billing) */
#securitySettingsPage .primary-btn {
    padding: 12px 24px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid transparent;
}

#securitySettingsPage .primary-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.3);
}

#securitySettingsPage .primary-btn:active {
    transform: translateY(0);
}

/* Buttons - Secondary (Like Facility Billing) */
#securitySettingsPage .secondary-btn {
    padding: 12px 24px;
    background: white;
    color: #1e293b;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#securitySettingsPage .secondary-btn:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    color: #3b82f6;
    transform: translateY(-2px);
}

/* Document action buttons - Like EHR */
#securitySettingsPage .doc-action-btn {
    padding: 8px 15px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

#securitySettingsPage .doc-action-btn:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* Delete/Danger button */
#securitySettingsPage .delete-btn {
    padding: 12px 28px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#securitySettingsPage .delete-btn:hover {
    background: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(220, 38, 38, 0.3);
}

/* AI Banner - Like Facility Billing */
#securitySettingsPage .ai-banner {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    border-left: 6px solid #3b82f6;
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    color: white;
}

/* Settings icon */
#securitySettingsPage .settings-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
}

/* Stat items - Like Facility Billing */
#securitySettingsPage .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
}

#securitySettingsPage .stat-item:last-child {
    border-bottom: none;
}

#securitySettingsPage .stat-label {
    color: #64748b;
    font-size: 14px;
}

#securitySettingsPage .stat-value {
    font-weight: 600;
    color: #1e293b;
    font-size: 16px;
}

/* Progress bars - Like Facility Billing */
#securitySettingsPage .progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 30px;
    overflow: hidden;
    margin: 15px 0;
    width: 100%;
}

#securitySettingsPage .progress-bar-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 30px;
    transition: width 0.3s ease;
}

/* Table styles */
#securitySettingsPage table {
    width: 100%;
    border-collapse: collapse;
}

#securitySettingsPage th {
    padding: 15px;
    text-align: left;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    font-weight: 600;
    color: #1e293b;
}

#securitySettingsPage td {
    padding: 15px;
    border-bottom: 1px solid #e2e8f0;
}

/* Danger Zone */
#securitySettingsPage .danger-zone {
    background: #fef2f2;
    border: 2px solid #ef4444;
    border-radius: 16px;
    padding: 25px;
    width: 100%;
    box-sizing: border-box;
}

#securitySettingsPage .danger-zone h4 {
    color: #991b1b;
    margin: 0 0 15px;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* IP List styles */
#securitySettingsPage #allowedIPList,
#securitySettingsPage #blockedIPList {
    background: #f8fafc;
    border-radius: 8px;
    padding: 15px;
    margin-top: 10px;
}

#securitySettingsPage #allowedIPList div,
#securitySettingsPage #blockedIPList div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}

#securitySettingsPage #allowedIPList div:last-child,
#securitySettingsPage #blockedIPList div:last-child {
    border-bottom: none;
}

/* Responsive */
@media screen and (max-width: 768px) {
    #securitySettingsPage {
        padding: 20px !important;
    }
    
    #securitySettingsPage .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #securitySettingsPage .ai-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #securitySettingsPage .settings-grid {
        grid-template-columns: 1fr !important;
    }
    
    #securitySettingsPage table {
        font-size: 14px;
    }
    
    #securitySettingsPage th,
    #securitySettingsPage td {
        padding: 10px;
    }
}

/* Animation keyframes */
@keyframes slideInNotification {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutNotification {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}
      /* ===== AI USER SETTINGS PAGE STYLES - LIKE EHR & FACILITY BILLING ===== */

/* Main container - EXACT same as Facility Billing */
#userSettingsPage {
    width: 100% !important;
    max-width: 100% !important;
    padding: 30px !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

/* Section containers - EXACT same as .ehr-integration-section */
#userSettingsPage .settings-section {
    background: white;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
}

/* Section headers - Like Facility Billing */
#userSettingsPage .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}

#userSettingsPage .section-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Grid layouts - EXACT same as .ehr-grid */
#userSettingsPage .settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 10px;
    width: 100%;
}

@media (min-width: 640px) {
    #userSettingsPage .settings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    #userSettingsPage .settings-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Cards - EXACT same as .ehr-system-card */
#userSettingsPage .settings-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
}

#userSettingsPage .settings-card:hover {
    border-color: #3b82f6;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Status badges - EXACT same as Facility Billing */
#userSettingsPage .status-badge {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

#userSettingsPage .status-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

#userSettingsPage .status-badge.inactive {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

#userSettingsPage .status-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

#userSettingsPage .status-badge.info {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

#userSettingsPage .status-badge.purple {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

/* API method badges - Like EHR */
#userSettingsPage .api-method {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    margin-right: 10px;
}

#userSettingsPage .api-method.get {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

#userSettingsPage .api-method.post {
    background: rgba(20, 129, 255, 0.2);
    color: #3b82f6;
}

#userSettingsPage .api-method.put {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

#userSettingsPage .api-method.delete {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

#userSettingsPage .api-method.update {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

#userSettingsPage .api-method.settings {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

#userSettingsPage .api-method.password {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

/* API endpoints - Like EHR */
#userSettingsPage .api-endpoint {
    background: #f8fafc;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    border-left: 4px solid #3b82f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    transition: all 0.2s ease;
}

#userSettingsPage .api-endpoint:hover {
    background: #f1f5f9;
    transform: translateX(5px);
}

/* Form elements */
#userSettingsPage input[type="text"],
#userSettingsPage input[type="email"],
#userSettingsPage input[type="password"],
#userSettingsPage input[type="number"],
#userSettingsPage input[type="date"],
#userSettingsPage select,
#userSettingsPage textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    background: white;
    color: #1e293b;
}

#userSettingsPage input[type="text"]:focus,
#userSettingsPage input[type="email"]:focus,
#userSettingsPage input[type="password"]:focus,
#userSettingsPage input[type="number"]:focus,
#userSettingsPage input[type="date"]:focus,
#userSettingsPage select:focus,
#userSettingsPage textarea:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

#userSettingsPage input:disabled {
    background: #f8fafc;
    color: #64748b;
    border-color: #e2e8f0;
}

/* Labels */
#userSettingsPage label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
}

/* Checkbox groups */
#userSettingsPage .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#userSettingsPage .checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

#userSettingsPage .checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: #3b82f6;
}

#userSettingsPage .checkbox-item label {
    margin-bottom: 0;
    font-weight: 500;
    cursor: pointer;
    flex: 1;
}

/* Stat items - Like Facility Billing */
#userSettingsPage .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
}

#userSettingsPage .stat-item:last-child {
    border-bottom: none;
}

#userSettingsPage .stat-label {
    color: #64748b;
    font-size: 14px;
}

#userSettingsPage .stat-value {
    font-weight: 600;
    color: #1e293b;
    font-size: 16px;
}

/* Buttons - Primary (Like Facility Billing) */
#userSettingsPage .primary-btn {
    padding: 12px 24px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid transparent;
}

#userSettingsPage .primary-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.3);
}

#userSettingsPage .primary-btn:active {
    transform: translateY(0);
}

/* Buttons - Secondary (Like Facility Billing) */
#userSettingsPage .secondary-btn {
    padding: 12px 24px;
    background: white;
    color: #1e293b;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#userSettingsPage .secondary-btn:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    color: #3b82f6;
    transform: translateY(-2px);
}

/* Buttons - Success (Green) */
#userSettingsPage .success-btn {
    padding: 12px 24px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#userSettingsPage .success-btn:hover {
    background: #059669;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3);
}

/* Buttons - Warning (Orange) */
#userSettingsPage .warning-btn {
    padding: 12px 24px;
    background: #f59e0b;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#userSettingsPage .warning-btn:hover {
    background: #d97706;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(245, 158, 11, 0.3);
}

/* Document action buttons - Like EHR */
#userSettingsPage .doc-action-btn {
    padding: 8px 15px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

#userSettingsPage .doc-action-btn:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* AI Banner - Like Facility Billing */
#userSettingsPage .ai-banner {
    background: linear-gradient(135deg, #f0f9ff, #e6f0fa);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    border-left: 6px solid #3b82f6;
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

/* Danger Zone - Like Facility Billing */
#userSettingsPage .danger-zone {
    background: #fef2f2;
    border: 2px solid #ef4444;
    border-radius: 16px;
    padding: 25px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 30px;
}

#userSettingsPage .danger-zone h4 {
    color: #991b1b;
    margin: 0 0 15px;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#userSettingsPage .danger-zone .delete-btn {
    background: #ef4444;
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#userSettingsPage .danger-zone .delete-btn:hover {
    background: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(220, 38, 38, 0.3);
}

/* Progress bars - Like Facility Billing */
#userSettingsPage .progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 30px;
    overflow: hidden;
    margin: 15px 0;
    width: 100%;
}

#userSettingsPage .progress-bar-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 30px;
    transition: width 0.3s ease;
}

/* Settings icon */
#userSettingsPage .settings-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
}

/* Avatar and profile picture */
#userSettingsPage .profile-avatar {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid white;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    position: relative;
}

#userSettingsPage .avatar-initials {
    color: white;
    font-size: 48px;
    font-weight: 700;
}

#userSettingsPage .avatar-upload-btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 36px;
    height: 36px;
    background: #3b82f6;
    border: 3px solid white;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

#userSettingsPage .avatar-upload-btn:hover {
    background: #2563eb;
    transform: scale(1.1);
}

/* Session items */
#userSettingsPage .session-item {
    background: #f8fafc;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 10px;
    border-left: 4px solid transparent;
}

#userSettingsPage .session-item.current {
    background: #f0f9ff;
    border-left-color: #3b82f6;
}

#userSettingsPage .session-device {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

/* Responsive */
@media screen and (max-width: 768px) {
    #userSettingsPage {
        padding: 20px !important;
    }
    
    #userSettingsPage .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #userSettingsPage .ai-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #userSettingsPage .settings-grid {
        grid-template-columns: 1fr !important;
    }
    
    #userSettingsPage .danger-zone > div {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    #userSettingsPage .danger-zone .delete-btn {
        width: 100%;
    }
    
    #userSettingsPage .profile-avatar {
        width: 100px;
        height: 100px;
    }
    
    #userSettingsPage .avatar-initials {
        font-size: 40px;
    }
}

/* Animation keyframes */
@keyframes slideInNotification {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutNotification {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}
      /* ===== AI ASSISTANT PAGE STYLES - PROFESSIONAL BLUE THEME ===== */

/* Main container */
#aiAssistantSection {
    width: 100% !important;
    max-width: 100% !important;
    padding: 30px !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

/* Section headers */
#aiAssistantSection .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}

#aiAssistantSection .section-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Status badges */
#aiAssistantSection .status-badge {
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

#aiAssistantSection .status-badge.active {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

#aiAssistantSection .status-badge.warning {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

#aiAssistantSection .status-badge.info {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* REPLACE your existing HIPAA badge CSS with this */
.hipaa-badge {
    background: #10b98120;
    color: #10b981;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* REMOVED animation */
}

.hipaa-badge i {
    font-size: 11px;
    /* REMOVED animation */
}

/* ===== PROFESSIONAL BUTTON STYLES ===== */

/* Primary Button - Blue Gradient */
#aiAssistantSection .primary-btn {
    padding: 14px 28px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2), 0 2px 4px -1px rgba(37, 99, 235, 0.1);
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
}

#aiAssistantSection .primary-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

#aiAssistantSection .primary-btn:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3), 0 4px 6px -2px rgba(37, 99, 235, 0.2);
}

#aiAssistantSection .primary-btn:hover::before {
    left: 100%;
}

#aiAssistantSection .primary-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
}

#aiAssistantSection .primary-btn i {
    font-size: 16px;
    transition: transform 0.2s ease;
}

#aiAssistantSection .primary-btn:hover i {
    transform: translateX(3px);
}

/* Secondary Button - Subtle Blue */
#aiAssistantSection .secondary-btn {
    padding: 14px 28px;
    background: white;
    color: #1e293b;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    letter-spacing: 0.3px;
}

#aiAssistantSection .secondary-btn:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 8px 12px -4px rgba(59, 130, 246, 0.15);
}

#aiAssistantSection .secondary-btn:active {
    transform: translateY(0);
    background: #f1f5f9;
}

/* Document Action Buttons - Clean & Professional */
#aiAssistantSection .doc-action-btn {
    padding: 10px 18px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #475569;
    letter-spacing: 0.2px;
}

#aiAssistantSection .doc-action-btn:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px -2px rgba(59, 130, 246, 0.3);
}

#aiAssistantSection .doc-action-btn:active {
    transform: translateY(0);
    background: #2563eb;
}

#aiAssistantSection .doc-action-btn i {
    font-size: 14px;
}

/* Send Button - Circular */
#aiAssistantSection .send-btn {
    height: 60px;
    width: 60px;
    border-radius: 30px !important;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 12px -4px rgba(37, 99, 235, 0.3);
    position: relative;
    overflow: hidden;
}

#aiAssistantSection .send-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

#aiAssistantSection .send-btn:hover::before {
    width: 100px;
    height: 100px;
}

#aiAssistantSection .send-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 18px -6px rgba(37, 99, 235, 0.4);
}

#aiAssistantSection .send-btn i {
    font-size: 20px;
    position: relative;
    z-index: 1;
}

/* AI Banner */
#aiAssistantSection .ai-banner {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 30px;
    border-left: 6px solid #3b82f6;
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 8px 16px -6px rgba(59, 130, 246, 0.15);
}

/* Settings Cards */
#aiAssistantSection .settings-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
}

#aiAssistantSection .settings-card:hover {
    border-color: #3b82f6;
    transform: translateY(-4px);
    box-shadow: 0 16px 24px -8px rgba(59, 130, 246, 0.2);
}

#aiAssistantSection .settings-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    transition: all 0.3s ease;
    background: #3b82f6;
    box-shadow: 0 6px 10px -2px rgba(59, 130, 246, 0.3);
}

/* Quick Action Cards */
#aiAssistantSection .quick-action-card {
    text-align: center;
    cursor: pointer;
    border-color: #e2e8f0;
}

#aiAssistantSection .quick-action-card:hover .settings-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Chat Messages */
#aiAssistantSection .chat-message {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#aiAssistantSection .chat-bubble-ai {
    background: #eff6ff;
    border-radius: 20px;
    padding: 18px 22px;
    border-top-left-radius: 4px;
    box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.05);
}

#aiAssistantSection .chat-bubble-user {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 20px;
    padding: 15px 20px;
    border-top-right-radius: 4px;
    color: white;
    max-width: 80%;
    float: right;
    box-shadow: 0 8px 16px -6px rgba(37, 99, 235, 0.3);
}

/* API Endpoints (for conversation list) */
#aiAssistantSection .api-endpoint {
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 10px;
    border-left: 4px solid #3b82f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid #e2e8f0;
}

#aiAssistantSection .api-endpoint:hover {
    background: #f1f5f9;
    transform: translateX(6px);
    border-left-width: 6px;
    box-shadow: 0 6px 12px -4px rgba(59, 130, 246, 0.15);
}

/* Progress Bars */
#aiAssistantSection .progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 30px;
    overflow: hidden;
    margin: 8px 0;
    width: 100%;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

#aiAssistantSection .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 30px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
}

/* Stat Items */
#aiAssistantSection .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
}

#aiAssistantSection .stat-item:last-child {
    border-bottom: none;
}

#aiAssistantSection .stat-label {
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
}

#aiAssistantSection .stat-value {
    font-weight: 700;
    color: #1e293b;
    font-size: 16px;
    background: #f1f5f9;
    padding: 4px 12px;
    border-radius: 30px;
}

/* Chat Input Area */
#aiAssistantSection .chat-input-container {
    padding: 20px 25px;
    border-top: 2px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 16px 16px;
}

#aiAssistantSection textarea {
    width: 100%;
    padding: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    font-size: 15px;
    resize: none;
    transition: all 0.3s ease;
    font-family: inherit;
    background: white;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

#aiAssistantSection textarea:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Quick Suggestions */
#aiAssistantSection .suggestion-btn {
    padding: 8px 16px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 30px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #475569;
}

#aiAssistantSection .suggestion-btn:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px -2px rgba(59, 130, 246, 0.3);
}

/* AI Tools Grid */
#aiAssistantSection .tool-card {
    padding: 15px;
    cursor: pointer;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    transition: all 0.3s ease;
}

#aiAssistantSection .tool-card:hover {
    border-color: #3b82f6;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -8px rgba(59, 130, 246, 0.2);
}

#aiAssistantSection .tool-icon {
    width: 40px;
    height: 40px;
    background: #eff6ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

#aiAssistantSection .tool-card:hover .tool-icon {
    background: #3b82f6;
    transform: scale(1.1);
}

#aiAssistantSection .tool-card:hover .tool-icon i {
    color: white;
}

/* Suggested Prompts */
#aiAssistantSection .prompt-card {
    background: #eff6ff;
    padding: 20px;
    margin: 0;
    cursor: pointer;
    text-align: center;
    border-radius: 16px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

#aiAssistantSection .prompt-card:hover {
    background: white;
    border-color: #3b82f6;
    transform: translateY(-4px);
    box-shadow: 0 15px 25px -10px rgba(59, 130, 246, 0.2);
}

#aiAssistantSection .prompt-card i {
    color: #3b82f6;
    font-size: 28px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

#aiAssistantSection .prompt-card:hover i {
    transform: scale(1.2);
    color: #3b82f6;
}

/* Integration Status */
#aiAssistantSection .integration-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

#aiAssistantSection .integration-item:hover {
    background: white;
    border-color: #3b82f6;
    transform: translateX(5px);
    box-shadow: 0 4px 8px -2px rgba(59, 130, 246, 0.15);
}

/* Footer */
#aiAssistantSection .footer {
    margin-top: 40px;
    padding: 25px;
    text-align: center;
    border-top: 2px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 16px;
}

#aiAssistantSection .footer-text {
    color: #64748b;
    margin: 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Responsive Design */
@media screen and (max-width: 1024px) {
    #aiAssistantSection .settings-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    #aiAssistantSection [style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media screen and (max-width: 768px) {
    #aiAssistantSection {
        padding: 20px !important;
    }
    
    #aiAssistantSection .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #aiAssistantSection .ai-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #aiAssistantSection .settings-grid,
    #aiAssistantSection [style*="grid-template-columns: repeat(4, 1fr)"],
    #aiAssistantSection [style*="grid-template-columns: 2fr 1fr"],
    #aiAssistantSection [style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
    
    #aiAssistantSection .primary-btn,
    #aiAssistantSection .secondary-btn {
        width: 100%;
    }
    
    #aiAssistantSection .chat-bubble-user {
        max-width: 100%;
    }
    
    #aiAssistantSection .footer-text {
        flex-direction: column;
        gap: 10px;
    }
}

/* Animations */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#aiAssistantSection .settings-card,
#aiAssistantSection .chat-message,
#aiAssistantSection .api-endpoint {
    animation: slideIn 0.4s ease forwards;
}

/* Loading States */
#aiAssistantSection .loading-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Tooltips */
#aiAssistantSection .tooltip {
    position: relative;
    display: inline-block;
}

#aiAssistantSection .tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

#aiAssistantSection .tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #1e293b;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
    transition: all 0.3s ease;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

#aiAssistantSection .tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

/* Scrollbar Styling */
#aiAssistantSection #aiChatMessages::-webkit-scrollbar {
    width: 8px;
}

#aiAssistantSection #aiChatMessages::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

#aiAssistantSection #aiChatMessages::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
    transition: all 0.2s ease;
}

#aiAssistantSection #aiChatMessages::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Focus States for Accessibility */
#aiAssistantSection .primary-btn:focus-visible,
#aiAssistantSection .secondary-btn:focus-visible,
#aiAssistantSection .doc-action-btn:focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.4);
    outline-offset: 2px;
}

/* Disabled States */
#aiAssistantSection .primary-btn:disabled,
#aiAssistantSection .secondary-btn:disabled,
#aiAssistantSection .doc-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.5);
}

/* Active Navigation States */
#aiAssistantSection .nav-active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* Print Styles */
@media print {
    #aiAssistantSection .primary-btn,
    #aiAssistantSection .secondary-btn,
    #aiAssistantSection .doc-action-btn {
        display: none;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    #aiAssistantSection .primary-btn {
        background: #0000ff;
        border: 2px solid white;
    }
    
    #aiAssistantSection .settings-card {
        border: 3px solid black;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    #aiAssistantSection * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
      /* ===== ONBOARDING PAGE STYLES - BLUE THEME ===== */

/* Main container */
#onboardingSection {
    width: 100% !important;
    max-width: 100% !important;
    padding: 30px !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

/* Section containers */
#onboardingSection .settings-section {
    background: white;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
}

/* Section headers */
#onboardingSection .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}

#onboardingSection .section-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Cards - Onboarding Steps */
#onboardingSection .settings-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
}

#onboardingSection .settings-card:hover {
    border-color: #3b82f6;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Status badges */
#onboardingSection .status-badge {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

#onboardingSection .status-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

#onboardingSection .status-badge.inactive {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

#onboardingSection .status-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

#onboardingSection .status-badge.info {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

/* HIPAA Badge */
#onboardingSection .hipaa-badge {
    display: inline-flex;
    align-items: center;
    background: #10b981;
    color: white;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

#onboardingSection .hipaa-badge i {
    margin-right: 4px;
    font-size: 10px;
}

/* Buttons - Primary (Blue) */
#onboardingSection .primary-btn {
    padding: 12px 24px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid transparent;
}

#onboardingSection .primary-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.3);
}

#onboardingSection .primary-btn:active {
    transform: translateY(0);
}

/* Buttons - Secondary */
#onboardingSection .secondary-btn {
    padding: 12px 24px;
    background: white;
    color: #1e293b;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#onboardingSection .secondary-btn:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    color: #3b82f6;
    transform: translateY(-2px);
}

/* AI Banner */
#onboardingSection .ai-banner {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    border-left: 6px solid #3b82f6;
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

/* Progress Bar */
#onboardingSection .progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 30px;
    overflow: hidden;
    margin: 15px 0;
    width: 100%;
}

#onboardingSection .progress-bar-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 30px;
    transition: width 0.3s ease;
}

/* Step Number Circle */
#onboardingSection .step-number {
    width: 60px;
    height: 60px;
    background: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

#onboardingSection .step-number span {
    color: white;
    font-size: 24px;
    font-weight: 700;
}

/* Locked Step */
#onboardingSection .step-locked {
    opacity: 0.6;
    pointer-events: none;
}

#onboardingSection .step-locked .step-number {
    background: #94a3b8;
}

/* Plan Info Banner */
#onboardingSection #planInfoBanner {
    background: #f8fafc;
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    border: 1px solid #e2e8f0;
}

/* Completion Banner */
#onboardingSection #completionBanner {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 2px solid #10b981;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    text-align: center;
}

#onboardingSection #completionBanner .check-circle {
    width: 80px;
    height: 80px;
    background: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

#onboardingSection #completionBanner .check-circle i {
    color: white;
    font-size: 40px;
}

/* Modal Styles */
#onboardingSection .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    padding: 20px;
}

#onboardingSection .modal-content {
    background: white;
    border-radius: 16px;
    padding: 30px;
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
}

/* Responsive */
@media screen and (max-width: 768px) {
    #onboardingSection {
        padding: 20px !important;
    }
    
    #onboardingSection .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #onboardingSection .ai-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #onboardingSection .onboarding-steps {
        grid-template-columns: 1fr !important;
    }
    
    #onboardingSection .settings-card {
        padding: 20px;
    }
    
    #onboardingSection #planInfoBanner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Animation keyframes */
@keyframes slideInNotification {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutNotification {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Step-specific styles */
#onboardingSection .step-complete {
    border-left: 4px solid #10b981;
}

#onboardingSection .step-current {
    border-left: 4px solid #3b82f6;
}

#onboardingSection .step-pending {
    border-left: 4px solid #e2e8f0;
}

/* Feature list styling */
#onboardingSection .feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#onboardingSection .feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

#onboardingSection .feature-list li:hover {
    background: #f8fafc;
}

#onboardingSection .feature-list i {
    color: #10b981;
    font-size: 16px;
}

/* Loading spinner */
#onboardingSection .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Tooltip */
#onboardingSection .tooltip {
    position: relative;
    display: inline-block;
}

#onboardingSection .tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

#onboardingSection .tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    transition: opacity 0.3s ease;
    z-index: 10;
}

#onboardingSection .tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}
      /* ===== SUBSCRIPTION PAGE STYLES - BLUE THEME ===== */

/* Main container */
#subscriptionSection {
    width: 100% !important;
    max-width: 100% !important;
    padding: 30px !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

/* Section containers */
#subscriptionSection .settings-section {
    background: white;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
}

/* Section headers */
#subscriptionSection .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}

#subscriptionSection .section-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Status badges */
#subscriptionSection .status-badge {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

#subscriptionSection .status-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

#subscriptionSection .status-badge.inactive {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

#subscriptionSection .status-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

#subscriptionSection .status-badge.info {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

/* Buttons - Primary (Blue) */
#subscriptionSection .primary-btn {
    padding: 12px 24px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid transparent;
}

#subscriptionSection .primary-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.3);
}

#subscriptionSection .primary-btn:active {
    transform: translateY(0);
}

/* Buttons - Secondary */
#subscriptionSection .secondary-btn {
    padding: 12px 24px;
    background: white;
    color: #1e293b;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#subscriptionSection .secondary-btn:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    color: #3b82f6;
    transform: translateY(-2px);
}

/* AI Banner */
#subscriptionSection .ai-banner {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    border-left: 6px solid #3b82f6;
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

/* Subscription Plans Grid */
#subscriptionSection .subscription-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 40px;
}

/* Individual Plan Card */
#subscriptionSection .subscription-plan {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
}

#subscriptionSection .subscription-plan:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
}

/* Featured Plan (Professional) */
#subscriptionSection .subscription-plan.featured {
    border: 3px solid #3b82f6;
    transform: scale(1.02);
    box-shadow: 0 20px 30px rgba(59, 130, 246, 0.15);
    z-index: 2;
}

#subscriptionSection .subscription-plan.featured:hover {
    transform: scale(1.02) translateY(-5px);
}

/* Most Popular Badge */
#subscriptionSection .featured-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #3b82f6;
    color: white;
    padding: 8px 20px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
    z-index: 10;
}

/* Plan Header */
#subscriptionSection .plan-header {
    background: #1e293b;
    color: white;
    padding: 15px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
}

#subscriptionSection .plan-header.professional {
    background: #3b82f6;
}

#subscriptionSection .plan-header.enterprise {
    background: #1e293b;
}

/* Plan Content */
#subscriptionSection .plan-content {
    padding: 30px;
}

/* Plan Name */
#subscriptionSection .plan-name {
    margin: 0 0 20px;
    font-size: 32px;
    text-align: center;
    color: #1e293b;
}

/* Plan Price */
#subscriptionSection .plan-price {
    text-align: center;
    margin-bottom: 15px;
}

#subscriptionSection .price-amount {
    font-size: 48px;
    font-weight: 800;
    color: #1e293b;
}

#subscriptionSection .price-period {
    color: #64748b;
    font-size: 16px;
}

/* Collection Fee Badge */
#subscriptionSection .collection-fee {
    background: #fee2e2;
    color: #ef4444;
    padding: 10px;
    border-radius: 30px;
    text-align: center;
    font-weight: 600;
    margin-bottom: 15px;
}

/* Setup Fee Badge */
#subscriptionSection .setup-fee {
    background: #f0fdf4;
    border-radius: 30px;
    padding: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#subscriptionSection .setup-fee i {
    color: #10b981;
}

#subscriptionSection .setup-fee .free {
    color: #10b981;
    font-weight: 700;
}

/* Plan Message */
#subscriptionSection .plan-message {
    background: #f8fafc;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 25px;
    font-style: italic;
    color: #475569;
    text-align: center;
    border-left: 4px solid #3b82f6;
}

/* Features List */
#subscriptionSection .features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px;
}

#subscriptionSection .feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

#subscriptionSection .feature-item i {
    color: #10b981;
    font-size: 18px;
    flex-shrink: 0;
}

#subscriptionSection .feature-item.highlight {
    color: #3b82f6;
    font-weight: 600;
}

#subscriptionSection .feature-item.highlight i {
    color: #3b82f6;
}

/* White Glove Highlight */
#subscriptionSection .white-glove {
    background: #fef3c7;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 600;
    border-left: 4px solid #f59e0b;
}

/* Setup Timeline */
#subscriptionSection .setup-timeline {
    background: #eff6ff;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
}

#subscriptionSection .timeline-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-weight: 600;
}

#subscriptionSection .timeline-title i {
    color: #3b82f6;
}

#subscriptionSection .timeline-days {
    font-size: 20px;
    font-weight: 700;
    color: #3b82f6;
    margin-bottom: 15px;
}

#subscriptionSection .timeline-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #475569;
}

#subscriptionSection .timeline-feature i {
    width: 20px;
    color: #3b82f6;
}

/* Enterprise Timeline */
#subscriptionSection .timeline-enterprise {
    background: #1e293b;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
    color: white;
}

#subscriptionSection .timeline-enterprise .timeline-days {
    color: #f59e0b;
}

#subscriptionSection .timeline-enterprise .timeline-feature {
    color: #cbd5e1;
}

#subscriptionSection .timeline-enterprise i {
    color: #f59e0b;
}

/* CTA Buttons Container */
#subscriptionSection .plan-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Billing Toggle */
#subscriptionSection .billing-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

#subscriptionSection .toggle-label {
    font-weight: 600;
    color: #1e293b;
}

#subscriptionSection .toggle-savings {
    color: #10b981;
    font-size: 14px;
    margin-left: 5px;
}

/* Toggle Switch */
#subscriptionSection .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

#subscriptionSection .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

#subscriptionSection .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #3b82f6;
    border-radius: 34px;
    transition: 0.4s;
}

#subscriptionSection .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    border-radius: 50%;
    transition: 0.4s;
}

#subscriptionSection input:checked + .slider:before {
    transform: translateX(26px);
}

/* Comparison Table */
#subscriptionSection .comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 12px;
    overflow: hidden;
}

#subscriptionSection .comparison-table th {
    padding: 15px;
    text-align: left;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    font-weight: 600;
    color: #1e293b;
}

#subscriptionSection .comparison-table td {
    padding: 15px;
    border-bottom: 1px solid #e2e8f0;
}

#subscriptionSection .comparison-table tr:last-child td {
    border-bottom: none;
}

#subscriptionSection .comparison-table .professional-col {
    background: #eff6ff;
}

#subscriptionSection .comparison-highlight {
    color: #10b981;
    font-weight: 600;
}

#subscriptionSection .comparison-badge {
    background: #e2e8f0;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
}

/* Pre-Setup Checklist */
#subscriptionSection .checklist-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 20px;
}

#subscriptionSection .checklist-card {
    background: #f8fafc;
    border-radius: 16px;
    padding: 25px;
}

#subscriptionSection .checklist-card.professional {
    background: #eff6ff;
    border: 2px solid #3b82f6;
}

#subscriptionSection .checklist-card.enterprise {
    background: #1e293b;
    color: white;
}

#subscriptionSection .checklist-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    font-size: 18px;
}

#subscriptionSection .checklist-title .step-number {
    background: #3b82f6;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

#subscriptionSection .checklist-title.enterprise .step-number {
    background: #f59e0b;
    color: #1e293b;
}

#subscriptionSection .checklist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

#subscriptionSection .checklist-item i {
    color: #10b981;
    font-size: 18px;
}

#subscriptionSection .checklist-item.enterprise i {
    color: #10b981;
}

#subscriptionSection .checklist-item.enterprise span {
    color: #cbd5e1;
}

/* FAQ Section */
#subscriptionSection .faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

#subscriptionSection .faq-item {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#subscriptionSection .faq-item:hover {
    background: #f1f5f9;
}

#subscriptionSection .faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#subscriptionSection .faq-question {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

#subscriptionSection .faq-icon {
    color: #3b82f6;
    transition: transform 0.3s ease;
}

#subscriptionSection .faq-answer {
    display: none;
    margin-top: 15px;
    color: #475569;
    line-height: 1.6;
}

#subscriptionSection .faq-item.active .faq-answer {
    display: block;
}

#subscriptionSection .faq-item.active .faq-icon {
    transform: rotate(180deg);
}

/* Modal Styles */
#subscriptionSection .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    padding: 20px;
}

#subscriptionSection .modal-content {
    background: white;
    border-radius: 24px;
    padding: 30px;
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

#subscriptionSection .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
    color: #64748b;
    cursor: pointer;
    transition: color 0.3s ease;
}

#subscriptionSection .modal-close:hover {
    color: #1e293b;
}

/* Payment Modal */
#subscriptionSection .payment-summary {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
}

#subscriptionSection .payment-amount {
    font-size: 36px;
    font-weight: 800;
    color: #1e293b;
}

#subscriptionSection .savings-badge {
    color: #10b981;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Form Elements */
#subscriptionSection input[type="text"],
#subscriptionSection input[type="email"],
#subscriptionSection input[type="password"],
#subscriptionSection input[type="number"],
#subscriptionSection input[type="date"],
#subscriptionSection select,
#subscriptionSection textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    background: white;
    color: #1e293b;
}

#subscriptionSection input[type="text"]:focus,
#subscriptionSection input[type="email"]:focus,
#subscriptionSection input[type="password"]:focus,
#subscriptionSection input[type="number"]:focus,
#subscriptionSection input[type="date"]:focus,
#subscriptionSection select:focus,
#subscriptionSection textarea:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

#subscriptionSection label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
}

/* Progress Bar */
#subscriptionSection .progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 30px;
    overflow: hidden;
    margin: 15px 0;
    width: 100%;
}

#subscriptionSection .progress-bar-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 30px;
    transition: width 0.3s ease;
}

/* Table Styles */
#subscriptionSection .table-responsive {
    overflow-x: auto;
    margin-top: 20px;
}

#subscriptionSection table {
    width: 100%;
    border-collapse: collapse;
}

#subscriptionSection th {
    padding: 15px;
    text-align: left;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    font-weight: 600;
    color: #1e293b;
}

#subscriptionSection td {
    padding: 15px;
    border-bottom: 1px solid #e2e8f0;
}

/* Footer */
#subscriptionSection .footer {
    margin-top: 30px;
    padding: 20px;
    text-align: center;
    border-top: 2px solid #e2e8f0;
}

#subscriptionSection .footer-text {
    color: #64748b;
    margin: 0;
}

#subscriptionSection .footer-link {
    color: #3b82f6;
    cursor: pointer;
    text-decoration: none;
}

#subscriptionSection .footer-link:hover {
    text-decoration: underline;
}

/* Responsive */
@media screen and (max-width: 1024px) {
    #subscriptionSection .subscription-plans {
        grid-template-columns: repeat(2, 1fr);
    }
    
    #subscriptionSection .checklist-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    #subscriptionSection .faq-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) {
    #subscriptionSection {
        padding: 20px !important;
    }
    
    #subscriptionSection .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #subscriptionSection .ai-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #subscriptionSection .subscription-plans {
        grid-template-columns: 1fr;
    }
    
    #subscriptionSection .subscription-plan.featured {
        transform: scale(1);
    }
    
    #subscriptionSection .subscription-plan.featured:hover {
        transform: translateY(-5px);
    }
    
    #subscriptionSection .checklist-grid {
        grid-template-columns: 1fr;
    }
    
    #subscriptionSection .billing-toggle {
        flex-wrap: wrap;
    }
    
    #subscriptionSection .price-amount {
        font-size: 36px;
    }
}

/* Animation keyframes */
@keyframes slideInNotification {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutNotification {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Utility Classes */
#subscriptionSection .text-center {
    text-align: center;
}

#subscriptionSection .mt-4 {
    margin-top: 30px;
}

#subscriptionSection .mb-4 {
    margin-bottom: 30px;
}

#subscriptionSection .flex {
    display: flex;
}

#subscriptionSection .flex-col {
    flex-direction: column;
}

#subscriptionSection .items-center {
    align-items: center;
}

#subscriptionSection .justify-between {
    justify-content: space-between;
}

#subscriptionSection .gap-2 {
    gap: 20px;
}

#subscriptionSection .gap-1 {
    gap: 10px;
}

#subscriptionSection .w-full {
    width: 100%;
}

/* Tooltip */
#subscriptionSection .tooltip {
    position: relative;
    display: inline-block;
}

#subscriptionSection .tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

#subscriptionSection .tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    transition: opacity 0.3s ease;
    z-index: 10;
}

#subscriptionSection .tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

/* Loading Spinner */
#subscriptionSection .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Badge Styles */
#subscriptionSection .badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
}

#subscriptionSection .badge-blue {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

#subscriptionSection .badge-green {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

#subscriptionSection .badge-orange {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

#subscriptionSection .badge-red {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Card Shadows */
#subscriptionSection .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

#subscriptionSection .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

#subscriptionSection .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

#subscriptionSection .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Hover Effects */
#subscriptionSection .hover-lift:hover {
    transform: translateY(-2px);
    transition: transform 0.3s ease;
}

#subscriptionSection .hover-shadow:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

/* Gradient Backgrounds */
#subscriptionSection .gradient-blue {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
}

#subscriptionSection .gradient-green {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}

#subscriptionSection .gradient-orange {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
}

#subscriptionSection .gradient-dark {
    background: linear-gradient(135deg, #1e293b, #0f172a);
}
      /* ===== PATIENT STATISTICS PAGE STYLES - BLUE THEME ===== */

/* Main container */
#patientStatsSection {
    width: 100% !important;
    max-width: 100% !important;
    padding: 30px !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

/* Section containers */
#patientStatsSection .settings-section {
    background: white;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
}

/* Section headers */
#patientStatsSection .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}

#patientStatsSection .section-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Status badges */
#patientStatsSection .status-badge {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

#patientStatsSection .status-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

#patientStatsSection .status-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

#patientStatsSection .status-badge.inactive {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Buttons */
#patientStatsSection .primary-btn {
    padding: 12px 24px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#patientStatsSection .primary-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.3);
}

#patientStatsSection .secondary-btn {
    padding: 12px 24px;
    background: white;
    color: #1e293b;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#patientStatsSection .secondary-btn:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    color: #3b82f6;
    transform: translateY(-2px);
}

#patientStatsSection .doc-action-btn {
    padding: 8px 12px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 3px;
}

#patientStatsSection .doc-action-btn:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* AI Banner */
#patientStatsSection .ai-banner {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    border-left: 6px solid #3b82f6;
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

/* Metric Cards */
#patientStatsSection .metric-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

#patientStatsSection .metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Progress Bars */
#patientStatsSection .progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 30px;
    overflow: hidden;
    margin: 5px 0;
    width: 100%;
}

#patientStatsSection .progress-bar-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 30px;
    transition: width 0.3s ease;
}

/* Chart Filters */
#patientStatsSection .chart-filter {
    padding: 5px 15px;
    background: #e2e8f0;
    color: #64748b;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#patientStatsSection .chart-filter:hover {
    background: #3b82f6;
    color: white;
}

#patientStatsSection .chart-filter.active {
    background: #3b82f6;
    color: white;
}

/* Tables */
#patientStatsSection table {
    width: 100%;
    border-collapse: collapse;
}

#patientStatsSection th {
    padding: 12px 0;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
    font-weight: 600;
    color: #1e293b;
}

#patientStatsSection td {
    padding: 15px 0;
    border-bottom: 1px solid #e2e8f0;
}

/* Patient Avatar */
#patientStatsSection .patient-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
}

/* AI Insights Section */
#patientStatsSection .ai-insights {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    color: white;
}

#patientStatsSection .ai-insights-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}

/* Grid Layouts */
#patientStatsSection .metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

/* Responsive */
@media screen and (max-width: 1024px) {
    #patientStatsSection .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    #patientStatsSection {
        padding: 20px !important;
    }
    
    #patientStatsSection .metrics-grid {
        grid-template-columns: 1fr;
    }
    
    #patientStatsSection .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #patientStatsSection .ai-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #patientStatsSection [style*="grid-template-columns: 2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* Animation keyframes */
@keyframes slideInNotification {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutNotification {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}
      /* ===== MCO CARDS PAGE STYLES - BLUE THEME ===== */

/* Main container */
#mcoCardSection {
    width: 100% !important;
    max-width: 100% !important;
    padding: 30px !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    display: block !important; /* Force display */
}

/* Section headers */
#mcoCardSection .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}

/* Status badges */
#mcoCardSection .status-badge {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

#mcoCardSection .status-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

#mcoCardSection .status-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

/* Buttons */
#mcoCardSection .primary-btn {
    padding: 12px 24px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#mcoCardSection .primary-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.3);
}

#mcoCardSection .secondary-btn {
    padding: 12px 24px;
    background: white;
    color: #1e293b;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#mcoCardSection .secondary-btn:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    color: #3b82f6;
}

#mcoCardSection .doc-action-btn {
    padding: 8px 12px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

#mcoCardSection .doc-action-btn:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* AI Banner */
#mcoCardSection .ai-banner {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    border-left: 6px solid #3b82f6;
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

/* Metric Cards */
#mcoCardSection .metric-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

#mcoCardSection .metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* MCO Cards Grid */
#mcoCardSection .mco-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

/* Individual MCO Card */
#mcoCardSection .mco-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

#mcoCardSection .mco-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Card Header Gradients */
#mcoCardSection .card-gradient-blue {
    background: linear-gradient(135deg, #3b82f6, #1e40af);
}

#mcoCardSection .card-gradient-green {
    background: linear-gradient(135deg, #10b981, #047857);
}

#mcoCardSection .card-gradient-orange {
    background: linear-gradient(135deg, #f59e0b, #b45309);
}

#mcoCardSection .card-gradient-purple {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

#mcoCardSection .card-gradient-red {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
}

/* Progress Bars */
#mcoCardSection .progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 30px;
    overflow: hidden;
    margin: 5px 0;
    width: 100%;
}

#mcoCardSection .progress-bar-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 30px;
    transition: width 0.3s ease;
}

/* Quick Action Buttons */
#mcoCardSection .quick-action-btn {
    padding: 15px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

#mcoCardSection .quick-action-btn:hover {
    background: #f1f5f9;
    border-color: #3b82f6;
}

/* Tables */
#mcoCardSection table {
    width: 100%;
    border-collapse: collapse;
}

#mcoCardSection th {
    padding: 12px 0;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
    font-weight: 600;
    color: #1e293b;
}

#mcoCardSection td {
    padding: 15px 0;
    border-bottom: 1px solid #e2e8f0;
}

/* Filter Select */
#mcoCardSection .filter-select {
    padding: 10px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    min-width: 150px;
    background: white;
    cursor: pointer;
}

#mcoCardSection .filter-select:focus {
    border-color: #3b82f6;
    outline: none;
}

/* Responsive */
@media screen and (max-width: 1024px) {
    #mcoCardSection .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    #mcoCardSection .mco-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    #mcoCardSection {
        padding: 20px !important;
    }
    
    #mcoCardSection .metrics-grid,
    #mcoCardSection .mco-cards-grid,
    #mcoCardSection [style*="grid-template-columns: 2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    #mcoCardSection .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #mcoCardSection .ai-banner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Animation keyframes */
@keyframes slideInNotification {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutNotification {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}
      /* ===== TELEMEDICINE SUITE PAGE STYLES - BLUE THEME ===== */

/* Main container */
#telemedicineSuite {
    width: 100% !important;
    max-width: 100% !important;
    padding: 30px !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

/* Section headers */
#telemedicineSuite .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}

/* Status badges */
#telemedicineSuite .status-badge {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

#telemedicineSuite .status-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

#telemedicineSuite .status-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

#telemedicineSuite .status-badge.pending {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

/* HIPAA Badge */
#telemedicineSuite .hipaa-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #10b981;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

/* Buttons */
#telemedicineSuite .primary-btn {
    padding: 12px 24px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#telemedicineSuite .primary-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.3);
}

#telemedicineSuite .secondary-btn {
    padding: 12px 24px;
    background: white;
    color: #1e293b;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#telemedicineSuite .secondary-btn:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    color: #3b82f6;
    transform: translateY(-2px);
}

#telemedicineSuite .doc-action-btn {
    padding: 8px 12px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

#telemedicineSuite .doc-action-btn:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* AI Banner */
#telemedicineSuite .ai-banner {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    border-left: 6px solid #3b82f6;
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

/* Telemedicine Features Grid */
#telemedicineSuite .tele-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

/* Telemedicine Feature Card */
#telemedicineSuite .tele-feature {
    background: white;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

#telemedicineSuite .tele-feature:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: #3b82f6;
}

#telemedicineSuite .tele-feature-icon {
    width: 60px;
    height: 60px;
    background: #eff6ff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

#telemedicineSuite .tele-feature-icon i {
    color: #3b82f6;
    font-size: 28px;
}

/* Appointments Grid */
#telemedicineSuite .appointments-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Appointment Card */
#telemedicineSuite .appointment-card {
    background: #f8fafc;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

#telemedicineSuite .appointment-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Waiting Room Items */
#telemedicineSuite .waiting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: #f8fafc;
    border-radius: 12px;
    margin-bottom: 10px;
}

/* Active Call Items */
#telemedicineSuite .active-call {
    padding: 15px;
    background: #f0fdf4;
    border-radius: 12px;
    border-left: 4px solid #10b981;
    margin-bottom: 10px;
}

/* Responsive */
@media screen and (max-width: 1024px) {
    #telemedicineSuite .tele-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    #telemedicineSuite .appointments-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    #telemedicineSuite {
        padding: 20px !important;
    }
    
    #telemedicineSuite .tele-grid,
    #telemedicineSuite .appointments-grid,
    #telemedicineSuite [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    #telemedicineSuite .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #telemedicineSuite .ai-banner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Animation keyframes */
@keyframes slideInNotification {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutNotification {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}
      /* ===== TELEPSYCHIATRY SUITE PAGE STYLES - BLUE THEME ===== */

/* Main container */
#telepsychiatrySuite {
    width: 100% !important;
    max-width: 100% !important;
    padding: 30px !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

/* Section headers */
#telepsychiatrySuite .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}

#telepsychiatrySuite .section-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Status badges */
#telepsychiatrySuite .status-badge {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

#telepsychiatrySuite .status-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

#telepsychiatrySuite .status-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

#telepsychiatrySuite .status-badge.pending {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

#telepsychiatrySuite .status-badge.inactive {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* HIPAA Badge */
#telepsychiatrySuite .hipaa-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #10b981;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

/* Buttons - Primary (Blue) */
#telepsychiatrySuite .primary-btn {
    padding: 12px 24px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid transparent;
}

#telepsychiatrySuite .primary-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.3);
}

#telepsychiatrySuite .primary-btn:active {
    transform: translateY(0);
}

/* Buttons - Secondary */
#telepsychiatrySuite .secondary-btn {
    padding: 12px 24px;
    background: white;
    color: #1e293b;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#telepsychiatrySuite .secondary-btn:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    color: #3b82f6;
    transform: translateY(-2px);
}

/* Document Action Buttons */
#telepsychiatrySuite .doc-action-btn {
    padding: 8px 12px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 3px;
}

#telepsychiatrySuite .doc-action-btn:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* AI Banner */
#telepsychiatrySuite .ai-banner {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    border-left: 6px solid #3b82f6;
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

/* Telepsychiatry Features Grid */
#telepsychiatrySuite .tele-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

/* Telepsychiatry Feature Card */
#telepsychiatrySuite .tele-feature {
    background: white;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

#telepsychiatrySuite .tele-feature:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: #3b82f6;
}

#telepsychiatrySuite .tele-feature-icon {
    width: 60px;
    height: 60px;
    background: #eff6ff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

#telepsychiatrySuite .tele-feature-icon i {
    color: #3b82f6;
    font-size: 28px;
}

/* Feature notification badges */
#telepsychiatrySuite .feature-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #ef4444;
    color: white;
    border-radius: 30px;
    padding: 2px 8px;
    font-size: 11px;
}

/* Quick Start Section */
#telepsychiatrySuite .quick-start-section {
    background: #eff6ff;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid #3b82f6;
}

/* Progress Bars */
#telepsychiatrySuite .progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 30px;
    overflow: hidden;
    margin: 5px 0;
    width: 100%;
}

#telepsychiatrySuite .progress-bar-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 30px;
    transition: width 0.3s ease;
}

/* Tables */
#telepsychiatrySuite table {
    width: 100%;
    border-collapse: collapse;
}

#telepsychiatrySuite th {
    padding: 12px 0;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
    font-weight: 600;
    color: #1e293b;
}

#telepsychiatrySuite td {
    padding: 15px 0;
    border-bottom: 1px solid #e2e8f0;
}

/* Patient Avatar */
#telepsychiatrySuite .patient-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
}

/* Schedule Items */
#telepsychiatrySuite .schedule-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background: #f8fafc;
    border-radius: 12px;
    margin-bottom: 10px;
    border-left: 4px solid transparent;
}

#telepsychiatrySuite .schedule-item.blue {
    border-left-color: #3b82f6;
}

#telepsychiatrySuite .schedule-item.green {
    border-left-color: #10b981;
}

#telepsychiatrySuite .schedule-item.orange {
    border-left-color: #f59e0b;
}

/* Time column in schedule */
#telepsychiatrySuite .schedule-time {
    width: 60px;
    text-align: center;
    font-weight: 700;
}

/* Active Sessions */
#telepsychiatrySuite .active-session {
    background: #f0f9ff;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
}

/* High Risk Alerts */
#telepsychiatrySuite .high-risk-alert {
    background: #fef2f2;
    border-radius: 12px;
    padding: 15px;
    border-left: 4px solid #ef4444;
}

/* Assessment Cards */
#telepsychiatrySuite .assessment-card {
    background: #eff6ff;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

#telepsychiatrySuite .assessment-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Pending Items */
#telepsychiatrySuite .pending-item {
    background: #f8fafc;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 10px;
}

/* Crisis Hotline Section */
#telepsychiatrySuite .crisis-hotline {
    margin-top: 20px;
    padding: 15px;
    background: #1e293b;
    border-radius: 12px;
    color: white;
}

/* Modal Styles (for popups) */
#telepsychiatrySuite .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    padding: 20px;
    animation: modalFadeIn 0.3s ease;
}

#telepsychiatrySuite .modal-container {
    background: white;
    border-radius: 24px;
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalSlideUp 0.3s ease;
}

#telepsychiatrySuite .modal-container::-webkit-scrollbar {
    width: 8px;
}

#telepsychiatrySuite .modal-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#telepsychiatrySuite .modal-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

#telepsychiatrySuite .modal-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

#telepsychiatrySuite .modal-header {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    padding: 25px;
    border-radius: 24px 24px 0 0;
    color: white;
    position: relative;
}

#telepsychiatrySuite .modal-header.crisis {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
}

#telepsychiatrySuite .modal-header.green {
    background: linear-gradient(135deg, #10b981, #059669);
}

#telepsychiatrySuite .modal-close {
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 22px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s;
}

#telepsychiatrySuite .modal-close:hover {
    opacity: 1;
}

#telepsychiatrySuite .modal-body {
    padding: 25px;
}

/* Queue Stats */
#telepsychiatrySuite .queue-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 20px;
}

#telepsychiatrySuite .stat-box {
    background: #eff6ff;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
}

#telepsychiatrySuite .stat-number {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #3b82f6;
}

#telepsychiatrySuite .stat-label {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 12px;
}

/* Responsive */
@media screen and (max-width: 1024px) {
    #telepsychiatrySuite .tele-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    #telepsychiatrySuite .quick-start-section > div {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    #telepsychiatrySuite {
        padding: 20px !important;
    }
    
    #telepsychiatrySuite .tele-grid,
    #telepsychiatrySuite .quick-start-section > div,
    #telepsychiatrySuite [style*="grid-template-columns: 2fr 1fr"],
    #telepsychiatrySuite [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    #telepsychiatrySuite .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #telepsychiatrySuite .ai-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #telepsychiatrySuite .schedule-item {
        flex-wrap: wrap;
    }
    
    #telepsychiatrySuite .schedule-time {
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
    }
    
    #telepsychiatrySuite .modal-container {
        max-width: 95%;
    }
}

/* Animation keyframes */
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideUp {
    from { 
        transform: translateY(50px);
        opacity: 0;
    }
    to { 
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInNotification {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutNotification {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Utility Classes */
#telepsychiatrySuite .text-center {
    text-align: center;
}

#telepsychiatrySuite .mt-4 {
    margin-top: 30px;
}

#telepsychiatrySuite .mb-4 {
    margin-bottom: 30px;
}

#telepsychiatrySuite .flex {
    display: flex;
}

#telepsychiatrySuite .items-center {
    align-items: center;
}

#telepsychiatrySuite .justify-between {
    justify-content: space-between;
}

#telepsychiatrySuite .gap-2 {
    gap: 20px;
}

#telepsychiatrySuite .gap-1 {
    gap: 10px;
}

#telepsychiatrySuite .w-full {
    width: 100%;
}

/* Hover Effects */
#telepsychiatrySuite .hover-lift:hover {
    transform: translateY(-2px);
    transition: transform 0.3s ease;
}

#telepsychiatrySuite .hover-shadow:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

/* Loading Spinner */
#telepsychiatrySuite .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Tooltip */
#telepsychiatrySuite .tooltip {
    position: relative;
    display: inline-block;
}

#telepsychiatrySuite .tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

#telepsychiatrySuite .tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    transition: opacity 0.3s ease;
    z-index: 10;
}

#telepsychiatrySuite .tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}
      /* ===== PRIOR AUTHORIZATION AI PAGE STYLES - BLUE THEME ===== */

/* Main container */
#priorAuthPage {
    width: 100% !important;
    max-width: 100% !important;
    padding: 30px !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

/* Section headers */
#priorAuthPage .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}

#priorAuthPage .section-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Status badges */
#priorAuthPage .status-badge {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

#priorAuthPage .status-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

#priorAuthPage .status-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

#priorAuthPage .status-badge.pending {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

#priorAuthPage .status-badge.inactive {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* HIPAA Badge */
#priorAuthPage .hipaa-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #10b981;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

/* Buttons - Primary (Blue) */
#priorAuthPage .primary-btn {
    padding: 12px 24px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid transparent;
}

#priorAuthPage .primary-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.3);
}

#priorAuthPage .primary-btn:active {
    transform: translateY(0);
}

/* Buttons - Secondary */
#priorAuthPage .secondary-btn {
    padding: 12px 24px;
    background: white;
    color: #1e293b;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#priorAuthPage .secondary-btn:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    color: #3b82f6;
    transform: translateY(-2px);
}

/* Document Action Buttons */
#priorAuthPage .doc-action-btn {
    padding: 8px 12px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 3px;
}

#priorAuthPage .doc-action-btn:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* AI Banner */
#priorAuthPage .ai-banner {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    border-left: 6px solid #3b82f6;
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

/* Metrics Grid */
#priorAuthPage .metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

/* Metric Cards */
#priorAuthPage .metric-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

#priorAuthPage .metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

#priorAuthPage .metric-card .metric-icon {
    width: 48px;
    height: 48px;
    background: #eff6ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

#priorAuthPage .metric-card .metric-icon i {
    color: #3b82f6;
    font-size: 24px;
}

#priorAuthPage .metric-card .trend-up {
    color: #10b981;
    font-weight: 600;
}

#priorAuthPage .metric-card .trend-down {
    color: #ef4444;
    font-weight: 600;
}

/* Progress Bars */
#priorAuthPage .progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 30px;
    overflow: hidden;
    margin: 5px 0;
    width: 100%;
}

#priorAuthPage .progress-bar-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 30px;
    transition: width 0.3s ease;
}

/* Tables */
#priorAuthPage table {
    width: 100%;
    border-collapse: collapse;
}

#priorAuthPage th {
    padding: 12px 0;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
    font-weight: 600;
    color: #1e293b;
}

#priorAuthPage td {
    padding: 15px 0;
    border-bottom: 1px solid #e2e8f0;
}

/* Patient Avatar in Tables */
#priorAuthPage .patient-avatar {
    width: 35px;
    height: 35px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
}

/* Filter Select */
#priorAuthPage .filter-select {
    padding: 8px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    min-width: 150px;
}

#priorAuthPage .filter-select:focus {
    border-color: #3b82f6;
    outline: none;
}

/* AI Form Assistant */
#priorAuthPage .ai-assistant {
    background: #f0f9ff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

#priorAuthPage .procedure-tag {
    background: white;
    border: 1px solid #e2e8f0;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#priorAuthPage .procedure-tag:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* Document Items */
#priorAuthPage .document-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 12px;
    margin-bottom: 10px;
}

#priorAuthPage .document-item i.fa-file-pdf {
    color: #ef4444;
    font-size: 24px;
}

#priorAuthPage .document-item i.fa-file-word {
    color: #3b82f6;
    font-size: 24px;
}

/* AI Predictions Section */
#priorAuthPage .predictions-section {
    background: white;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
}

/* Common Procedures Cards */
#priorAuthPage .stats-card {
    background: white;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
}

#priorAuthPage .stats-card h3 {
    margin: 0 0 15px;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#priorAuthPage .stats-card h3 i {
    color: #3b82f6;
}

#priorAuthPage .stat-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

#priorAuthPage .stat-row .value {
    font-weight: 600;
}

#priorAuthPage .stat-row .success {
    color: #10b981;
}

#priorAuthPage .stat-row .warning {
    color: #f59e0b;
}

/* Recent Activity */
#priorAuthPage .activity-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 10px;
}

#priorAuthPage .activity-item i.fa-check-circle {
    color: #10b981;
}

#priorAuthPage .activity-item i.fa-file-upload {
    color: #3b82f6;
}

#priorAuthPage .activity-item i.fa-exclamation-circle {
    color: #ef4444;
}

#priorAuthPage .activity-time {
    margin-left: auto;
    color: #64748b;
    font-size: 13px;
}

/* Pagination */
#priorAuthPage .pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

#priorAuthPage .pagination-info {
    color: #64748b;
}

#priorAuthPage .pagination-controls {
    display: flex;
    gap: 10px;
}

#priorAuthPage .pagination-page {
    padding: 8px 15px;
    background: #3b82f6;
    color: white;
    border-radius: 6px;
    font-weight: 600;
}

/* Modal Styles */
#priorAuthPage .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    padding: 20px;
    animation: modalFadeIn 0.3s ease;
}

#priorAuthPage .modal-container {
    background: white;
    border-radius: 24px;
    width: 100%;
    max-width: 700px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalSlideUp 0.3s ease;
}

#priorAuthPage .modal-container::-webkit-scrollbar {
    width: 8px;
}

#priorAuthPage .modal-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#priorAuthPage .modal-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

#priorAuthPage .modal-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

#priorAuthPage .modal-header {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    padding: 25px;
    border-radius: 24px 24px 0 0;
    color: white;
    position: relative;
}

#priorAuthPage .modal-header.green {
    background: linear-gradient(135deg, #10b981, #059669);
}

#priorAuthPage .modal-header.orange {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

#priorAuthPage .modal-close {
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 22px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s;
}

#priorAuthPage .modal-close:hover {
    opacity: 1;
}

#priorAuthPage .modal-body {
    padding: 25px;
}

/* Form Elements */
#priorAuthPage input[type="text"],
#priorAuthPage input[type="email"],
#priorAuthPage input[type="number"],
#priorAuthPage input[type="date"],
#priorAuthPage select,
#priorAuthPage textarea {
    width: 100%;
    padding: 14px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 15px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

#priorAuthPage input[type="text"]:focus,
#priorAuthPage input[type="email"]:focus,
#priorAuthPage input[type="number"]:focus,
#priorAuthPage input[type="date"]:focus,
#priorAuthPage select:focus,
#priorAuthPage textarea:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

#priorAuthPage label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
}

#priorAuthPage .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#priorAuthPage .checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

#priorAuthPage .checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3b82f6;
}

/* Upload Area */
#priorAuthPage .upload-area {
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

#priorAuthPage .upload-area:hover {
    border-color: #3b82f6;
    background: #f0f9ff;
}

#priorAuthPage .upload-area i {
    font-size: 32px;
    color: #3b82f6;
    margin-bottom: 10px;
}

/* AI Confidence Score */
#priorAuthPage .ai-confidence {
    background: #f8fafc;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

#priorAuthPage .confidence-circle {
    width: 50px;
    height: 50px;
    background: #eff6ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#priorAuthPage .confidence-circle i {
    color: #3b82f6;
    font-size: 24px;
}

#priorAuthPage .confidence-score {
    font-weight: 700;
    color: #10b981;
}

/* Footer */
#priorAuthPage .footer {
    margin-top: 30px;
    padding: 20px;
    text-align: center;
    border-top: 2px solid #e2e8f0;
}

#priorAuthPage .footer-text {
    color: #64748b;
    margin: 0;
}

#priorAuthPage .footer-link {
    color: #3b82f6;
    cursor: pointer;
    text-decoration: none;
}

#priorAuthPage .footer-link:hover {
    text-decoration: underline;
}

/* Responsive */
@media screen and (max-width: 1024px) {
    #priorAuthPage .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    #priorAuthPage {
        padding: 20px !important;
    }
    
    #priorAuthPage .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #priorAuthPage .ai-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #priorAuthPage .metrics-grid {
        grid-template-columns: 1fr;
    }
    
    #priorAuthPage [style*="grid-template-columns: 2fr 1fr"],
    #priorAuthPage [style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
    
    #priorAuthPage .modal-container {
        max-width: 95%;
    }
    
    #priorAuthPage .doc-action-btn {
        padding: 6px 8px;
        font-size: 11px;
    }
}

/* Animation keyframes */
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideUp {
    from { 
        transform: translateY(50px);
        opacity: 0;
    }
    to { 
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInNotification {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutNotification {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Utility Classes */
#priorAuthPage .text-center {
    text-align: center;
}

#priorAuthPage .mt-4 {
    margin-top: 30px;
}

#priorAuthPage .mb-4 {
    margin-bottom: 30px;
}

#priorAuthPage .flex {
    display: flex;
}

#priorAuthPage .items-center {
    align-items: center;
}

#priorAuthPage .justify-between {
    justify-content: space-between;
}

#priorAuthPage .gap-2 {
    gap: 20px;
}

#priorAuthPage .gap-1 {
    gap: 10px;
}

#priorAuthPage .w-full {
    width: 100%;
}

/* Hover Effects */
#priorAuthPage .hover-lift:hover {
    transform: translateY(-2px);
    transition: transform 0.3s ease;
}

#priorAuthPage .hover-shadow:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

/* Loading Spinner */
#priorAuthPage .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Tooltip */
#priorAuthPage .tooltip {
    position: relative;
    display: inline-block;
}

#priorAuthPage .tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

#priorAuthPage .tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    transition: opacity 0.3s ease;
    z-index: 10;
}

#priorAuthPage .tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

/* Badge Variations */
#priorAuthPage .badge-blue {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

#priorAuthPage .badge-green {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

#priorAuthPage .badge-orange {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

#priorAuthPage .badge-red {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Gradient Backgrounds */
#priorAuthPage .gradient-blue {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
}

#priorAuthPage .gradient-green {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}

#priorAuthPage .gradient-orange {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
}

#priorAuthPage .gradient-red {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
}
      /* ===== INSURANCE VERIFICATION PAGE STYLES - BLUE THEME ===== */
/* Mobile-First Design - Optimized for ALL devices */

/* Main container - Mobile First */
#insurancePage {
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

/* Larger screens */
@media (min-width: 768px) {
    #insurancePage {
        padding: 30px !important;
    }
}

/* Section headers */
#insurancePage .section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    width: 100%;
}

@media (min-width: 768px) {
    #insurancePage .section-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
    }
}

#insurancePage .section-title {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    #insurancePage .section-title {
        font-size: 28px;
    }
}

/* Status badges */
#insurancePage .status-badge {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    white-space: nowrap;
}

#insurancePage .status-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

#insurancePage .status-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

/* HIPAA Badge */
#insurancePage .hipaa-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #10b981;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

@media (min-width: 768px) {
    #insurancePage .hipaa-badge {
        padding: 6px 16px;
        font-size: 14px;
    }
}

/* Buttons - Primary (Blue) */
#insurancePage .primary-btn {
    padding: 12px 20px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px; /* iOS minimum touch target */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid transparent;
    width: 100%; /* Full width on mobile */
}

@media (min-width: 768px) {
    #insurancePage .primary-btn {
        width: auto;
        padding: 12px 24px;
    }
}

#insurancePage .primary-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.3);
}

#insurancePage .primary-btn:active {
    transform: translateY(0);
}

/* Buttons - Secondary */
#insurancePage .secondary-btn {
    padding: 12px 20px;
    background: white;
    color: #1e293b;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px; /* iOS minimum touch target */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%; /* Full width on mobile */
}

@media (min-width: 768px) {
    #insurancePage .secondary-btn {
        width: auto;
        padding: 12px 24px;
    }
}

#insurancePage .secondary-btn:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    color: #3b82f6;
    transform: translateY(-2px);
}

/* Document Action Buttons */
#insurancePage .doc-action-btn {
    padding: 8px 12px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 2px;
}

@media (min-width: 768px) {
    #insurancePage .doc-action-btn {
        padding: 8px 12px;
        font-size: 13px;
        margin: 0 3px;
    }
}

#insurancePage .doc-action-btn:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* AI Banner */
#insurancePage .ai-banner {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    border-left: 6px solid #3b82f6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    #insurancePage .ai-banner {
        flex-direction: row;
        align-items: center;
        gap: 25px;
        padding: 25px;
        margin-bottom: 30px;
    }
}

/* Form Section */
#insurancePage .form-section {
    background: white;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    #insurancePage .form-section {
        padding: 30px;
        margin-bottom: 30px;
    }
}

/* Form Rows - Mobile Stack */
#insurancePage .form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

@media (min-width: 768px) {
    #insurancePage .form-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-bottom: 20px;
    }
}

/* Form Elements */
#insurancePage input[type="text"],
#insurancePage input[type="email"],
#insurancePage input[type="number"],
#insurancePage input[type="date"],
#insurancePage select,
#insurancePage textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 16px; /* Prevents iOS zoom on focus */
    transition: all 0.3s ease;
    box-sizing: border-box;
    background: white;
    color: #1e293b;
    -webkit-appearance: none; /* Removes default iOS styling */
    appearance: none;
}

/* Larger touch targets for mobile */
@media (max-width: 767px) {
    #insurancePage input[type="text"],
    #insurancePage input[type="email"],
    #insurancePage input[type="number"],
    #insurancePage input[type="date"],
    #insurancePage select,
    #insurancePage textarea,
    #insurancePage .primary-btn,
    #insurancePage .secondary-btn,
    #insurancePage .doc-action-btn {
        min-height: 48px; /* Better touch target */
        font-size: 16px; /* Prevents zoom */
    }
}

#insurancePage input[type="text"]:focus,
#insurancePage input[type="email"]:focus,
#insurancePage input[type="number"]:focus,
#insurancePage input[type="date"]:focus,
#insurancePage select:focus,
#insurancePage textarea:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

#insurancePage label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
}

/* Patient Dropdown */
#insurancePage #aiPatientDropdown {
    position: absolute;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    max-height: 250px;
    overflow-y: auto;
    width: 100%;
    display: none;
    z-index: 1000;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    left: 0;
    right: 0;
}

@media (min-width: 768px) {
    #insurancePage #aiPatientDropdown {
        max-height: 300px;
    }
}

#insurancePage .patient-option {
    padding: 12px 15px;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent; /* Removes tap highlight on mobile */
}

@media (min-width: 768px) {
    #insurancePage .patient-option {
        padding: 15px;
    }
}

#insurancePage .patient-option:hover {
    background: #f0f9ff;
}

#insurancePage .patient-option:active {
    background: #e2e8f0;
}

/* Progress Bars */
#insurancePage .progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 30px;
    overflow: hidden;
    margin: 5px 0;
    width: 100%;
}

#insurancePage .progress-bar-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 30px;
    transition: width 0.3s ease;
}

/* Results Grid - Mobile */
#insurancePage [style*="grid-template-columns: repeat(4, 1fr)"] {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    #insurancePage [style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px;
    }
}

/* Coverage Cards */
#insurancePage .coverage-card {
    background: #f8fafc;
    border-radius: 16px;
    padding: 15px;
    text-align: center;
}

@media (min-width: 768px) {
    #insurancePage .coverage-card {
        padding: 20px;
    }
}

/* Tables - Horizontal Scroll on Mobile */
#insurancePage .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    margin: 0 -15px; /* Allow full width scroll */
    padding: 0 15px;
}

#insurancePage table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px; /* Forces horizontal scroll on mobile */
}

@media (min-width: 768px) {
    #insurancePage table {
        min-width: 100%;
    }
}

#insurancePage th {
    padding: 12px 0;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
    font-weight: 600;
    color: #1e293b;
    font-size: 13px;
}

@media (min-width: 768px) {
    #insurancePage th {
        padding: 12px 0;
        font-size: 14px;
    }
}

#insurancePage td {
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 13px;
}

@media (min-width: 768px) {
    #insurancePage td {
        padding: 15px 0;
        font-size: 14px;
    }
}

/* Patient Avatar */
#insurancePage .patient-avatar {
    width: 35px;
    height: 35px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    #insurancePage .patient-avatar {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* Filter Select */
#insurancePage .filter-select {
    padding: 8px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    min-width: 120px;
    font-size: 14px;
    height: 44px; /* Consistent touch target */
}

@media (min-width: 768px) {
    #insurancePage .filter-select {
        min-width: 150px;
    }
}

#insurancePage .filter-select:focus {
    border-color: #3b82f6;
    outline: none;
}

/* AI Confidence Section */
#insurancePage .ai-confidence {
    background: #f0f9ff;
    border-radius: 16px;
    padding: 15px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

@media (min-width: 768px) {
    #insurancePage .ai-confidence {
        flex-direction: row;
        align-items: center;
        gap: 20px;
        padding: 20px;
    }
}

/* Modal Styles - Mobile Optimized */
#insurancePage .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: flex-end; /* Slide from bottom on mobile */
    justify-content: center;
    z-index: 100000;
    padding: 0;
    animation: modalFadeIn 0.3s ease;
}

@media (min-width: 768px) {
    #insurancePage .modal-overlay {
        align-items: center;
        padding: 20px;
    }
}

#insurancePage .modal-container {
    background: white;
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.1);
    animation: modalSlideUp 0.3s ease;
}

@media (min-width: 768px) {
    #insurancePage .modal-container {
        border-radius: 24px;
        width: 90%;
        max-width: 500px;
        max-height: 85vh;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        animation: modalSlideUp 0.3s ease;
    }
}

/* Better scrollbar for modals */
#insurancePage .modal-container::-webkit-scrollbar {
    width: 4px;
}

#insurancePage .modal-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#insurancePage .modal-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

#insurancePage .modal-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Modal Header */
#insurancePage .modal-header {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    padding: 20px;
    color: white;
    position: relative;
    border-radius: 24px 24px 0 0;
}

@media (min-width: 768px) {
    #insurancePage .modal-header {
        padding: 25px;
    }
}

#insurancePage .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 22px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s;
    padding: 8px; /* Larger touch target */
    -webkit-tap-highlight-color: transparent;
}

@media (min-width: 768px) {
    #insurancePage .modal-close {
        top: 25px;
        right: 25px;
        padding: 0;
    }
}

/* Modal Body */
#insurancePage .modal-body {
    padding: 20px;
}

@media (min-width: 768px) {
    #insurancePage .modal-body {
        padding: 25px;
    }
}

/* Footer */
#insurancePage .footer {
    margin-top: 30px;
    padding: 15px;
    text-align: center;
    border-top: 2px solid #e2e8f0;
}

@media (min-width: 768px) {
    #insurancePage .footer {
        margin-top: 40px;
        padding: 20px;
    }
}

#insurancePage .footer-text {
    color: #64748b;
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}

@media (min-width: 768px) {
    #insurancePage .footer-text {
        font-size: 14px;
    }
}

/* ===== MOBILE-SPECIFIC OPTIMIZATIONS ===== */

/* iPhone 5/SE (320px) */
@media (max-width: 320px) {
    #insurancePage {
        padding: 10px !important;
    }
    
    #insurancePage h1 {
        font-size: 22px !important;
    }
    
    #insurancePage .section-title {
        font-size: 18px !important;
    }
    
    #insurancePage .hipaa-badge {
        font-size: 10px;
        padding: 3px 8px;
    }
    
    #insurancePage .status-badge {
        font-size: 10px;
        padding: 3px 8px;
    }
    
    #insurancePage .coverage-card {
        padding: 10px;
    }
    
    #insurancePage .coverage-card i {
        font-size: 20px !important;
    }
    
    #insurancePage .coverage-card h4 {
        font-size: 12px;
    }
    
    #insurancePage .coverage-card p {
        font-size: 16px !important;
    }
}

/* iPhone 6/7/8 (375px) */
@media (min-width: 321px) and (max-width: 375px) {
    #insurancePage h1 {
        font-size: 24px;
    }
    
    #insurancePage .coverage-card p {
        font-size: 18px;
    }
}

/* iPhone X/11/12/13/14 (390px) */
@media (min-width: 376px) and (max-width: 390px) {
    #insurancePage h1 {
        font-size: 26px;
    }
}

/* iPhone 15/Plus/Pro Max (430px) */
@media (min-width: 391px) and (max-width: 430px) {
    #insurancePage h1 {
        font-size: 28px;
    }
}

/* Android Small (360px) */
@media (max-width: 360px) {
    #insurancePage .patient-option {
        padding: 10px;
    }
    
    #insurancePage .patient-option .avatar {
        width: 35px;
        height: 35px;
    }
    
    #insurancePage .doc-action-btn {
        padding: 6px 8px;
        font-size: 11px;
    }
}

/* Android Large (414px) */
@media (min-width: 361px) and (max-width: 414px) {
    #insurancePage .patient-option {
        padding: 12px;
    }
}

/* Tablet Optimizations */
@media (min-width: 768px) and (max-width: 1024px) {
    #insurancePage {
        padding: 25px !important;
    }
    
    #insurancePage .ai-banner {
        padding: 20px;
    }
    
    #insurancePage .coverage-card {
        padding: 18px;
    }
}

/* Landscape Mode Optimizations */
@media (orientation: landscape) and (max-height: 600px) {
    #insurancePage .ai-banner {
        padding: 15px;
    }
    
    #insurancePage .modal-container {
        max-height: 80vh;
    }
    
    #insurancePage .patient-option {
        padding: 10px;
    }
}

/* ===== ANIMATIONS ===== */
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideUp {
    from { 
        transform: translateY(100%);
        opacity: 0;
    }
    to { 
        transform: translateY(0);
        opacity: 1;
    }
}

@media (min-width: 768px) {
    @keyframes modalSlideUp {
        from { 
            transform: translateY(50px);
            opacity: 0;
        }
        to { 
            transform: translateY(0);
            opacity: 1;
        }
    }
}

@keyframes slideInNotification {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutNotification {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ===== NOTIFICATION STYLES ===== */
#insurancePage .insurance-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    left: 20px; /* Full width on mobile */
    padding: 16px 20px;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideInNotification 0.3s ease;
    cursor: pointer;
    border-left: 4px solid white;
    max-width: none;
}

@media (min-width: 768px) {
    #insurancePage .insurance-notification {
        top: 30px;
        right: 30px;
        left: auto;
        padding: 16px 28px;
        font-size: 15px;
        max-width: 400px;
    }
}

/* ===== HOVER EFFECTS - ONLY ON NON-TOUCH DEVICES ===== */
@media (hover: hover) {
    #insurancePage .patient-option:hover {
        background: #f0f9ff;
    }
    
    #insurancePage .primary-btn:hover {
        background: #2563eb;
        transform: translateY(-2px);
    }
    
    #insurancePage .secondary-btn:hover {
        background: #f8fafc;
        border-color: #3b82f6;
        color: #3b82f6;
    }
}

/* ===== SAFE AREA FOR NOTCHED DEVICES ===== */
@supports (padding: max(0px)) {
    #insurancePage {
        padding-left: max(15px, env(safe-area-inset-left)) !important;
        padding-right: max(15px, env(safe-area-inset-right)) !important;
    }
    
    #insurancePage .insurance-notification {
        top: max(20px, env(safe-area-inset-top));
        right: max(20px, env(safe-area-inset-right));
        left: max(20px, env(safe-area-inset-left));
    }
}

/* ===== UTILITY CLASSES ===== */
#insurancePage .text-center {
    text-align: center;
}

#insurancePage .mt-2 {
    margin-top: 15px;
}

#insurancePage .mb-2 {
    margin-bottom: 15px;
}

@media (min-width: 768px) {
    #insurancePage .mt-4 {
        margin-top: 30px;
    }
    
    #insurancePage .mb-4 {
        margin-bottom: 30px;
    }
}

#insurancePage .flex {
    display: flex;
}

#insurancePage .flex-col {
    flex-direction: column;
}

@media (min-width: 768px) {
    #insurancePage .flex-row {
        flex-direction: row;
    }
}

#insurancePage .items-center {
    align-items: center;
}

#insurancePage .justify-between {
    justify-content: space-between;
}

#insurancePage .gap-1 {
    gap: 10px;
}

#insurancePage .gap-2 {
    gap: 15px;
}

@media (min-width: 768px) {
    #insurancePage .gap-2 {
        gap: 20px;
    }
}

#insurancePage .w-full {
    width: 100%;
}

/* ===== LOADING SPINNER ===== */
#insurancePage .spinner {
    width: 30px;
    height: 30px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@media (min-width: 768px) {
    #insurancePage .spinner {
        width: 40px;
        height: 40px;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== TOOLTIP ===== */
#insurancePage .tooltip {
    position: relative;
    display: inline-block;
}

#insurancePage .tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

#insurancePage .tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    transition: opacity 0.3s ease;
    z-index: 10;
}

#insurancePage .tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}
      /* Additional styles for Billing Page */

/* Facility badges */
#billingPage .facility-badge {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

#billingPage .facility-badge.hospital {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

#billingPage .facility-badge.dermatology {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

#billingPage .facility-badge.family {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

#billingPage .facility-badge.specialty {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

/* Filter buttons */
#billingPage .filter-btn {
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

#billingPage .filter-btn:hover {
    background: #e2e8f0 !important;
}

/* AI Suggestions dropdown */
#billingPage #aiSuggestions div:hover {
    background: #f0f9ff;
}

/* Progress bar fills */
#billingPage .progress-bar-fill {
    transition: width 0.3s ease;
}

/* Responsive for smaller screens */
@media (max-width: 768px) {
    #billingPage [style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
    
    #billingPage [style*="grid-template-columns: 2fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}
      /* ===== MEDICAID CENTER PAGE STYLES - BLUE THEME ===== */
/* Mobile-First Design - Optimized for ALL devices */

/* Main container - Mobile First */
#medicaidPage {
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

/* Larger screens */
@media (min-width: 768px) {
    #medicaidPage {
        padding: 30px !important;
    }
}

/* Section headers */
#medicaidPage .section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    width: 100%;
}

@media (min-width: 768px) {
    #medicaidPage .section-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
    }
}

/* Status badges */
#medicaidPage .status-badge {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    white-space: nowrap;
}

#medicaidPage .status-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

#medicaidPage .status-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

/* HIPAA Badge */
#medicaidPage .hipaa-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #10b981;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

@media (min-width: 768px) {
    #medicaidPage .hipaa-badge {
        padding: 6px 16px;
        font-size: 14px;
    }
}

/* Buttons - Primary (Blue) */
#medicaidPage .primary-btn {
    padding: 12px 20px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid transparent;
    width: 100%;
}

@media (min-width: 768px) {
    #medicaidPage .primary-btn {
        width: auto;
        padding: 12px 24px;
    }
}

#medicaidPage .primary-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.3);
}

/* Buttons - Secondary */
#medicaidPage .secondary-btn {
    padding: 12px 20px;
    background: white;
    color: #1e293b;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

@media (min-width: 768px) {
    #medicaidPage .secondary-btn {
        width: auto;
        padding: 12px 24px;
    }
}

#medicaidPage .secondary-btn:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    color: #3b82f6;
}

/* Document Action Buttons */
#medicaidPage .doc-action-btn {
    padding: 8px 12px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 2px;
}

@media (min-width: 768px) {
    #medicaidPage .doc-action-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
}

#medicaidPage .doc-action-btn:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* AI Banner */
#medicaidPage .ai-banner {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    border-left: 6px solid #3b82f6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    #medicaidPage .ai-banner {
        flex-direction: row;
        align-items: center;
        gap: 25px;
        padding: 25px;
        margin-bottom: 30px;
    }
}

/* Cards Grid */
#medicaidPage .cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 30px;
}

@media (min-width: 640px) {
    #medicaidPage .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    #medicaidPage .cards-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Feature Cards */
#medicaidPage .feature-card {
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.3s ease;
}

@media (min-width: 768px) {
    #medicaidPage .feature-card {
        padding: 25px;
    }
}

#medicaidPage .feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-color: #3b82f6;
}

/* Patient Dropdown */
#medicaidPage #medicaidPatientDropdown {
    position: absolute;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    max-height: 250px;
    overflow-y: auto;
    width: 90%;
    display: none;
    z-index: 1000;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

@media (min-width: 768px) {
    #medicaidPage #medicaidPatientDropdown {
        width: 50%;
        max-height: 300px;
    }
}

#medicaidPage .patient-option {
    padding: 12px 15px;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

#medicaidPage .patient-option:hover {
    background: #f0f9ff;
}

/* Progress Bars */
#medicaidPage .progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 30px;
    overflow: hidden;
    margin: 5px 0;
    width: 100%;
}

#medicaidPage .progress-bar-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 30px;
    transition: width 0.3s ease;
}

/* Tables - Horizontal Scroll on Mobile */
#medicaidPage .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -15px;
    padding: 0 15px;
}

#medicaidPage table {
    width: 100%;
    border-collapse: collapse;
    min-width: 650px;
}

@media (min-width: 768px) {
    #medicaidPage table {
        min-width: 100%;
    }
}

#medicaidPage th {
    padding: 12px 0;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
    font-weight: 600;
    color: #1e293b;
    font-size: 13px;
}

#medicaidPage td {
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 13px;
}

/* Filter Select */
#medicaidPage .filter-select {
    padding: 8px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    min-width: 120px;
    font-size: 14px;
    height: 44px;
}

/* Modal Styles - Mobile Optimized */
#medicaidPage .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 100000;
    padding: 0;
    animation: modalFadeIn 0.3s ease;
}

@media (min-width: 768px) {
    #medicaidPage .modal-overlay {
        align-items: center;
        padding: 20px;
    }
}

#medicaidPage .modal-container {
    background: white;
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 -10px 25px rgba(0,0,0,0.1);
    animation: modalSlideUp 0.3s ease;
}

@media (min-width: 768px) {
    #medicaidPage .modal-container {
        border-radius: 24px;
        width: 90%;
        max-width: 500px;
        max-height: 85vh;
        box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    }
}

#medicaidPage .modal-header {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    padding: 20px;
    color: white;
    position: relative;
    border-radius: 24px 24px 0 0;
}

#medicaidPage .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 22px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s;
    padding: 8px;
}

/* iPhone 5/SE (320px) */
@media (max-width: 320px) {
    #medicaidPage {
        padding: 10px !important;
    }
    
    #medicaidPage h1 {
        font-size: 22px !important;
    }
    
    #medicaidPage .feature-card {
        padding: 15px;
    }
}

/* iPhone 6/7/8 (375px) */
@media (min-width: 321px) and (max-width: 375px) {
    #medicaidPage h1 {
        font-size: 24px;
    }
}

/* iPhone X/11/12/13/14 (390px) */
@media (min-width: 376px) and (max-width: 390px) {
    #medicaidPage h1 {
        font-size: 26px;
    }
}

/* iPhone 15/Plus/Pro Max (430px) */
@media (min-width: 391px) and (max-width: 430px) {
    #medicaidPage h1 {
        font-size: 28px;
    }
}

/* Landscape Mode */
@media (orientation: landscape) and (max-height: 600px) {
    #medicaidPage .modal-container {
        max-height: 80vh;
    }
}

/* Animations */
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideUp {
    from { 
        transform: translateY(100%);
        opacity: 0;
    }
    to { 
        transform: translateY(0);
        opacity: 1;
    }
}

@media (min-width: 768px) {
    @keyframes modalSlideUp {
        from { 
            transform: translateY(50px);
            opacity: 0;
        }
        to { 
            transform: translateY(0);
            opacity: 1;
        }
    }
}

@keyframes slideInNotification {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutNotification {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Notification Styles */
#medicaidPage .medicaid-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    left: 20px;
    padding: 16px 20px;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideInNotification 0.3s ease;
    cursor: pointer;
    border-left: 4px solid white;
    max-width: none;
}

@media (min-width: 768px) {
    #medicaidPage .medicaid-notification {
        top: 30px;
        right: 30px;
        left: auto;
        padding: 16px 28px;
        font-size: 15px;
        max-width: 400px;
    }
}

/* Safe area for notched devices */
@supports (padding: max(0px)) {
    #medicaidPage {
        padding-left: max(15px, env(safe-area-inset-left)) !important;
        padding-right: max(15px, env(safe-area-inset-right)) !important;
    }
}

/* Utility Classes */
#medicaidPage .text-center { text-align: center; }
#medicaidPage .w-full { width: 100%; }
#medicaidPage .flex { display: flex; }
#medicaidPage .items-center { align-items: center; }
#medicaidPage .justify-between { justify-content: space-between; }
#medicaidPage .gap-1 { gap: 10px; }
#medicaidPage .gap-2 { gap: 15px; }
      /* ===== USER MANAGEMENT PAGE STYLES - BLUE THEME ===== */
/* Mobile-First Design - Optimized for ALL devices */

/* Main container - Mobile First */
#usersPage {
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

/* Larger screens */
@media (min-width: 768px) {
    #usersPage {
        padding: 30px !important;
    }
}

/* Section headers */
#usersPage .section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    width: 100%;
}

@media (min-width: 768px) {
    #usersPage .section-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
    }
}

/* Status badges */
#usersPage .status-badge {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    white-space: nowrap;
}

#usersPage .status-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

#usersPage .status-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

/* Role badges */
#usersPage .role-badge {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

#usersPage .role-badge.office {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

#usersPage .role-badge.billing {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

#usersPage .role-badge.staff {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

#usersPage .role-badge.patient {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

/* HIPAA Badge */
#usersPage .hipaa-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #10b981;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

@media (min-width: 768px) {
    #usersPage .hipaa-badge {
        padding: 6px 16px;
        font-size: 14px;
    }
}

/* Buttons - Primary (Blue) */
#usersPage .primary-btn {
    padding: 12px 20px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid transparent;
    width: 100%;
}

@media (min-width: 768px) {
    #usersPage .primary-btn {
        width: auto;
        padding: 12px 24px;
    }
}

#usersPage .primary-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.3);
}

/* Buttons - Secondary */
#usersPage .secondary-btn {
    padding: 12px 20px;
    background: white;
    color: #1e293b;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

@media (min-width: 768px) {
    #usersPage .secondary-btn {
        width: auto;
        padding: 12px 24px;
    }
}

#usersPage .secondary-btn:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    color: #3b82f6;
}

/* Document Action Buttons */
#usersPage .doc-action-btn {
    padding: 8px 12px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 2px;
}

@media (min-width: 768px) {
    #usersPage .doc-action-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
}

#usersPage .doc-action-btn:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* AI Banner */
#usersPage .ai-banner {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    border-left: 6px solid #3b82f6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    #usersPage .ai-banner {
        flex-direction: row;
        align-items: center;
        gap: 25px;
        padding: 25px;
        margin-bottom: 30px;
    }
}

/* Progress Bars */
#usersPage .progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 30px;
    overflow: hidden;
    margin: 5px 0;
    width: 100%;
}

#usersPage .progress-bar-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 30px;
    transition: width 0.3s ease;
}

/* Tables - Horizontal Scroll on Mobile */
#usersPage .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -15px;
    padding: 0 15px;
}

#usersPage table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
}

@media (min-width: 768px) {
    #usersPage table {
        min-width: 100%;
    }
}

#usersPage th {
    padding: 12px 0;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
    font-weight: 600;
    color: #1e293b;
    font-size: 13px;
}

#usersPage td {
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 13px;
}

/* Filter Select */
#usersPage .filter-select {
    padding: 8px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    min-width: 120px;
    font-size: 14px;
    height: 44px;
}

/* Modal Styles - Mobile Optimized */
#usersPage .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 100000;
    padding: 0;
    animation: modalFadeIn 0.3s ease;
}

@media (min-width: 768px) {
    #usersPage .modal-overlay {
        align-items: center;
        padding: 20px;
    }
}

#usersPage .modal-container {
    background: white;
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 -10px 25px rgba(0,0,0,0.1);
    animation: modalSlideUp 0.3s ease;
}

@media (min-width: 768px) {
    #usersPage .modal-container {
        border-radius: 24px;
        width: 90%;
        max-width: 500px;
        max-height: 85vh;
        box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    }
}

#usersPage .modal-header {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    padding: 20px;
    color: white;
    position: relative;
    border-radius: 24px 24px 0 0;
}

#usersPage .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 22px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s;
    padding: 8px;
}

/* iPhone 5/SE (320px) */
@media (max-width: 320px) {
    #usersPage {
        padding: 10px !important;
    }
    
    #usersPage h1 {
        font-size: 22px !important;
    }
}

/* iPhone 6/7/8 (375px) */
@media (min-width: 321px) and (max-width: 375px) {
    #usersPage h1 {
        font-size: 24px;
    }
}

/* iPhone X/11/12/13/14 (390px) */
@media (min-width: 376px) and (max-width: 390px) {
    #usersPage h1 {
        font-size: 26px;
    }
}

/* iPhone 15/Plus/Pro Max (430px) */
@media (min-width: 391px) and (max-width: 430px) {
    #usersPage h1 {
        font-size: 28px;
    }
}

/* Landscape Mode */
@media (orientation: landscape) and (max-height: 600px) {
    #usersPage .modal-container {
        max-height: 80vh;
    }
}

/* Animations */
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideUp {
    from { 
        transform: translateY(100%);
        opacity: 0;
    }
    to { 
        transform: translateY(0);
        opacity: 1;
    }
}

@media (min-width: 768px) {
    @keyframes modalSlideUp {
        from { 
            transform: translateY(50px);
            opacity: 0;
        }
        to { 
            transform: translateY(0);
            opacity: 1;
        }
    }
}

@keyframes slideInNotification {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutNotification {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Notification Styles */
#usersPage .users-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    left: 20px;
    padding: 16px 20px;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideInNotification 0.3s ease;
    cursor: pointer;
    border-left: 4px solid white;
    max-width: none;
}

@media (min-width: 768px) {
    #usersPage .users-notification {
        top: 30px;
        right: 30px;
        left: auto;
        padding: 16px 28px;
        font-size: 15px;
        max-width: 400px;
    }
}

/* Safe area for notched devices */
@supports (padding: max(0px)) {
    #usersPage {
        padding-left: max(15px, env(safe-area-inset-left)) !important;
        padding-right: max(15px, env(safe-area-inset-right)) !important;
    }
}

/* Utility Classes */
#usersPage .text-center { text-align: center; }
#usersPage .w-full { width: 100%; }
#usersPage .flex { display: flex; }
#usersPage .items-center { align-items: center; }
#usersPage .justify-between { justify-content: space-between; }
#usersPage .gap-1 { gap: 10px; }
#usersPage .gap-2 { gap: 15px; }
      /* ===== AUDIT LOGS PAGE STYLES - BLUE THEME ===== */
/* Mobile-First Design - Optimized for ALL devices */

/* Main container - Mobile First */
#auditPage {
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

/* Larger screens */
@media (min-width: 768px) {
    #auditPage {
        padding: 30px !important;
    }
}

/* Section headers */
#auditPage .section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    width: 100%;
}

@media (min-width: 768px) {
    #auditPage .section-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
    }
}

/* Status badges */
#auditPage .status-badge {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    white-space: nowrap;
}

#auditPage .status-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

#auditPage .status-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

/* Risk badges */
#auditPage .risk-badge {
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

#auditPage .risk-badge.low {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

#auditPage .risk-badge.medium {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

#auditPage .risk-badge.high {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* HIPAA Badge */
#auditPage .hipaa-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #10b981;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

@media (min-width: 768px) {
    #auditPage .hipaa-badge {
        padding: 6px 16px;
        font-size: 14px;
    }
}

/* Buttons - Primary (Blue) */
#auditPage .primary-btn {
    padding: 12px 20px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid transparent;
    width: 100%;
}

@media (min-width: 768px) {
    #auditPage .primary-btn {
        width: auto;
        padding: 12px 24px;
    }
}

#auditPage .primary-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.3);
}

/* Buttons - Secondary */
#auditPage .secondary-btn {
    padding: 12px 20px;
    background: white;
    color: #1e293b;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

@media (min-width: 768px) {
    #auditPage .secondary-btn {
        width: auto;
        padding: 12px 24px;
    }
}

#auditPage .secondary-btn:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    color: #3b82f6;
}

/* Document Action Buttons */
#auditPage .doc-action-btn {
    padding: 8px 12px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 2px;
}

@media (min-width: 768px) {
    #auditPage .doc-action-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
}

#auditPage .doc-action-btn:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* AI Banner */
#auditPage .ai-banner {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    border-left: 6px solid #3b82f6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    #auditPage .ai-banner {
        flex-direction: row;
        align-items: center;
        gap: 25px;
        padding: 25px;
        margin-bottom: 30px;
    }
}

/* Progress Bars */
#auditPage .progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 30px;
    overflow: hidden;
    margin: 5px 0;
    width: 100%;
}

#auditPage .progress-bar-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 30px;
    transition: width 0.3s ease;
}

/* Tables - Horizontal Scroll on Mobile */
#auditPage .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -15px;
    padding: 0 15px;
}

#auditPage table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1000px;
}

@media (min-width: 768px) {
    #auditPage table {
        min-width: 100%;
    }
}

#auditPage th {
    padding: 12px 0;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
    font-weight: 600;
    color: #1e293b;
    font-size: 13px;
}

#auditPage td {
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 13px;
}

/* Filter Select */
#auditPage .filter-select {
    padding: 8px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    min-width: 120px;
    font-size: 14px;
    height: 44px;
}

/* Modal Styles - Mobile Optimized */
#auditPage .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 100000;
    padding: 0;
    animation: modalFadeIn 0.3s ease;
}

@media (min-width: 768px) {
    #auditPage .modal-overlay {
        align-items: center;
        padding: 20px;
    }
}

#auditPage .modal-container {
    background: white;
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 -10px 25px rgba(0,0,0,0.1);
    animation: modalSlideUp 0.3s ease;
}

@media (min-width: 768px) {
    #auditPage .modal-container {
        border-radius: 24px;
        width: 90%;
        max-width: 500px;
        max-height: 85vh;
        box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    }
}

#auditPage .modal-header {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    padding: 20px;
    color: white;
    position: relative;
    border-radius: 24px 24px 0 0;
}

#auditPage .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 22px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s;
    padding: 8px;
}

/* iPhone 5/SE (320px) */
@media (max-width: 320px) {
    #auditPage {
        padding: 10px !important;
    }
    
    #auditPage h1 {
        font-size: 22px !important;
    }
}

/* iPhone 6/7/8 (375px) */
@media (min-width: 321px) and (max-width: 375px) {
    #auditPage h1 {
        font-size: 24px;
    }
}

/* iPhone X/11/12/13/14 (390px) */
@media (min-width: 376px) and (max-width: 390px) {
    #auditPage h1 {
        font-size: 26px;
    }
}

/* iPhone 15/Plus/Pro Max (430px) */
@media (min-width: 391px) and (max-width: 430px) {
    #auditPage h1 {
        font-size: 28px;
    }
}

/* Landscape Mode */
@media (orientation: landscape) and (max-height: 600px) {
    #auditPage .modal-container {
        max-height: 80vh;
    }
}

/* Animations */
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideUp {
    from { 
        transform: translateY(100%);
        opacity: 0;
    }
    to { 
        transform: translateY(0);
        opacity: 1;
    }
}

@media (min-width: 768px) {
    @keyframes modalSlideUp {
        from { 
            transform: translateY(50px);
            opacity: 0;
        }
        to { 
            transform: translateY(0);
            opacity: 1;
        }
    }
}

@keyframes slideInNotification {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutNotification {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Notification Styles */
#auditPage .audit-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    left: 20px;
    padding: 16px 20px;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideInNotification 0.3s ease;
    cursor: pointer;
    border-left: 4px solid white;
    max-width: none;
}

@media (min-width: 768px) {
    #auditPage .audit-notification {
        top: 30px;
        right: 30px;
        left: auto;
        padding: 16px 28px;
        font-size: 15px;
        max-width: 400px;
    }
}

/* Safe area for notched devices */
@supports (padding: max(0px)) {
    #auditPage {
        padding-left: max(15px, env(safe-area-inset-left)) !important;
        padding-right: max(15px, env(safe-area-inset-right)) !important;
    }
}

/* Utility Classes */
#auditPage .text-center { text-align: center; }
#auditPage .w-full { width: 100%; }
#auditPage .flex { display: flex; }
#auditPage .items-center { align-items: center; }
#auditPage .justify-between { justify-content: space-between; }
#auditPage .gap-1 { gap: 10px; }
#auditPage .gap-2 { gap: 15px; }
     /* ================================================ */
/* 🎨 AI PATIENT INTAKE - PROFESSIONAL BLUE THEME */
/* ================================================ */

#patientIntakeSection {
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    background: #f8fafc;
    min-height: 100vh;
}

/* ===== SECTION HEADER ===== */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    width: 100%;
    flex-wrap: wrap;
    gap: 20px;
}

.section-header h1 {
    margin: 0;
    color: #1e293b;
    font-size: 28px;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.section-header h1 i {
    color: #3b82f6;
    font-size: 32px;
}

.section-header p {
    margin: 8px 0 0 0;
    color: #64748b;
    font-size: 15px;
}

/* ===== STATUS BADGES ===== */
.status-badge {
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.status-badge.active {
    background: #10b981;
    color: white;
}

.status-badge.warning {
    background: #f59e0b20;
    color: #f59e0b;
}

.status-badge i {
    font-size: 14px;
}

/* ===== AI BANNER ===== */
.ai-banner {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    border-left: 6px solid #3b82f6;
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

.ai-banner > div:first-child {
    background: #3b82f6;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-banner > div:first-child i {
    color: white;
    font-size: 32px;
}

.ai-banner > div:nth-child(2) {
    flex: 1;
}

.ai-banner h3 {
    margin: 0 0 8px 0;
    color: #1e293b;
    font-size: 20px;
    font-weight: 700;
}

.ai-banner h3 i {
    color: #3b82f6;
    margin-right: 8px;
}

.ai-banner p {
    margin: 0;
    color: #475569;
}

.ai-banner p i {
    color: #10b981;
    margin-right: 5px;
}

.ai-banner p strong {
    color: #1e293b;
}

.ai-banner p span[style*="cursor: pointer"] {
    color: #3b82f6;
    font-weight: 600;
    cursor: pointer;
}

.ai-banner > div:last-child {
    display: flex;
    gap: 20px;
}

.ai-banner > div:last-child > div {
    text-align: center;
    background: white;
    padding: 10px 20px;
    border-radius: 12px;
}

.ai-banner > div:last-child p:first-child {
    margin: 0;
    color: #3b82f6;
    font-size: 24px;
    font-weight: 800;
}

.ai-banner > div:last-child p:last-child {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 12px;
}

/* ===== PRIMARY BUTTONS ===== */
.primary-btn {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.25);
}

.primary-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(59, 130, 246, 0.3);
}

.primary-btn i {
    font-size: 16px;
}

/* ===== SECONDARY BUTTONS ===== */
.secondary-btn {
    background: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.secondary-btn:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

/* ===== METRIC CARDS (Used for Quick Methods & Intake Options) ===== */
.metric-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.metric-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.1);
    border-color: #3b82f6;
}

.metric-card > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.metric-card > div:first-child > div {
    width: 48px;
    height: 48px;
    background: #eff6ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-card > div:first-child > div i {
    color: #3b82f6;
    font-size: 24px;
}

.metric-card > div:first-child span {
    color: #3b82f6;
    font-weight: 600;
}

.metric-card h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.metric-card p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 14px;
}

/* For intake options with larger icons */
.metric-card > div:first-child.metric-icon-large {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    margin-bottom: 15px;
}

.metric-card > div:first-child.metric-icon-large i {
    font-size: 28px;
}

.metric-card .intake-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.metric-card .intake-meta span:first-child {
    color: #64748b;
    font-size: 13px;
}

.metric-card .intake-meta span:first-child i {
    margin-right: 5px;
}

/* ===== HIPAA BADGE ===== */
.hipaa-badge {
    background: #10b98120;
    color: #10b981;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.hipaa-badge i {
    font-size: 11px;
}

/* ===== ACTIVE INTAKES SECTION ===== */
.recent-patients {
    background: white;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
}

.recent-patients > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.recent-patients h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.recent-patients > div:first-child span {
    background: #3b82f6;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

/* Active intake items */
.recent-patients > div:nth-child(2) > div {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 12px;
    margin-bottom: 15px;
}

.recent-patients > div:nth-child(2) > div > div:first-child {
    width: 50px;
    height: 50px;
    background: #3b82f6;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 18px;
    flex-shrink: 0;
}

.recent-patients > div:nth-child(2) > div > div:nth-child(2) {
    flex: 1;
}

.recent-patients > div:nth-child(2) > div > div:nth-child(2) > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.recent-patients > div:nth-child(2) > div > div:nth-child(2) h4 {
    margin: 0;
    font-weight: 600;
    color: #1e293b;
}

.recent-patients > div:nth-child(2) > div > div:nth-child(2) > div:first-child span {
    color: #3b82f6;
    font-weight: 600;
    background: none;
    padding: 0;
}

.recent-patients > div:nth-child(2) > div > div:nth-child(2) > div:nth-child(2) {
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    margin-bottom: 8px;
}

.recent-patients > div:nth-child(2) > div > div:nth-child(2) > div:nth-child(2) div {
    height: 100%;
    background: #3b82f6;
    border-radius: 4px;
}

.recent-patients > div:nth-child(2) > div > div:nth-child(2) p {
    margin: 8px 0 0;
    font-size: 13px;
    color: #64748b;
}

/* Resume button */
.doc-action-btn {
    background: white;
    border: 1px solid #e2e8f0;
    padding: 8px 16px;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.doc-action-btn:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.recent-patients > div:nth-child(2) > div button {
    padding: 10px 20px;
    flex-shrink: 0;
}

/* ===== TABLES ===== */
.recent-patients table {
    width: 100%;
    border-collapse: collapse;
}

.recent-patients thead tr {
    border-bottom: 2px solid #e2e8f0;
}

.recent-patients th {
    padding: 12px 0;
    text-align: left;
    font-weight: 600;
    color: #64748b;
    font-size: 14px;
}

.recent-patients tbody tr {
    border-bottom: 1px solid #e2e8f0;
}

.recent-patients tbody tr:last-child {
    border-bottom: none;
}

.recent-patients td {
    padding: 15px 0;
    color: #1e293b;
}

/* Patient avatar in table */
.recent-patients td > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.recent-patients td > div > div:first-child {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.recent-patients td > div > div:nth-child(2) p:first-child {
    margin: 0;
    font-weight: 600;
    color: #1e293b;
}

.recent-patients td > div > div:nth-child(2) p:last-child {
    margin: 0;
    font-size: 12px;
    color: #64748b;
}

/* Status badges in table */
.recent-patients td span.status-badge {
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
}

.recent-patients td span[style*="background: #10b98120"] {
    background: #10b98120;
    color: #10b981;
}

.recent-patients td span[style*="background: #f59e0b20"] {
    background: #f59e0b20;
    color: #f59e0b;
}

.recent-patients td span[style*="background: #3b82f620"] {
    background: #3b82f620;
    color: #3b82f6;
}

/* AI Insights in table */
.recent-patients td span[style*="color: #3b82f6"] {
    color: #3b82f6;
    font-size: 13px;
}

.recent-patients td span[style*="color: #f59e0b"] {
    color: #f59e0b;
    font-size: 13px;
}

.recent-patients td i {
    margin-right: 5px;
}

/* Action buttons in table */
.recent-patients td .doc-action-btn {
    padding: 8px 12px;
    margin-right: 5px;
}

.recent-patients td .doc-action-btn i {
    margin: 0;
    font-size: 14px;
}

/* ===== PAGINATION ===== */
.recent-patients > div:last-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.recent-patients > div:last-child p {
    color: #64748b;
    margin: 0;
}

.recent-patients > div:last-child div {
    display: flex;
    gap: 10px;
}

.recent-patients > div:last-child button {
    padding: 8px 16px;
}

.recent-patients > div:last-child button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.recent-patients > div:last-child button:disabled:hover {
    background: white;
    color: #64748b;
    border-color: #e2e8f0;
    transform: none;
    box-shadow: none;
}

/* ===== AI INSIGHTS SECTION (Dark Gradient) ===== */
.recent-patients + div[style*="background: linear-gradient(135deg, #1e293b, #0f172a)"] {
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    color: white;
}

.recent-patients + div[style*="background: linear-gradient(135deg, #1e293b, #0f172a)"] > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.recent-patients + div[style*="background: linear-gradient(135deg, #1e293b, #0f172a)"] h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.recent-patients + div[style*="background: linear-gradient(135deg, #1e293b, #0f172a)"] h3 i {
    color: #3b82f6;
}

.recent-patients + div[style*="background: linear-gradient(135deg, #1e293b, #0f172a)"] button {
    background: rgba(255,255,255,0.1);
    color: white;
    border-color: rgba(255,255,255,0.2);
}

.recent-patients + div[style*="background: linear-gradient(135deg, #1e293b, #0f172a)"] button:hover {
    background: rgba(255,255,255,0.2);
}

/* Insight cards in dark section */
.recent-patients + div[style*="background: linear-gradient(135deg, #1e293b, #0f172a)"] > div:nth-child(2) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.recent-patients + div[style*="background: linear-gradient(135deg, #1e293b, #0f172a)"] > div:nth-child(2) > div {
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 20px;
}

.recent-patients + div[style*="background: linear-gradient(135deg, #1e293b, #0f172a)"] > div:nth-child(2) i {
    font-size: 24px;
    margin-bottom: 10px;
    display: block;
}

.recent-patients + div[style*="background: linear-gradient(135deg, #1e293b, #0f172a)"] > div:nth-child(2) h4 {
    margin: 0 0 5px;
    font-size: 16px;
    color: white;
}

.recent-patients + div[style*="background: linear-gradient(135deg, #1e293b, #0f172a)"] > div:nth-child(2) p:first-of-type {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #3b82f6;
}

.recent-patients + div[style*="background: linear-gradient(135deg, #1e293b, #0f172a)"] > div:nth-child(2) p:last-of-type {
    margin: 5px 0 0;
    opacity: 0.8;
    font-size: 13px;
    color: #cbd5e1;
}

/* ===== FOOTER ===== */
#patientIntakeSection > div:last-child {
    margin-top: 30px;
    padding: 20px;
    text-align: center;
    border-top: 2px solid #e2e8f0;
}

#patientIntakeSection > div:last-child p {
    color: #64748b;
    margin: 0;
}

#patientIntakeSection > div:last-child i {
    margin-right: 5px;
}

#patientIntakeSection > div:last-child i.fa-sync-alt {
    color: #10b981;
}

#patientIntakeSection > div:last-child span[style*="cursor: pointer"] {
    color: #3b82f6;
    cursor: pointer;
}

#patientIntakeSection > div:last-child span[style*="cursor: pointer"]:hover {
    text-decoration: underline;
}

#patientIntakeSection > div:last-child i.fa-shield-alt {
    color: #10b981;
}

#patientIntakeSection > div:last-child i.fa-robot {
    color: #3b82f6;
}

/* ===== GRID LAYOUTS ===== */
/* Quick methods grid (4 columns) */
#patientIntakeSection > div:nth-child(3) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

/* Intake options grid (4 columns) */
#patientIntakeSection > div:nth-child(4) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

/* Responsive grids */
@media screen and (max-width: 1200px) {
    #patientIntakeSection > div:nth-child(3),
    #patientIntakeSection > div:nth-child(4),
    .recent-patients + div[style*="background: linear-gradient(135deg, #1e293b, #0f172a)"] > div:nth-child(2) {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    #patientIntakeSection {
        padding: 20px;
    }
    
    .section-header h1 {
        font-size: 24px;
    }
    
    #patientIntakeSection > div:nth-child(3),
    #patientIntakeSection > div:nth-child(4),
    .recent-patients + div[style*="background: linear-gradient(135deg, #1e293b, #0f172a)"] > div:nth-child(2) {
        grid-template-columns: 1fr;
    }
    
    .ai-banner {
        flex-direction: column;
        text-align: center;
    }
    
    .ai-banner > div:last-child {
        width: 100%;
        justify-content: center;
    }
    
    .recent-patients td .doc-action-btn {
        padding: 6px 10px;
    }
    
    .recent-patients td .doc-action-btn i {
        margin: 0;
    }
    
    .recent-patients td .doc-action-btn span {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .section-header > div:last-child {
        width: 100%;
    }
    
    .section-header button {
        width: 100%;
        justify-content: center;
    }
    
    .ai-banner > div:last-child {
        flex-direction: column;
        width: 100%;
    }
    
    .ai-banner > div:last-child > div {
        width: 100%;
    }
    
    .recent-patients > div:first-child {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .recent-patients > div:last-child {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
    
    table {
        font-size: 13px;
    }
    
    .recent-patients td {
        padding: 10px 5px;
    }
}

/* ===== ANIMATIONS ===== */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.fa-spin {
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== NOTIFICATION STYLES (Added by JS) ===== */
.notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: white;
    color: #1e293b;
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10000;
    animation: slideIn 0.3s ease;
    border-left: 4px solid #3b82f6;
}

.notification i {
    font-size: 18px;
}

.notification i.fa-check-circle {
    color: #10b981;
}

.notification i.fa-exclamation-circle {
    color: #ef4444;
}

.notification i.fa-info-circle {
    color: #3b82f6;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

/* ===== DARK MODE SUPPORT (Optional) ===== */
@media (prefers-color-scheme: dark) {
    #patientIntakeSection {
        background: #0f172a;
    }
    
    .section-header h1 {
        color: white;
    }
    
    .metric-card,
    .recent-patients {
        background: #1e293b;
        border-color: #334155;
    }
    
    .metric-card h3,
    .recent-patients h3,
    .recent-patients td > div > div:nth-child(2) p:first-child,
    .recent-patients td {
        color: white;
    }
    
    .metric-card p,
    .recent-patients td > div > div:nth-child(2) p:last-child,
    .recent-patients th {
        color: #94a3b8;
    }
    
    .recent-patients > div:nth-child(2) > div {
        background: #334155;
    }
    
    .recent-patients tbody tr {
        border-bottom-color: #334155;
    }
    
    .recent-patients thead tr {
        border-bottom-color: #334155;
    }
    
    .doc-action-btn {
        background: #334155;
        border-color: #475569;
        color: #cbd5e1;
    }
    
    .secondary-btn {
        background: #1e293b;
        color: #cbd5e1;
        border-color: #334155;
    }
    
    .secondary-btn:hover {
        background: #334155;
    }
}
/* ===== TOUCH OPTIMIZATIONS FOR MOBILE ===== */
@media (hover: none) and (pointer: coarse) {
    .intake-option-card:hover,
    .patient-card:hover,
    .quick-action-btn:hover,
    .active-intake-card:hover {
        transform: none;
    }
    
    .intake-option-card:active,
    .patient-card:active,
    .quick-action-btn:active,
    .action-btn:active {
        transform: scale(0.98);
    }
    
    button, 
    .intake-option-card, 
    .patient-card,
    .quick-action-btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    .action-btn {
        min-height: 44px;
    }
}

/* ===== SAFE AREA INSETS FOR NOTCHED PHONES ===== */
@supports (padding: max(0px)) {
    #patientIntakeSection {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
    #patientIntakeSection {
        background: var(--gray-900);
    }
    
    .intake-option-card,
    .patient-card,
    .active-intakes-section,
    .quick-action-btn,
    .active-intake-card,
    .insight-card {
        background: var(--gray-800);
        border-color: var(--gray-700);
    }
    
    .card-content h3,
    .patient-card h3,
    .insights-header h3 {
        color: white;
    }
    
    .card-content p,
    .patient-details p,
    .insight-content p {
        color: var(--gray-400);
    }
    
    .quick-action-btn {
        background: var(--gray-800);
        color: var(--gray-300);
    }
    
    .active-intake-card {
        background: var(--gray-800);
    }
    
    .ai-insights-section {
        background: linear-gradient(135deg, #1e3a8a20, var(--gray-800));
    }
}

/* ===== ANIMATIONS ===== */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.ai-badge i,
.hipaa-badge i {
    animation: pulse 2s infinite;
}

.fa-spin {
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== LOADING STATES ===== */
.loading-skeleton {
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-300) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
      /* ===== FORCE WHITE BACKGROUNDS ===== */
#patientIntakeSection,
.intake-option-card,
.patient-card,
.active-intakes-section,
.quick-action-btn,
.active-intake-card,
.insight-card,
.ai-insights-section,
.modal-content,
.upload-area,
.ai-conversation,
.message-content,
.user-input-area input,
.notification {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

/* Keep the blue accents but make cards white */
.intake-option-card {
    background: #FFFFFF !important;
    border: 1px solid #e2e8f0;
}

.patient-card {
    background: #FFFFFF !important;
    border: 1px solid #e2e8f0;
}

/* AI Insights section - make white with blue border instead of gradient */
.ai-insights-section {
    background: #FFFFFF !important;
    border: 2px solid #3b82f6 !important;
}

/* Quick action buttons */
.quick-action-btn {
    background: #FFFFFF !important;
    border: 1px solid #e2e8f0;
}

.quick-action-btn.primary {
    background: #3b82f6 !important; /* Keep primary button blue */
    color: white;
}

/* Active intake cards */
.active-intake-card {
    background: #FFFFFF !important;
    border: 1px solid #e2e8f0;
}

/* Patient avatars keep their colors */
.patient-avatar {
    background: #3b82f6 !important; /* Keep blue avatars */
}

/* Status badges keep their colors */
.status-badge.completed {
    background: #10b98120 !important;
    color: #10b981;
}

/* Modals */
.modal-content {
    background: #FFFFFF !important;
}

/* Dark mode override - force white even in dark mode */
@media (prefers-color-scheme: dark) {
    #patientIntakeSection,
    .intake-option-card,
    .patient-card,
    .active-intakes-section,
    .quick-action-btn,
    .active-intake-card,
    .insight-card,
    .ai-insights-section,
    .modal-content {
        background: #FFFFFF !important;
        border-color: #e2e8f0 !important;
    }
    
    .card-content h3,
    .patient-card h3,
    .insights-header h3,
    .card-content p,
    .patient-details p,
    .insight-content p {
        color: #1e293b !important; /* Dark text on white background */
    }
}
/* ===== RESPONSIVE DESIGN - MOBILE OPTIMIZATION ===== */
@media (max-width: 640px) {
    /* Grid layouts - convert to single column */
    .tele-grid, 
    [style*="grid-template-columns: repeat(4, 1fr)"],
    [style*="grid-template-columns: repeat(3, 1fr)"],
    .appointments-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    /* Two column grids */
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Container padding */
    .container, .page-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Modal width */
    .modal-container, .psych-modal {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px !important;
    }
    
    /* Modal content padding */
    .modal-container > div, .psych-modal > div {
        padding: 20px !important;
    }
    
    /* Headers */
    h1, .section-header h1 {
        font-size: 24px !important;
    }
    
    h2 {
        font-size: 20px !important;
    }
    
    h3 {
        font-size: 18px !important;
    }
    
    /* Buttons */
    button, .primary-btn, .secondary-btn {
        padding: 10px 16px !important;
        font-size: 14px !important;
        min-height: 44px;
    }
    
    /* Stats numbers */
    [style*="font-size: 36px"], [style*="font-size: 32px"] {
        font-size: 28px !important;
    }
    
    /* Flex layouts */
    [style*="display: flex"][style*="justify-content: space-between"] {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start !important;
    }
    
    /* Tables scrollable */
    .data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Button groups wrap */
    [style*="display: flex"][style*="gap: 12px"] {
        flex-wrap: wrap;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    /* Tablet: 4 columns become 2 columns */
    .tele-grid, [style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    [style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .appointments-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Touch targets */
@media (max-width: 768px) {
    button, .primary-btn, .secondary-btn, [onclick] {
        min-height: 44px;
    }
    
    i[onclick], .fas[onclick] {
        padding: 8px;
        min-width: 44px;
    }
}

/* Safe area support for notched phones */
@supports (padding: max(0px)) {
    .page-content {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
}

/* Prevent horizontal scroll */
body, .page-content {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Modal scrolling */
.modal-container, .psych-modal {
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Images responsive */
img, video {
    max-width: 100%;
    height: auto;
}
      .menu-badge.new {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 30px;
    margin-left: auto;
}
.specialty-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.15);
    border-color: #3b82f6;
}

.specialty-card {
    transition: all 0.3s ease;
}
/* Make all interactive elements show pointer cursor */
select, 
input[type="range"],
button,
[onclick],
.settings-card select,
.settings-card button {
    cursor: pointer !important;
}

/* Style for dropdowns on hover */
select:hover,
button:hover {
    opacity: 0.9;
}

/* Slider styling */
input[type="range"] {
    cursor: pointer;
}

input[type="range"]:hover {
    accent-color: #8b5cf6;
}
      .login-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1481ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
}

.login-card {
    background: white;
    border-radius: 24px;
    padding: 28px 40px;
    width: 440px;
    max-width: 90%;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.login-header {
    text-align: center;
    margin-bottom: 20px;
}

.login-logo {
    max-width: 280px;
    width: 100%;
    margin-bottom: 16px;
}

.login-header h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #1a1a1a;
}

.login-header p {
    color: #666;
    font-size: 13px;
}

.input-field {
    position: relative;
    margin-bottom: 20px;
}

.input-field i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}

.input-field input {
    width: 100%;
    padding: 14px 14px 14px 45px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    font-size: 14px;
    transition: all 0.2s;
}

.input-field input:focus {
    outline: none;
    border-color: #1481ff;
    box-shadow: 0 0 0 3px rgba(20,129,255,0.1);
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #666;
}

.checkbox input {
    cursor: pointer;
}

.form-options a {
    color: #1481ff;
    text-decoration: none;
    font-size: 13px;
}

.login-button {
    width: 100%;
    padding: 14px;
    background: #1481ff;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.login-button:hover {
    background: #0d6efd;
}

.signup-prompt {
    text-align: center;
    margin-top: 24px;
    font-size: 13px;
    color: #666;
}

.signup-prompt a {
    color: #1481ff;
    text-decoration: none;
    font-weight: 500;
}

.hipaa-text {
    text-align: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
    font-size: 11px;
    color: #999;
}

.hipaa-text i {
    margin-right: 6px;
    color: #10b981;
}
      /* ================================================ */
/* CLAIMS MANAGEMENT PAGE STYLES */
/* ================================================ */

/* Page Container */
#claimsManagementPage {
    background: #f8fafc;
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
}

/* Section Header */
#claimsManagementPage .section-header {
    background: white;
    border-radius: 20px;
    padding: 25px 30px;
    margin-bottom: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
}

#claimsManagementPage .section-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

#claimsManagementPage .section-header p {
    font-size: 15px;
    color: #64748b;
    margin: 8px 0 0 0;
}

/* HIPAA Badge */
#claimsManagementPage .hipaa-badge {
    background: #10b981;
    color: white;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Status Badge */
#claimsManagementPage .status-badge {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* AI Banner */
#claimsManagementPage .ai-banner {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    border-left: 6px solid #3b82f6;
}

/* Stats Cards */
#claimsManagementPage .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

#claimsManagementPage .stat-card {
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

#claimsManagementPage .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

#claimsManagementPage .stat-card i {
    font-size: 28px;
    color: #3b82f6;
    opacity: 0.8;
}

#claimsManagementPage .stat-card h3 {
    font-size: 28px;
    font-weight: 700;
    margin: 10px 0 5px;
    color: #1e293b;
}

#claimsManagementPage .stat-card p {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

/* Colored Stat Cards */
#claimsManagementPage .stat-card.blue {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

#claimsManagementPage .stat-card.blue h3,
#claimsManagementPage .stat-card.blue p,
#claimsManagementPage .stat-card.blue i {
    color: white;
}

#claimsManagementPage .stat-card.green {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

#claimsManagementPage .stat-card.orange {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

#claimsManagementPage .stat-card.red {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

/* Form Section */
#claimsManagementPage .form-section {
    background: white;
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
}

#claimsManagementPage .form-section h2,
#claimsManagementPage .form-section h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 20px 0;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Table Styles */
#claimsManagementPage .data-table {
    width: 100%;
    border-collapse: collapse;
}

#claimsManagementPage .data-table th {
    background: #f8fafc;
    padding: 15px;
    text-align: left;
    font-weight: 600;
    color: #475569;
    border-bottom: 2px solid #e2e8f0;
}

#claimsManagementPage .data-table td {
    padding: 15px;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
}

#claimsManagementPage .data-table tr:hover {
    background: #f8fafc;
}

/* Status Tags */
#claimsManagementPage .status-approved {
    background: #10b98120;
    color: #10b981;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

#claimsManagementPage .status-pending {
    background: #f59e0b20;
    color: #f59e0b;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

#claimsManagementPage .status-denied {
    background: #ef444420;
    color: #ef4444;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

/* AI Prediction Badge */
#claimsManagementPage .ai-prediction {
    background: #eff6ff;
    color: #3b82f6;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

/* Buttons */
#claimsManagementPage .primary-btn {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#claimsManagementPage .primary-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

#claimsManagementPage .secondary-btn {
    background: white;
    color: #3b82f6;
    border: 2px solid #e2e8f0;
    padding: 10px 22px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#claimsManagementPage .secondary-btn:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

/* Action Buttons */
#claimsManagementPage .doc-action-btn {
    background: transparent;
    border: none;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s;
}

#claimsManagementPage .doc-action-btn:hover {
    background: #f1f5f9;
    color: #3b82f6;
}

/* Filter Select */
#claimsManagementPage .filter-select {
    padding: 8px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #1e293b;
    background: white;
    cursor: pointer;
}

#claimsManagementPage .filter-select:focus {
    outline: none;
    border-color: #3b82f6;
}

/* Search Input */
#claimsManagementPage .search-input {
    padding: 8px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    width: 250px;
}

#claimsManagementPage .search-input:focus {
    outline: none;
    border-color: #3b82f6;
}

/* Progress Bar */
#claimsManagementPage .progress-bar {
    background: #e2e8f0;
    border-radius: 10px;
    height: 8px;
    overflow: hidden;
}

#claimsManagementPage .progress-fill {
    background: #3b82f6;
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
}

#claimsManagementPage .progress-fill.red {
    background: #ef4444;
}

#claimsManagementPage .progress-fill.green {
    background: #10b981;
}

/* Recovery Amount Box */
#claimsManagementPage .recovery-box {
    background: #f0fdf4;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    border: 1px solid #dcfce7;
}

#claimsManagementPage .recovery-amount {
    font-size: 32px;
    font-weight: 800;
    color: #10b981;
    margin: 0;
}

/* Help Text */
#claimsManagementPage .help-text {
    font-size: 12px;
    color: #64748b;
    margin-top: 10px;
}

/* Footer */
#claimsManagementPage .page-footer {
    margin-top: 30px;
    padding: 20px;
    text-align: center;
    border-top: 2px solid #e2e8f0;
}

#claimsManagementPage .page-footer p {
    color: #64748b;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    #claimsManagementPage .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    #claimsManagementPage .section-header {
        flex-direction: column;
        text-align: center;
    }
    
    #claimsManagementPage .data-table {
        font-size: 12px;
    }
    
    #claimsManagementPage .data-table th,
    #claimsManagementPage .data-table td {
        padding: 10px;
    }
}

@media (max-width: 480px) {
    #claimsManagementPage .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#claimsManagementPage .form-section {
    animation: fadeIn 0.3s ease;
}
      /* ===== UPDATED SEARCH BAR STYLES - ADD THIS ===== */
.header-center {
    display: none;
    flex: 1;
    max-width: 500px;
    margin: 0 20px;
}

@media (min-width: 992px) {
    .header-center {
        display: block;
    }
}

@media (min-width: 1200px) {
    .header-center {
        max-width: 600px;
    }
}

.search-box {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    background: #f8fafc;
    border-radius: 40px;
    padding: 8px 16px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.search-box:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
    background: white;
    transform: scale(1.01);
}

.search-box i:first-child {
    color: #94a3b8;
    font-size: 16px;
    margin-right: 10px;
    transition: color 0.2s;
}

.search-box:focus-within i:first-child {
    color: #3b82f6;
}

.search-box input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    background: transparent;
    font-family: 'Inter', sans-serif;
    padding: 10px 0;
}

.search-box input::placeholder {
    color: #94a3b8;
    font-size: 13px;
}

.search-shortcut {
    font-size: 11px;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: monospace;
    margin-left: 8px;
}

/* Search Results Dropdown */
.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 35px -8px rgba(0,0,0,0.2);
    border: 1px solid #e2e8f0;
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    animation: fadeInDown 0.2s ease;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid #f1f5f9;
}

.search-result-item:hover {
    background: #f8fafc;
}

.search-result-icon {
    width: 36px;
    height: 36px;
    background: #eff6ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-result-icon i {
    font-size: 16px;
    color: #3b82f6;
    margin: 0;
}

.search-result-info {
    flex: 1;
}

.search-result-title {
    font-weight: 600;
    font-size: 14px;
    color: #1e293b;
}

.search-result-subtitle {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.search-result-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #475569;
}

.search-loading {
    padding: 20px;
    text-align: center;
    color: #64748b;
}

.search-empty {
    padding: 20px;
    text-align: center;
    color: #94a3b8;
}

/* Keep your existing search-box styles for backward compatibility */
.search-box i.fa-search {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray);
    font-size: 18px;
}

/* Override old search-box input styles */
.search-box input {
    width: 100% !important;
    padding: 12px 15px 12px 45px !important;
}

/* Make sure old search icon doesn't conflict */
.search-box .fa-search:first-child {
    position: static;
    transform: none;
    margin-right: 10px;
}
     /* ================================================
   MOBILE OPTIMIZED HEADER - ADD THIS TO YOUR CSS
   ================================================ */

/* Fix header layout on mobile */
@media (max-width: 768px) {
    .header {
        padding: 0 10px;
        gap: 8px;
    }
    
    .header-left {
        gap: 6px;
        flex-shrink: 0;
    }
    
    .menu-toggle {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }
    
    .brand-logo-img {
        width: 32px;
        height: 32px;
    }
    
    /* Make search bar flexible and shrink */
    .header-center {
        flex: 1;
        margin: 0 4px;
        min-width: 0;
    }
    
    .search-box {
        padding: 6px 10px;
    }
    
    .search-box input {
        font-size: 12px;
    }
    
    .search-box input::placeholder {
        font-size: 11px;
    }
    
    /* Hide shortcut on mobile */
    .search-shortcut {
        display: none;
    }
    
    /* Make HIPAA badge smaller - hide text, show only icon */
    .header-hipaa span {
        display: none;
    }
    
    .header-hipaa {
        padding: 5px 8px;
    }
    
    .header-hipaa i {
        margin: 0;
    }
    
    /* Hide "View as" text on mobile */
    .view-as-btn span {
        display: none;
    }
    
    .view-as-btn {
        padding: 6px 10px;
    }
    
    .view-as-btn i:first-child {
        margin: 0;
    }
    
    /* Make notification icon smaller */
    .header-action {
        width: 36px;
        height: 36px;
    }
    
    /* Hide user name text on mobile */
    .user-info {
        display: none;
    }
    
    .user-profile {
        padding: 4px 8px;
    }
    
    .user-avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}

/* iPhone 12 Mini and smaller (375px and below) */
@media (max-width: 375px) {
    .header {
        padding: 0 6px;
        gap: 4px;
    }
    
    .menu-toggle {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 14px;
    }
    
    .brand-logo-img {
        width: 28px;
        height: 28px;
    }
    
    .search-box {
        padding: 4px 8px;
    }
    
    .search-box i:first-child {
        font-size: 11px;
    }
    
    .search-box input {
        font-size: 11px;
    }
    
    .view-as-btn {
        padding: 4px 8px;
    }
    
    .view-as-btn i:first-child {
        font-size: 12px;
    }
    
    .header-action {
        width: 32px;
        height: 32px;
    }
    
    .header-action i {
        font-size: 14px;
    }
    
    .user-avatar {
        width: 28px;
        height: 28px;
        font-size: 10px;
    }
}

/* Fix for notched phones (iPhone safe areas) */
@supports (padding: max(0px)) {
    .header {
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
    }
}

/* ================================================
   FIX DROPDOWN MENU ON MOBILE
   ================================================ */

/* Fix view-as dropdown menu on mobile */
@media (max-width: 768px) {
    .view-as-menu {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        max-height: 70vh;
        border-radius: 20px 20px 0 0;
        margin-top: 0;
        animation: slideUp 0.3s ease;
    }
    
    /* Fix user dropdown menu on mobile */
    .dropdown-menu {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        margin-top: 0;
        animation: slideUp 0.3s ease;
    }
    
    /* Make menu items easier to tap */
    .view-as-item {
        padding: 14px 16px;
    }
    
    .dropdown-item {
        padding: 14px 16px;
    }
    
    /* Add close button to dropdowns */
    .view-as-menu::before,
    .dropdown-menu::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: #cbd5e1;
        border-radius: 4px;
        margin: 10px auto 5px;
    }
}

/* Slide up animation */
@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Fix for very small screens (iPhone SE, 12 Mini) */
@media (max-width: 380px) {
    .view-as-item .user-role {
        display: none;
    }
    
    .view-as-item {
        padding: 10px 12px;
    }
    
    .view-as-item .user-name {
        font-size: 14px;
    }
}
/* ================================================
   UNIVERSAL MODAL STYLES - MOBILE OPTIMIZED
   ================================================ */

/* Modal Overlay */
.modal-overlay,
.ai-modal-overlay,
.claim-modal-overlay,
.billing-modal-overlay,
.patient-modal-overlay,
.appointment-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 16px;
    box-sizing: border-box;
}

/* Modal Container */
.modal-container,
.modal-content,
.ai-modal-content,
.claim-modal-content,
.billing-modal-content {
    background: white;
    border-radius: 24px;
    width: 100%;
    max-width: 500px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 24px;
    box-shadow: 0 20px 35px -8px rgba(0, 0, 0, 0.3);
    animation: modalSlideUp 0.3s ease;
    box-sizing: border-box;
}

/* Large modals (like forms with many fields) */
.modal-container.large,
.modal-content.large {
    max-width: 700px;
}

/* Small modals (like confirmation dialogs) */
.modal-container.small,
.modal-content.small {
    max-width: 320px;
    text-align: center;
}

/* Modal Header */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 10px;
}

.modal-header h2,
.modal-header h3 {
    margin: 0;
    font-size: 20px;
    color: #1e293b;
    flex: 1;
}

.modal-close {
    background: #f1f5f9;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: #64748b;
    transition: all 0.2s;
    flex-shrink: 0;
}

.modal-close:hover {
    background: #fee2e2;
    color: #ef4444;
}

/* Modal Body */
.modal-body {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 20px;
}

.modal-body p {
    color: #475569;
    line-height: 1.5;
    font-size: 14px;
}

/* Modal Footer */
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

.modal-footer button {
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 44px;
}

/* Form elements inside modals */
.modal-body input,
.modal-body textarea,
.modal-body select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    margin-bottom: 16px;
    box-sizing: border-box;
    background: white;
}

.modal-body label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 13px;
    color: #1e293b;
}

/* Two column layout inside modals */
.modal-two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Scrollbar styling */
.modal-container::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
    width: 6px;
}

.modal-container::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

.modal-container::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

/* Animation */
@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================
   MOBILE RESPONSIVE MODALS
   ================================================ */

/* iPhone SE, iPhone 12 Mini, small phones (320px - 375px) */
@media (max-width: 375px) {
    .modal-overlay,
    .ai-modal-overlay {
        padding: 12px;
    }
    
    .modal-container,
    .modal-content,
    .ai-modal-content {
        padding: 18px;
        border-radius: 20px;
        max-height: 90vh;
    }
    
    .modal-header h2,
    .modal-header h3 {
        font-size: 18px;
    }
    
    .modal-close {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    
    .modal-footer button {
        padding: 10px 18px;
        font-size: 13px;
        flex: 1;
    }
    
    .modal-two-columns {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .modal-body input,
    .modal-body textarea,
    .modal-body select {
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* iPhone 11, Android, medium phones (376px - 428px) */
@media (min-width: 376px) and (max-width: 428px) {
    .modal-container,
    .modal-content,
    .ai-modal-content {
        padding: 22px;
        border-radius: 22px;
        max-height: 88vh;
    }
    
    .modal-header h2,
    .modal-header h3 {
        font-size: 19px;
    }
    
    .modal-footer button {
        padding: 11px 20px;
    }
    
    .modal-two-columns {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* Tablets (429px - 768px) */
@media (min-width: 429px) and (max-width: 768px) {
    .modal-container,
    .modal-content,
    .ai-modal-content {
        max-width: 90%;
        padding: 24px;
        max-height: 85vh;
    }
    
    .modal-two-columns {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

/* Landscape mode on phones */
@media (max-width: 896px) and (orientation: landscape) {
    .modal-container,
    .modal-content,
    .ai-modal-content {
        max-height: 90vh;
    }
    
    .modal-body {
        max-height: 50vh;
        overflow-y: auto;
    }
}

/* Large screens (desktop) */
@media (min-width: 1024px) {
    .modal-container,
    .modal-content,
    .ai-modal-content {
        max-width: 550px;
        padding: 28px;
    }
    
    .modal-container.large {
        max-width: 800px;
    }
}

/* iPad Pro and large tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .modal-container,
    .modal-content {
        max-width: 80%;
    }
}

/* Safe area for notched phones */
@supports (padding: max(0px)) {
    .modal-container,
    .modal-content,
    .ai-modal-content {
        padding-left: max(24px, env(safe-area-inset-left));
        padding-right: max(24px, env(safe-area-inset-right));
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }
}
/* ================================================
   UNIVERSAL BUTTON STYLES - MOBILE OPTIMIZED
   ================================================ */

/* Base button styles */
button,
.primary-btn,
.secondary-btn,
.action-btn,
.cta-button,
.submit-btn,
.cancel-btn,
.save-btn,
.delete-btn,
.edit-btn,
.add-btn,
.refresh-btn,
.view-btn,
.export-btn,
.print-btn,
.sync-btn,
.process-btn,
.generate-btn,
.upload-btn,
.download-btn,
.install-btn,
.remind-btn,
.book-btn,
.schedule-btn,
.confirm-btn,
.close-btn,
.back-btn,
.next-btn,
.continue-btn,
.select-btn,
.filter-btn,
.search-btn,
.import-btn,
.export-btn,
.send-btn,
.invite-btn,
.approve-btn,
.reject-btn,
.start-btn,
.stop-btn,
.pause-btn,
.resume-btn,
.retry-btn,
.cancel-btn,
.done-btn,
.ok-btn,
.yes-btn,
.no-btn {
    /* Size and spacing */
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    min-height: 40px;
    white-space: nowrap;
    
    /* Transitions */
    transition: all 0.2s ease;
    
    /* Cursor */
    cursor: pointer;
    
    /* Box sizing */
    box-sizing: border-box;
}

/* Icon buttons */
button i,
.primary-btn i,
.secondary-btn i,
.action-btn i {
    margin-right: 6px;
    font-size: 13px;
}

/* Icon-only buttons (no text) */
button.icon-only,
.icon-btn {
    padding: 10px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

button.icon-only i,
.icon-btn i {
    margin: 0;
    font-size: 16px;
}

/* Button groups */
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.button-group.stacked {
    flex-direction: column;
}

/* Small screens (iPhone 12 Mini, iPhone SE, small phones) */
@media (max-width: 480px) {
    button,
    .primary-btn,
    .secondary-btn,
    .action-btn,
    .cta-button,
    .submit-btn,
    .cancel-btn,
    .save-btn,
    .delete-btn,
    .edit-btn,
    .add-btn,
    .refresh-btn,
    .view-btn,
    .export-btn,
    .print-btn,
    .sync-btn,
    .process-btn,
    .generate-btn,
    .upload-btn,
    .download-btn,
    .install-btn,
    .remind-btn,
    .book-btn,
    .schedule-btn,
    .confirm-btn,
    .close-btn,
    .back-btn,
    .next-btn,
    .continue-btn,
    .select-btn,
    .filter-btn,
    .search-btn,
    .import-btn,
    .send-btn,
    .invite-btn,
    .approve-btn,
    .reject-btn,
    .start-btn,
    .stop-btn,
    .pause-btn,
    .resume-btn,
    .retry-btn,
    .cancel-btn,
    .done-btn,
    .ok-btn,
    .yes-btn,
    .no-btn {
        padding: 8px 12px;
        font-size: 12px;
        min-height: 36px;
        border-radius: 8px;
    }
    
    button i,
    .primary-btn i,
    .secondary-btn i,
    .action-btn i {
        margin-right: 5px;
        font-size: 11px;
    }
    
    button.icon-only,
    .icon-btn {
        padding: 8px;
        width: 36px;
        height: 36px;
    }
    
    button.icon-only i,
    .icon-btn i {
        font-size: 14px;
    }
    
    /* Stack buttons vertically on very small screens */
    .button-group {
        flex-direction: column;
        width: 100%;
    }
    
    .button-group button,
    .button-group .btn {
        width: 100%;
    }
}

/* Medium screens (iPhone 11, Android, tablets) */
@media (min-width: 481px) and (max-width: 768px) {
    button,
    .primary-btn,
    .secondary-btn,
    .action-btn,
    .cta-button {
        padding: 9px 14px;
        font-size: 13px;
        min-height: 38px;
        border-radius: 9px;
    }
    
    button i,
    .primary-btn i,
    .secondary-btn i {
        margin-right: 6px;
        font-size: 12px;
    }
    
    button.icon-only,
    .icon-btn {
        padding: 9px;
        width: 38px;
        height: 38px;
    }
    
    /* Buttons in tables or cards */
    .table-actions button,
    .card-actions button {
        padding: 6px 10px;
        font-size: 11px;
        min-height: 32px;
    }
}

/* Large screens (desktop) */
@media (min-width: 1025px) {
    button,
    .primary-btn,
    .secondary-btn,
    .action-btn {
        padding: 12px 20px;
        font-size: 14px;
        min-height: 44px;
        border-radius: 10px;
    }
    
    button:hover,
    .primary-btn:hover,
    .secondary-btn:hover {
        transform: translateY(-1px);
    }
}

/* Tablet landscape */
@media (min-width: 769px) and (max-width: 1024px) {
    button,
    .primary-btn,
    .secondary-btn,
    .action-btn {
        padding: 10px 16px;
        font-size: 13px;
        min-height: 40px;
    }
    
    .button-group {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Touch target minimum size (accessibility) */
@media (max-width: 768px) {
    button,
    .btn,
    .clickable {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Primary button specific */
.primary-btn {
    background: #3b82f6;
    color: white;
    border: none;
}

.primary-btn:hover {
    background: #2563eb;
}

/* Secondary button specific */
.secondary-btn {
    background: white;
    color: #1e293b;
    border: 1px solid #e2e8f0;
}

.secondary-btn:hover {
    background: #f8fafc;
    border-color: #3b82f6;
}

/* Danger button */
.danger-btn,
.delete-btn,
.cancel-btn {
    background: #ef4444;
    color: white;
    border: none;
}

.danger-btn:hover,
.delete-btn:hover {
    background: #dc2626;
}

/* Success button */
.success-btn,
.save-btn,
.submit-btn {
    background: #10b981;
    color: white;
    border: none;
}

.success-btn:hover,
.save-btn:hover {
    background: #059669;
}

/* Warning button */
.warning-btn {
    background: #f59e0b;
    color: white;
    border: none;
}

.warning-btn:hover {
    background: #d97706;
}

/* Outline button */
.outline-btn {
    background: transparent;
    border: 1px solid #3b82f6;
    color: #3b82f6;
}

.outline-btn:hover {
    background: #eff6ff;
}

/* Disabled button */
button:disabled,
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Full width buttons on mobile */
@media (max-width: 480px) {
    .btn-full-mobile {
        width: 100%;
        justify-content: center;
    }
}

/* Button loading state */
button.loading,
.btn.loading {
    position: relative;
    color: transparent;
}

button.loading::after,
.btn.loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid white;
    border-top-color: transparent;
    border-radius: 50%;
    animation: button-spin 0.8s linear infinite;
}

@keyframes button-spin {
    to {
        transform: rotate(360deg);
    }
}
/* Form inputs mobile optimization */
input, select, textarea {
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: white;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    input, select, textarea {
        padding: 8px 12px;
        font-size: 13px;
        border-radius: 8px;
    }
}

/* Make sure text doesn't wrap on buttons */
button, .btn {
    white-space: nowrap;
}

/* Allow text wrap on very small screens */
@media (max-width: 360px) {
    button, .btn {
        white-space: normal;
        word-break: keep-all;
        line-height: 1.3;
    }
}
/* ================================================
   UNIVERSAL MOBILE RESPONSIVE FIXES
   For ALL Pages: Patient Intake, MCO Cards, Prior Auth, 
   Insurance, Medicaid, Claims, Billing, Staff Scheduling,
   Export Reports, User Management, Audit Logs, 
   System Settings, User Settings, Support Center, Security
   ================================================ */

/* Base responsive container for all pages */
.page-content,
.dashboard-section,
.setup-section,
.billing-section,
.settings-section,
.reports-section,
.users-section,
.audit-section,
.support-section,
.security-section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 16px;
}

/* Fix all cards and containers */
.card,
.stat-card,
.billing-card,
.user-card,
.setting-card,
.report-card,
.claim-card,
.appointment-card,
.patient-card,
.insurance-card,
.medicaid-card,
.inventory-card,
.order-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 16px;
    overflow: hidden;
}

/* Fix all grids */
.grid-container,
.stats-grid,
.dashboard-grid,
.cards-grid,
.users-grid,
.reports-grid,
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

/* Fix all tables - make them scroll horizontally on mobile */
.table-container,
.data-table-container,
.responsive-table {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 16px;
}

table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
}

/* For tables that need to be readable without scroll */
.table-card-view {
    display: none;
}

/* Convert tables to cards on mobile */
@media (max-width: 768px) {
    .table-container,
    .data-table-container {
        overflow-x: auto;
    }
    
    /* Alternative: hide complex tables and show card view */
    .table-responsive-mobile {
        display: block;
    }
    
    .desktop-table {
        display: none;
    }
}

/* Fix all forms */
.form-container,
.form-group,
.settings-form,
.profile-form {
    width: 100%;
    box-sizing: border-box;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.form-row > * {
    flex: 1;
    min-width: 200px;
}

/* Fix all inputs */
input, select, textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Fix all lists */
.user-list,
.item-list,
.audit-list {
    width: 100%;
    overflow-x: hidden;
}

.list-item {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid #e2e8f0;
}

/* ================================================
   MOBILE BREAKPOINTS
   ================================================ */

/* iPhone SE, iPhone 12 Mini, small phones (320px - 375px) */
@media (max-width: 375px) {
    .page-content,
    .dashboard-section {
        padding: 12px;
    }
    
    .grid-container,
    .stats-grid,
    .cards-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .card,
    .stat-card {
        padding: 14px;
    }
    
    .form-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .form-row > * {
        min-width: 100%;
    }
    
    .list-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    h1, .page-title {
        font-size: 22px;
    }
    
    h2, .section-title {
        font-size: 18px;
    }
    
    h3, .card-title {
        font-size: 16px;
    }
    
    p, .text-body {
        font-size: 13px;
    }
}

/* iPhone 11, Android, medium phones (376px - 428px) */
@media (min-width: 376px) and (max-width: 428px) {
    .page-content,
    .dashboard-section {
        padding: 14px;
    }
    
    .grid-container,
    .stats-grid,
    .cards-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    
    .form-row {
        flex-direction: column;
        gap: 14px;
    }
    
    .form-row > * {
        min-width: 100%;
    }
}

/* Tablets (429px - 768px) */
@media (min-width: 429px) and (max-width: 768px) {
    .page-content,
    .dashboard-section {
        padding: 16px;
    }
    
    .grid-container,
    .stats-grid,
    .cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 16px;
    }
    
    .form-row {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .form-row > * {
        min-width: calc(50% - 8px);
        flex: 1;
    }
}

/* Landscape mode on phones */
@media (max-width: 896px) and (orientation: landscape) {
    .grid-container,
    .stats-grid,
    .cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    
    .form-row {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .form-row > * {
        min-width: calc(33.33% - 11px);
    }
}

/* ================================================
   SPECIFIC PAGE FIXES
   ================================================ */

/* AI Patient Intake Page */
.intake-form,
.patient-intake-container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.intake-section {
    margin-bottom: 20px;
    padding: 16px;
    background: white;
    border-radius: 16px;
}

/* MCO Cards Page */
.mco-grid,
.mco-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.mco-card {
    padding: 16px;
}

/* Prior Auth & Insurance Pages */
.auth-container,
.insurance-container {
    width: 100%;
    overflow-x: hidden;
}

.auth-card,
.insurance-card {
    padding: 16px;
    margin-bottom: 16px;
}

/* Claims Management Page */
.claims-container {
    width: 100%;
    overflow-x: auto;
}

.claim-card-view {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

/* Facility Billing Page */
.billing-container {
    width: 100%;
    overflow-x: hidden;
}

.billing-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

/* Staff Scheduling Page */
.schedule-container {
    width: 100%;
    overflow-x: auto;
}

.schedule-card-view {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

/* Export Reports Page */
.reports-container {
    width: 100%;
    overflow-x: hidden;
}

.report-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

/* User Management Page */
.users-container {
    width: 100%;
    overflow-x: hidden;
}

.user-card-view {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

/* Audit Logs Page */
.audit-container {
    width: 100%;
    overflow-x: auto;
}

/* Settings Pages (System, User, Security) */
.settings-container {
    width: 100%;
    overflow-x: hidden;
}

.settings-group {
    margin-bottom: 24px;
    padding: 16px;
    background: white;
    border-radius: 16px;
}

.settings-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
}

.settings-label {
    flex: 1;
    min-width: 150px;
}

.settings-control {
    flex: 2;
    min-width: 200px;
}

/* Support Center Page */
.support-container {
    width: 100%;
    overflow-x: hidden;
}

.support-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

/* ================================================
   UTILITY CLASSES FOR MOBILE
   ================================================ */

/* Hide on mobile */
.hide-on-mobile {
    display: inline-block;
}

@media (max-width: 768px) {
    .hide-on-mobile {
        display: none;
    }
}

/* Show on mobile only */
.show-on-mobile {
    display: none;
}

@media (max-width: 768px) {
    .show-on-mobile {
        display: block;
    }
}

/* Full width on mobile */
.full-width-mobile {
    width: auto;
}

@media (max-width: 768px) {
    .full-width-mobile {
        width: 100%;
    }
}

/* Text alignment */
.text-left-mobile {
    text-align: left;
}

.text-center-mobile {
    text-align: center;
}

@media (max-width: 768px) {
    .text-left-mobile {
        text-align: left;
    }
    .text-center-mobile {
        text-align: center;
    }
}

/* Flex direction column on mobile */
.flex-column-mobile {
    display: flex;
    flex-direction: row;
}

@media (max-width: 768px) {
    .flex-column-mobile {
        flex-direction: column;
    }
}

/* ================================================
   PREVENT CONTENT OVERFLOW
   ================================================ */

* {
    max-width: 100%;
    box-sizing: border-box;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

pre, code {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
}

/* Fix for long words breaking layout */
.word-break {
    word-break: break-word;
    overflow-wrap: break-word;
}
/* ================================================
   COMPLETE MOBILE OPTIMIZATION - ALL PAGES
   Works on: iPhone 11, 12 Mini, Android, Tablets
   ================================================ */

/* Global Reset */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* Base responsive container for ALL pages */
.page-content,
.dashboard-section,
.settings-section,
.billing-section,
.reports-section,
.users-section,
.audit-section,
.support-section,
.security-section,
.bed-management-container,
.pac-management-container,
.post-acute-care-container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding: 16px;
    box-sizing: border-box;
}

/* ================================================
   RESPONSIVE GRIDS - ALL PAGES
   ================================================ */
.stats-grid,
.dashboard-grid,
.cards-grid,
.bed-grid,
.pac-grid,
.post-acute-grid {
    display: grid;
    gap: 16px;
    width: 100%;
}

/* Mobile (iPhone 11, 12 Mini, all phones) */
@media (max-width: 768px) {
    .stats-grid,
    .dashboard-grid,
    .cards-grid,
    .bed-grid,
    .pac-grid,
    .post-acute-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .stats-grid,
    .dashboard-grid,
    .cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .bed-grid,
    .pac-grid,
    .post-acute-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Desktop */
@media (min-width: 1025px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .dashboard-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .cards-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .bed-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ================================================
   CARDS - MOBILE OPTIMIZED
   ================================================ */
.card,
.stat-card,
.bed-card,
.pac-card,
.post-acute-card,
.dashboard-card {
    background: white;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .card,
    .stat-card,
    .bed-card,
    .pac-card,
    .post-acute-card {
        padding: 12px;
        border-radius: 12px;
    }
}

/* ================================================
   BUTTONS - TOUCH FRIENDLY (min 44px)
   ================================================ */
button,
.primary-btn,
.secondary-btn,
.action-btn,
.cta-button,
.submit-btn,
.cancel-btn,
.save-btn,
.delete-btn,
.edit-btn,
.add-btn,
.refresh-btn,
.view-btn,
.export-btn,
.print-btn,
.sync-btn,
.process-btn,
.generate-btn,
.upload-btn,
.download-btn,
.install-btn,
.remind-btn,
.book-btn,
.schedule-btn,
.confirm-btn,
.close-btn,
.back-btn,
.next-btn {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    button,
    .primary-btn,
    .secondary-btn,
    .action-btn {
        padding: 8px 12px;
        font-size: 13px;
        min-height: 40px;
        border-radius: 8px;
    }
}

/* Button groups - stack on mobile */
.button-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .button-group {
        flex-direction: column;
    }
    .button-group button {
        width: 100%;
    }
}

/* ================================================
   TABLES - SCROLL ON MOBILE
   ================================================ */
.table-container,
.data-table-container,
.bed-table-container,
.pac-table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 16px;
}

table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
}

th, td {
    padding: 12px 8px;
    text-align: left;
    font-size: 13px;
}

@media (max-width: 480px) {
    th, td {
        padding: 8px 6px;
        font-size: 11px;
    }
}

/* ================================================
   FORMS - MOBILE OPTIMIZED
   ================================================ */
.form-container,
.form-group,
.bed-form,
.pac-form {
    width: 100%;
    box-sizing: border-box;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.form-row > * {
    flex: 1;
    min-width: 200px;
}

@media (max-width: 480px) {
    .form-row {
        flex-direction: column;
        gap: 12px;
    }
    .form-row > * {
        min-width: 100%;
    }
}

input, select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    input, select, textarea {
        padding: 10px;
        font-size: 16px; /* Prevents zoom on iOS */
        border-radius: 8px;
    }
}

/* ================================================
   MODALS - MOBILE OPTIMIZED
   ================================================ */
.modal-overlay,
.bed-modal-overlay,
.pac-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    padding: 16px;
    box-sizing: border-box;
}

.modal-content,
.bed-modal-content,
.pac-modal-content {
    background: white;
    border-radius: 24px;
    width: 100%;
    max-width: 500px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 24px;
    box-sizing: border-box;
    animation: modalSlideUp 0.3s ease;
}

@media (max-width: 480px) {
    .modal-content,
    .bed-modal-content,
    .pac-modal-content {
        padding: 18px;
        border-radius: 20px;
        max-height: 90vh;
    }
    .modal-content h3 {
        font-size: 18px;
    }
}

@keyframes modalSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ================================================
   BED MANAGEMENT SPECIFIC
   ================================================ */
.bed-status {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}

.bed-available { background: #10b981; }
.bed-occupied { background: #ef4444; }
.bed-maintenance { background: #f59e0b; }

.bed-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.bed-item {
    background: white;
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    min-width: 80px;
    flex: 1;
    border: 1px solid #e2e8f0;
}

@media (max-width: 480px) {
    .bed-item {
        min-width: calc(50% - 12px);
    }
}

/* ================================================
   PAC MANAGEMENT SPECIFIC
   ================================================ */
.pac-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pac-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 12px;
}

@media (max-width: 480px) {
    .pac-step {
        flex-direction: column;
        text-align: center;
    }
}

/* ================================================
   POST-ACUTE CARE SPECIFIC
   ================================================ */
.post-acute-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.metric-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

@media (max-width: 480px) {
    .post-acute-metrics {
        grid-template-columns: 1fr;
    }
}

/* ================================================
   TYPOGRAPHY - MOBILE FRIENDLY
   ================================================ */
h1, .page-title {
    font-size: 24px;
    margin-bottom: 16px;
}

h2, .section-title {
    font-size: 20px;
    margin-bottom: 12px;
}

h3, .card-title {
    font-size: 16px;
    margin-bottom: 10px;
}

p, .text-body {
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 480px) {
    h1, .page-title { font-size: 22px; }
    h2, .section-title { font-size: 18px; }
    h3, .card-title { font-size: 15px; }
    p, .text-body { font-size: 13px; }
}

/* ================================================
   UTILITY CLASSES
   ================================================ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.hide-on-mobile { display: inline-block; }
.show-on-mobile { display: none; }

@media (max-width: 768px) {
    .hide-on-mobile { display: none !important; }
    .show-on-mobile { display: block !important; }
}

.flex-column-mobile {
    display: flex;
    flex-direction: row;
}

@media (max-width: 768px) {
    .flex-column-mobile {
        flex-direction: column;
    }
}

/* Full width on mobile */
@media (max-width: 480px) {
    .full-width-mobile {
        width: 100%;
    }
}

/* ================================================
   SAFE AREA FOR NOTCHED PHONES (iPhone 12 Mini, etc.)
   ================================================ */
@supports (padding: max(0px)) {
    .page-content,
    .dashboard-section {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    
    .modal-content,
    .bed-modal-content,
    .pac-modal-content {
        padding-left: max(24px, env(safe-area-inset-left));
        padding-right: max(24px, env(safe-area-inset-right));
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }
}
/* Bed Management Page Specific */
.bed-management-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bed-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

@media (max-width: 480px) {
    .bed-legend {
        gap: 12px;
    }
    .bed-legend span {
        font-size: 12px;
    }
}
/* PAC Management Page Specific */
.pac-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

@media (max-width: 480px) {
    .pac-filters {
        flex-direction: column;
    }
    .pac-filters select,
    .pac-filters input {
        width: 100%;
    }
}
/* Post-Acute Care Page Specific */
.post-acute-timeline {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.timeline-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
}

@media (max-width: 480px) {
    .timeline-item {
        flex-direction: column;
        gap: 8px;
    }
    .timeline-icon {
        align-self: center;
    }
}