:root {
      --primary-color: #512da8;
      --secondary-color: #7e57c2;
      --sidebar-bg: #311b92;
      --text-color: #1e1b2e;
      --text-muted: #6c757d;
      --bg-light: #f5f4fb;
      --bg-white: #ffffff;
      --border-color: #e9e7f1;
      --border-light: #eeeaf7;
      --shadow-sm: 0 2px 8px rgba(49,27,146,0.07);
      --shadow-md: 0 6px 22px rgba(49,27,146,.08);
      --radius-sm: 10px;
      --radius-md: 14px;
      --radius-lg: 18px;
      --radius-xl: 22px;
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 1rem;
      --spacing-lg: 1.5rem;
      --spacing-xl: 2rem;
      --bs-primary: #512da8;
      --bs-primary-rgb: 81, 45, 168;
      --accent-gradient: linear-gradient(90deg, #7c3aed, #a855f7);
    }
    
    .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; }
    .btn-primary:hover { background-color: var(--sidebar-bg); border-color: var(--sidebar-bg); color: #fff; }
    .btn-outline-primary { color: var(--primary-color); border-color: var(--primary-color); }
    .btn-outline-primary:hover { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; }
    .text-primary { color: var(--primary-color) !important; }
    .bg-primary { background-color: var(--primary-color) !important; }

    body { background-color: var(--bg-light); color: var(--text-color); font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -webkit-font-smoothing: antialiased; }
    .cursor-pointer { cursor: pointer; }

    .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--sidebar-bg), var(--primary-color)); padding: 1rem; }
    .login-card { background: rgba(255, 255, 255, 0.95); padding: 2rem; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); width: 100%; max-width: 400px; backdrop-filter: blur(10px); }
    .login-logo { width: 80px; height: 80px; background: var(--secondary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 2rem; color: #fff; }
    .password-toggle { min-width: 46px; border-color: #ced4da; background: #fff; color: #6c757d; }
    .password-toggle:hover, .password-toggle:focus { background: #f4f1fb; border-color: var(--primary-color); color: var(--primary-color); }

    .app-shell { height: 100vh; min-height: 0; display: flex; flex-direction: column; overflow: visible; }
    @media (min-width: 768px) { .app-shell { flex-direction: row; } }

    .sidebar { width: 250px; background-color: var(--sidebar-bg); color: #fff; flex-shrink: 0; height: 100vh; min-height: 0; overflow: hidden; display:flex; flex-direction:column; scrollbar-width:none; transition: all 0.3s ease; box-shadow: 2px 0 5px rgba(0,0,0,0.1); flex: 0 0 250px; }
    .sidebar::-webkit-scrollbar { display:none; width:0; height:0; }
    .sidebar-header { flex:0 0 auto; padding: 1.25rem 1rem; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1); font-weight: bold; font-size: 1.25rem; }
    .sidebar-nav { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; padding:.65rem 0; list-style: none; padding-left: 0; margin-bottom: 0; scrollbar-width: thin; }
    .sidebar-nav::-webkit-scrollbar { width: 4px; }
    .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
    .sidebar-nav li { padding: 0.3rem 0.75rem; flex:0 0 auto; }
    .sidebar-nav li.mt-4 { margin-top:auto !important; }
    .sidebar-nav a { color: rgba(255,255,255,0.8); text-decoration: none; display: flex; align-items: center; padding: 0.55rem 0.75rem; border-radius: 8px; transition: 0.2s; }
    .sidebar-nav a:hover, .sidebar-nav a.active { background-color: rgba(255,255,255,0.2); color: #fff; }
    .sidebar-nav i { margin-right: 10px; width: 20px; text-align: center; }

    @media (max-height: 650px) {
      .sidebar-header { padding:.8rem; font-size:1.05rem; }
      .sidebar-nav { padding:.35rem 0; }
      .sidebar-nav li { padding:.14rem .65rem; }
      .sidebar-nav a { padding:.4rem .65rem; font-size:.88rem; }
    }
    @media (max-height: 540px) {
      .sidebar-header { padding:.55rem; font-size:.95rem; }
      .sidebar-nav { padding:.2rem 0; }
      .sidebar-nav li { padding:.05rem .55rem; }
      .sidebar-nav a { padding:.28rem .55rem; font-size:.8rem; }
      .sidebar-nav i { margin-right:7px; }
    }

    .main-content { flex: 1 1 auto; min-width: 0; min-height: 0; padding: 1rem; overflow-y: auto; height: 100%; overscroll-behavior: contain; scrollbar-gutter: stable; position: relative; }
    @media (min-width: 768px) { .main-content { padding: 1.5rem; } }
    .topbar { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; background: var(--bg-white); padding: var(--spacing-md); border-radius: var(--radius-sm); box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: var(--spacing-lg); gap: 10px; }
    .user-profile { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
    .app-page { position: relative; z-index: 1; }
    .app-page.d-none { display: none !important; }
    
    #fullPageLoader { position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.8); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .spinner-border { color: var(--primary-color); }
    .section-loader { text-align: center; padding: 2rem; }
    
    .stat-card { background: var(--bg-white); border-radius: var(--radius-md) !important; padding: var(--spacing-lg); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--border-light); border-top: 3px solid #7c3aed; height: 100%; }
    .stat-card.clickable { cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .stat-card.clickable:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(67, 42, 141, 0.14); border-color: #d4bbf7; }
    .stat-card h3 { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
    @media (min-width: 992px) { .stat-card h3 { font-size: 1.8rem; } }
    .stat-card p { margin: 0; color: var(--text-muted); font-size: 0.83rem; font-weight: 500; }
    .stat-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; background: rgba(var(--bs-primary-rgb), 0.1); color: var(--primary-color); flex-shrink: 0; transition: transform 0.2s ease; }
    .stat-card.clickable:hover .stat-icon { transform: scale(1.08); }
    @media (min-width: 992px) { .stat-icon { width: 52px; height: 52px; font-size: 1.4rem; } }
    
    .table-responsive { background: var(--bg-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); margin-bottom: var(--spacing-md); overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table { margin-bottom: 0; white-space: nowrap; }
    .table td, .table th { padding: 0.8rem 1rem; vertical-align: middle; }
    .table thead th { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6b6480; background: #f8f7fd; border-bottom: 1px solid var(--border-light); }
    .badge-status { font-size: 0.78rem; padding: 0.35em 0.7em; border-radius: 20px; font-weight: 600; }
    
    .calendar-overview { position:relative; overflow:hidden; background:linear-gradient(125deg,#39257d 0%,#6142bd 55%,#8b6ee6 100%); color:#fff; border-radius:20px; padding:1.35rem 1.45rem; box-shadow:0 16px 38px rgba(67,42,141,.2); }
    .calendar-overview::before { content:""; position:absolute; width:230px; height:230px; border-radius:50%; right:-65px; top:-120px; background:rgba(255,255,255,.11); }
    .calendar-overview::after { content:""; position:absolute; width:130px; height:130px; border-radius:50%; right:160px; bottom:-100px; background:rgba(255,255,255,.07); }
    .calendar-overview-copy,.calendar-overview-metrics { position:relative; z-index:1; }
    .calendar-overview-icon { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.2); font-size:1.15rem; }
    .calendar-overview-stat { min-width:118px; padding:.7rem .85rem; border-radius:14px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(6px); }
    .calendar-overview-stat i { opacity:.8; }
    .calendar-overview-stat strong { display:block; font-size:1.4rem; line-height:1.05; margin-top:.2rem; }
    .calendar-workspace { background:#f7f6fb; border:1px solid var(--border-color); border-radius:20px; padding:.65rem; }
    #calendar { background:var(--bg-white); padding:1rem; border-radius:16px; border:1px solid var(--border-color); box-shadow:0 8px 24px rgba(49,27,146,.055); }
    .fc .fc-toolbar.fc-header-toolbar { margin-bottom:1.1rem; gap:.8rem; }
    .fc .fc-toolbar-title { font-size:1.2rem; font-weight:800; color:#2d2346; letter-spacing:-.02em; }
    .fc .fc-button { min-height:38px; border-radius:10px !important; box-shadow:none !important; background:#f4f1fa; border-color:#e3ddef; color:#453568; font-weight:700; }
    .fc .fc-button:hover, .fc .fc-button:focus { background:#eae3fa; border-color:#cbbdeb; color:#4d3293; }
    .fc .fc-button-primary:not(:disabled).fc-button-active { background:var(--primary-color); border-color:var(--primary-color); }
    .fc .fc-button:disabled { opacity:.55; }
    .fc .fc-timegrid-slot { height:2.65rem; }
    .fc .fc-scrollgrid { border-color:#eeeaf5; border-radius:12px; overflow:hidden; }
    .fc-theme-standard td,.fc-theme-standard th { border-color:#eeeaf5; }
    .fc .fc-col-header-cell { background:#faf9fd; }
    .fc .fc-col-header-cell-cushion { padding:.72rem .25rem; text-decoration:none; color:#5b5070; font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
    .fc .fc-daygrid-day-number { width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; margin:.25rem; border-radius:9px; color:#544a68; text-decoration:none; font-weight:700; }
    .fc .fc-day-today .fc-daygrid-day-number { background:#ffb020; color:#fff; box-shadow:0 4px 10px rgba(255,176,32,.28); }
    .fc .fc-timegrid-axis-cushion, .fc .fc-timegrid-slot-label-cushion { color:#857d92; font-size:.75rem; }
    .fc .fc-day-today { background:#fffbf2 !important; }
    #calendar [data-date].calendar-selected-date { background:#f4f0ff !important; box-shadow:inset 0 0 0 2px #7353c7; }
    .fc-event { cursor:pointer; padding:5px 7px; border-radius:9px; border:0 !important; border-left:4px solid rgba(0,0,0,.12) !important; box-shadow:0 4px 11px rgba(49,27,146,.14); transition:.16s ease; }
    .fc-event:hover { transform:translateY(-1px); filter:saturate(1.08); box-shadow:0 6px 15px rgba(49,27,146,.19); }
    .calendar-event-time { font-size:.69rem; font-weight:700; opacity:.92; }
    .calendar-event-patient { font-size:.78rem; font-weight:800; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .calendar-event-service { font-size:.68rem; opacity:.9; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .calendar-filterbar { background:var(--bg-white); border:1px solid var(--border-color); border-radius:16px; padding:.9rem 1rem; box-shadow:0 7px 22px rgba(49,27,146,.05); }
    .calendar-filter-control label { display:block; margin:0 0 .25rem .1rem; color:#7b7488; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
    .calendar-filter-control .form-select { min-width:175px; border-color:#e2dceb; border-radius:10px; background-color:#fbfafd; }
    .calendar-filterbar .btn { border-radius:10px; min-height:36px; }
    .calendar-view-switch { display:flex; gap:.25rem; padding:.25rem; background:#f4f1f9; border-radius:11px; }
    .calendar-view-btn { border:0; background:transparent; color:#716984; border-radius:8px; padding:.4rem .7rem; font-size:.76rem; font-weight:700; }
    .calendar-view-btn.active { background:var(--bg-white); color:#5638a2; box-shadow:0 3px 10px rgba(58,36,115,.12); }
    .agenda-panel { position:relative; top:0; background:var(--bg-white); border:1px solid var(--border-color); border-radius:16px; box-shadow:0 8px 24px rgba(49,27,146,.07); height:min(680px, 80vh); overflow:hidden; display:flex; flex-direction:column; }
    .agenda-header { padding:1rem; border-bottom:1px solid #eeeaf7; background:linear-gradient(145deg,#fbfaff,#f1edfb); }
    .agenda-date-badge { width:50px; height:58px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:14px; background:#5b3eae; color:#fff; box-shadow:0 7px 16px rgba(81,45,168,.22); }
    .agenda-date-badge strong { font-size:1.35rem; line-height:1; }
    .agenda-date-badge small { font-size:.62rem; text-transform:uppercase; margin-top:.25rem; opacity:.82; }
    .agenda-date-nav .btn { width:33px; height:33px; border-radius:9px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
    .agenda-list { padding:.85rem; overflow:auto; flex:1; background:#fdfcff; }
    .agenda-item { position:relative; border:1px solid var(--border-color); border-left:0; border-radius:13px; padding:.85rem .85rem .85rem 1rem; margin-bottom:.7rem; cursor:pointer; transition:.18s ease; background:var(--bg-white); box-shadow:0 3px 10px rgba(49,27,146,.035); }
    .agenda-item::before { content:""; position:absolute; left:0; top:.85rem; bottom:.85rem; width:4px; border-radius:4px; background:var(--agenda-color,var(--primary-color)); }
    .agenda-item:hover { transform:translateY(-1px); border-color:#cfc5e9; box-shadow:0 5px 14px rgba(49,27,146,.09); }
    .agenda-item-code { font-size:.68rem; color:#8b8495; letter-spacing:.02em; }
    .agenda-time-pill { display:inline-flex; align-items:center; gap:.3rem; padding:.3rem .55rem; border-radius:999px; background:#f1ecfc; color:#53369c; font-size:.75rem; font-weight:800; }
    .agenda-toggle-pill { background:#ede9fe; border-radius:30px; padding:3px; display:inline-flex; gap:2px; }
    .agenda-toggle-btn { border:0; background:transparent; color:#6b7280; border-radius:20px; padding:.22rem .65rem; font-size:.74rem; font-weight:700; transition:all .2s ease; cursor:pointer; }
    .agenda-toggle-btn.active { background:#5b3eae; color:#fff; box-shadow:0 2px 8px rgba(91,62,174,.32); }
    .agenda-toggle-btn:hover:not(.active) { color:#4b3294; background:rgba(91,62,174,.08); }
    .agenda-day-group { margin-bottom:1rem; }
    .agenda-day-header { font-size:.76rem; font-weight:700; color:#49338b; padding:.35rem .65rem; background:#f0ebf9; border-radius:8px; margin-bottom:.55rem; border-left:3px solid #6b43c6; transition:all .15s ease; display:flex; justify-content:space-between; align-items:center; }
    .agenda-day-header:hover { background:#e8e0f6; }
    .agenda-day-current .agenda-day-header { background:#e7dff9; border-left:3px solid #4a28a3; }
    .calendar-legend { font-size:.76rem; color:var(--text-muted); }
    .legend-dot { width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:4px; }
    .appt-toolbar, .appt-tabs { background:var(--bg-white); border:1px solid var(--border-color); border-radius:12px; box-shadow:0 4px 18px rgba(49,27,146,.05); }
    .appt-tabs { padding:.4rem; display:flex; gap:.35rem; overflow-x:auto; }
    .appt-tab { border:0; background:transparent; color:var(--text-muted); border-radius:8px; padding:.55rem .85rem; white-space:nowrap; font-weight:600; }
    .appt-tab.active { background:var(--primary-color); color:#fff; }
    .queue-stat { background:var(--bg-white); border:1px solid var(--border-color); border-radius:10px; padding:.8rem 1rem; height:100%; }
    .queue-stat .value { font-size:1.35rem; font-weight:700; line-height:1; }
    .appointment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
    .appointment-card { background:var(--bg-white); border:1px solid var(--border-color); border-left:5px solid var(--primary-color); border-radius:12px; padding:1rem; box-shadow:0 4px 16px rgba(49,27,146,.05); transition:.18s ease; }
    .appointment-card:hover { transform:translateY(-1px); box-shadow:0 7px 20px rgba(49,27,146,.09); }
    .appointment-time { font-size:1.2rem; font-weight:800; color:var(--primary-color); }
    .appointment-primary-action { min-width:125px; }
    .appointment-card .dropdown-menu { min-width:205px; }
    .appointment-meta { color:var(--text-muted); font-size:.84rem; }
    .professional-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
    .professional-card { background:var(--bg-white); border:1px solid var(--border-color); border-radius:12px; padding:1rem; box-shadow:0 4px 16px rgba(49,27,146,.05); }
    .professional-avatar { width:48px; height:48px; border-radius:12px; background:linear-gradient(135deg,var(--primary-color),var(--secondary-color)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.1rem; }
    .professional-services { display:flex; flex-wrap:wrap; gap:.35rem; }
    .professional-services .badge { font-weight:500; }
    .service-overview { background:linear-gradient(135deg,#3f2b96,#7554d4); color:#fff; border-radius:14px; padding:1rem 1.2rem; box-shadow:0 8px 24px rgba(81,45,168,.16); }
    .service-overview-stat { min-width:105px; padding:.6rem .8rem; border-radius:10px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.17); }
    .service-overview-stat strong { display:block; font-size:1.28rem; line-height:1.1; }
    .service-toolbar { background:var(--bg-white); border:1px solid var(--border-color); border-radius:12px; padding:.85rem; box-shadow:0 4px 18px rgba(49,27,146,.05); }
    .service-toolbar label { display:block; margin:0 0 .25rem .1rem; color:#7b7488; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
    .service-search-wrap { position:relative; min-width:260px; flex:1; }
    .service-search-wrap i { position:absolute; left:.8rem; top:2.05rem; color:#928a9d; }
    .service-search-wrap input { padding-left:2.25rem; }
    .service-table-wrap { border-radius:12px; overflow:auto; }
    .service-table { min-width:980px; white-space:normal; }
    .service-table thead th { position:sticky; top:0; z-index:2; background:#f8f7fd; color:#514865; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; border-bottom: 2px solid var(--border-light); }
    .service-table tbody tr { transition: background 0.15s ease, box-shadow 0.15s ease; }
    .service-table tbody tr:nth-child(even) { background-color: #faf9fe; }
    .service-table tbody tr:hover { background: #f0ebff; box-shadow: inset 3px 0 0 #7c3aed; }
    .service-name-button { color:#35226f; line-height:1.25; font-weight: 600; }
    .service-description { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-width:430px; line-height:1.35; }
    .service-category-chip { display:inline-flex; align-items:center; gap:.35rem; background:#ede9fe; color:#6d28d9; border:1px solid #ddd6fe; border-radius:20px; padding:.3rem .65rem; font-size:.71rem; font-weight:700; letter-spacing:0.01em; transition: background 0.15s; }
    .service-category-chip:hover { background: #ddd6fe; }
    .service-price { color:#30234f; font-weight:800; white-space:nowrap; }
    .service-card-grid { display:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
    .service-card { background:var(--bg-white); border:1px solid var(--border-color); border-left:4px solid var(--primary-color); border-radius:12px; padding:.9rem; box-shadow:0 4px 14px rgba(49,27,146,.05); }
    .service-card-title { font-size:.94rem; font-weight:800; color:#33245b; line-height:1.3; }
    .service-card-meta { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin:.8rem 0; }
    .service-card-meta div { background:#f8f7fb; border-radius:8px; padding:.55rem; }
    .service-card-meta small { display:block; color:#81798d; font-size:.75rem; text-transform:uppercase; font-weight:700; }
    /* Modernized Report Filter Panel */
    .report-filter-panel {
      background: var(--bg-white);
      border: 1px solid var(--border-light);
      border-radius: var(--radius-lg);
      padding: 1.25rem 1.4rem;
      box-shadow: 0 4px 22px rgba(49,27,146,0.06);
      position: relative;
      overflow: hidden;
      border-top: 3px solid #7c3aed;
    }
    .filter-header-icon {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: rgba(81, 45, 168, 0.08);
      color: var(--primary-color);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.15rem;
      flex-shrink: 0;
    }
    .filter-status-badge {
      background: rgba(81, 45, 168, 0.09);
      color: var(--primary-color);
      font-weight: 700;
      font-size: 0.76rem;
      padding: 0.32em 0.8em;
      border-radius: 50px;
      border: 1px solid rgba(81, 45, 168, 0.15);
    }
    .date-preset-segmented {
      display: inline-flex;
      background: #f4f2fa;
      padding: 4px;
      border-radius: 50px;
      border: 1px solid #ebe5f7;
      gap: 3px;
      overflow-x: auto;
      max-width: 100%;
    }
    .preset-pill-btn {
      border: none;
      background: transparent;
      color: #615975;
      font-size: 0.78rem;
      font-weight: 600;
      padding: 0.35rem 0.85rem;
      border-radius: 50px;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .preset-pill-btn:hover:not(.active) {
      background: #ffffff;
      color: var(--primary-color);
      box-shadow: 0 1px 4px rgba(49, 27, 146, 0.08);
    }
    .preset-pill-btn.active {
      background: linear-gradient(135deg, #512da8, #7e57c2);
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(81, 45, 168, 0.28);
    }
    .filter-field-box {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .filter-field-label {
      font-size: 0.76rem;
      font-weight: 700;
      color: #554e68;
      margin-bottom: 0.35rem;
      display: flex;
      align-items: center;
      letter-spacing: 0.01em;
    }
    .filter-input {
      border-radius: 10px !important;
      border: 1px solid #dfdaeb !important;
      background-color: #faf9fd !important;
      color: #2b253d !important;
      font-size: 0.84rem !important;
      padding: 0.45rem 0.75rem !important;
      transition: all 0.2s ease !important;
      height: 38px;
    }
    .filter-input:hover {
      background-color: #ffffff !important;
      border-color: #c4b9e2 !important;
    }
    .filter-input:focus {
      background-color: #ffffff !important;
      border-color: var(--secondary-color) !important;
      box-shadow: 0 0 0 3px rgba(81, 45, 168, 0.12) !important;
    }
    .input-icon-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
    }
    .input-icon-left {
      position: absolute;
      left: 0.75rem;
      font-size: 0.85rem;
      pointer-events: none;
      color: #8c82a3;
      z-index: 4;
    }
    .input-icon-wrapper .filter-input {
      padding-left: 2.1rem !important;
    }
    .filter-reset-btn {
      border-radius: 10px;
      font-weight: 600;
      font-size: 0.83rem;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }
    .filter-reset-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 3px 10px rgba(220, 53, 69, 0.18);
    }
    .filter-sync-note {
      background: #f8f6fc;
      border: 1px dashed #dcd5f0;
      border-radius: 10px;
      padding: 0.45rem 0.85rem;
      font-size: 0.76rem;
      color: #635b75;
      display: flex;
      align-items: center;
      height: 38px;
    }
    .report-mini-stat { background:var(--bg-white); border:1px solid var(--border-color); border-radius:10px; padding:.8rem 1rem; height:100%; }
    .report-mini-stat small { color:var(--text-muted); display:block; margin-bottom:.2rem; }
    .report-mini-stat strong { font-size:1.15rem; color:#30264b; }
    .report-transaction-actions { display:flex; gap:.3rem; justify-content:flex-end; }
    #patientReportSummary { background:linear-gradient(135deg,#faf9ff,#f3f0ff); border:1px solid #e4def6; border-radius:12px; }
    .dashboard-welcome { background:linear-gradient(135deg,#4f35a3,#7759d4); color:#fff; border-radius:14px; padding:1.1rem 1.25rem; box-shadow:0 8px 24px rgba(81,45,168,.18); }
    .dashboard-welcome .btn-light { color:#4f35a3; }
    .dashboard-panel { background:var(--bg-white); border:1px solid var(--border-color); border-radius:12px; box-shadow:0 4px 18px rgba(49,27,146,.05); overflow:hidden; height:100%; }
    .dashboard-panel-header { padding:1rem; border-bottom:1px solid #eeeaf7; display:flex; justify-content:space-between; align-items:center; gap:.75rem; }
    .dashboard-panel-body { padding:1rem; }
    .dashboard-queue-item { border:1px solid var(--border-color); border-left:4px solid var(--primary-color); border-radius:10px; padding:.85rem; margin-bottom:.65rem; }
    .dashboard-queue-item:last-child, .dashboard-alert-item:last-child { margin-bottom:0; }
    .dashboard-alert-item { display:flex; gap:.75rem; align-items:flex-start; border:1px solid var(--border-color); border-radius:10px; padding:.75rem; margin-bottom:.6rem; cursor:pointer; }
    .dashboard-alert-icon { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
    .dashboard-week-scroll { overflow-x:auto; padding-bottom:.25rem; }
    .dashboard-week-strip { display:grid; grid-template-columns:repeat(7,minmax(90px,1fr)); gap:.55rem; min-width:min(700px, 100%); }
    .dashboard-week-day { border:1px solid var(--border-color); background:var(--bg-white); border-radius:10px; padding:.7rem .5rem; text-align:center; color:#554e64; transition:.18s ease; }
    .dashboard-week-day:hover { border-color:#9b87d6; transform:translateY(-1px); }
    .dashboard-week-day.today { box-shadow:inset 0 0 0 2px #d7ccf6; }
    .dashboard-week-day.active { background:var(--primary-color); color:#fff; border-color:var(--primary-color); }
    .dashboard-week-day .count { display:block; font-size:1.25rem; font-weight:800; margin:.2rem 0; }
    .dashboard-week-detail { border-top:1px solid #eeeaf7; margin-top:1rem; padding-top:1rem; }
    .dashboard-week-item { display:flex; justify-content:space-between; gap:1rem; padding:.65rem .75rem; background:#faf9fd; border-radius:9px; margin-bottom:.5rem; }
    .dashboard-prof-item { display:flex; align-items:center; gap:.75rem; padding:.7rem 0; border-bottom:1px solid #eeeaf7; }
    .dashboard-prof-item:last-child { border-bottom:0; }
    .prof-service-picker-toolbar { background:#f8f7fc; border:1px solid var(--border-color); border-radius:12px; padding:.85rem; }
    .prof-service-picker { max-height:360px; overflow-y:auto; border:1px solid var(--border-color); border-radius:12px; background:#fbfaff; padding:.75rem; }
    .prof-service-category + .prof-service-category { margin-top:1rem; }
    .prof-service-category-title { display:flex; align-items:center; justify-content:space-between; gap:.75rem; color:#4c397c; font-size:.78rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; margin-bottom:.55rem; }
    .prof-service-option-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
    .prof-service-option { display:flex; gap:.65rem; align-items:flex-start; min-width:0; border:1px solid var(--border-color); border-radius:10px; background:var(--bg-white); padding:.7rem .75rem; cursor:pointer; transition:border-color .15s ease, background .15s ease, box-shadow .15s ease; }
    .prof-service-option:hover { border-color:#9c87d3; box-shadow:0 3px 10px rgba(80,52,165,.08); }
    .prof-service-option.selected { border-color:#7658c5; background:#f3efff; box-shadow:inset 3px 0 0 #6546b7; }
    .prof-service-option input { margin-top:.18rem; flex:0 0 auto; }
    .prof-service-option-copy { min-width:0; line-height:1.25; }
    .prof-service-option-name { display:block; color:#30264b; font-size:.87rem; font-weight:700; }
    .prof-service-option-meta { display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; margin-top:.3rem; color:#7b7488; font-size:.7rem; }
    .prof-service-picker.picker-readonly .prof-service-option { cursor:default; }
    .prof-service-selected-summary { min-height:34px; display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; }
    .prof-service-chip { display:inline-flex; align-items:center; max-width:100%; background:#eee8fc; color:#4d3686; border-radius:999px; padding:.28rem .55rem; font-size:.73rem; font-weight:700; }
    
    .srv-item-row { background: #f8f9fa; padding: 15px; border-radius: 6px; margin-bottom: 10px; border: 1px solid var(--border-color); }
    .appointment-service-label { font-size: .85rem; font-weight: 600; }
    .appt-service-search-wrap .input-group-text { border-right: 0; }
    .appt-service-search-wrap .form-control { border-left: 0; padding-left: 0; }
    .appt-service-search-wrap:focus-within .input-group-text,
    .appt-service-search-wrap:focus-within .form-control { border-color: var(--primary-color); box-shadow: none; }
    .appt-service-search-result { min-height: 17px; margin-top: 3px; color: #6c757d; font-size: .72rem; }
    .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 1039; display: none; }

    @media (max-width: 767.98px) {
      .sidebar { position: fixed; left: -260px; z-index: 1050; height: 100vh; top: 0; width: 260px; }
      .main-content { width: 100%; min-height: 100vh; flex: none; }
      .sidebar.show { left: 0; }
      .sidebar-overlay.show { display: block; }
      .btn-group-sm > .btn { padding: 0.35rem 0.6rem; font-size: 0.875rem; }
      .topbar h4 { font-size: 1.2rem; }
      .calendar-overview { padding:.9rem; }
      .calendar-overview .calendar-overview-copy { width:100%; }
      .calendar-overview-icon { width:40px; height:40px; border-radius:12px; }
      .calendar-overview-metrics { width:100%; }
      .calendar-overview-stat { flex:1; min-width:82px; }
      .calendar-workspace { padding:.4rem; border-radius:15px; }
      #calendar { padding:.65rem; }
      .fc .fc-toolbar { align-items:flex-start; flex-wrap:wrap; }
      .fc .fc-toolbar-title { font-size:1rem; }
      .calendar-filterbar .calendar-filter-control { width:100%; }
      .calendar-filterbar .form-select { min-width:0; width:100%; }
      .calendar-view-switch { width:100%; }
      .calendar-view-btn { flex:1; }
      .calendar-filter-actions { width:100%; }
      .calendar-filter-actions .btn-primary { flex:1; }
      .agenda-panel { position:static; height:auto; min-height:360px; }
      .agenda-date-badge { width:46px; height:52px; }
      .agenda-list { max-height:520px; }
      .appointment-grid { grid-template-columns:1fr; }
      .appointment-card { padding:.85rem; }
      .professional-grid { grid-template-columns:1fr; }
      .service-overview { padding:.9rem; }
      .service-overview-copy { width:100%; }
      .service-overview-stat { flex:1; min-width:82px; }
      .service-toolbar .service-control, .service-search-wrap { width:100%; min-width:0; }
      .service-toolbar-actions { width:100%; }
      .service-toolbar-actions .btn-primary { flex:1; }
      .service-table-wrap { display:none; }
      .service-card-grid { display:grid; grid-template-columns:1fr; }
      .report-filter-panel .btn { width:100%; }
      .dashboard-welcome { padding:1rem; }
      .dashboard-welcome .quick-actions { width:100%; }
      .dashboard-welcome .quick-actions .btn { flex:1; }
      .prof-service-option-grid { grid-template-columns:1fr; }
      .prof-service-picker { max-height:330px; }
      .prof-service-picker-toolbar .prof-service-filter { width:100%; }
    }

    /* EMR & Clinical Records Styling */
    .emr-report-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      background-color: #efeaf8 !important;
      color: #432a8d !important;
      border: 1px solid #d4c7f0 !important;
      font-weight: 700;
      font-size: 0.85rem;
      padding: 4px 10px;
      border-radius: 6px;
      letter-spacing: 0.3px;
      text-decoration: none;
    }
    .emr-report-badge:hover {
      background-color: #e2d7f5 !important;
      color: #311b70 !important;
    }
    .soap-view-card {
      padding: 12px 16px;
      border-radius: 8px;
      margin-bottom: 12px;
      border: 1px solid #e2e8f0;
      background: #fff;
    }
    .soap-view-card.soap-s {
      background: #f8faff;
      border-left: 4px solid #1976d2;
      border-color: #dbe7fb;
      border-left-color: #1976d2;
    }
    .soap-view-card.soap-o {
      background: #f6fbfb;
      border-left: 4px solid #00897b;
      border-color: #d8f1ee;
      border-left-color: #00897b;
    }
    .soap-view-card.soap-a {
      background: #faf8fc;
      border-left: 4px solid #5e35b1;
      border-color: #ece4f9;
      border-left-color: #5e35b1;
    }
    .soap-view-card.soap-p {
      background: #f8fbf6;
      border-left: 4px solid #2e7d32;
      border-color: #dfefdc;
      border-left-color: #2e7d32;
    }
    .soap-view-label {
      font-size: 0.78rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .soap-view-body {
      font-size: 0.92rem;
      color: #1e1b2e;
      line-height: 1.6;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .soap-view-empty {
      color: #8c859d;
      font-style: italic;
      font-size: 0.88rem;
    }

    .emr-card-header {
      cursor: pointer;
      user-select: none;
      transition: background-color 0.18s ease, box-shadow 0.18s ease;
    }
    .emr-card-header:hover {
      background-color: #faf8fd !important;
    }
    .emr-dropdown-btn {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background-color: #f7f5fb;
      border: 1px solid #e2dceb;
      color: #512da8;
      transition: all 0.2s ease;
    }
    .emr-card-header:hover .emr-dropdown-btn {
      background-color: #512da8;
      color: #fff;
      border-color: #512da8;
    }
    .emr-pagination-bar {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 0.65rem 1rem;
      margin-bottom: 0.85rem;
    }


    /* ============================================================
       MODERN UI ENHANCEMENTS - Visual Polish Layer
       ============================================================ */

    /* Tombol Outline Modern - micro-animation hover */
    .btn-outline-primary {
      color: var(--primary-color);
      border-color: #c4b5fd;
      border-radius: 8px;
      font-weight: 600;
      font-size: 0.82rem;
      transition: all 0.18s ease;
    }
    .btn-outline-primary:hover {
      background: #7c3aed;
      border-color: #7c3aed;
      color: #fff;
      box-shadow: 0 4px 14px rgba(124,58,237,0.28);
      transform: translateY(-1px);
    }
    .btn-outline-danger {
      border-radius: 8px;
      font-size: 0.82rem;
      transition: all 0.18s ease;
    }
    .btn-outline-danger:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(220,38,38,0.22);
    }
    .btn-primary {
      border-radius: 8px;
      font-weight: 600;
      transition: all 0.18s ease;
    }
    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 5px 16px rgba(81,45,168,0.32);
    }
    .btn-sm { font-size: 0.78rem !important; }

    /* Banner Header Headings - ALWAYS Crisp White and NO Underline */
    .dashboard-welcome h4,
    .dashboard-welcome h5,
    .calendar-overview h4,
    .calendar-overview h5,
    .service-overview h4,
    .service-overview h5,
    .emr-banner h4,
    .emr-banner h5 {
      color: #ffffff !important;
      padding-bottom: 0 !important;
    }
    .dashboard-welcome h4::after,
    .dashboard-welcome h5::after,
    .calendar-overview h4::after,
    .calendar-overview h5::after,
    .service-overview h4::after,
    .service-overview h5::after,
    .emr-banner h4::after,
    .emr-banner h5::after {
      content: none !important;
      display: none !important;
    }

    /* Page Title Accent Bar - Only for standalone non-banner headers */
    .app-page > h5:first-child,
    .app-page > .d-flex:first-child:not(.dashboard-welcome):not(.calendar-overview):not(.service-overview):not(.emr-banner) h5,
    .app-page > .d-flex:first-child:not(.dashboard-welcome):not(.calendar-overview):not(.service-overview):not(.emr-banner) h4 {
      font-weight: 800;
      letter-spacing: -0.02em;
      color: #1a1535;
      position: relative;
      padding-bottom: 10px;
    }
    .app-page > h5:first-child::after,
    .app-page > .d-flex:first-child:not(.dashboard-welcome):not(.calendar-overview):not(.service-overview):not(.emr-banner) h5::after,
    .app-page > .d-flex:first-child:not(.dashboard-welcome):not(.calendar-overview):not(.service-overview):not(.emr-banner) h4::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 36px;
      height: 3px;
      border-radius: 2px;
      background: var(--accent-gradient);
    }

    /* Card global upgrade */
    .card {
      border-radius: var(--radius-md) !important;
      border-color: var(--border-light) !important;
      box-shadow: var(--shadow-sm) !important;
    }
    .card-body { padding: 1.25rem !important; }

    /* Topbar upgrade */
    .topbar {
      border-radius: var(--radius-md) !important;
      border: 1px solid var(--border-light);
      box-shadow: 0 2px 10px rgba(49,27,146,0.06) !important;
    }

    /* Badge soft color overrides */
    .badge.bg-success {
      background: #ecfdf5 !important;
      color: #047857 !important;
      border: 1px solid #a7f3d0 !important;
      font-weight: 600;
    }
    .badge.bg-danger {
      background: #fef2f2 !important;
      color: #b91c1c !important;
      border: 1px solid #fecaca !important;
      font-weight: 600;
    }
    .badge.bg-warning {
      background: #fffbeb !important;
      color: #92400e !important;
      border: 1px solid #fde68a !important;
      font-weight: 600;
    }
    .badge.bg-info {
      background: #f0f9ff !important;
      color: #0284c7 !important;
      border: 1px solid #bae6fd !important;
      font-weight: 600;
    }
    .badge.bg-secondary {
      background: #f1f5f9 !important;
      color: #475569 !important;
      border: 1px solid #cbd5e1 !important;
      font-weight: 600;
    }

    /* Sidebar gradient upgrade */
    .sidebar {
      background: linear-gradient(180deg, #1e1470 0%, #311b92 60%, #3d1f9e 100%) !important;
    }
    .sidebar-nav a:hover, .sidebar-nav a.active {
      background: rgba(255,255,255,0.15) !important;
      backdrop-filter: blur(4px);
    }

    /* Form control focus modern */
    .form-control:focus, .form-select:focus {
      border-color: #a78bfa;
      box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
    }