@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   COREBIQ — GLOBAL DESIGN SYSTEM
   Single source of truth for typography, theme, colour and UI tokens.
   ============================================================ */

:root {
  --primary: #1F2937;
  --primary-light: #F3F4F6;
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --surface-2: #F9FAFB;
  --text-main: #111827;
  --text: #111827;
  --text-muted: #6B7280;
  --muted: #6B7280;
  --border: #E5E7EB;
  --grey-med: #D1D5DB;
  --secondary: #4B5563;
  --success: #059669;
  --warning: #D97706;
  --danger: #DC2626;
  --info: #2563EB;
  --shadow: 0 4px 16px rgba(17, 24, 39, .06);
  --shadow-sm: 0 2px 10px rgba(17, 24, 39, .05);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --font-ui: 'Google Sans Flex', 'Google Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { font-family: var(--font-ui); color: var(--text-main); }
button, input, select, textarea { font: inherit; }

/* Gemini-inspired typography: clean Google-style hierarchy with Inter/system fallback. */
body, input, select, textarea, button { letter-spacing: -0.01em; }

/* CoreBIQ brand rule: amber belongs to the logo/brand mark, not the general UI theme. */
.corebiq-brand-amber { color: #FFB451; }

/* ===== SOURCE: 404.html | embedded stylesheet 1 ===== */

    

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-ui);
            background-color: var(--bg-color);
            color: var(--text-dark);
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            text-align: center;
        }

        /* Main Content Wrapper */
        .error-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .error-code {
            font-size: clamp(100px, 15vw, 150px);
            font-weight: 700;
            color: var(--prof-red);
            line-height: 1;
            margin-bottom: 16px;
            letter-spacing: -2px;
        }

        .error-title {
            font-size: 24px;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 12px;
        }

        .error-message {
            font-size: 16px;
            color: var(--text-grey);
            max-width: 400px;
            margin-bottom: 32px;
            line-height: 1.5;
        }

        /* Back to Main Page Button */
        .btn-back {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: var(--prof-red);
            color: #FFFFFF;
            text-decoration: none;
            padding: 14px 32px;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(200, 0, 0, 0.2);
        }

        .btn-back:hover {
            background-color: var(--prof-red-hover);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(200, 0, 0, 0.3);
        }

        .btn-back:active {
            transform: translateY(0);
        }

        /* Bottom Footer */
        .dev-footer {
            padding: 24px 20px;
            background-color: #FFFFFF;
            border-top: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding-bottom: max(24px, env(safe-area-inset-bottom));
        }

        .dev-label {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #9CA3AF;
        }

        .dev-link {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            color: var(--text-dark);
            font-weight: 600;
            font-size: 14px;
            transition: color 0.2s ease;
        }

        .dev-link:hover {
            color: var(--prof-red);
        }

        /* 1x1 Logo */
        .dev-logo {
            width: 24px;
            height: 24px;
            object-fit: contain;
            display: block;
        }
    

/* ===== SOURCE: aboutapp.html | embedded stylesheet 1 ===== */

        #about-module { font-family: var(--font-ui); width: 100%; max-width: 900px; margin: 0 auto; padding-bottom: 40px; }
        
        #about-module .section-title { font-size: 24px; font-weight: 800; margin-bottom: 24px; color: var(--text-main); display: flex; align-items: center; gap: 10px; }
        
        #about-module .modern-card { background: var(--surface); border-radius: 24px; padding: 40px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04); border: 1px solid var(--border); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; }
        
        .app-hero-logo { max-width: 220px; height: auto; margin-bottom: 16px; }
        
        .app-title { font-size: 26px; font-weight: 800; color: var(--text-main); margin-bottom: 8px; letter-spacing: -0.5px; }
        .app-subtitle { font-size: 15px; font-weight: 500; color: var(--text-muted); margin-bottom: 24px; max-width: 600px; line-height: 1.6; }
        
        .version-badge { background: var(--primary-light); color: var(--primary); font-size: 13px; font-weight: 700; padding: 6px 16px; border-radius: 20px; border: 1px solid #BFDBFE; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 32px; }

        .features-grid { display: grid; grid-template-columns: 1fr; gap: 16px; width: 100%; margin-bottom: 32px; text-align: left; }
        @media (min-width: 768px) { .features-grid { grid-template-columns: 1fr 1fr; } }
        
        .feature-item { background: #FAFAFA; border: 1px solid var(--border); padding: 20px; border-radius: 16px; display: flex; gap: 16px; align-items: flex-start; transition: transform 0.2s; }
        .feature-item:hover { transform: translateY(-2px); border-color: var(--primary-light); box-shadow: 0 4px 12px rgba(0,98,255,0.05); }
        .feature-icon { background: #EFF6FF; color: var(--primary); width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .feature-text h5 { margin: 0 0 4px 0; font-size: 15px; font-weight: 700; color: var(--text-main); }
        .feature-text p { margin: 0; font-size: 13px; color: var(--secondary); line-height: 1.5; }

        .dev-block { width: 100%; background: #F8FAFC; border-radius: 16px; padding: 24px; border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 16px; }
        .dev-logo { width: 100px; height: auto; margin-bottom: 12px; opacity: 0.8; }
        .dev-info { font-size: 14px; color: var(--secondary); line-height: 1.6; text-align: center; }
        .dev-link { color: var(--primary); text-decoration: none; font-weight: 600; transition: 0.2s; }
        .dev-link:hover { text-decoration: underline; }

        @media (max-width: 600px) {
            #about-module .modern-card { padding: 24px; }
            .feature-item { flex-direction: column; gap: 12px; }
        }
    

/* ===== SOURCE: appointments.html | embedded stylesheet 1 ===== */


#appointment-module{font-family:Inter,sans-serif;width:100%;max-width:1120px;color:var(--text)}
#appointment-module *{box-sizing:border-box}
.material-symbols-rounded{font-size:20px;vertical-align:middle}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.title h2{font-size:27px;line-height:1.1;margin:0;font-weight:750}.title p{font-size:14px;color:var(--muted);margin:5px 0 0}
.btn{border:1px solid var(--border);background:#fff;color:var(--text);height:40px;padding:0 12px;border-radius:10px;font-size:13px;font-weight:650;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn.danger{color:var(--danger);border-color:#FECACA}.btn.blue{color:var(--primary);border-color:#BFDBFE}.btn.small{height:36px;padding:0 10px;font-size:12px}
.new-btn{height:40px;padding:0 15px;border:0;border-radius:10px;background:var(--primary);color:#fff;font-weight:700;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.kpi{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.kpi .label{font-size:12px;color:var(--muted);font-weight:600}.kpi .num{font-size:22px;font-weight:800;margin-top:3px}
.kpi.today .num{color:var(--primary)}.kpi.done .num{color:var(--success)}.kpi.pending .num{color:var(--warning)}
.panel{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:visible;margin-bottom:16px}
.panel-head{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.panel-title{font-size:15px;font-weight:750}
.toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tool{position:relative}.icon-btn{width:40px;height:40px;border:1px solid var(--border);border-radius:10px;background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#334155}.icon-btn:hover{background:#F8FAFC}
.icon-btn.active{background:var(--primary-light);color:var(--primary);border-color:#BFDBFE}
.dropdown{display:none;position:absolute;right:0;top:45px;min-width:190px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 30px rgba(15,23,42,.14);padding:6px;z-index:5000}
.tool.open .dropdown{display:block}.drop-title{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;padding:7px 9px}.drop-item{width:100%;border:0;background:#fff;text-align:left;padding:9px;border-radius:7px;font-size:13px;display:flex;gap:8px;align-items:center;cursor:pointer;color:var(--text)}.drop-item:hover{background:#F8FAFC}.drop-item.active{background:var(--primary-light);color:var(--primary);font-weight:700}
.searchbar{display:none;padding:8px 12px;border-bottom:1px solid var(--border);background:#FAFAFA}.searchbar.show{display:flex}.searchbox{display:flex;align-items:center;gap:6px;width:100%;background:#fff;border:1px solid var(--border);border-radius:9px;padding:0 9px}.searchbox input{height:36px;width:100%;border:0;outline:0;font-size:13px}
.filters{display:none;padding:10px 12px;border-bottom:1px solid var(--border);background:#FAFAFA;gap:8px;flex-wrap:wrap;align-items:center}.filters.show{display:flex}
.form-input{width:100%;padding:11px 12px;border-radius:9px;border:1px solid var(--border);font-size:13px;color:var(--text);background:#FAFAFA;outline:none}.form-input:focus{border-color:var(--primary);background:#fff}.filter-input{width:auto;min-width:120px;height:36px;padding:7px 9px}
.bulkbar{display:none;background:#FFF7ED;padding:10px 12px;border-bottom:1px solid #FED7AA;align-items:center;gap:8px;flex-wrap:wrap}.bulkbar.show{display:flex}.bulkbar strong{font-size:12px;color:#9A3412}
.table-wrap{overflow-x:auto}.table{width:100%;min-width:930px;border-collapse:collapse}.table th{font-size:11px;text-transform:uppercase;color:var(--muted);font-weight:700;text-align:left;padding:10px 12px;background:#FAFAFA;border-bottom:1px solid var(--border);white-space:nowrap}.table td{font-size:13px;padding:12px;border-bottom:1px solid var(--border);vertical-align:top}.table tr:last-child td{border-bottom:0}.patient-name{font-weight:750;font-size:14px}.sub{font-size:11px;color:var(--muted);margin-top:3px}.actions{display:flex;gap:5px;justify-content:flex-end}.act{width:32px;height:32px;border:1px solid var(--border);background:#fff;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.act:hover{background:#F8FAFC}.act.note{color:#8B5CF6}.act.inv{color:#155A90}.act.edit{color:#64748B}
.no-due{color:#64748B;font-weight:700}.excess{color:#059669;font-weight:750}.due{color:#DC2626;font-weight:750}
.badge{display:inline-flex;padding:4px 8px;border-radius:6px;font-size:10px;font-weight:750;text-transform:uppercase}.pending{background:#FFF7ED;color:#EA580C}.reported{background:#EFF6FF;color:#2563EB}.completed{background:#ECFDF5;color:#059669}.rescheduled{background:#F1F5F9;color:#64748B}.cancelled{background:#FEF2F2;color:#DC2626}.cat{background:#F8FAFC;color:#334155;border:1px solid var(--border)}
.cards{display:none;padding:10px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}.cards.show{display:grid}.apt-card{border:1px solid var(--border);border-radius:12px;padding:12px;background:#fff}.card-top{display:flex;justify-content:space-between;gap:8px}.card-patient{display:flex;gap:8px}.card-check{padding-top:2px}.card-line{font-size:12px;color:var(--muted);margin-top:5px}.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}.card-actions{display:flex;gap:6px;margin-top:10px}
.empty{text-align:center;padding:35px 15px;color:var(--muted);font-size:13px}
.modal{display:none;position:fixed;inset:0;background:rgba(15,23,42,.52);z-index:10000;align-items:center;justify-content:center;padding:14px}.modal.show{display:flex}.modal-box{background:#fff;width:min(900px,100%);max-height:94vh;overflow:auto;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.22)}.modal-head{position:sticky;top:0;z-index:2;background:#fff;padding:13px 15px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.modal-head h3{font-size:16px;margin:0}.modal-body{padding:15px}.close{width:36px;height:36px;border:1px solid var(--border);border-radius:9px;background:#fff;cursor:pointer}
.section{border:1px solid var(--border);border-radius:11px;margin-bottom:12px;padding:12px}.section h4{font-size:13px;color:var(--primary);margin:0 0 12px}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.grid.three{grid-template-columns:repeat(3,1fr)}.field label{display:block;font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;margin-bottom:5px}.span2{grid-column:1/-1}.location-row{display:grid;grid-template-columns:auto 1fr auto;gap:6px}.money-box{background:var(--bg);border-radius:10px;padding:10px}.form-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:3px}.readonly{background:#F8FAFC!important;border:0!important;font-weight:750}
.notes-content{padding:15px;line-height:1.6;white-space:pre-wrap;font-size:13px;min-height:150px;background:#FAFAFA;border:1px solid var(--border);border-radius:9px}
.confirm-box{max-width:430px}.confirm-message{font-size:13px;line-height:1.6;color:var(--muted);padding:15px}
@media(max-width:700px){.topbar{align-items:flex-start}.title h2{font-size:22px}.new-btn span:last-child{display:none}.kpis{gap:7px}.kpi{padding:10px}.kpi .num{font-size:20px}.grid,.grid.three{grid-template-columns:1fr}.span2{grid-column:auto}.modal{padding:8px}.modal-box{max-height:96vh}.toolbar{width:100%}.panel-head{align-items:flex-start}.panel-title{width:100%}}
@media print{#appointment-module .no-print,#appointment-module .toolbar,#appointment-module .new-btn,.kpis{display:none!important}.panel{box-shadow:none;border:0}.table{min-width:100%}}


/* ===== SOURCE: appointments.html | embedded stylesheet 2 ===== */
body{font-family:Arial;padding:35px;line-height:1.6}h2{color:#155A90}

/* ===== SOURCE: appointments12.html | embedded stylesheet 1 ===== */

        

        #appointment-module { font-family: var(--font-ui); width: 100%; max-width: 1200px; margin: 0 auto; padding: 16px;}
        
        #appointment-module .section-title { font-size: 20px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        
        /* Action Bar */
        .action-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
        .action-bar .btn-action { background: var(--surface); color: var(--primary); border: 1px solid var(--primary); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: 0.2s; }
        .action-bar .btn-action:hover { background: var(--primary); color: white; }
        .action-bar .btn-danger { background: var(--surface); color: var(--danger); border: 1px solid var(--danger); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: 0.2s; }
        .action-bar .btn-danger:hover { background: var(--danger); color: white; }

        /* Form styling */
        #aptFormCard { display: none; background: var(--surface); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; animation: fadeIn 0.3s ease;}
        #aptFormCard.active { display: block; }
        
        #appointment-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        #appointment-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #appointment-module .input-group { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { #appointment-module .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }

        #appointment-module .form-input { width: 100%; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; box-sizing: border-box;}
        #appointment-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        
        #appointment-module .btn-primary { background: var(--primary); color: white; border: none; padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
        #appointment-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
        
        /* Timesheet CSS */
        .timesheet-wrapper { display: none; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow-x: auto; margin-bottom: 24px; padding: 16px; animation: fadeIn 0.3s ease;}
        .timesheet-wrapper.active { display: block; }
        .timesheet-table { width: 100%; min-width: 1000px; border-collapse: collapse; text-align: center; }
        .timesheet-table th { background: var(--primary-light); color: var(--primary); font-size: 11px; padding: 10px 4px; border: 1px solid var(--border); }
        .timesheet-table td { border: 1px solid var(--border); padding: 6px; font-size: 11px; vertical-align: top; height: 60px; width: 7.1%; }
        .timesheet-table .ts-doctor { font-weight: bold; background: #fafafa; text-align: left; padding-left: 12px; width: 15%; color: var(--text-main); }
        .ts-booking { background: var(--primary); color: white; padding: 4px; border-radius: 4px; margin-bottom: 4px; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        /* Data Table CSS */
        #appointment-module .table-container { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        #appointment-module .table-responsive { width: 100%; overflow-x: auto; }
        #appointment-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
        #appointment-module .saas-table { width: 100%; min-width: 950px; border-collapse: collapse; text-align: left; }
        #appointment-module .saas-table th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); }
        #appointment-module .saas-table td { padding: 16px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); vertical-align: middle; }
        
        .badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; white-space: nowrap; }
        .badge-pending { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
        .badge-reported { background: rgba(0, 98, 255, 0.1); color: var(--primary); } 
        .badge-completed { background: rgba(16, 185, 129, 0.1); color: var(--success); }
        .badge-rescheduled { background: rgba(100, 116, 139, 0.1); color: var(--secondary); }
        .badge-regular { background: rgba(245, 158, 11, 0.15); color: var(--warning); font-size: 10px; padding: 2px 6px; margin-left: 6px; }

        .cta-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #FAFAFA; border: 1px solid var(--border); transition: 0.2s; text-decoration: none; color: inherit; cursor: pointer;}
        .cta-link:hover { background: var(--surface); transform: translateY(-2px); }

        #bulk-reschedule-container { display: none; margin-bottom: 16px; }
        #bulk-reschedule-container.active { display: flex; animation: fadeIn 0.3s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

        /* Notes Modal Styles */
        .notes-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; align-items: center; justify-content: center; padding: 20px; }
        .notes-modal-content { background: white; width: 100%; max-width: 600px; border-radius: 12px; padding: 24px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
        .notes-modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 16px; }
    

/* ===== SOURCE: appointments12.html | embedded stylesheet 2 ===== */

                        body { font-family: 'Helvetica Neue', sans-serif; padding: 40px; color: #0a0a0a; margin: 0; background: #fff; }
                        .header-row { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #0062FF; padding-bottom: 24px; margin-bottom: 30px; }
                        .company-info { text-align: right; font-size: 13px; color: #555; line-height: 1.6; }
                        .bill-to { display: flex; justify-content: space-between; margin-bottom: 40px; }
                        table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
                        th { background: #FAFAFA; color: #777; font-size: 12px; text-transform: uppercase; padding: 12px; text-align: left; border-bottom: 2px solid #E8E5E1; }
                        td { padding: 16px 12px; font-size: 15px; border-bottom: 1px solid #E8E5E1; }
                        .totals-box { float: right; width: 300px; }
                        .totals-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 15px; }
                        .totals-row.balance { font-size: 20px; font-weight: 800; color: #0062FF; border-top: 2px solid #0a0a0a; padding-top: 15px; margin-top: 5px; }
                        .bank-details { clear: both; margin-top: 60px; padding: 20px; background: #FAFAFA; border-radius: 8px; font-size: 13px; border: 1px solid #E8E5E1; }
                    

/* ===== SOURCE: appointments12.html | embedded stylesheet 3 ===== */
body{font-family:sans-serif; padding:40px; line-height:1.6; color:#111;}

/* ===== SOURCE: appointmentsorg.html | embedded stylesheet 1 ===== */

    

        #appointment-module { font-family: var(--font-ui); width: 100%; max-width: 1120px;}
        
        #appointment-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        #appointment-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        #appointment-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #appointment-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #appointment-module .input-group { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { #appointment-module .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }
        @media (min-width: 1024px) { #appointment-module .input-group.four-cols { grid-template-columns: 1fr 1fr 1fr 1fr; } }

        #appointment-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        #appointment-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        
        #appointment-module .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
        #appointment-module .btn-primary:disabled { background: var(--grey-med); cursor: not-allowed; }
        #appointment-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
        #appointment-module .btn-verify { background: var(--text-main); color: #fff; border: none; padding: 0 20px; border-radius: 12px; font-weight: 600; cursor: pointer; font-size: 13px;}

        #appointment-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        
        /* Native Horizontal Scroll Table for Mobile */
        #appointment-module .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        #appointment-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
        #appointment-module .saas-table { width: 100%; min-width: 950px; border-collapse: collapse; text-align: left; }
        #appointment-module .saas-table th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); white-space: nowrap;}
        #appointment-module .saas-table td { padding: 16px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap;}
        
        .badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; white-space: nowrap; margin-right: 4px; }
        .badge-pending { background: rgba(251, 146, 60, 0.1); color: var(--danger); }
        .badge-reported { background: rgba(59, 130, 246, 0.1); color: #3B82F6; } 
        .badge-completed { background: rgba(16, 185, 129, 0.1); color: var(--success); }
        .badge-rescheduled { background: rgba(100, 116, 139, 0.1); color: var(--secondary); }
        .badge-cancelled { background: rgba(239, 68, 68, 0.1); color: #EF4444; }
        .badge-category { background: rgba(15, 23, 42, 0.05); color: var(--text-main); border: 1px solid var(--border); }

        .cta-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #FAFAFA; border: 1px solid var(--border); transition: 0.2s; text-decoration: none; }
        .cta-link:hover { background: var(--surface); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

        #reschedule-container, #bulk-reschedule-container { display: none; }
        #reschedule-container.active, #bulk-reschedule-container.active { display: block; animation: fadeIn 0.3s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

        /* Notes Modal Styles */
        .notes-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; align-items: center; justify-content: center; padding: 20px; }
        .notes-modal-content { background: white; width: 100%; max-width: 600px; border-radius: 12px; padding: 24px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
        .notes-modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 16px; }

        @media print {
            body { background: white; padding: 0; }
            #sidebar-container, #header-container, #bottomnav-container, .form-card, .section-title, .no-print { display: none !important; }
            .main-wrapper { flex: 1; display: block; overflow: visible; }
            #main-content { padding: 0; overflow: visible; }
            #appointment-module .table-container { box-shadow: none; border: none; margin: 0; }
            #appointment-module .table-header { padding: 0 0 10px 0; border-bottom: 2px solid #000; }
            #appointment-module .saas-table { min-width: 100%; }
            #appointment-module .saas-table th { background: white; color: black; border-bottom: 1px solid #000; }
            #appointment-module .saas-table td { border-bottom: 1px solid #E8E5E1; }
        }
    

/* ===== SOURCE: appointmentsorg.html | embedded stylesheet 2 ===== */
body{font-family:sans-serif; padding:40px; line-height:1.6; color:#111;}

/* ===== SOURCE: appointmentsorg.html | embedded stylesheet 3 ===== */

                        body { font-family: 'Helvetica Neue', sans-serif; padding: 40px; color: #0a0a0a; margin: 0; background: #fff; }
                        .header-row { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #e16349; padding-bottom: 24px; margin-bottom: 30px; }
                        .logo-area { display: flex; align-items: center; gap: 12px; }
                        .logo-area img { max-height: 40px; object-fit: contain; display: block; }
                        .company-info { text-align: right; font-size: 13px; color: #555; line-height: 1.6; }
                        .bill-to { display: flex; justify-content: space-between; margin-bottom: 40px; }
                        .bill-to h3 { margin: 0 0 8px 0; color: #e16349; font-size: 14px; text-transform: uppercase; }
                        table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
                        th { background: #FAFAFA; color: #777; font-size: 12px; text-transform: uppercase; padding: 12px; text-align: left; border-bottom: 2px solid #E8E5E1; }
                        td { padding: 16px 12px; font-size: 15px; border-bottom: 1px solid #E8E5E1; }
                        .totals-box { float: right; width: 300px; }
                        .totals-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 15px; }
                        .totals-row.balance { font-size: 20px; font-weight: 800; color: #e16349; border-top: 2px solid #0a0a0a; padding-top: 15px; margin-top: 5px; }
                        .bank-details { clear: both; margin-top: 60px; padding: 20px; background: #FAFAFA; border-radius: 8px; font-size: 13px; border: 1px solid #E8E5E1; }
                        .bank-details h4 { margin: 0 0 10px 0; color: #e16349; text-transform: uppercase; font-size: 12px; }
                        .footer-text { margin-top: 40px; text-align: center; font-size: 10px; color: #999; opacity: 0.3; text-transform: uppercase; letter-spacing: 0.5px; }
                    

/* ===== SOURCE: appointmtnt3.html | embedded stylesheet 1 ===== */

        

        #appointment-module { font-family: var(--font-ui); width: 100%; max-width: 1200px; margin: 0 auto; padding: 16px;}
        
        #appointment-module .section-title { font-size: 20px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        
        /* Action Bar */
        .action-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
        .action-bar .btn-action { background: var(--surface); color: var(--primary); border: 1px solid var(--primary); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: 0.2s; }
        .action-bar .btn-action:hover { background: var(--primary); color: white; }
        .action-bar .btn-danger { background: var(--surface); color: var(--danger); border: 1px solid var(--danger); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: 0.2s; }
        .action-bar .btn-danger:hover { background: var(--danger); color: white; }

        /* Form styling */
        #aptFormCard { display: none; background: var(--surface); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; animation: fadeIn 0.3s ease;}
        #aptFormCard.active { display: block; }
        
        #appointment-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        #appointment-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #appointment-module .input-group { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { #appointment-module .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }

        #appointment-module .form-input { width: 100%; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; box-sizing: border-box;}
        #appointment-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        
        #appointment-module .btn-primary { background: var(--primary); color: white; border: none; padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
        #appointment-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
        
        /* Timesheet CSS */
        .timesheet-wrapper { display: none; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow-x: auto; margin-bottom: 24px; padding: 16px; animation: fadeIn 0.3s ease;}
        .timesheet-wrapper.active { display: block; }
        .timesheet-table { width: 100%; min-width: 1000px; border-collapse: collapse; text-align: center; }
        .timesheet-table th { background: var(--primary-light); color: var(--primary); font-size: 11px; padding: 10px 4px; border: 1px solid var(--border); }
        .timesheet-table td { border: 1px solid var(--border); padding: 6px; font-size: 11px; vertical-align: top; height: 60px; width: 7.1%; }
        .timesheet-table .ts-doctor { font-weight: bold; background: #fafafa; text-align: left; padding-left: 12px; width: 15%; color: var(--text-main); }
        .ts-booking { background: var(--primary); color: white; padding: 4px; border-radius: 4px; margin-bottom: 4px; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        /* Data Table CSS */
        #appointment-module .table-container { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        #appointment-module .table-responsive { width: 100%; overflow-x: auto; }
        #appointment-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
        #appointment-module .saas-table { width: 100%; min-width: 950px; border-collapse: collapse; text-align: left; }
        #appointment-module .saas-table th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); }
        #appointment-module .saas-table td { padding: 16px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); vertical-align: middle; }
        
        .badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; white-space: nowrap; }
        .badge-pending { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
        .badge-reported { background: rgba(0, 98, 255, 0.1); color: var(--primary); } 
        .badge-completed { background: rgba(16, 185, 129, 0.1); color: var(--success); }
        .badge-rescheduled { background: rgba(100, 116, 139, 0.1); color: var(--secondary); }
        .badge-regular { background: rgba(245, 158, 11, 0.15); color: var(--warning); font-size: 10px; padding: 2px 6px; margin-left: 6px; }

        .cta-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #FAFAFA; border: 1px solid var(--border); transition: 0.2s; text-decoration: none; color: inherit; cursor: pointer;}
        .cta-link:hover { background: var(--surface); transform: translateY(-2px); }

        #bulk-reschedule-container { display: none; margin-bottom: 16px; }
        #bulk-reschedule-container.active { display: flex; animation: fadeIn 0.3s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

        /* Notes Modal Styles */
        .notes-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; align-items: center; justify-content: center; padding: 20px; }
        .notes-modal-content { background: white; width: 100%; max-width: 600px; border-radius: 12px; padding: 24px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
        .notes-modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 16px; }
    

/* ===== SOURCE: appointmtnt3.html | embedded stylesheet 2 ===== */

                        body { font-family: 'Helvetica Neue', sans-serif; padding: 40px; color: #0a0a0a; margin: 0; background: #fff; }
                        .header-row { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #0062FF; padding-bottom: 24px; margin-bottom: 30px; }
                        .company-info { text-align: right; font-size: 13px; color: #555; line-height: 1.6; }
                        .bill-to { display: flex; justify-content: space-between; margin-bottom: 40px; }
                        table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
                        th { background: #FAFAFA; color: #777; font-size: 12px; text-transform: uppercase; padding: 12px; text-align: left; border-bottom: 2px solid #E8E5E1; }
                        td { padding: 16px 12px; font-size: 15px; border-bottom: 1px solid #E8E5E1; }
                        .totals-box { float: right; width: 300px; }
                        .totals-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 15px; }
                        .totals-row.balance { font-size: 20px; font-weight: 800; color: #0062FF; border-top: 2px solid #0a0a0a; padding-top: 15px; margin-top: 5px; }
                        .bank-details { clear: both; margin-top: 60px; padding: 20px; background: #FAFAFA; border-radius: 8px; font-size: 13px; border: 1px solid #E8E5E1; }
                    

/* ===== SOURCE: appointmtnt3.html | embedded stylesheet 3 ===== */
body{font-family:sans-serif; padding:40px; line-height:1.6; color:#111;}

/* ===== SOURCE: apt.html | embedded stylesheet 1 ===== */

    

        #appointment-module { font-family: var(--font-ui); width: 100%; max-width: 1120px;}
        
        #appointment-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        #appointment-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        #appointment-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #appointment-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #appointment-module .input-group { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { #appointment-module .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }
        @media (min-width: 1024px) { #appointment-module .input-group.four-cols { grid-template-columns: 1fr 1fr 1fr 1fr; } }

        #appointment-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        #appointment-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        
        #appointment-module .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
        #appointment-module .btn-primary:disabled { background: var(--grey-med); cursor: not-allowed; }
        #appointment-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
        #appointment-module .btn-verify { background: var(--text-main); color: #fff; border: none; padding: 0 20px; border-radius: 12px; font-weight: 600; cursor: pointer; font-size: 13px;}

        #appointment-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        
        /* Native Horizontal Scroll Table for Mobile */
        #appointment-module .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        #appointment-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
        #appointment-module .saas-table { width: 100%; min-width: 950px; border-collapse: collapse; text-align: left; }
        #appointment-module .saas-table th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); white-space: nowrap;}
        #appointment-module .saas-table td { padding: 16px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap;}
        
        .badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; white-space: nowrap; margin-right: 4px; }
        .badge-pending { background: rgba(251, 146, 60, 0.1); color: var(--danger); }
        .badge-reported { background: rgba(59, 130, 246, 0.1); color: #3B82F6; } 
        .badge-completed { background: rgba(16, 185, 129, 0.1); color: var(--success); }
        .badge-rescheduled { background: rgba(100, 116, 139, 0.1); color: var(--secondary); }
        .badge-cancelled { background: rgba(239, 68, 68, 0.1); color: #EF4444; }
        .badge-category { background: rgba(15, 23, 42, 0.05); color: var(--text-main); border: 1px solid var(--border); }

        .cta-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #FAFAFA; border: 1px solid var(--border); transition: 0.2s; text-decoration: none; }
        .cta-link:hover { background: var(--surface); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

        #reschedule-container, #bulk-reschedule-container { display: none; }
        #reschedule-container.active, #bulk-reschedule-container.active { display: block; animation: fadeIn 0.3s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

        /* Notes Modal Styles */
        .notes-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; align-items: center; justify-content: center; padding: 20px; }
        .notes-modal-content { background: white; width: 100%; max-width: 600px; border-radius: 12px; padding: 24px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
        .notes-modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 16px; }

        @media print {
            body { background: white; padding: 0; }
            #sidebar-container, #header-container, #bottomnav-container, .form-card, .section-title, .no-print { display: none !important; }
            .main-wrapper { flex: 1; display: block; overflow: visible; }
            #main-content { padding: 0; overflow: visible; }
            #appointment-module .table-container { box-shadow: none; border: none; margin: 0; }
            #appointment-module .table-header { padding: 0 0 10px 0; border-bottom: 2px solid #000; }
            #appointment-module .saas-table { min-width: 100%; }
            #appointment-module .saas-table th { background: white; color: black; border-bottom: 1px solid #000; }
            #appointment-module .saas-table td { border-bottom: 1px solid #E8E5E1; }
        }
    

/* ===== SOURCE: apt.html | embedded stylesheet 2 ===== */
body{font-family:sans-serif; padding:40px; line-height:1.6; color:#111;}

/* ===== SOURCE: apt.html | embedded stylesheet 3 ===== */

                        body { font-family: 'Helvetica Neue', sans-serif; padding: 40px; color: #0a0a0a; margin: 0; background: #fff; }
                        .header-row { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #e16349; padding-bottom: 24px; margin-bottom: 30px; }
                        .logo-area { display: flex; align-items: center; gap: 12px; }
                        .logo-area img { max-height: 40px; object-fit: contain; display: block; }
                        .company-info { text-align: right; font-size: 13px; color: #555; line-height: 1.6; }
                        .bill-to { display: flex; justify-content: space-between; margin-bottom: 40px; }
                        .bill-to h3 { margin: 0 0 8px 0; color: #e16349; font-size: 14px; text-transform: uppercase; }
                        table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
                        th { background: #FAFAFA; color: #777; font-size: 12px; text-transform: uppercase; padding: 12px; text-align: left; border-bottom: 2px solid #E8E5E1; }
                        td { padding: 16px 12px; font-size: 15px; border-bottom: 1px solid #E8E5E1; }
                        .totals-box { float: right; width: 300px; }
                        .totals-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 15px; }
                        .totals-row.balance { font-size: 20px; font-weight: 800; color: #e16349; border-top: 2px solid #0a0a0a; padding-top: 15px; margin-top: 5px; }
                        .bank-details { clear: both; margin-top: 60px; padding: 20px; background: #FAFAFA; border-radius: 8px; font-size: 13px; border: 1px solid #E8E5E1; }
                        .bank-details h4 { margin: 0 0 10px 0; color: #e16349; text-transform: uppercase; font-size: 12px; }
                        .footer-text { margin-top: 40px; text-align: center; font-size: 10px; color: #999; opacity: 0.3; text-transform: uppercase; letter-spacing: 0.5px; }
                    

/* ===== SOURCE: attendance.html | embedded stylesheet 1 ===== */

    
        
        #attendance-module { font-family: var(--font-ui); width: 100%; max-width: 1120px; margin: 0 auto;}
        #attendance-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 24px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;}
        
        #attendance-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #attendance-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #attendance-module .input-group { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { #attendance-module .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }

        #attendance-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        #attendance-module .form-input:focus { border-color: var(--primary); background: var(--surface); }

        #attendance-module .btn-primary { background: var(--primary); color: white; border: none; padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; display: inline-flex; align-items: center; gap: 6px;}
        #attendance-module .btn-primary:active { opacity: 0.8; }
        #attendance-module .btn-primary:disabled { background: var(--grey-med); cursor: not-allowed; }
        #attendance-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }

        /* Google Sheet Style Horizontal Scroll Table */
        #attendance-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        #attendance-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
        #attendance-module .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        #attendance-module .saas-table { width: 100%; min-width: 800px; border-collapse: collapse; text-align: left; }
        #attendance-module .saas-table th { padding: 12px 20px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #attendance-module .saas-table td { padding: 16px 20px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
        
        /* Status Badges */
        .badge { padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; display: inline-block; }
        .badge-present { background: rgba(16, 185, 129, 0.1); color: var(--success); }
        .badge-leave { background: rgba(251, 146, 60, 0.1); color: var(--warning); }
        .badge-pending { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
        .badge-rejected { background: rgba(239, 68, 68, 0.1); color: var(--danger); }

        /* Summary Dashboard */
        .summary-dashboard { display: flex; gap: 12px; flex-wrap: wrap; background: #FAFAFA; padding: 12px; border-radius: 12px; border: 1px solid var(--border); }
        .summary-card { flex: 1; min-width: 120px; padding: 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; }
        .summary-card span { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; }
        .summary-card strong { font-size: 20px; font-weight: 800; color: var(--text-main); }
        .summary-card.present strong { color: var(--success); }
        .summary-card.leave strong { color: var(--warning); }

        /* Monthly View Matrix Styling */
        #monthTable { width: 100%; border-collapse: collapse; font-size: 11px; min-width: 1100px; }
        #monthTable th { background: #FAFAFA; color: var(--text-muted); text-transform: uppercase; font-size: 10px; padding: 8px 4px; border: 1px solid var(--border); text-align: center; }
        #monthTable td { border: 1px solid var(--border); padding: 6px 4px; text-align: center; font-weight: 600; }
        #monthTable td:nth-child(1), #monthTable td:nth-child(2), #monthTable td:nth-child(3) { text-align: left; padding-left: 10px; }
        .m-st-P { color: var(--success); }
        .m-st-L { color: var(--warning); }
        .m-st-H { color: #3B82F6; }
        .m-st-none { color: #ddd; font-weight: normal; }

        /* Modal Styles */
        .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.6); z-index: 9999; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); }
        .modal-container { background: var(--surface); border-radius: 20px; width: 100%; max-width: 800px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden; max-height: 90vh; display: flex; flex-direction: column; }
        .modal-container.small { max-width: 500px; }
        .modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
        .modal-header h3 { margin: 0; font-size: 18px; color: var(--text-main); }
        .modal-close { background: transparent; border: none; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; padding: 4px; border-radius: 6px; transition: 0.2s; }
        .modal-close:hover { background: var(--grey-light); color: var(--danger); }
        .modal-body { padding: 24px; overflow-y: auto; }

        @media print {
            @page { size: A4 landscape; margin: 10mm; }
            body { background: white; padding: 0; }
            #sidebar-container, #header-container, #bottomnav-container, .no-print { display: none !important; }
            .main-wrapper { flex: 1; display: block; overflow: visible; }
            #main-content { padding: 0; overflow: visible; }
            
            body.printing-monthly #daily-log-container,
            body.printing-monthly #leave-requests-container { display: none !important; }
            
            body:not(.printing-monthly) #monthlyReportContainer { display: none !important; }

            #attendance-module .table-container { box-shadow: none; border: none; margin: 0; }
            #attendance-module .saas-table th { background: white; color: black; border-bottom: 1px solid #000; }
            #attendance-module .saas-table td { border-bottom: 1px solid #E8E5E1; }
            
            #monthTable th, #monthTable td { border: 1px solid #000; font-size: 9px; padding: 3px; }
            #monthTable th { background: #f0f0f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        }
    

/* ===== SOURCE: backup.html | embedded stylesheet 1 ===== */

    

        #export-module { font-family: var(--font-ui); width: 100%; max-width: 900px; margin: 0 auto; padding: 20px 0;}
        
        #export-module .section-title { font-size: 22px; font-weight: 700; margin-bottom: 24px; color: var(--text-main); display: flex; align-items: center; gap: 8px;}
        #export-module .card { background: var(--surface); border-radius: 20px; padding: 32px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        
        #export-module .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
        
        #export-module .input-group { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 24px; }
        @media (min-width: 768px) { #export-module .input-group { grid-template-columns: 1fr 1fr 1fr; } }

        #export-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 15px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        #export-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        
        #export-module .btn-primary { background: var(--primary); color: white; border: none; padding: 16px 24px; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;}
        #export-module .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
        #export-module .btn-primary:disabled { background: var(--grey-med); cursor: not-allowed; transform: none; }
        
        #export-module .btn-danger { background: var(--danger); color: white; border: none; padding: 16px 24px; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
        #export-module .btn-danger:hover { opacity: 0.9; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2); transform: translateY(-1px); }

        .info-box { background: var(--primary-light); border: 1px solid #BFDBFE; padding: 16px; border-radius: 12px; color: #1E3A8A; font-size: 13px; line-height: 1.5; display: flex; gap: 12px; align-items: flex-start; margin-bottom: 24px;}
        .info-box.warning { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
    

/* ===== SOURCE: backup.html | embedded stylesheet 2 ===== */

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

/* ===== SOURCE: bank.html | embedded stylesheet 1 ===== */

    

        #transaction-module { font-family: var(--font-ui); width: 100%; max-width: 1120px; }
        #transaction-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        
        #transaction-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        #transaction-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #transaction-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #transaction-module .input-group { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { #transaction-module .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }

        #transaction-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        #transaction-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        #transaction-module .form-input:disabled { background: #F0F0F0; color: #999; cursor: not-allowed; }

        #transaction-module .readonly-input { background: transparent; border: 1px dashed transparent; padding-left: 0; font-weight: 700; color: var(--text-main); pointer-events: none; }
        
        #transaction-module .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
        #transaction-module .btn-primary:active { opacity: 0.8; }
        #transaction-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
        #transaction-module .btn-verify { background: var(--text-main); color: #fff; border: none; padding: 0 20px; border-radius: 12px; font-weight: 600; cursor: pointer; font-size: 13px;}
        
        /* Google Sheet Style Table (Horizontal Scroll) */
        #transaction-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        #transaction-module .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        #transaction-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
        #transaction-module .saas-table { width: 100%; min-width: 900px; border-collapse: collapse; text-align: left; }
        #transaction-module .saas-table th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #transaction-module .saas-table td { padding: 16px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
        
        .badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; }
        .badge-sales { background: rgba(16, 185, 129, 0.1); color: var(--success); }
        .badge-expense { background: rgba(251, 146, 60, 0.1); color: var(--danger); }
        .badge-receipt { background: rgba(100, 116, 139, 0.1); color: var(--secondary); }

        .cta-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #FAFAFA; border: 1px solid var(--border); transition: 0.2s; text-decoration: none; }
        .cta-link:hover { background: var(--surface); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

        /* Patient Summary Dash */
        #patientSummaryDash { display: none; background: #fef5e8; border: 1px dashed var(--primary); padding: 16px; border-radius: 12px; margin-bottom: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
        .summary-metric { display: flex; flex-direction: column; }
        .summary-metric span { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px;}
        .summary-metric strong { font-size: 18px; font-weight: 800; color: var(--text-main); }

        /* Ledger Balances */
        .ledger-summary-banner { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; background: #FAFAFA; border-bottom: 1px solid var(--border); padding: 16px 20px; }
        .ledger-box { padding: 16px; border-radius: 12px; background: white; border: 1px solid var(--border); }
        .ledger-box h5 { margin: 0 0 4px 0; font-size: 12px; color: var(--text-muted); text-transform: uppercase; }
        .ledger-box p { margin: 0; font-size: 20px; font-weight: 800; color: var(--text-main); }

        /* Print Override */
        @media print {
            body { background: white; padding: 0; }
            #sidebar-container, #header-container, #bottomnav-container, .form-card, .section-title, .no-print { display: none !important; }
            .main-wrapper { flex: 1; display: block; overflow: visible; }
            #main-content { padding: 0; overflow: visible; }
            #transaction-module .table-container { box-shadow: none; border: none; margin: 0; }
            #transaction-module .saas-table th { background: white; color: black; border-bottom: 1px solid #000; }
            #transaction-module .saas-table td { border-bottom: 1px solid #E8E5E1; }
        }
    

/* ===== SOURCE: bank.html | embedded stylesheet 2 ===== */

                        body { font-family: 'Helvetica Neue', sans-serif; padding: 40px; color: #222; margin: 0; }
                        .header-row { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #e16349; padding-bottom: 24px; margin-bottom: 30px; }
                        .logo-area { display: flex; align-items: center; gap: 12px; }
                        .logo-area img { max-height: 40px; object-fit: contain; display: block; }
                        .company-info { text-align: right; font-size: 13px; color: #555; line-height: 1.6; }
                        .box { border: 1px solid #ccc; padding: 20px; margin-bottom: 20px; border-radius: 8px;}
                        .row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 16px;}
                        .amt { font-size: 24px; font-weight: bold; color: #e16349; text-align: center; padding: 20px; background: #FAFAFA; border: 1px dashed #ccc;}
                        .footer-text { margin-top: 40px; text-align: center; font-size: 10px; color: #999; opacity: 0.3; text-transform: uppercase; letter-spacing: 0.5px; }
                    

/* ===== SOURCE: bank.html | embedded stylesheet 3 ===== */

                            body { font-family: 'Helvetica Neue', sans-serif; padding: 40px; color: #222; margin: 0;}
                            .header-row { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #e16349; padding-bottom: 24px; margin-bottom: 30px; }
                            .logo-area { display: flex; align-items: center; gap: 12px; }
                            .logo-area img { max-height: 40px; object-fit: contain; display: block; }
                            .company-info { text-align: right; font-size: 13px; color: #555; line-height: 1.6; }
                            table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px;}
                            th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
                            th { background: #FAFAFA; color: #777; text-transform: uppercase; font-size: 12px;}
                            .summary { margin-top: 30px; border-top: 2px solid #222; padding-top: 10px; width: 350px; float: right; }
                            .summary-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 15px; }
                            .summary-row.total { font-weight: bold; font-size: 18px; color: #e16349; border-top: 1px solid #ddd; padding-top: 10px; margin-top: 10px; }
                            .footer-text { clear: both; margin-top: 60px; text-align: center; font-size: 10px; color: #999; opacity: 0.3; text-transform: uppercase; letter-spacing: 0.5px; }
                        

/* ===== SOURCE: bottomnav.html | embedded stylesheet 1 ===== */

    .bottom-nav { 
        display: flex; justify-content: space-around; background: var(--surface); 
        border-top: 1px solid var(--border); padding: 10px 0; 
        padding-bottom: calc(10px + env(safe-area-inset-bottom)); 
        position: fixed; bottom: 0; width: 100%; z-index: 900; 
    }
    .bottom-nav-item { 
        display: flex; flex-direction: column; align-items: center; 
        color: var(--text-muted); text-decoration: none; 
        font-size: 10px; font-weight: 600; cursor: pointer; 
        transition: color 0.2s ease;
    }
    .bottom-nav-item:hover { color: var(--text-main); }
    .bottom-nav-item.active { color: var(--primary); }
    .bottom-nav-icon { font-size: 24px; margin-bottom: 4px; }


/* ===== SOURCE: branches.html | embedded stylesheet 1 ===== */

    /* --- Core Theme Variables --- */
    

        #branches-module { font-family: var(--font-ui); width: 100%; max-width: 1120px; margin: 0 auto; }

        /* --- UI Components --- */
        #branches-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 24px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        
        #branches-module .icon-btn { background: var(--surface); border: 1px solid var(--border); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: pointer; box-shadow: var(--shadow-sm); transition: 0.2s; }
        #branches-module .icon-btn:hover { color: var(--primary); border-color: var(--primary); }

        /* Form Card - Now takes full width */
        #branches-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 32px; width: 100%; }
        #branches-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #branches-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #branches-module .input-group { grid-template-columns: 1fr 1fr; } }
        /* Allowing full width rows for long addresses */
        #branches-module .full-width-field { grid-column: 1 / -1; }

        #branches-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; }
        
        /* --- Read-Only vs Editable States --- */
        #branches-module .readonly-input { background: transparent; border: 1px dashed transparent; padding-left: 0; font-weight: 600; color: var(--text-main); pointer-events: none; transition: all 0.3s ease; }
        #branches-module .readonly-input.editable { background: #FAFAFA; border: 1px solid var(--border); padding-left: 16px; pointer-events: auto; font-weight: 500;}
        #branches-module .readonly-input.editable:focus { border-color: var(--primary); background: var(--surface); }
        #branches-module .locked-input { background: #F4F4F4 !important; color: #888 !important; pointer-events: none !important; border: 1px solid var(--border) !important; padding-left: 16px !important; }

        #branches-module .btn-primary { background: var(--primary); color: white; border: none; padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
        #branches-module .btn-primary:active { opacity: 0.8; }
        #branches-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; }

        /* --- Google Sheet Style Horizontal Scroll Table --- */
        #branches-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; width: 100%; }
        #branches-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;}
        #branches-module .table-header h4 { font-size: 16px; font-weight: 600; margin: 0;}
        
        #branches-module .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        #branches-module .saas-table { width: 100%; min-width: 800px; border-collapse: collapse; text-align: left; }
        #branches-module .saas-table th { padding: 12px 20px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #branches-module .saas-table td { padding: 16px 20px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #branches-module .saas-table tr:last-child td { border-bottom: none; }
        
        #branches-module .branch-info { display: flex; flex-direction: column; }
        #branches-module .branch-info .bid { font-size: 12px; color: var(--primary); font-weight: 700; margin-bottom: 2px; }
    

/* ===== SOURCE: calc.html | embedded stylesheet 1 ===== */

        :root[data-theme="dark"] {
            /* Frame & Metal Background */
            --bg-base: #1a1b1c;
            --bg-metal-1: rgba(255,255,255,0.02);
            --text-header: #e0e0e0;
            --text-cm: #df483a;
            
            /* Menus and Modals */
            --menu-bg: #222325;
            --menu-text: #e0e0e0;
            --menu-border: #333333;
            --menu-hover: #333435;
            
            /* Screen */
            --screen-bg: linear-gradient(180deg, #0f282f 0%, #12333b 100%);
            --screen-text: #ffffff;
            --screen-text-muted: #5e848d;
            --screen-border: #000000;
            --screen-divider: #264a52;
            
            /* Button Base */
            --btn-border: #050505;
            --btn-shadow: inset 0 1px 1px rgba(255,255,255,0.1), 0 3px 6px rgba(0,0,0,0.6);
            
            /* Button Variants */
            --btn-num: linear-gradient(180deg, #333435 0%, #1e1e1f 100%);
            --btn-num-text: #b3b3b3; 
            
            --btn-mem: linear-gradient(180deg, #363636 0%, #262626 100%);
            --btn-mem-text: #909090;
            
            --btn-op: linear-gradient(180deg, #325a74 0%, #1f4258 100%);
            --btn-op-text: #ffffff;
            
            --btn-red: linear-gradient(180deg, #c2463b 0%, #9c2e25 100%);
            --btn-red-text: #ffffff;
            
            --btn-orange: linear-gradient(180deg, #e29033 0%, #c16e15 100%);
            --btn-orange-text: #000000;
        }

        :root[data-theme="light"] {
            /* Frame & Metal Background */
            --bg-base: #e4e6e8;
            --bg-metal-1: rgba(0,0,0,0.03);
            --text-header: #111111;
            --text-cm: #db3a2b;
            
            /* Menus and Modals */
            --menu-bg: #f5f6f7;
            --menu-text: #111111;
            --menu-border: #caced1;
            --menu-hover: #e4e6e8;
            
            /* Screen */
            --screen-bg: linear-gradient(180deg, #a4c1cf 0%, #89adb9 100%);
            --screen-text: #111111;
            --screen-text-muted: #3a545e;
            --screen-border: #6c7d85;
            --screen-divider: #7598a6;
            
            /* Button Base */
            --btn-border: #99a2a8;
            --btn-shadow: inset 0 1px 2px rgba(255,255,255,0.9), 0 2px 4px rgba(0,0,0,0.25);
            
            /* Button Variants */
            --btn-num: linear-gradient(180deg, #f2f2f2 0%, #d8d8d8 100%);
            --btn-num-text: #111111; 
            
            --btn-mem: linear-gradient(180deg, #a7b2c2 0%, #8b97a8 100%);
            --btn-mem-text: #ffffff;
            
            --btn-op: linear-gradient(180deg, #dce4ee 0%, #b8c6d8 100%);
            --btn-op-text: #111111;
            
            --btn-red: linear-gradient(180deg, #ef8a7a 0%, #db5b4a 100%);
            --btn-red-text: #111111;
            
            --btn-orange: linear-gradient(180deg, #fac680 0%, #ee9941 100%);
            --btn-orange-text: #111111;
        }

        * { 
            font-family: var(--font-ui); 
            -webkit-tap-highlight-color: transparent; 
            box-sizing: border-box;
            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        }

        body { 
            background-color: var(--bg-base);
            background-image: 
                repeating-linear-gradient(90deg, transparent 0px, transparent 1px, var(--bg-metal-1) 1px, var(--bg-metal-1) 3px),
                linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%);
            margin: 0;
            height: 100dvh; 
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
        }

        /* Dynamic Grid */
        .keypad-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            grid-template-rows: 0.7fr repeat(5, 1fr);
            gap: 0.45rem;
            width: 100%;
            height: 100%;
        }

        /* 3D Button Style */
        .calc-btn {
            display: flex; align-items: center; justify-content: center;
            border-radius: 8px; font-weight: 500; 
            cursor: pointer; user-select: none;
            border: 1px solid var(--btn-border);
            box-shadow: var(--btn-shadow);
            touch-action: manipulation;
            transition: transform 0.05s ease, box-shadow 0.05s ease, filter 0.1s;
        }
        
        .calc-btn:active { 
            transform: translateY(2px); 
            box-shadow: inset 0 2px 6px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.1);
            filter: brightness(0.9);
        }

        .btn-num { background: var(--btn-num); color: var(--btn-num-text); font-size: 2.25rem; font-weight: 500; }
        .btn-mem { background: var(--btn-mem); color: var(--btn-mem-text); font-size: 1.25rem; font-weight: 500; }
        .btn-op { background: var(--btn-op); color: var(--btn-op-text); font-size: 2.25rem; }
        .btn-red { background: var(--btn-red); color: var(--btn-red-text); font-size: 2.25rem; }
        .btn-orange { background: var(--btn-orange); color: var(--btn-orange-text); font-size: 2.25rem; }
        
        /* The Display Screen */
        .display-box {
            background: var(--screen-bg);
            border: 2px solid var(--screen-border);
            border-radius: 6px;
            box-shadow: inset 0 4px 12px rgba(0,0,0,0.25), 0 1px 1px rgba(255,255,255,0.05);
        }

        .truncate-custom {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .hover-menu:hover {
            background-color: var(--menu-hover);
        }

        /* Splash Screen Base Styles */
        #splash-screen {
            background-color: var(--bg-base);
        }
    

/* ===== SOURCE: cash.html | embedded stylesheet 1 ===== */

    

        #transaction-module { font-family: var(--font-ui); width: 100%; max-width: 1120px; }
        #transaction-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        
        #transaction-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        #transaction-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #transaction-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #transaction-module .input-group { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { #transaction-module .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }

        #transaction-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        #transaction-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        #transaction-module .form-input:disabled { background: #F0F0F0; color: #999; cursor: not-allowed; }

        #transaction-module .readonly-input { background: transparent; border: 1px dashed transparent; padding-left: 0; font-weight: 700; color: var(--text-main); pointer-events: none; }
        
        #transaction-module .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
        #transaction-module .btn-primary:active { opacity: 0.8; }
        #transaction-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
        #transaction-module .btn-verify { background: var(--text-main); color: #fff; border: none; padding: 0 20px; border-radius: 12px; font-weight: 600; cursor: pointer; font-size: 13px;}
        
        /* Google Sheet Style Table (Horizontal Scroll) */
        #transaction-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        #transaction-module .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        #transaction-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
        #transaction-module .saas-table { width: 100%; min-width: 900px; border-collapse: collapse; text-align: left; }
        #transaction-module .saas-table th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #transaction-module .saas-table td { padding: 16px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
        
        .badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; }
        .badge-sales { background: rgba(16, 185, 129, 0.1); color: var(--success); }
        .badge-expense { background: rgba(251, 146, 60, 0.1); color: var(--danger); }
        .badge-receipt { background: rgba(100, 116, 139, 0.1); color: var(--secondary); }

        .cta-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #FAFAFA; border: 1px solid var(--border); transition: 0.2s; text-decoration: none; }
        .cta-link:hover { background: var(--surface); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

        /* Patient Summary Dash */
        #patientSummaryDash { display: none; background: #fef5e8; border: 1px dashed var(--primary); padding: 16px; border-radius: 12px; margin-bottom: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
        .summary-metric { display: flex; flex-direction: column; }
        .summary-metric span { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px;}
        .summary-metric strong { font-size: 18px; font-weight: 800; color: var(--text-main); }

        /* Ledger Balances */
        .ledger-summary-banner { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; background: #FAFAFA; border-bottom: 1px solid var(--border); padding: 16px 20px; }
        .ledger-box { padding: 16px; border-radius: 12px; background: white; border: 1px solid var(--border); }
        .ledger-box h5 { margin: 0 0 4px 0; font-size: 12px; color: var(--text-muted); text-transform: uppercase; }
        .ledger-box p { margin: 0; font-size: 20px; font-weight: 800; color: var(--text-main); }

        /* Print Override */
        @media print {
            body { background: white; padding: 0; }
            #sidebar-container, #header-container, #bottomnav-container, .form-card, .section-title, .no-print { display: none !important; }
            .main-wrapper { flex: 1; display: block; overflow: visible; }
            #main-content { padding: 0; overflow: visible; }
            #transaction-module .table-container { box-shadow: none; border: none; margin: 0; }
            #transaction-module .saas-table th { background: white; color: black; border-bottom: 1px solid #000; }
            #transaction-module .saas-table td { border-bottom: 1px solid #E8E5E1; }
        }
    

/* ===== SOURCE: cash.html | embedded stylesheet 2 ===== */

                        body { font-family: 'Helvetica Neue', sans-serif; padding: 40px; color: #222; margin: 0; }
                        .header-row { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #e16349; padding-bottom: 24px; margin-bottom: 30px; }
                        .logo-area { display: flex; align-items: center; gap: 12px; }
                        .logo-area img { max-height: 40px; object-fit: contain; display: block; }
                        .company-info { text-align: right; font-size: 13px; color: #555; line-height: 1.6; }
                        .box { border: 1px solid #ccc; padding: 20px; margin-bottom: 20px; border-radius: 8px;}
                        .row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 16px;}
                        .amt { font-size: 24px; font-weight: bold; color: #e16349; text-align: center; padding: 20px; background: #FAFAFA; border: 1px dashed #ccc;}
                        .footer-text { margin-top: 40px; text-align: center; font-size: 10px; color: #999; opacity: 0.3; text-transform: uppercase; letter-spacing: 0.5px; }
                    

/* ===== SOURCE: cash.html | embedded stylesheet 3 ===== */

                            body { font-family: 'Helvetica Neue', sans-serif; padding: 40px; color: #222; margin: 0;}
                            .header-row { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #e16349; padding-bottom: 24px; margin-bottom: 30px; }
                            .logo-area { display: flex; align-items: center; gap: 12px; }
                            .logo-area img { max-height: 40px; object-fit: contain; display: block; }
                            .company-info { text-align: right; font-size: 13px; color: #555; line-height: 1.6; }
                            table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px;}
                            th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
                            th { background: #FAFAFA; color: #777; text-transform: uppercase; font-size: 12px;}
                            .summary { margin-top: 30px; border-top: 2px solid #222; padding-top: 10px; width: 350px; float: right; }
                            .summary-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 15px; }
                            .summary-row.total { font-weight: bold; font-size: 18px; color: #e16349; border-top: 1px solid #ddd; padding-top: 10px; margin-top: 10px; }
                            .footer-text { clear: both; margin-top: 60px; text-align: center; font-size: 10px; color: #999; opacity: 0.3; text-transform: uppercase; letter-spacing: 0.5px; }
                        

/* ===== SOURCE: company.html | embedded stylesheet 1 ===== */

    /* --- Core Theme Variables --- */
    

        #company-module { font-family: var(--font-ui); width: 100%; max-width: 850px; margin: 0 auto; } 

        /* --- UI Components --- */
        #company-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        #company-module .icon-btn { background: var(--surface); border: 1px solid var(--border); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: pointer; box-shadow: var(--shadow-sm); transition: 0.2s; }
        #company-module .icon-btn:hover { color: var(--primary); border-color: var(--primary); }
        
        #company-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        #company-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #company-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #company-module .input-group { grid-template-columns: 1fr 1fr; } }

        #company-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        
        /* --- Read-Only vs Editable States --- */
        #company-module .readonly-input { background: transparent; border: 1px dashed transparent; padding-left: 0; font-weight: 600; color: var(--text-main); pointer-events: none; transition: all 0.3s ease; }
        #company-module .readonly-input.editable { background: #FAFAFA; border: 1px solid var(--border); padding-left: 16px; pointer-events: auto; font-weight: 500;}
        #company-module .readonly-input.editable:focus { border-color: var(--primary); background: var(--surface); }

        #company-module .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
        #company-module .btn-primary:active { opacity: 0.8; }
        #company-module .btn-primary:disabled { background: var(--border); cursor: not-allowed; }
        #company-module .section-header { color: var(--primary); margin-top: 24px; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 8px; font-size: 14px; font-weight: 700; text-transform: uppercase;}
    

/* ===== SOURCE: estimate.html | embedded stylesheet 1 ===== */

    

        #estimate-module { font-family: var(--font-ui); width: 100%; max-width: 1120px; margin: 0 auto; }
        
        .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); }
        .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.04); border: 1px solid var(--border); margin-bottom: 24px; }
        .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { .input-group { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }

        .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; }
        .form-input:focus { border-color: var(--primary); background: var(--surface); }
        
        .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.2s; width: 100%; }
        .btn-primary:active { opacity: 0.8; }
        .btn-primary:disabled { background: #D9D9D9; cursor: not-allowed; }

        .action-row { display: none; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
        .btn-action { flex: 1; min-width: 100px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; background: #FAFAFA; border: 1px solid var(--border); padding: 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--text-main); cursor: pointer; transition: 0.2s; }
        .btn-action:hover { background: var(--surface); border-color: var(--primary); color: var(--primary); }

        .a4-wrapper { background: #E8E5E1; padding: 20px; border-radius: 20px; overflow-x: auto; display: flex; justify-content: center; }
        .a4-paper { background: white; width: 210mm; min-height: 297mm; padding: 40px; box-sizing: border-box; box-shadow: 0 8px 24px rgba(0,0,0,0.1); color: #0a0a0a; flex-shrink: 0; }
        
        .a4-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--primary); padding-bottom: 24px; margin-bottom: 30px; }
        .a4-logo-area img { max-width: 200px; height: auto; display: block; object-fit: contain; }
        .a4-company-info { text-align: right; font-size: 13px; color: #555; line-height: 1.6; }
        
        .a4-bill-to { display: flex; justify-content: space-between; margin-bottom: 40px; }
        .a4-bill-to h3 { margin: 0 0 8px 0; color: var(--primary); font-size: 14px; text-transform: uppercase; }
        
        .a4-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
        .a4-table th { background: #FAFAFA; color: #777; font-size: 12px; text-transform: uppercase; padding: 12px; text-align: left; border-bottom: 2px solid #E8E5E1; }
        .a4-table td { padding: 16px 12px; font-size: 15px; border-bottom: 1px solid #E8E5E1; }
        
        .a4-totals { float: right; width: 300px; }
        .a4-totals-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 15px; }
        .a4-totals-row.balance { font-size: 20px; font-weight: 800; color: var(--primary); border-top: 2px solid #0a0a0a; padding-top: 15px; margin-top: 5px; }
        
        .a4-bank-details { clear: both; margin-top: 60px; padding: 20px; background: #FAFAFA; border-radius: 8px; font-size: 13px; border: 1px solid #E8E5E1; }
        .a4-bank-details h4 { margin: 0 0 10px 0; color: var(--primary); text-transform: uppercase; font-size: 12px; }
        
        .a4-footer-text { margin-top: 40px; text-align: center; font-size: 9px; color: #999; opacity: 0.5; text-transform: uppercase; letter-spacing: 0.5px; }

        @media (max-width: 768px) {
            .a4-wrapper { padding: 10px; justify-content: flex-start; }
            .a4-paper { transform: scale(0.85); transform-origin: top left; }
        }

        @media print {
            body { background: white; padding: 0; }
            #sidebar-container, #header-container, #bottomnav-container, .form-card, .section-title, .no-print { display: none !important; }
            .main-wrapper { flex: 1; display: block; overflow: visible; }
            #main-content { padding: 0; overflow: visible; }
            .a4-wrapper { padding: 0; background: none; justify-content: flex-start; overflow: visible; }
            .a4-paper { box-shadow: none; width: 100%; padding: 0; transform: none; min-height: auto; }
        }
    

/* ===== SOURCE: header - Copy.html | embedded stylesheet 1 ===== */

  /* --- Progress Clock Header Styles --- */
  .metric-round { position: relative; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; }
  .clock-svg { transform: rotate(-90deg); position: absolute; }
  .clock-svg circle { fill: none; stroke-width: 4; stroke-linecap: round; }
  .bg-track { stroke: #F0F0F0; }
  .progress-arc { transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
  .center-text { display: flex; flex-direction: column; align-items: center; z-index: 1; text-align: center; line-height: 1; }
  .main-val { font-size: 13px; font-weight: 700; color: #0a0a0a; margin-bottom: 2px; }
  .sub-label { font-size: 7px; font-weight: 700; color: #777777; text-transform: uppercase; }

  /* Pair 1: DD & MM (Primary Blue) */
.blue-pair .progress-arc {
    stroke: #2563EB;
}

/* Pair 2: HH & MM (Zoho Yellow) */
.yellow-pair .progress-arc {
    stroke: #FFC72C;
}

/* Logout Button */
.logout-btn {
    margin-left: 12px;
    padding: 6px 12px;
    background: #FEF2F2;
    color: #EF4444;
    border: 1px solid #FCA5A5;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.logout-btn:hover {
    background: #EF4444;
    color: #FFFFFF;
}

  /* --- Mobile Responsiveness --- */
  @media (max-width: 768px) {
      .desktop-only { display: none !important; }
      .search-container { width: auto !important; background: transparent !important; border: none !important; padding: 0 !important; }
      .search-input { display: none !important; }
      .top-header { padding: 12px 16px !important; }
      .logout-btn { padding: 4px 8px; font-size: 11px; }
  }


/* ===== SOURCE: header.html | embedded stylesheet 1 ===== */

    /* =========================================================
       PROGRESS CLOCK HEADER
       ========================================================= */

    .metric-round {
        position: relative;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .clock-svg {
        transform: rotate(-90deg);
        position: absolute;
    }

    .clock-svg circle {
        fill: none;
        stroke-width: 4;
        stroke-linecap: round;
    }

    .bg-track {
        stroke: #F0F0F0;
    }

    .progress-arc {
        transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .center-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 1;
        text-align: center;
        line-height: 1;
    }

    .main-val {
        font-size: 13px;
        font-weight: 700;
        color: #0a0a0a;
        margin-bottom: 2px;
    }

    .sub-label {
        font-size: 7px;
        font-weight: 700;
        color: #777777;
        text-transform: uppercase;
    }

    .blue-pair .progress-arc {
        stroke: #2563EB;
    }

    .yellow-pair .progress-arc {
        stroke: #FFC72C;
    }

    /* =========================================================
       LOGOUT
       ========================================================= */

    .logout-btn {
        margin-left: 12px;
        padding: 6px 12px;
        background: #FEF2F2;
        color: #EF4444;
        border: 1px solid #FCA5A5;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: 0.2s;
    }

    .logout-btn:hover {
        background: #EF4444;
        color: #FFFFFF;
    }

    /* =========================================================
       NOTIFICATION
       ========================================================= */

    @keyframes ring {
        0% { transform: rotate(0); }
        10% { transform: rotate(15deg); }
        20% { transform: rotate(-10deg); }
        30% { transform: rotate(5deg); }
        40% { transform: rotate(-5deg); }
        50% { transform: rotate(0); }
        100% { transform: rotate(0); }
    }

    .bell-anim {
        animation: ring 2s infinite;
        transform-origin: top center;
        color: #0062FF !important;
    }

    /* =========================================================
       MOBILE SEARCH
       ========================================================= */

    .mobile-search-btn {
        display: none;
        width: 38px;
        height: 38px;
        border: 1px solid #E8E5E1;
        background: #FAFAFA;
        border-radius: 8px;
        align-items: center;
        justify-content: center;
        color: #0F172A;
        cursor: pointer;
    }

    .mobile-search-btn .material-symbols-rounded {
        font-size: 21px;
    }

    .mobile-search-panel {
        display: none;
        position: absolute;
        left: 12px;
        right: 12px;
        top: calc(100% + 6px);
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 10px;
        padding: 8px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.10);
        z-index: 9999;
    }

    .mobile-search-panel.open {
        display: flex;
    }

    .mobile-search-inner {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
        background: #F8FAFC;
        border: 1px solid #E2E8F0;
        border-radius: 8px;
        padding: 9px 11px;
    }

    .mobile-search-inner .material-symbols-rounded {
        font-size: 20px;
        color: #64748B;
    }

    .mobile-search-input {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: #0F172A;
        font-size: 13px;
        font-weight: 500;
    }

    .mobile-search-input::placeholder {
        color: #94A3B8;
    }

    /* =========================================================
       DESKTOP SEARCH
       ========================================================= */

    .search-container {
        width: 192px;
        background: #FAFAFA;
        border: 1px solid #E8E5E1;
        border-radius: 8px;
        display: flex;
        align-items: center;
        padding: 8px 12px;
    }

    .

/* ===== SOURCE: index.html | embedded stylesheet 1 ===== */


*{margin:0;padding:0;box-sizing:border-box;font-family: var(--font-ui);-webkit-tap-highlight-color:transparent}
html,body{
    display:flex;
    height:100%;
    height:100dvh;
    width:100vw;
    overflow:hidden;
    background:var(--bg);
    color:var(--text-main);
}
#app-container{
    display:flex;
    height:100%;
    height:100dvh;
    width:100vw;
    overflow:hidden;
    visibility:hidden;
}
#sidebar-container{
    width:260px;
    height:100%;
    background:var(--surface);
    border-right:1px solid var(--border);
    flex-shrink:0;
    overflow-y:auto;
    transition:transform .3s ease;
    z-index:1000;
}
.main-wrapper{
    flex:1;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    position:relative;
    height:100%;
}
#header-container{flex-shrink:0}
#bottomnav-container{display:none;flex-shrink:0}
#main-content{
    flex:1;
    overflow-y:auto;
    padding:24px;
    -webkit-overflow-scrolling:touch;
}
.view-section{display:none;animation:fadeIn .3s ease-in-out}
.view-section.active{display:block}
@keyframes fadeIn{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:translateY(0)}
}

.dash-top-row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:20px;
    margin-bottom:24px;
}
.dash-card{
    background:var(--surface);
    border-radius:16px;
    padding:24px;
    box-shadow:var(--shadow);
    border:1px solid var(--border);
    display:flex;
    flex-direction:column;
}
.card-title{
    font-size:14px;
    font-weight:700;
    color:var(--text-main);
    margin-bottom:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.fin-stat-container{
    display:flex;
    flex-direction:column;
    gap:16px;
    flex:1;
    justify-content:center;
}
.fin-stat{
    padding:16px;
    border-radius:12px;
    background:#FAFAFA;
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.fin-stat.alert{background:#fff5f5;border-color:#fecaca}
.fin-stat.success-box{background:#ECFDF5;border-color:#A7F3D0}
.fin-stat-info{display:flex;flex-direction:column}
.fin-label{
    font-size:11px;
    font-weight:700;
    color:var(--text-muted);
    text-transform:uppercase;
    margin-bottom:4px;
    letter-spacing:.5px;
}
.fin-amount{font-size:24px;font-weight:800;color:var(--text-main)}
.fin-stat.alert .fin-amount{color:var(--danger)}
.fin-stat.success-box .fin-amount{color:var(--success)}
.fin-icon{font-size:32px;color:var(--border)}
.fin-stat.alert .fin-icon{color:#fca5a5}
.fin-stat.success-box .fin-icon{color:#6EE7B7}
.chart-container{
    position:relative;
    height:180px;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:16px;
}
.mini-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mini-stat{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 12px;
    border-radius:8px;
    background:#FAFAFA;
    border:1px solid var(--border);
}
.mini-stat-label{
    font-size:11px;
    font-weight:600;
    color:var(--text-muted);
    display:flex;
    align-items:center;
    gap:6px;
}
.dot{width:8px;height:8px;border-radius:50%}
.mini-stat-val{font-size:13px;font-weight:700;color:var(--text-main)}
.cal-header-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
}
.cal-nav-btn{
    background:#FAFAFA;
    border:1px solid var(--border);
    border-radius:6px;
    font-size:20px;
    color:var(--text-main);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:4px;
}
.cal-nav-btn:hover{background:var(--surface);border-color:var(--primary);color:var(--primary)}
.cal-month-title{font-size:14px;font-weight:700;color:var(--text-main)}
.calendar-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:4px;
    text-align:center;
}
.cal-day-name{
    font-size:10px;
    font-weight:700;
    color:var(--text-muted);
    padding-bottom:8px;
    text-transform:uppercase;
}
.cal-day{
    padding:8px 0;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
    border:1px solid transparent;
    position:relative;
}
.cal-day:hover{background:#FAFAFA;border-color:var(--border)}
.cal-day.active{
    background:var(--primary);
    color:#fff;
    font-weight:700;
    box-shadow:0 4px 10px rgba(0,98,255,.3);
}
.cal-day.has-event::after{
    content:'';
    position:absolute;
    bottom:4px;
    left:50%;
    transform:translateX(-50%);
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--text-main);
}
.cal-day.active.has-event::after{background:#fff}
.cal-day.empty{pointer-events:none}

.dash-table-wrapper{
    background:var(--surface);
    border-radius:16px;
    box-shadow:var(--shadow);
    border:1px solid var(--border);
    overflow:hidden;
    width:100%;
    margin-bottom:40px;
}
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.saas-table{
    width:100%;
    min-width:800px;
    border-collapse:collapse;
    text-align:left;
}
.saas-table th{
    padding:14px 20px;
    font-size:11px;
    font-weight:700;
    color:var(--text-muted);
    text-transform:uppercase;
    background:#FAFAFA;
    border-bottom:1px solid var(--border);
    letter-spacing:.5px;
}
.saas-table td{
    padding:16px 20px;
    font-size:13px;
    font-weight:500;
    border-bottom:1px solid var(--border);
    color:var(--text-main);
    vertical-align:middle;
    white-space:nowrap;
}
.saas-table tr:last-child td{border-bottom:none}
.badge{
    padding:4px 10px;
    border-radius:6px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    display:inline-block;
    white-space:nowrap;
}
.badge-pending{background:#FFF7ED;color:var(--warning);border:1px solid #FFEDD5}
.badge-completed{background:#ECFDF5;color:var(--success);border:1px solid #D1FAE5}
.badge-rescheduled{background:#F8FAFC;color:var(--secondary);border:1px solid #E2E8F0}
.badge-cancelled{background:#FEF2F2;color:var(--danger);border:1px solid #FEE2E2}

.balance-no-due{color:#64748B!important;font-weight:700}
.balance-due{color:#EF4444!important;font-weight:700}
.balance-excess{color:#10B981!important;font-weight:700}

.dash-error{
    display:none;
    background:#FEF2F2;
    border:1px solid #FCA5A5;
    color:var(--danger);
    padding:12px;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    margin-bottom:20px;
    align-items:center;
    gap:8px;
}

#calc-popup-container{
    display:none;
    position:fixed;
    bottom:20px;
    right:20px;
    width:320px;
    height:480px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 10px 40px rgba(0,0,0,.25);
    border:1px solid var(--border);
    z-index:10000;
    resize:both;
    overflow:hidden;
    flex-direction:column;
    min-width:250px;
    min-height:350px;
}
#calc-popup-header{
    background:var(--surface);
    color:var(--text-main);
    padding:12px 16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:move;
    border-bottom:1px solid var(--border);
    user-select:none;
}

@media(max-width:768px){
    #sidebar-container{
        position:fixed;
        z-index:1000;
        top:0;
        left:0;
        transform:translateX(-100%);
        width:280px;
        height:100%;
        box-shadow:5px 0 15px rgba(0,0,0,.1);
    }
    #sidebar-container.open{transform:translateX(0)}
    #bottomnav-container{display:block}
    #main-content{padding:16px;padding-bottom:90px}
    #calc-popup-container{
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        bottom:auto;
        right:auto;
        resize:none;
        width:min(92vw,360px);
        height:min(76dvh,560px);
    }
    .dash-top-row{grid-template-columns:1fr;gap:12px}
    .dash-card{padding:16px;border-radius:12px}
}


/* ===== SOURCE: ledgers.html | embedded stylesheet 1 ===== */

    

        #ledger-module { font-family: var(--font-ui); width: 100%; max-width: 1120px; margin: 0 auto; padding-bottom: 40px; }
        
        #ledger-module .section-title { font-size: 24px; font-weight: 800; margin-bottom: 24px; color: var(--text-main); display: flex; align-items: center; gap: 10px; }
        
        #ledger-module .grid-layout { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 24px; }
        @media (min-width: 992px) { #ledger-module .grid-layout { grid-template-columns: 300px 1fr; } }

        #ledger-module .card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
        
        #ledger-module .form-label { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
        
        #ledger-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #ledger-module .input-group.two-cols { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { #ledger-module .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }

        #ledger-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; margin-bottom: 16px;}
        #ledger-module .form-input:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-light); }
        #ledger-module .form-input:read-only { background: #E2E8F0; color: var(--text-muted); cursor: not-allowed; font-weight: 700; }
        
        #ledger-module .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;}
        #ledger-module .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
        
        #ledger-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 12px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: 0.2s;}
        #ledger-module .btn-outline:hover { background: #FAFAFA; border-color: var(--primary); color: var(--primary); }

        /* Table Styles */
        #ledger-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        #ledger-module .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        #ledger-module .saas-table { width: 100%; min-width: 900px; border-collapse: collapse; text-align: left; }
        #ledger-module .saas-table th { padding: 16px 20px; font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #ledger-module .saas-table td { padding: 16px 20px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
        
        .badge { padding: 6px 12px; border-radius: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; }
        .badge-dr { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
        .badge-cr { background: rgba(16, 185, 129, 0.1); color: var(--success); }
        .badge-cat { background: var(--bg); border: 1px solid var(--border); color: var(--text-main); }
    

/* ===== SOURCE: letterhead.html | embedded stylesheet 1 ===== */

    

        #letterhead-module { font-family: var(--font-ui); display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1120px;}

        /* --- A4 Screen Canvas (Mobile Responsive) --- */
        #letterhead-module .a4-canvas {
            width: 100%;
            max-width: 210mm; /* Exact A4 width */
            min-height: 297mm; /* Exact A4 height */
            background: #FFFFFF;
            padding: 20mm; /* A4 Margin */
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            margin-bottom: 24px;
            overflow: hidden; /* Contains the watermark */
        }

        /* --- Center Watermark --- */
        #letterhead-module .watermark {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60%; /* Scales dynamically with the page */
            max-width: 400px;
            height: auto;
            opacity: 0.08; /* Low opacity */
            pointer-events: none; /* Prevents it from blocking clicks on the text area */
            z-index: 0;
        }

        /* Elevate content above watermark */
        #letterhead-module .letter-header,
        #letterhead-module .meta-group,
        #letterhead-module .letter-body,
        #letterhead-module .footer-section {
            position: relative;
            z-index: 1;
        }

        /* --- Header --- */
        #letterhead-module .letter-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            border-bottom: 2px solid var(--primary);
            padding-bottom: 16px;
            margin-bottom: 24px;
            gap: 16px;
        }
        #letterhead-module .logo-img { max-width: 130px; height: auto; }
        #letterhead-module .company-info { text-align: right; font-size: 11px; color: var(--text-muted); line-height: 1.5; }
        #letterhead-module .comp-title-img { max-width: 180px; height: auto; display: inline-block; margin-bottom: 4px; }

        #letterhead-module .branch-bar {
            font-size: 9px;
            color: var(--text-muted);
            background: var(--bg-light);
            padding: 6px 12px;
            border-radius: 6px;
            border: 1px solid #E8E5E1;
            text-align: center;
            margin-top: 8px;
        }

        /* --- Metadata Fields --- */
        #letterhead-module .meta-group { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
        #letterhead-module .meta-row { display: flex; align-items: center; gap: 12px; }
        #letterhead-module .meta-row.subject { align-items: flex-start; }
        #letterhead-module .meta-label { width: 70px; font-weight: 600; font-size: 13px; color: var(--text-main); flex-shrink: 0; }
        
        /* Inputs & Native Date Picker */
        #letterhead-module .meta-input { 
            flex: 1; 
            border: none; 
            border-bottom: 1px dashed var(--border); 
            outline: none; 
            font-size: 13px; 
            padding: 4px 0; 
            color: #111; 
            background: transparent;
            font-family: inherit;
        }
        #letterhead-module .meta-input:focus { border-bottom-color: var(--primary); }

        /* --- Content --- */
        #letterhead-module .letter-body { flex: 1; margin-bottom: 24px; }
        #letterhead-module .letter-body textarea { 
            width: 100%; height: 100%; min-height: 200px; 
            border: none; outline: none; resize: none; 
            font-size: 13px; line-height: 1.7; color: #111; 
            background: transparent; /* Essential for watermark visibility */
            font-family: inherit;
        }

        /* --- Sign-off & Seal --- */
        #letterhead-module .footer-section { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; min-height: 100px; }
        #letterhead-module .sign-block { font-size: 13px; color: var(--text-muted); line-height: 1.6; font-weight: 500; }
        
        /* --- Seal Integration Styles --- */
        #letterhead-module .seal-control-wrapper { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
        
        #letterhead-module .seal-box-company {
            width: 63.5mm;
            height: 25.4mm;
            border: 2px solid var(--stamp-green);
            border-radius: 4px;
            background: transparent;
            color: var(--stamp-green);
            position: relative;
            overflow: hidden;
            font-family: "Times New Roman", serif;
            display: none;
        }
        #letterhead-module .seal-box-company .seal-name { text-align: center; font-size: 18px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 4mm; line-height: 1; }
        #letterhead-module .seal-box-company .signature-line { position: absolute; left: 5mm; right: 5mm; bottom: 8mm; border-top: 1.5px solid var(--stamp-green); }
        #letterhead-module .seal-box-company .seal-role { position: absolute; right: 5mm; bottom: 2.5mm; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--stamp-green); }

        #letterhead-module .seal-box-doctor {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--stamp-green);
            font-family: "Arial", "Helvetica", sans-serif;
            text-align: center;
            line-height: 1.4;
        }
        #letterhead-module .seal-box-doctor .doc-name { font-size: 17px; font-weight: 800; letter-spacing: 0.5px; }
        #letterhead-module .seal-box-doctor .doc-qual { font-size: 15px; font-weight: 700; }
        #letterhead-module .seal-box-doctor .doc-reg { font-size: 14px; font-weight: 700; margin-top: 2px; }
        #letterhead-module .seal-box-doctor .doc-role { font-size: 14px; font-weight: 700; margin-top: 2px; }

        /* --- Screen Control Action --- */
        #letterhead-module .print-ctrl { width: 100%; max-width: 800px; text-align: right; margin-bottom: 24px; }
        #letterhead-module .print-btn { padding: 12px 32px; background: var(--primary); color: white; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; font-size: 13px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        #letterhead-module .print-btn:hover { opacity: 0.9; }

        /* --- Strict Print Media Queries --- */
        @media (max-width: 768px) {
            #letterhead-module { padding: 0px; }
            #letterhead-module .a4-canvas { box-shadow: none; border: none; border-radius: 0; padding: 0; min-height: auto; height: auto; }
            #letterhead-module .letter-header { flex-direction: column; gap: 12px; }
            #letterhead-module .company-info { text-align: left; }
            #letterhead-module .print-ctrl { text-align: center; }
        }

        @media print {
            body { background: #FFF !important; padding: 0 !important; display: block !important; }
            #sidebar-container, #header-container, #bottomnav-container, .no-print { display: none !important; }
            .main-wrapper { flex: 1; display: block; overflow: visible; }
            #main-content { padding: 0; overflow: visible; }
            #letterhead-module .a4-canvas { box-shadow: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; max-width: none !important; min-height: auto !important; height: auto !important; }
            #letterhead-module .meta-input { border-bottom: none !important; }
            
            /* Print colors accurately for the seal */
            #letterhead-module .seal-box-company, #letterhead-module .seal-box-doctor { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        }
    

/* ===== SOURCE: login.html | embedded stylesheet 1 ===== */

        .bg-crossed-pattern { background: linear-gradient(135deg, #ffffff 50%, #f8fafc 50%); position: relative; }
        .bg-crossed-pattern::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px); background-size: 32px 32px; opacity: 0.5; pointer-events: none; }
        .hover-float { transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .hover-float:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0, 82, 204, 0.15); }
        #splash-screen { transition: opacity 0.6s ease-out, visibility 0.6s ease-out; }
        .fade-out { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
    

/* ===== SOURCE: nav.html | embedded stylesheet 1 ===== */

    /* Wrapper to manage full height and push footer to the bottom */
    .sidebar-inner-wrapper { display: flex; flex-direction: column; min-height: 100%; height: 100%; }
    
    /* Top Logo Styling - Automatically scales the 2000px image down to fit the sidebar */
    .sidebar-logo { max-width: 160px; height: auto; object-fit: contain; display: block; } 
    
    /* The nav menu takes up the remaining space (flex: 1) to push the footer down */
    .sidebar-nav { flex: 1; overflow-y: auto; padding-bottom: 20px; } 
    
    /* Sidebar Footer Styling */
    .sidebar-footer { padding: 20px 24px; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; background: #FAFAFA; margin-top: auto; }
    .footer-logo { width: 90px; height: auto; margin-bottom: 6px; object-fit: contain; }
    .footer-version { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }


/* ===== SOURCE: patients.html | embedded stylesheet 1 ===== */

    /* --- Core Theme Variables --- */
    

        #patient-module { font-family: var(--font-ui); }
        
        /* --- UI Components --- */
        #patient-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        #patient-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        #patient-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #patient-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #patient-module .input-group { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { #patient-module .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }
        @media (min-width: 1024px) { #patient-module .input-group.four-cols { grid-template-columns: 1fr 1fr 1fr 1fr; } }

        #patient-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        #patient-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        #patient-module .form-input:disabled { background: #F0F0F0; color: #999; cursor: not-allowed; }
        #patient-module .readonly-input { background: transparent; border: 1px dashed transparent; padding-left: 0; font-weight: 700; color: var(--text-main); pointer-events: none; }

        #patient-module .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
        #patient-module .btn-primary:active { opacity: 0.8; }
        #patient-module .btn-primary:disabled { background: var(--grey-med); cursor: not-allowed; }
        #patient-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
        #patient-module .btn-verify { background: var(--text-main); color: #fff; border: none; padding: 0 20px; border-radius: 12px; font-weight: 600; cursor: pointer; font-size: 13px;}

        #patient-module .validation-msg { font-size: 12px; font-weight: 600; margin-top: 6px; display: none; }
        #patient-module .validation-msg.success { color: var(--success); display: block; }
        #patient-module .validation-msg.error { color: var(--danger); display: block; }

        /* --- Badges --- */
        .badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; white-space: nowrap; margin-bottom: 4px; }
        .badge-normal { background: #F1F5F9; color: #475569; border: 1px solid #CBD5E1; }
        .badge-regular { background: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE; }
        .badge-both { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }

        /* --- Table Styling --- */
        #patient-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        #patient-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
        #patient-module .table-header h4 { font-size: 16px; font-weight: 600; margin: 0; }
        #patient-module .saas-table { width: 100%; border-collapse: collapse; text-align: left; }
        #patient-module .saas-table th { padding: 12px 20px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); }
        #patient-module .saas-table td { padding: 16px 20px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); vertical-align: top; }
        #patient-module .saas-table tr:last-child td { border-bottom: none; }
        #patient-module .patient-info { display: flex; flex-direction: column; }
        #patient-module .patient-info .pid { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-weight: 700; }

        /* --- CTA Links --- */
        .cta-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #FAFAFA; border: 1px solid var(--border); transition: 0.2s; text-decoration: none; }
        .cta-link:hover { background: var(--surface); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

        /* --- Mobile Table Fix --- */
        @media (max-width: 767px) {
            #patient-module .saas-table thead { display: none; }
            #patient-module .saas-table, #patient-module .saas-table tbody, #patient-module .saas-table tr, #patient-module .saas-table td { display: block; width: 100%; }
            #patient-module .saas-table tr { padding: 16px; border-bottom: 1px solid var(--border); }
            
            #patient-module .saas-table td { 
                padding: 8px 0; 
                border: none; 
                display: flex; 
                flex-direction: column; 
                align-items: flex-start; 
            }
            
            #patient-module .saas-table td::before { 
                content: attr(data-label); 
                font-size: 10px; 
                color: var(--text-muted); 
                font-weight: 700; 
                text-transform: uppercase; 
                margin-bottom: 4px; 
                letter-spacing: 0.5px;
            }
            
            #patient-module .saas-table td:nth-child(1) { 
                padding-bottom: 16px; 
                border-bottom: 1px dashed var(--border); 
                margin-bottom: 8px;
            }
            
            #patient-module .saas-table td:nth-child(1)::before { display: none; }
            #patient-module .saas-table td:nth-child(1) .patient-info { flex-direction: row; align-items: center; gap: 8px; font-size: 16px; }

            .mobile-cta-container {
                display: flex;
                align-items: center;
                gap: 12px;
                margin-top: 6px;
            }
        }

        /* --- Clean Print Styling for PDF Export --- */
        @media print {
            body { background: white; padding: 0; }
            #sidebar-container, #header-container, #bottomnav-container, .form-card, .section-title, .no-print { display: none !important; }
            .main-wrapper { flex: 1; display: block; overflow: visible; }
            #main-content { padding: 0; overflow: visible; }
            #patient-module .table-container { box-shadow: none; border: none; margin: 0; }
            #patient-module .table-header { padding: 0 0 10px 0; border-bottom: 2px solid #000; }
            #patient-module .saas-table th { background: white; color: black; border-bottom: 1px solid #000; }
            #patient-module .saas-table td { border-bottom: 1px solid #E8E5E1; }
        }
    

/* ===== SOURCE: payments.html | embedded stylesheet 1 ===== */

    

        #transaction-module { font-family: var(--font-ui); width: 100%; max-width: 1120px; }
        #transaction-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        
        #transaction-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        #transaction-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #transaction-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #transaction-module .input-group { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { #transaction-module .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }

        #transaction-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        #transaction-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        #transaction-module .form-input:disabled { background: #F0F0F0; color: #999; cursor: not-allowed; }

        #transaction-module .readonly-input { background: transparent; border: 1px dashed transparent; padding-left: 0; font-weight: 700; color: var(--text-main); pointer-events: none; }
        
        #transaction-module .btn-primary { background: var(--danger); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
        #transaction-module .btn-primary:active { opacity: 0.8; }
        #transaction-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
        #transaction-module .btn-verify { background: var(--text-main); color: #fff; border: none; padding: 0 20px; border-radius: 12px; font-weight: 600; cursor: pointer; font-size: 13px;}
        
        #transaction-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        #transaction-module .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        #transaction-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
        #transaction-module .saas-table { width: 100%; min-width: 900px; border-collapse: collapse; text-align: left; }
        #transaction-module .saas-table th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #transaction-module .saas-table td { padding: 16px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
        
        .badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; }
        .badge-expense { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
        .badge-payment { background: rgba(245, 158, 11, 0.1); color: var(--warning); }

        .cta-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #FAFAFA; border: 1px solid var(--border); transition: 0.2s; text-decoration: none; }
        .cta-link:hover { background: var(--surface); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

        .ledger-summary-banner { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; background: #FAFAFA; border-bottom: 1px solid var(--border); padding: 16px 20px; }
        .ledger-box { padding: 16px; border-radius: 12px; background: white; border: 1px solid var(--border); }
        .ledger-box h5 { margin: 0 0 4px 0; font-size: 12px; color: var(--text-muted); text-transform: uppercase; }
        .ledger-box p { margin: 0; font-size: 20px; font-weight: 800; color: var(--text-main); }

        @media print {
            body { background: white; padding: 0; }
            #sidebar-container, #header-container, #bottomnav-container, .form-card, .section-title, .no-print { display: none !important; }
            .main-wrapper { flex: 1; display: block; overflow: visible; }
            #main-content { padding: 0; overflow: visible; }
            #transaction-module .table-container { box-shadow: none; border: none; margin: 0; }
            #transaction-module .saas-table th { background: white; color: black; border-bottom: 1px solid #000; }
            #transaction-module .saas-table td { border-bottom: 1px solid #E8E5E1; }
        }
    

/* ===== SOURCE: payments.html | embedded stylesheet 2 ===== */

                        body { font-family: 'Helvetica Neue', sans-serif; padding: 40px; color: #222; margin: 0; }
                        .header-row { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #EF4444; padding-bottom: 24px; margin-bottom: 30px; }
                        .logo-area { display: flex; align-items: center; gap: 12px; }
                        .logo-area img { max-height: 40px; object-fit: contain; display: block; }
                        .company-info { text-align: right; font-size: 13px; color: #555; line-height: 1.6; }
                        .box { border: 1px solid #ccc; padding: 20px; margin-bottom: 20px; border-radius: 8px;}
                        .row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 16px;}
                        .amt { font-size: 24px; font-weight: bold; color: #EF4444; text-align: center; padding: 20px; background: #FEF2F2; border: 1px dashed #FCA5A5;}
                        .footer-text { margin-top: 40px; text-align: center; font-size: 10px; color: #999; opacity: 0.3; text-transform: uppercase; letter-spacing: 0.5px; }
                    

/* ===== SOURCE: privacy.html | embedded stylesheet 1 ===== */

        #privacy-module { font-family: var(--font-ui); width: 100%; max-width: 900px; margin: 0 auto; padding-bottom: 40px; }
        
        #privacy-module .section-title { font-size: 24px; font-weight: 800; margin-bottom: 24px; color: var(--text-main); display: flex; align-items: center; gap: 10px; }
        
        #privacy-module .modern-card { background: var(--surface); border-radius: 24px; padding: 40px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04); border: 1px solid var(--border); position: relative; overflow: hidden; }
        
        #privacy-module .last-updated { font-size: 13px; font-weight: 600; color: var(--primary); background: var(--primary-light); display: inline-block; padding: 6px 12px; border-radius: 8px; margin-bottom: 24px; }
        
        #privacy-module h4 { font-size: 18px; font-weight: 700; color: var(--text-main); margin: 32px 0 12px 0; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
        #privacy-module h4:first-of-type { margin-top: 0; }
        
        #privacy-module p { font-size: 14px; color: var(--secondary); line-height: 1.7; margin-bottom: 16px; }
        #privacy-module ul { font-size: 14px; color: var(--secondary); line-height: 1.7; margin-bottom: 16px; padding-left: 20px; }
        #privacy-module li { margin-bottom: 8px; }
        #privacy-module li::marker { color: var(--primary); }

        .highlight-box { background: #ECFDF5; border: 1px solid #A7F3D0; border-radius: 12px; padding: 20px; margin: 24px 0; }
        .highlight-box h5 { margin: 0 0 8px 0; color: #065F46; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px;}
        .highlight-box p { margin: 0; color: #047857; font-size: 14px; font-weight: 500; }

        .contact-block { background: #F8FAFC; border-radius: 12px; padding: 20px; border: 1px solid var(--border); margin-top: 32px; }
        .contact-block strong { color: var(--text-main); }
        .contact-link { color: var(--primary); text-decoration: none; font-weight: 600; transition: 0.2s; }
        .contact-link:hover { text-decoration: underline; }

        @media (max-width: 600px) {
            #privacy-module .modern-card { padding: 24px; }
        }
    

/* ===== SOURCE: qr.html | embedded stylesheet 1 ===== */

        #upi-qr-module { font-family: var(--font-ui); width: 100%; max-width: 1100px; margin: 0 auto; padding-bottom: 40px;}
        
        #upi-qr-module .section-title { font-size: 24px; font-weight: 800; margin-bottom: 24px; color: var(--text-main); display: flex; align-items: center; gap: 10px;}
        
        #upi-qr-module .grid-layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
        @media (min-width: 992px) { #upi-qr-module .grid-layout { grid-template-columns: 1.1fr 0.9fr; } }

        #upi-qr-module .modern-card { background: var(--surface); border-radius: 24px; padding: 30px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04); border: 1px solid var(--border); position: relative; overflow: hidden;}
        
        #upi-qr-module .form-label { display: block; font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
        
        #upi-qr-module .input-wrapper { margin-bottom: 20px; }
        #upi-qr-module .form-input { width: 100%; padding: 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 15px; color: var(--text-main); background: #F8FAFC; outline: none; transition: all 0.3s ease; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);}
        #upi-qr-module .form-input:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 4px var(--primary-light); }
        #upi-qr-module .form-input:read-only { background: #E2E8F0; color: var(--text-muted); cursor: not-allowed; box-shadow: none; font-weight: 600;}
        
        #upi-qr-module .btn-primary { background: linear-gradient(135deg, var(--primary) 0%, #1D4ED8 100%); color: white; border: none; padding: 16px 24px; border-radius: 14px; font-size: 15px; font-weight: 700; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2);}
        #upi-qr-module .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 20px rgba(37, 99, 235, 0.3); }
        
        #upi-qr-module .btn-outline { background: var(--surface); color: var(--text-main); border: 2px solid var(--border); padding: 14px 20px; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s;}
        #upi-qr-module .btn-outline:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
        
        #upi-qr-module .btn-whatsapp { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); color: white; border: none; padding: 16px 24px; border-radius: 14px; font-size: 15px; font-weight: 700; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-shadow: 0 8px 16px rgba(37, 211, 102, 0.2);}
        #upi-qr-module .btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 12px 20px rgba(37, 211, 102, 0.3); }

        .qr-preview-container { background: #F1F5F9; border-radius: 16px; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 480px; text-align: center; position: relative; }
        
        /* The Premium Canvas Receipt */
        #compositeCanvas { max-width: 100%; height: auto; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); display: none; background: white; transition: 0.3s; }
        
        .action-buttons { display: none; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; width: 100%;}
        @media (max-width: 600px) { .action-buttons { grid-template-columns: 1fr; } }
        
        .section-header { margin: 0 0 24px 0; color: var(--text-main); font-size: 18px; border-bottom: 2px solid var(--primary-light); padding-bottom: 12px; font-weight: 800; display: flex; align-items: center; justify-content: space-between;}
    

/* ===== SOURCE: qr1.html | embedded stylesheet 1 ===== */

        #upi-qr-module { font-family: var(--font-ui); width: 100%; max-width: 1120px; margin: 0 auto; padding-bottom: 40px;}
        
        #upi-qr-module .section-title { font-size: 22px; font-weight: 700; margin-bottom: 24px; color: var(--text-main); display: flex; align-items: center; gap: 8px;}
        
        #upi-qr-module .grid-layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
        @media (min-width: 992px) { #upi-qr-module .grid-layout { grid-template-columns: 1fr 1fr; } }

        #upi-qr-module .card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
        #upi-qr-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        #upi-qr-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; margin-bottom: 16px;}
        #upi-qr-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        
        #upi-qr-module .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;}
        #upi-qr-module .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
        
        #upi-qr-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 12px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: 0.2s;}
        #upi-qr-module .btn-outline:hover { background: #FAFAFA; border-color: var(--primary); color: var(--primary); }

        .qr-preview-container { background: #F8FAFC; border: 2px dashed var(--border); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; text-align: center; }
        
        /* The Canvas where the QR Receipt is drawn */
        #compositeCanvas { max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); display: none; background: white; }
        
        .action-buttons { display: none; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; width: 100%;}
        @media (max-width: 600px) { .action-buttons { grid-template-columns: 1fr; } }
    

/* ===== SOURCE: qr2.html | embedded stylesheet 1 ===== */

        #upi-qr-module { font-family: var(--font-ui); width: 100%; max-width: 1100px; margin: 0 auto; padding-bottom: 40px;}
        
        #upi-qr-module .section-title { font-size: 24px; font-weight: 800; margin-bottom: 24px; color: var(--text-main); display: flex; align-items: center; gap: 10px;}
        
        #upi-qr-module .grid-layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
        @media (min-width: 992px) { #upi-qr-module .grid-layout { grid-template-columns: 1.1fr 0.9fr; } }

        #upi-qr-module .modern-card { background: var(--surface); border-radius: 24px; padding: 30px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04); border: 1px solid var(--border); position: relative; overflow: hidden;}
        
        #upi-qr-module .form-label { display: block; font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
        
        #upi-qr-module .input-wrapper { margin-bottom: 20px; }
        #upi-qr-module .form-input { width: 100%; padding: 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 15px; color: var(--text-main); background: #F8FAFC; outline: none; transition: all 0.3s ease; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);}
        #upi-qr-module .form-input:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 4px var(--primary-light); }
        #upi-qr-module .form-input:read-only { background: #E2E8F0; color: var(--text-muted); cursor: not-allowed; box-shadow: none; font-weight: 600;}
        
        #upi-qr-module .btn-primary { background: linear-gradient(135deg, var(--primary) 0%, #1D4ED8 100%); color: white; border: none; padding: 16px 24px; border-radius: 14px; font-size: 15px; font-weight: 700; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2);}
        #upi-qr-module .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 20px rgba(37, 99, 235, 0.3); }
        
        #upi-qr-module .btn-outline { background: var(--surface); color: var(--text-main); border: 2px solid var(--border); padding: 14px 20px; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s;}
        #upi-qr-module .btn-outline:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
        
        #upi-qr-module .btn-whatsapp { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); color: white; border: none; padding: 16px 24px; border-radius: 14px; font-size: 15px; font-weight: 700; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-shadow: 0 8px 16px rgba(37, 211, 102, 0.2);}
        #upi-qr-module .btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 12px 20px rgba(37, 211, 102, 0.3); }

        .qr-preview-container { background: #F1F5F9; border-radius: 16px; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 480px; text-align: center; position: relative; }
        
        /* The Premium Canvas Receipt */
        #compositeCanvas { max-width: 100%; height: auto; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); display: none; background: white; transition: 0.3s; }
        
        .action-buttons { display: none; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; width: 100%;}
        @media (max-width: 600px) { .action-buttons { grid-template-columns: 1fr; } }
        
        .section-header { margin: 0 0 24px 0; color: var(--text-main); font-size: 18px; border-bottom: 2px solid var(--primary-light); padding-bottom: 12px; font-weight: 800; display: flex; align-items: center; justify-content: space-between;}
    

/* ===== SOURCE: qrorg.html | embedded stylesheet 1 ===== */

        #upi-qr-module { font-family: var(--font-ui); width: 100%; max-width: 1120px; margin: 0 auto; padding-bottom: 40px;}
        
        #upi-qr-module .section-title { font-size: 22px; font-weight: 700; margin-bottom: 24px; color: var(--text-main); display: flex; align-items: center; gap: 8px;}
        
        #upi-qr-module .grid-layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
        @media (min-width: 992px) { #upi-qr-module .grid-layout { grid-template-columns: 1fr 1fr; } }

        #upi-qr-module .card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
        #upi-qr-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        #upi-qr-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; margin-bottom: 16px;}
        #upi-qr-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        
        #upi-qr-module .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;}
        #upi-qr-module .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
        
        #upi-qr-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 12px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: 0.2s;}
        #upi-qr-module .btn-outline:hover { background: #FAFAFA; border-color: var(--primary); color: var(--primary); }

        .qr-preview-container { background: #F8FAFC; border: 2px dashed var(--border); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; text-align: center; }
        
        /* The Canvas where the QR Receipt is drawn */
        #compositeCanvas { max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); display: none; background: white; }
        
        .action-buttons { display: none; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; width: 100%;}
        @media (max-width: 600px) { .action-buttons { grid-template-columns: 1fr; } }
    

/* ===== SOURCE: receipt.html | embedded stylesheet 1 ===== */

    

        #transaction-module { font-family: var(--font-ui); width: 100%; max-width: 1120px; }
        #transaction-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        
        #transaction-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        #transaction-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #transaction-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #transaction-module .input-group { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { #transaction-module .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }

        #transaction-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        #transaction-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        #transaction-module .form-input:disabled { background: #F0F0F0; color: #999; cursor: not-allowed; }

        #transaction-module .readonly-input { background: transparent; border: 1px dashed transparent; padding-left: 0; font-weight: 700; color: var(--text-main); pointer-events: none; }
        
        #transaction-module .btn-primary { background: var(--success); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
        #transaction-module .btn-primary:active { opacity: 0.8; }
        #transaction-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
        #transaction-module .btn-verify { background: var(--text-main); color: #fff; border: none; padding: 0 20px; border-radius: 12px; font-weight: 600; cursor: pointer; font-size: 13px;}
        
        #transaction-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        #transaction-module .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        #transaction-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
        #transaction-module .saas-table { width: 100%; min-width: 900px; border-collapse: collapse; text-align: left; }
        #transaction-module .saas-table th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #transaction-module .saas-table td { padding: 16px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
        
        .badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; }
        .badge-receipt { background: rgba(16, 185, 129, 0.1); color: var(--success); }
        .badge-sales { background: rgba(59, 130, 246, 0.1); color: #3B82F6; }

        .cta-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #FAFAFA; border: 1px solid var(--border); transition: 0.2s; text-decoration: none; }
        .cta-link:hover { background: var(--surface); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

        #patientSummaryDash { display: none; background: #ECFDF5; border: 1px dashed var(--success); padding: 16px; border-radius: 12px; margin-bottom: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
        .summary-metric { display: flex; flex-direction: column; }
        .summary-metric span { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px;}
        .summary-metric strong { font-size: 18px; font-weight: 800; color: var(--text-main); }

        .ledger-summary-banner { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; background: #FAFAFA; border-bottom: 1px solid var(--border); padding: 16px 20px; }
        .ledger-box { padding: 16px; border-radius: 12px; background: white; border: 1px solid var(--border); }
        .ledger-box h5 { margin: 0 0 4px 0; font-size: 12px; color: var(--text-muted); text-transform: uppercase; }
        .ledger-box p { margin: 0; font-size: 20px; font-weight: 800; color: var(--text-main); }

        @media print {
            body { background: white; padding: 0; }
            #sidebar-container, #header-container, #bottomnav-container, .form-card, .section-title, .no-print { display: none !important; }
            .main-wrapper { flex: 1; display: block; overflow: visible; }
            #main-content { padding: 0; overflow: visible; }
            #transaction-module .table-container { box-shadow: none; border: none; margin: 0; }
            #transaction-module .saas-table th { background: white; color: black; border-bottom: 1px solid #000; }
            #transaction-module .saas-table td { border-bottom: 1px solid #E8E5E1; }
        }
    

/* ===== SOURCE: receipt.html | embedded stylesheet 2 ===== */

                        body { font-family: 'Helvetica Neue', sans-serif; padding: 40px; color: #222; margin: 0; }
                        .header-row { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #10B981; padding-bottom: 24px; margin-bottom: 30px; }
                        .logo-area { display: flex; align-items: center; gap: 12px; }
                        .logo-area img { max-height: 40px; object-fit: contain; display: block; }
                        .company-info { text-align: right; font-size: 13px; color: #555; line-height: 1.6; }
                        .box { border: 1px solid #ccc; padding: 20px; margin-bottom: 20px; border-radius: 8px;}
                        .row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 16px;}
                        .amt { font-size: 24px; font-weight: bold; color: #10B981; text-align: center; padding: 20px; background: #ECFDF5; border: 1px dashed #A7F3D0;}
                        .footer-text { margin-top: 40px; text-align: center; font-size: 10px; color: #999; opacity: 0.3; text-transform: uppercase; letter-spacing: 0.5px; }
                    

/* ===== SOURCE: receipt.html | embedded stylesheet 3 ===== */

                            body { font-family: 'Helvetica Neue', sans-serif; padding: 40px; color: #222; margin: 0;}
                            .header-row { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #10B981; padding-bottom: 24px; margin-bottom: 30px; }
                            .logo-area { display: flex; align-items: center; gap: 12px; }
                            .logo-area img { max-height: 40px; object-fit: contain; display: block; }
                            .company-info { text-align: right; font-size: 13px; color: #555; line-height: 1.6; }
                            table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px;}
                            th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
                            th { background: #FAFAFA; color: #777; text-transform: uppercase; font-size: 12px;}
                            .summary { margin-top: 30px; border-top: 2px solid #222; padding-top: 10px; width: 350px; float: right; }
                            .summary-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 15px; }
                            .summary-row.total { font-weight: bold; font-size: 18px; color: #EF4444; border-top: 1px solid #ddd; padding-top: 10px; margin-top: 10px; }
                            .footer-text { clear: both; margin-top: 60px; text-align: center; font-size: 10px; color: #999; opacity: 0.3; text-transform: uppercase; letter-spacing: 0.5px; }
                        

/* ===== SOURCE: seal.html | embedded stylesheet 1 ===== */

    

        #seal-module { font-family: var(--font-ui); width: 100%; max-width: 800px; margin: 0 auto; }
        
        #seal-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        #seal-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        
        /* --- Controls --- */
        .seal-selector-group { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
        .seal-option { flex: 1; min-width: 200px; border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: 0.2s; background: #FAFAFA; }
        .seal-option:hover { border-color: var(--primary); }
        .seal-option.active { border-color: var(--primary); background: var(--primary-light); }
        .seal-option input[type="radio"] { accent-color: var(--primary); transform: scale(1.2); cursor: pointer; }
        .seal-option-details { display: flex; flex-direction: column; }
        .seal-option-title { font-size: 14px; font-weight: 700; color: var(--text-main); margin-bottom: 4px; }
        .seal-option-desc { font-size: 12px; color: var(--text-muted); }

        .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 12px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: 0.2s; }
        .btn-outline:hover { background: #FAFAFA; }

        /* --- Preview Canvas --- */
        .canvas-area { background: #F0F0F0; border-radius: 16px; padding: 40px; display: flex; justify-content: center; align-items: center; min-height: 300px; border: 1px dashed #CCC; }

        /* --- Seal 1: Company Seal (2.5" x 1") --- */
        .seal-box-company {
            width: 63.5mm;
            height: 25.4mm;
            border: 2px solid var(--stamp-green);
            border-radius: 4px;
            background: transparent;
            color: var(--stamp-green);
            position: relative;
            overflow: hidden;
            font-family: "Times New Roman", serif;
            display: none; /* Toggled by JS */
        }
        .seal-box-company .seal-name { text-align: center; font-size: 18px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 4mm; line-height: 1; }
        .seal-box-company .signature-line { position: absolute; left: 5mm; right: 5mm; bottom: 8mm; border-top: 1.5px solid var(--stamp-green); }
        .seal-box-company .seal-role { position: absolute; right: 5mm; bottom: 2.5mm; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--stamp-green); }

        /* --- Seal 2: Doctor Seal (Sans-serif, No Border) --- */
        .seal-box-doctor {
            display: none; /* Toggled by JS */
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--stamp-green);
            font-family: "Arial", "Helvetica", sans-serif; /* Matches the image */
            text-align: center;
            line-height: 1.4;
        }
        .seal-box-doctor .doc-name { font-size: 17px; font-weight: 800; letter-spacing: 0.5px; }
        .seal-box-doctor .doc-qual { font-size: 15px; font-weight: 700; }
        .seal-box-doctor .doc-reg { font-size: 14px; font-weight: 700; margin-top: 2px; }
        .seal-box-doctor .doc-role { font-size: 14px; font-weight: 700; margin-top: 2px; }

        /* --- Print Styles --- */
        @media print {
            body { background: white; padding: 0; }
            #sidebar-container, #header-container, #bottomnav-container, .form-card, .section-title, .no-print { display: none !important; }
            .main-wrapper { flex: 1; display: block; overflow: visible; }
            #main-content { padding: 0; overflow: visible; }
            
            .canvas-area { background: white; border: none; padding: 0; min-height: auto; align-items: flex-start; justify-content: flex-start; }
            .seal-box-company, .seal-box-doctor { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        }
    

/* ===== SOURCE: sidebar..html | embedded stylesheet 1 ===== */

    

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-ui); -webkit-tap-highlight-color: transparent; }
        body { display: flex; height: 100vh; width: 100vw; overflow: hidden; background: var(--bg); color: var(--text-main); }

        #sidebar-container { width: 260px; height: 100vh; background: var(--surface); border-right: 1px solid var(--border); flex-shrink: 0; overflow-y: auto; transition: transform 0.3s ease; z-index: 1000; }
        .main-wrapper { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }
        #header-container { flex-shrink: 0; }
        #bottomnav-container { display: none; flex-shrink: 0; }

        #main-content { flex: 1; overflow-y: auto; padding: 24px; -webkit-overflow-scrolling: touch; }
        .view-section { display: none; animation: fadeIn 0.3s ease-in-out; }
        .view-section.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        .dash-top-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-bottom: 24px; }
        .dash-card { background: var(--surface); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); border: 1px solid var(--border); display: flex; flex-direction: column;}
        .card-title { font-size: 14px; font-weight: 700; color: var(--text-main); margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;}

        .fin-stat-container { display: flex; flex-direction: column; gap: 16px; flex: 1; justify-content: center; }
        .fin-stat { padding: 16px; border-radius: 12px; background: #FAFAFA; border: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between;}
        .fin-stat.alert { background: #fff5f5; border-color: #fecaca; }
        .fin-stat.success-box { background: #ECFDF5; border-color: #A7F3D0; }
        .fin-stat-info { display: flex; flex-direction: column; }
        .fin-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; letter-spacing: 0.5px;}
        .fin-amount { font-size: 24px; font-weight: 800; color: var(--text-main); }
        .fin-stat.alert .fin-amount { color: var(--danger); }
        .fin-stat.success-box .fin-amount { color: var(--success); }
        .fin-icon { font-size: 32px; color: var(--border); }
        .fin-stat.alert .fin-icon { color: #fca5a5; }
        .fin-stat.success-box .fin-icon { color: #6EE7B7; }

        .chart-container { position: relative; height: 180px; width: 100%; display: flex; justify-content: center; align-items: center; margin-bottom: 16px;}
        .mini-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        .mini-stat { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 8px; background: #FAFAFA; border: 1px solid var(--border); }
        .mini-stat-label { font-size: 11px; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 6px;}
        .dot { width: 8px; height: 8px; border-radius: 50%; }
        .mini-stat-val { font-size: 13px; font-weight: 700; color: var(--text-main); }

        .cal-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
        .cal-nav-btn { background: #FAFAFA; border: 1px solid var(--border); border-radius: 6px; font-size: 20px; color: var(--text-main); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 4px;}
        .cal-nav-btn:hover { background: var(--surface); border-color: var(--primary); color: var(--primary); }
        .cal-month-title { font-size: 14px; font-weight: 700; color: var(--text-main); }
        .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
        .cal-day-name { font-size: 10px; font-weight: 700; color: var(--text-muted); padding-bottom: 8px; text-transform: uppercase;}
        .cal-day { padding: 8px 0; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.2s; border: 1px solid transparent; position: relative;}
        .cal-day:hover { background: #FAFAFA; border-color: var(--border); }
        .cal-day.active { background: var(--primary); color: white; font-weight: 700; box-shadow: 0 4px 10px rgba(0, 98, 255, 0.3);}
        .cal-day.has-event::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--text-main); }
        .cal-day.active.has-event::after { background: white; }
        .cal-day.empty { pointer-events: none; }

        .dash-table-wrapper { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); border: 1px solid var(--border); overflow: hidden; width: 100%; margin-bottom: 40px; }
        
        .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .saas-table { width: 100%; min-width: 800px; border-collapse: collapse; text-align: left; }
        .saas-table th { padding: 14px 20px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); letter-spacing: 0.5px;}
        .saas-table td { padding: 16px 20px; font-size: 13px; font-weight: 500; border-bottom: 1px solid var(--border); color: var(--text-main); vertical-align: middle; white-space: nowrap;}
        .saas-table tr:last-child td { border-bottom: none; }

        .badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; white-space: nowrap;}
        .badge-pending { background: #FFF7ED; color: var(--warning); border: 1px solid #FFEDD5; }
        .badge-completed { background: #ECFDF5; color: var(--success); border: 1px solid #D1FAE5; }
        .badge-rescheduled { background: #F8FAFC; color: var(--secondary); border: 1px solid #E2E8F0; }
        .badge-cancelled { background: #FEF2F2; color: var(--danger); border: 1px solid #FEE2E2; }

        .dash-error { display: none; background: #FEF2F2; border: 1px solid #FCA5A5; color: var(--danger); padding: 12px; border-radius: 8px; font-size: 13px; font-weight: 600; margin-bottom: 20px; align-items: center; gap: 8px; }

        /* Draggable & Resizable Calculator Popup Styles */
        #calc-popup-container {
            display: none; 
            position: fixed; 
            bottom: 20px; 
            right: 20px; 
            width: 320px; 
            height: 480px; 
            background: white; 
            border-radius: 12px; 
            box-shadow: 0 10px 40px rgba(0,0,0,0.25); 
            border: 1px solid var(--border); 
            z-index: 10000; 
            resize: both; /* Makes it resizable */
            overflow: hidden; 
            flex-direction: column;
            min-width: 250px;
            min-height: 350px;
        }
        #calc-popup-header {
            background: var(--surface); 
            color: var(--text-main); 
            padding: 12px 16px; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            cursor: move; /* Drag cursor */
            border-bottom: 1px solid var(--border);
            user-select: none;
        }

        @media (max-width: 768px) {
            #sidebar-container { position: fixed; z-index: 1000; transform: translateX(-100%); width: 280px; box-shadow: 5px 0 15px rgba(0,0,0,0.1); }
            #sidebar-container.open { transform: translateX(0); }
            #bottomnav-container { display: block; }
            #main-content { padding: 16px; padding-bottom: 100px; }
            
            /* On mobile, center the calculator popup */
            #calc-popup-container {
                top: 50%; left: 50%;
                transform: translate(-50%, -50%);
                bottom: auto; right: auto;
                resize: none;
            }
        }
    

/* ===== SOURCE: sidebar.html | embedded stylesheet 1 ===== */

    /* =========================================================
       SIDEBAR BASE
       ========================================================= */

    .sidebar-inner-wrapper {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        height: 100%;
    }


    /* =========================================================
       SIDEBAR HEADER / STRA CARE LOGO
       ========================================================= */

    .sidebar-header {
        position: sticky;
        top: 0;
        background: var(--surface);
        z-index: 10;
        border-bottom: 1px solid var(--border);

        padding: 16px 20px;

        display: flex;
        justify-content: center;
        align-items: center;

        min-height: 76px;
    }

    .sidebar-brand {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar-logo {
        display: block;
        width: 100%;
        max-width: 190px;
        height: auto;
        max-height: 52px;
        object-fit: contain;
    }

    .close-menu {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--text-main);

        display: flex;
        align-items: center;
        justify-content: center;

        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .close-menu:hover {
        background: #F5F5F5;
    }


    /* =========================================================
       NAVIGATION
       ========================================================= */

    .sidebar-nav {
        flex: 1;
        overflow-y: auto;

        padding-top: 14px;
        padding-bottom: 20px;

        display: flex;
        flex-direction: column;
        gap: 3px;

        scrollbar-width: thin;
    }


    /* =========================================================
       NAVIGATION LINKS
       ========================================================= */

    .nav-link {
        display: flex;
        align-items: center;

        width: calc(100% - 32px);
        margin: 0 16px;

        padding: 11px 14px;

        border: none;
        background: transparent;

        text-align: left;
        cursor: pointer;

        font-size: 14px;
        font-weight: 500;

        color: var(--text-muted);

        border-radius: 8px;

        transition:
            background 0.2s ease,
            color 0.2s ease;

        font-family: inherit;
    }

    .nav-link:hover {
        background: #FAFAFA;
        color: var(--text-main);
    }

    .nav-link.active {
        background: var(--primary-light);
        color: var(--primary);
        font-weight: 600;
    }

    .nav-link .material-symbols-rounded {
        font-size: 21px;
        margin-right: 12px;
        color: inherit;
        transition: color 0.2s ease;
        flex-shrink: 0;
    }


    /* =========================================================
       DIVIDERS
       ========================================================= */

    .nav-divider {
        height: 1px;
        background: var(--border);

        margin: 11px 24px;

        flex-shrink: 0;
    }


    /* =========================================================
       BADGES
       ========================================================= */

    .menu-badge {
        margin-left: auto;

        background: var(--primary);
        color: white;

        padding: 2px 8px;

        border-radius: 20px;

        font-size: 11px;
        font-weight: 700;
    }

    .menu-badge.pending {
        background: var(--warning);
        color: #fff;
    }


    /* =========================================================
       FOOTER
       ========================================================= */

    .sidebar-footer {
        padding: 18px 20px;

        border-top: 1px solid var(--border);

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        background: #FAFAFA;

        margin-top: auto;
        flex-shrink: 0;
    }

    .footer-logo {
        width: 82px;
        height: auto;

        margin-bottom: 6px;

        object-fit: contain;
    }

    .footer-app-name {
        font-size: 13px;
        font-weight: 800;
        color: var(--text-main);

        margin-bottom: 2px;

        text-align: center;
    }

    .footer-version {
        font-size: 11px;
        font-weight: 600;

        color: var(--text-muted);

        text-transform: uppercase;
        letter-spacing: 0.5px;
    }


    /* =========================================================
       DESKTOP
       ========================================================= */

    @media (min-width: 769px) {

        .close-menu {
            display: none;
        }

        .sidebar-header {
            justify-content: center;
        }

        .sidebar-logo {
            max-width: 175px;
        }
    }


    /* =========================================================
       MOBILE SIDEBAR
       ========================================================= */

    @media (max-width: 768px) {

        .sidebar-header {
            padding: 14px 16px;

            min-height: 82px;

            justify-content: space-between;
        }

        .sidebar-brand {
            justify-content: flex-start;
        }

        .sidebar-logo {
            width: 100%;
            max-width: 190px;
            max-height: 55px;
        }

        .close-menu {
            display: flex;

            width: 38px;
            height: 38px;

            flex-shrink: 0;
        }

        .close-menu .material-symbols-rounded {
            font-size: 23px;
        }

        .sidebar-nav {
            padding-top: 12px;
            padding-bottom: 20px;
        }

        .nav-link {
            width: calc(100% - 24px);
            margin: 0 12px;

            padding: 12px 14px;

            font-size: 14px;
        }

        .nav-link .material-symbols-rounded {
            font-size: 21px;
            margin-right: 12px;
        }

        .nav-divider {
            margin: 10px 20px;
        }

        .sidebar-footer {
            padding: 16px 20px;
        }
    }


/* ===== SOURCE: staff.html | embedded stylesheet 1 ===== */

    

        #staff-module { font-family: var(--font-ui); width: 100%; max-width: 1120px; }
        #staff-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        
        #staff-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        #staff-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #staff-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #staff-module .input-group { grid-template-columns: 1fr 1fr 1fr; } }

        #staff-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        #staff-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        #staff-module .readonly-input { background: #F4F4F4; color: var(--text-muted); font-weight: 600; pointer-events: none; }

        #staff-module .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }
        #staff-module .btn-primary:active { opacity: 0.8; }
        #staff-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
        
        #staff-module .icon-action { color: var(--text-muted); cursor: pointer; font-size: 20px; transition: color 0.2s; }
        #staff-module .icon-action:hover { color: var(--primary); }
        #staff-module .icon-action.delete:hover { color: var(--danger); }

        /* Google Sheet Style Horizontal Scroll Table */
        #staff-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        #staff-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;}
        #staff-module .table-header h4 { font-size: 16px; font-weight: 600; margin: 0; }
        
        #staff-module .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        #staff-module .saas-table { width: 100%; min-width: 800px; border-collapse: collapse; text-align: left; }
        #staff-module .saas-table th { padding: 12px 20px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #staff-module .saas-table td { padding: 16px 20px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #staff-module .saas-table tr:last-child td { border-bottom: none; }
        
        #staff-module .t-id { font-size: 11px; font-weight: 700; color: var(--primary); background: var(--primary-light); padding: 4px 8px; border-radius: 6px; }

        /* REMOVED the restrictive mobile max-width card CSS */
    

/* ===== SOURCE: temp-invoice.html | embedded stylesheet 1 ===== */


*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--page);font-family:Inter,Arial,sans-serif;color:var(--ink)}
body{padding:28px}
.invoice-wrap{width:210mm;min-height:297mm;margin:auto;background:var(--paper);box-shadow:0 10px 35px rgba(15,23,42,.12);position:relative;overflow:hidden}
.invoice{min-height:297mm;padding:16mm 17mm 14mm;position:relative}
.top-accent{position:absolute;left:0;top:0;width:100%;height:6px;background:linear-gradient(90deg,var(--blue) 0 68%,var(--green) 68% 100%)}
.header{display:flex;justify-content:space-between;gap:24px;padding-top:4px;padding-bottom:13px;border-bottom:2px solid var(--blue)}
.brand{display:flex;align-items:center;gap:13px;min-width:0}
.logo{width:72px;height:72px;object-fit:contain;border-radius:8px;display:block}
.brand-text{min-width:0}
.company-name{font-size:24px;font-weight:800;letter-spacing:-.6px;color:var(--blue-dark);line-height:1.1}
.tagline{font-size:10px;color:var(--green);font-weight:700;margin-top:4px}
.company-contact{text-align:right;font-size:9.5px;line-height:1.55;color:var(--muted);max-width:310px}
.company-contact strong{color:var(--ink)}
.invoice-title{margin-top:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.invoice-title h1{margin:0;color:var(--blue-dark);font-size:21px;letter-spacing:.8px;line-height:1.2}
.invoice-title .type{font-size:10px;font-weight:700;color:var(--green);background:var(--green-soft);padding:6px 10px;border-radius:5px}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:14px}
.meta-box{border:1px solid var(--line);border-radius:7px;padding:9px 11px;background:#fff}
.meta-label{font-size:8px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700}
.meta-value{font-size:11px;font-weight:600;margin-top:4px;min-height:14px}
.patient{margin-top:18px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.section-head{background:linear-gradient(90deg,var(--blue-soft),#fff);border-left:4px solid var(--blue);padding:8px 11px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--blue-dark)}
.patient-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:0}
.field{padding:9px 11px;border-right:1px solid var(--line);border-top:1px solid var(--line)}
.field:nth-child(3n){border-right:0}
.field-label{font-size:8px;color:var(--muted);text-transform:uppercase;font-weight:700}
.field-value{font-size:11px;font-weight:600;margin-top:3px;min-height:14px}
.service{margin-top:18px}
table{width:100%;border-collapse:collapse;font-size:10px}
thead th{background:var(--blue-dark);color:#fff;padding:8px 8px;text-align:left;font-size:9px;text-transform:uppercase;letter-spacing:.4px}
thead th:last-child,td:last-child{text-align:right}
tbody td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-bottom:1px solid var(--line)}
.service-main{font-weight:700;color:var(--ink)}
.service-sub{font-size:8.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.amount{font-weight:700;white-space:nowrap}
.summary{display:flex;justify-content:flex-end;margin-top:10px}
.summary-box{width:270px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.sum-row{display:flex;justify-content:space-between;padding:7px 11px;font-size:10px;border-bottom:1px solid var(--line)}
.sum-row:last-child{border-bottom:0}
.sum-row.total{background:var(--blue-soft);font-weight:800;color:var(--blue-dark);font-size:12px}
.sum-row.paid{color:var(--green-dark);font-weight:700;background:var(--green-soft)}
.sum-row.balance{font-weight:800}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:17px}
.info-box{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.info-title{padding:7px 10px;background:#F8FAFC;color:var(--blue-dark);font-size:9px;font-weight:800;text-transform:uppercase}
.info-body{padding:9px 10px;font-size:9.5px;line-height:1.55;color:#475467;min-height:58px}
.amount-words{margin-top:13px;padding:9px 11px;border-left:4px solid var(--green);background:var(--green-soft);font-size:9.5px}
.amount-words strong{color:var(--green-dark)}
.signature{margin-top:25px;display:flex;justify-content:flex-end}
.sign-box{width:220px;text-align:center}
.signature-space{height:43px;border-bottom:1px solid var(--line);margin-bottom:6px}
.sign-name{font-size:10px;font-weight:800}
.sign-qual{font-size:8.5px;color:var(--muted);line-height:1.45}
.footer{margin-top:20px;padding-top:9px;border-top:2px solid var(--green);display:flex;justify-content:space-between;gap:20px;font-size:8px;color:var(--muted);line-height:1.5}
.footer-right{text-align:right}
.watermark{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:125mm;max-width:70%;opacity:.035;pointer-events:none;display:block}
.actions{width:210mm;margin:0 auto 12px;display:flex;justify-content:flex-end;gap:8px}
.btn{border:0;border-radius:7px;padding:10px 15px;font:600 12px Inter;cursor:pointer}
.btn-print{background:var(--blue);color:white}
.btn-close{background:white;color:var(--ink);border:1px solid var(--line)}

.editable{outline:none;border-bottom:1px dashed transparent}
.editable:hover,.editable:focus{border-bottom-color:var(--blue)}

@media(max-width:850px){
 body{padding:0;background:#fff}
 .actions{width:100%;padding:10px;position:sticky;top:0;background:#fff;z-index:5;border-bottom:1px solid var(--line)}
 .invoice-wrap{width:100%;min-height:auto;box-shadow:none}
 .invoice{min-height:auto;padding:9mm 7mm}
 .header{flex-direction:column}
 .company-contact{text-align:left;max-width:none}
 .meta,.patient-grid,.info-grid{grid-template-columns:1fr}
 .field{border-right:0!important}
 .summary-box{width:100%}
 .invoice-title{align-items:flex-start;flex-direction:column}
 .footer{flex-direction:column}.footer-right{text-align:left}
}

@page{size:A4;margin:0}
@media print{
 body{padding:0;background:#fff}
 .actions{display:none!important}
 .invoice-wrap{width:210mm;min-height:297mm;box-shadow:none}
 .invoice{min-height:297mm}
 *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
}





/* ===== SOURCE: therapist.html | embedded stylesheet 1 ===== */

    

        #therapist-module { font-family: var(--font-ui); width: 100%; max-width: 1120px; }
        #therapist-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        
        #therapist-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        #therapist-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #therapist-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #therapist-module .input-group { grid-template-columns: 1fr 1fr 1fr; } }

        #therapist-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        #therapist-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        #therapist-module .readonly-input { background: #F4F4F4; color: var(--text-muted); font-weight: 600; pointer-events: none; }

        #therapist-module .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }
        #therapist-module .btn-primary:active { opacity: 0.8; }
        #therapist-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
        
        #therapist-module .icon-action { color: var(--text-muted); cursor: pointer; font-size: 20px; transition: color 0.2s; }
        #therapist-module .icon-action:hover { color: var(--primary); }
        #therapist-module .icon-action.delete:hover { color: var(--danger); }

        #therapist-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        #therapist-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;}
        #therapist-module .table-header h4 { font-size: 16px; font-weight: 600; margin: 0; }
        
        /* Table Responsive handles Google Sheets style scrolling */
        #therapist-module .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        #therapist-module .saas-table { width: 100%; min-width: 800px; border-collapse: collapse; text-align: left; }
        #therapist-module .saas-table th { padding: 12px 20px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #therapist-module .saas-table td { padding: 16px 20px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #therapist-module .saas-table tr:last-child td { border-bottom: none; }
        
        #therapist-module .t-id { font-size: 11px; font-weight: 700; color: var(--primary); background: var(--primary-light); padding: 4px 8px; border-radius: 6px; }

        /* DELETED the @media (max-width: 767px) that was turning rows into cards */
    

/* ===== SOURCE: transaction.html | embedded stylesheet 1 ===== */

    

        #transaction-module { font-family: var(--font-ui); width: 100%; max-width: 1120px; }
        #transaction-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        
        #transaction-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        #transaction-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #transaction-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #transaction-module .input-group { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { #transaction-module .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }

        #transaction-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        #transaction-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        #transaction-module .form-input:disabled { background: #F0F0F0; color: #999; cursor: not-allowed; }

        #transaction-module .readonly-input { background: transparent; border: 1px dashed transparent; padding-left: 0; font-weight: 700; color: var(--text-main); pointer-events: none; }
        
        #transaction-module .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
        #transaction-module .btn-primary:active { opacity: 0.8; }
        #transaction-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
        #transaction-module .btn-verify { background: var(--text-main); color: #fff; border: none; padding: 0 20px; border-radius: 12px; font-weight: 600; cursor: pointer; font-size: 13px;}
        
        /* Google Sheet Style Table (Horizontal Scroll) */
        #transaction-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        #transaction-module .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        #transaction-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
        #transaction-module .saas-table { width: 100%; min-width: 900px; border-collapse: collapse; text-align: left; }
        #transaction-module .saas-table th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #transaction-module .saas-table td { padding: 16px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
        
        .badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; }
        .badge-sales { background: rgba(16, 185, 129, 0.1); color: var(--success); }
        .badge-expense { background: rgba(251, 146, 60, 0.1); color: var(--danger); }
        .badge-receipt { background: rgba(100, 116, 139, 0.1); color: var(--secondary); }

        .cta-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #FAFAFA; border: 1px solid var(--border); transition: 0.2s; text-decoration: none; }
        .cta-link:hover { background: var(--surface); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

        /* Patient Summary Dash */
        #patientSummaryDash { display: none; background: #fef5e8; border: 1px dashed var(--primary); padding: 16px; border-radius: 12px; margin-bottom: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
        .summary-metric { display: flex; flex-direction: column; }
        .summary-metric span { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px;}
        .summary-metric strong { font-size: 18px; font-weight: 800; color: var(--text-main); }

        /* Print Override */
        @media print {
            body { background: white; padding: 0; }
            #sidebar-container, #header-container, #bottomnav-container, .form-card, .section-title, .no-print { display: none !important; }
            .main-wrapper { flex: 1; display: block; overflow: visible; }
            #main-content { padding: 0; overflow: visible; }
            #transaction-module .table-container { box-shadow: none; border: none; margin: 0; }
            #transaction-module .saas-table th { background: white; color: black; border-bottom: 1px solid #000; }
            #transaction-module .saas-table td { border-bottom: 1px solid #E8E5E1; }
        }
    

/* ===== SOURCE: transaction.html | embedded stylesheet 2 ===== */

                        body { font-family: 'Helvetica Neue', sans-serif; padding: 40px; color: #222; margin: 0; }
                        .header-row { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #e16349; padding-bottom: 24px; margin-bottom: 30px; }
                        .logo-area { display: flex; align-items: center; gap: 12px; }
                        .logo-area img { max-height: 40px; object-fit: contain; display: block; }
                        .company-info { text-align: right; font-size: 13px; color: #555; line-height: 1.6; }
                        .box { border: 1px solid #ccc; padding: 20px; margin-bottom: 20px; border-radius: 8px;}
                        .row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 16px;}
                        .amt { font-size: 24px; font-weight: bold; color: #e16349; text-align: center; padding: 20px; background: #FAFAFA; border: 1px dashed #ccc;}
                        .footer-text { margin-top: 40px; text-align: center; font-size: 10px; color: #999; opacity: 0.3; text-transform: uppercase; letter-spacing: 0.5px; }
                    

/* ===== SOURCE: transaction.html | embedded stylesheet 3 ===== */

                            body { font-family: 'Helvetica Neue', sans-serif; padding: 40px; color: #222; margin: 0;}
                            .header-row { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #e16349; padding-bottom: 24px; margin-bottom: 30px; }
                            .logo-area { display: flex; align-items: center; gap: 12px; }
                            .logo-area img { max-height: 40px; object-fit: contain; display: block; }
                            .company-info { text-align: right; font-size: 13px; color: #555; line-height: 1.6; }
                            table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px;}
                            th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
                            th { background: #FAFAFA; color: #777; text-transform: uppercase; font-size: 12px;}
                            .summary { margin-top: 30px; border-top: 2px solid #222; padding-top: 10px; width: 350px; float: right; }
                            .summary-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 15px; }
                            .summary-row.total { font-weight: bold; font-size: 18px; color: #e16349; border-top: 1px solid #ddd; padding-top: 10px; margin-top: 10px; }
                            .footer-text { clear: both; margin-top: 60px; text-align: center; font-size: 10px; color: #999; opacity: 0.3; text-transform: uppercase; letter-spacing: 0.5px; }
                        

/* ===== SOURCE: updates.html | embedded stylesheet 1 ===== */

        #updates-module { font-family: var(--font-ui); width: 100%; max-width: 900px; margin: 0 auto; padding-bottom: 40px; }
        
        #updates-module .section-title { font-size: 24px; font-weight: 800; margin-bottom: 8px; color: var(--text-main); display: flex; align-items: center; gap: 10px; }
        #updates-module .section-subtitle { font-size: 14px; color: var(--text-muted); margin-bottom: 32px; font-weight: 500; }
        
        /* Timeline Container */
        .timeline { position: relative; margin-left: 16px; padding-left: 32px; border-left: 2px solid var(--border); }
        
        /* Timeline Item */
        .timeline-item { position: relative; margin-bottom: 32px; }
        .timeline-item:last-child { margin-bottom: 0; }
        
        /* Timeline Dot */
        .timeline-dot { position: absolute; left: -41px; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 4px solid var(--primary); box-shadow: 0 0 0 4px var(--bg); }
        .timeline-dot.new { border-color: var(--success); }
        .timeline-dot.fix { border-color: var(--warning); }

        /* Update Card */
        .update-card { background: var(--surface); border-radius: 16px; padding: 24px; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03); border: 1px solid var(--border); transition: transform 0.2s ease, box-shadow 0.2s ease; }
        .update-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); }
        
        .update-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; flex-wrap: wrap; gap: 12px; }
        .update-version { font-size: 18px; font-weight: 800; color: var(--text-main); display: flex; align-items: center; gap: 8px; }
        .update-date { font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--bg); padding: 4px 10px; border-radius: 6px; }
        
        .update-body { font-size: 14px; color: var(--secondary); line-height: 1.6; }
        .update-body ul { margin-top: 12px; padding-left: 20px; }
        .update-body li { margin-bottom: 8px; }
        .update-body li::marker { color: var(--primary); }

        /* Badges */
        .upd-badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
        .upd-feature { background: #ECFDF5; color: #10B981; border: 1px solid #A7F3D0; }
        .upd-improvement { background: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE; }
        .upd-fix { background: #FFFBEB; color: #D97706; border: 1px solid #FDE68A; }

        @media (max-width: 600px) {
            .timeline { margin-left: 8px; padding-left: 24px; }
            .timeline-dot { left: -33px; width: 14px; height: 14px; border-width: 3px; }
            .update-card { padding: 16px; }
        }
    

/* ===== SOURCE: upi-qr.html | embedded stylesheet 1 ===== */

    /* Wrapper to manage full height */
    .sidebar-inner-wrapper { display: flex; flex-direction: column; min-height: 100%; height: 100%; }
    
    /* Make the top logo header sticky */
    .sidebar-header { position: sticky; top: 0; background: var(--surface); z-index: 10; border-bottom: 1px solid var(--border); padding: 16px 24px; display: flex; justify-content: space-between; align-items: center;}
    .sidebar-logo { max-width: 140px; height: auto; object-fit: contain; display: block; } 
    .close-menu { background: none; border: none; cursor: pointer; color: var(--text-main); display: flex; align-items: center; justify-content: center; }
    
    /* Navigation Container */
    .sidebar-nav { flex: 1; overflow-y: auto; padding-top: 16px; padding-bottom: 20px; display: flex; flex-direction: column; gap: 4px; } 
    
    /* Sidebar Navigation Links */
    .nav-link { 
        display: flex; 
        align-items: center; 
        width: calc(100% - 32px); 
        margin: 0 16px; 
        padding: 12px 16px; 
        border: none; 
        background: transparent; 
        text-align: left; 
        cursor: pointer; 
        font-size: 14px; 
        font-weight: 500; 
        color: var(--text-muted); 
        border-radius: 8px; 
        transition: all 0.2s ease; 
        font-family: inherit;
    }
    .nav-link:hover { background: #FAFAFA; color: var(--text-main); }
    .nav-link.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }
    .nav-link .material-symbols-rounded { font-size: 22px; margin-right: 12px; color: inherit; transition: color 0.2s ease; }
    
    /* Dividers and Badges */
    .nav-divider { height: 1px; background: var(--border); margin: 12px 24px; flex-shrink: 0; }
    .menu-badge { margin-left: auto; background: var(--primary); color: white; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; }
    .menu-badge.pending { background: var(--warning); color: #fff; }

    /* App Name and Version at the bottom */
    .sidebar-footer { padding: 20px 24px; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; background: #FAFAFA; margin-top: auto; flex-shrink: 0;}
    .footer-logo { width: 90px; height: auto; margin-bottom: 6px; object-fit: contain; }
    .footer-app-name { font-size: 13px; font-weight: 800; color: var(--text-main); margin-bottom: 2px; text-align: center; }
    .footer-version { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

    /* Hide close button on desktop */
    @media (min-width: 769px) {
        .close-menu { display: none; }
    }


/* ===== STATIC INLINE STYLES EXTRACTED FROM HTML ===== */
.cbx-inline-006922718c { font-size: 12px; color: var(--text-muted); font-weight: bold; }
.cbx-inline-01454d0828 { animation-delay: 0.2s; }
.cbx-inline-01a9a39c57 { margin: 0; color: #e16349; text-transform: uppercase; }
.cbx-inline-0308dda5cb { margin:0; color: #EF4444; text-transform: uppercase; }
.cbx-inline-03a0430bdf { font-size:12px; color:var(--secondary); }
.cbx-inline-03fcaf46a1 { font-size: 32px; color: var(--primary); }
.cbx-inline-045aac899d { margin-bottom: 16px; }
.cbx-inline-047b234a08 { background:var(--danger) }
.cbx-inline-0483362a58 { display: flex; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; width: 250px; }
.cbx-inline-048b9a2b26 { display: block; }
.cbx-inline-06381aa062 { margin-top:13px }
.cbx-inline-0685fa3c77 { padding: 4px 8px; border: none; }
.cbx-inline-068a8ddc17 { grid-column:1/-1 }
.cbx-inline-076abe1bbf { color: var(--success); font-weight: 700; }
.cbx-inline-07b7ff0f9c { font-size: 16px; vertical-align: middle; color: var(--text-muted); }
.cbx-inline-07d6b2fb01 { text-align:right; max-width:60%; }
.cbx-inline-0820c92388 { color: var(--screen-text); }
.cbx-inline-082f6e5d85 { margin-top: 6px; }
.cbx-inline-08f5d31173 { background: #FEF2F2; padding: 16px; border-radius: 12px; }
.cbx-inline-09e76dda0f { width:180px;max-width:100%;height:auto;display:block; }
.cbx-inline-0a8722defc { font-weight: bold; background: #FAFAFA; }
.cbx-inline-0a8ca1da2b { width: auto; }
.cbx-inline-0acd0995e2 { padding: 24px; }
.cbx-inline-0b7cc38a63 { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.cbx-inline-0bb40c1700 { text-align:center; padding: 20px; color: var(--text-muted); }
.cbx-inline-0c31f0fa03 { font-size:32px;margin-bottom:8px }
.cbx-inline-0df3644cab { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 32px; }
.cbx-inline-0e3ec9ddff { padding:40px;text-align:center;color:var(--danger) }
.cbx-inline-0e72e420dc { margin: 0 0 16px 0; font-size: 16px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.cbx-inline-0ebd76cd9d { background: var(--success); }
.cbx-inline-0f24ede60c { border-color: var(--danger); }
.cbx-inline-101e0706b7 { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.cbx-inline-1157730d2a { color: var(--primary); margin: 0; }
.cbx-inline-11be51da04 { color: var(--text-muted); font-size: 14px; }
.cbx-inline-1290199901 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 16px; }
.cbx-inline-13cbe03b9a { text-align: right; }
.cbx-inline-1401138699 { text-align: center; padding: 20px; }
.cbx-inline-1444c6eaca { font-size:16px }
.cbx-inline-1554145b37 { background: #fef5e8; color: #e16349; padding: 4px 8px; border-radius: 6px; font-weight: bold; border: 1px solid #e16349; }
.cbx-inline-15c5d568cc { font-size: 12px; color: var(--secondary); display: block; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbx-inline-15d3c175e3 { font-size: 16px; color: var(--text-muted); }
.cbx-inline-15dd9491d8 { background:var(--warning) }
.cbx-inline-167f35d25a { font-size: 14px; display: block; margin-bottom: 2px; }
.cbx-inline-1813b3b5e3 { font-size: 16px; margin-bottom: 8px; }
.cbx-inline-18d4ed1a29 { display: flex; gap: 12px; flex-wrap: wrap; }
.cbx-inline-19d94794af { font-size: 16px; color: var(--success); }
.cbx-inline-19eecab83a { margin: 0; font-size: 15px; }
.cbx-inline-1a024e0d05 { color: #555; margin-top: 6px; }
.cbx-inline-1a4703bd49 { font-size: 20px; color: var(--primary); }
.cbx-inline-1b21b10203 { cursor:pointer;font-size:20px }
.cbx-inline-1bcceefd97 { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; display:inline-block; }
.cbx-inline-1be835a73e { color: var(--primary); font-size: 12px; font-weight: 600; cursor: pointer; transition: 0.2s; }
.cbx-inline-1cc92174e8 { flex: 1; padding: 0; overflow-y: auto; overflow-x: hidden; height: 100%; }
.cbx-inline-1da9facb4d { margin:0; }
.cbx-inline-1f61f29863 { grid-column: span 2; }
.cbx-inline-1f8d1eb054 { background:var(--success) }
.cbx-inline-1f9d60b163 { color: var(--primary); font-size: 14px; }
.cbx-inline-1fab2a6a96 { background: var(--primary-light); border-color: #BFDBFE; }
.cbx-inline-2036dec300 { font-size:11px; color:var(--text-muted); }
.cbx-inline-221b42c0da { color: var(--danger); margin-top: 16px; display: none; font-size: 13px; }
.cbx-inline-225c8eb166 { font-size:18px;font-weight:700; }
.cbx-inline-22ec5f78a2 { margin-left: 8px; font-weight: 700; }
.cbx-inline-22edc72518 { display: flex; gap: 12px; align-items: flex-end; margin-top: 21px; }
.cbx-inline-230ef3bb94 { width:28px;height:28px;border:0 }
.cbx-inline-2337c8f172 { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.cbx-inline-23984e735d { width:15% }
.cbx-inline-252297510f { color: var(--danger); font-size: 12px; }
.cbx-inline-254bd94084 { color:var(--text-main);font-size:14px }
.cbx-inline-25e0707b5f { color: var(--success); border-color: rgba(16, 185, 129, 0.3); }
.cbx-inline-264028a917 { font-size: 28px; }
.cbx-inline-27231daefd { display:flex; align-items:center; gap:8px; }
.cbx-inline-273495ddc5 { text-align:center; padding: 30px; color: var(--text-muted); }
.cbx-inline-2775e96e14 { width: 100%; padding: 14px; margin-bottom: 16px; border-radius: 8px; border: 1px solid var(--border); font-size: 14px; outline: none; background: #FAFAFA; }
.cbx-inline-2852ded447 { background: none; border: none; color: #0a0a0a; cursor: pointer; display: none; }
.cbx-inline-28ee5e5010 { margin-top: 40px; text-align: center; }
.cbx-inline-2ab631d078 { color: var(--success); }
.cbx-inline-2b99ca65d3 { font-size:17px }
.cbx-inline-2ba01d5c32 { font-weight: 800; color: var(--primary); font-size: 18px; }
.cbx-inline-2bcc1eddb2 { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px; }
.cbx-inline-2c48426792 { display: none; margin-top: 32px; text-align: right; }
.cbx-inline-2c9e639008 { font-size:12px; color:var(--text-main); font-weight:600; }
.cbx-inline-2cb19964fb { display: flex; gap: 8px; margin-top: 6px; }
.cbx-inline-2e240f6aaf { padding:16px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:#FAFAFA;gap:12px }
.cbx-inline-2e88060849 { color: #999; font-size: 12px; }
.cbx-inline-2eb4bbf262 { padding-left: 44px; }
.cbx-inline-2fe7aff9c2 { color: var(--primary); cursor: pointer; font-size: 20px; }
.cbx-inline-3088da1131 { display: flex; align-items: center; gap: 8px; }
.cbx-inline-309c64a106 { width: 100%; padding: 14px; border-radius: 8px; border: 1px solid var(--border); font-size: 14px; outline: none; padding-right: 40px; background: #FAFAFA; }
.cbx-inline-30d59c8a6f { background: var(--surface); border: 1px solid var(--border); padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.cbx-inline-312a77de34 { background: var(--danger); }
.cbx-inline-313f91a251 { font-size:15px;font-weight:600;color:var(--secondary);margin-bottom:8px;display:flex;align-items:center;gap:6px }
.cbx-inline-31847d9d9b { background: var(--primary); color: white; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; font-weight: bold; }
.cbx-inline-31ee429158 { text-align:center; padding: 40px; color: var(--danger); background: #FEF2F2; border-radius: 12px; border: 1px solid #FEE2E2; }
.cbx-inline-33bc0ac13a { color: #777777; font-size: 24px; }
.cbx-inline-33e9eeb2b6 { color: var(--text-main); margin-bottom: 24px; font-weight: 800; line-height: 1.3; }
.cbx-inline-342166a259 { background: transparent; border: none; font-weight: 600; color: var(--secondary); padding-left: 0; width: 300px; }
.cbx-inline-3515d6b372 { display:flex; gap: 10px; align-items:center; justify-content: flex-end; }
.cbx-inline-35868dad24 { font-size: 18px; }
.cbx-inline-35bbb2cdbc { background: var(--bg); padding: 16px; border-radius: 12px; }
.cbx-inline-35d1e7c353 { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }
.cbx-inline-36ca0aff10 { margin-top: 8px; }
.cbx-inline-370f16e4db { border-color: var(--menu-border); }
.cbx-inline-398bc35703 { padding: 8px 16px; }
.cbx-inline-39e36cc524 { color:var(--text-muted);font-size:13px;font-weight:500;margin-bottom:24px }
.cbx-inline-3a28339b50 { color: #991B1B; margin-bottom: 8px; }
.cbx-inline-3beb7981a6 { color: var(--text-muted); font-size: 15px; font-weight: 500; margin: 0; }
.cbx-inline-3bf8d9b412 { color: var(--danger); margin: 0 0 16px 0; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.cbx-inline-3c0cb16f68 { margin-bottom: 4px; font-size: 18px; }
.cbx-inline-3c35c2a9f2 { font-size: 28px; color: var(--primary); }
.cbx-inline-3ce17884ac { background: #fef5e8; padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
.cbx-inline-3d41fb4ab8 { color: var(--primary); cursor: pointer; font-size: 20px; background: #FAFAFA; padding: 4px; border-radius: 6px; border: 1px solid var(--border); }
.cbx-inline-3d444a0c4e { display:flex; align-items:center; gap:6px; }
.cbx-inline-3d85e427de { font-weight: 700; color: var(--primary); }
.cbx-inline-3db2e88c99 { color: #7F1D1D; font-size: 14px; }
.cbx-inline-3eaa7b5ced { margin-bottom: 4px; }
.cbx-inline-3eb17aead4 { position: relative; margin-bottom: 8px; }
.cbx-inline-3ef7530d6d { color: var(--text-muted); cursor: pointer; font-size: 20px; }
.cbx-inline-3f8825c152 { background: var(--surface); padding: 40px; border-radius: 16px; box-shadow: var(--shadow); border: 1px solid var(--border); width: 100%; max-width: 400px; text-align: center; }
.cbx-inline-405e9b7ebc { font-size: 15px; font-weight: 600; color: var(--secondary); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.cbx-inline-4193c9edcc { color: var(--success); margin: 0 0 16px 0; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.cbx-inline-4202ca15f2 { margin-top: 12px; font-size: 13px; font-weight: bold; }
.cbx-inline-424a95fdcd { display: flex; flex-direction: column; height: 100vh; width: 100vw; align-items: center; justify-content: center; background: var(--bg); z-index: 9999; position: fixed; top: 0; left: 0; padding: 20px; }
.cbx-inline-4318c9a343 { color: var(--text-main); margin-bottom: 12px; font-weight: 800; }
.cbx-inline-43b3f9ad60 { animation-delay: 0.4s; }
.cbx-inline-43e55d2317 { color: var(--text-muted); font-size: 20px; }
.cbx-inline-449f1abc20 { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #FAFAFA; padding: 12px; border-radius: 8px; border: 1px solid var(--border); width: 100%; }
.cbx-inline-44d0ce9f0d { color:var(--primary); border-bottom:2px solid var(--primary); padding-bottom:10px; text-transform:uppercase; }
.cbx-inline-465fbc4205 { padding: 20px; color: red; text-align: center; }
.cbx-inline-47b787520a { width: 192px; background: #FAFAFA; border: 1px solid #E8E5E1; border-radius: 8px; display: flex; align-items: center; padding: 8px 12px; }
.cbx-inline-48a3637616 { font-size: 14px; vertical-align: middle; }
.cbx-inline-495f00ca1b { display: none; margin-top: 24px; text-align: right; }
.cbx-inline-497726e8c9 { color:var(--danger) }
.cbx-inline-4abcc70a67 { padding:50px;text-align:center;color:#991B1B }
.cbx-inline-4ad66d6b0e { padding: 0 20px 20px 20px; }
.cbx-inline-4b36c64caf { color:#0062FF;margin:0 0 8px 0; text-transform:uppercase; font-size:12px; }
.cbx-inline-4bdec50d72 { background: var(--btn-num); border-color: var(--btn-border); box-shadow: var(--btn-shadow); }
.cbx-inline-4cbc1c2702 { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #fff; width: 100%; }
.cbx-inline-4cd01e567f { font-size: 13px; color: var(--text-muted); }
.cbx-inline-4cfe0f6417 { font-size: 20px; color: #777777; }
.cbx-inline-4d20d0a9a0 { background: #FEF2F2; border-color: #FCA5A5; }
.cbx-inline-4ec0d56b07 { text-align: center; padding: 40px; color: var(--text-muted); font-size: 13px; display: block; width: 100%; }
.cbx-inline-4ff818ffe1 { font-size:18px }
.cbx-inline-50666a574d { position: relative; }
.cbx-inline-51144f2168 { display: flex; gap: 8px; flex-wrap: wrap; }
.cbx-inline-52212b0861 { background: #FAFAFA; border: 1px solid var(--border); padding: 16px; border-radius: 8px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; min-height: 150px; }
.cbx-inline-528921ebe4 { text-align: right; margin-top: 16px; }
.cbx-inline-52df2b00a0 { color:var(--warning) }
.cbx-inline-530d11a4f6 { padding: 12px; text-align: right; }
.cbx-inline-5349ca5fe7 { font-size: 13px; color: var(--primary); display: block; margin-bottom: 2px; }
.cbx-inline-538764830f { margin-left: auto; }
.cbx-inline-5424d70230 { text-align:center;padding:40px;color:var(--primary) }
.cbx-inline-54d32d80db { margin-top: 10px; }
.cbx-inline-5543bd38b4 { color: var(--danger); cursor: pointer; font-size: 20px; }
.cbx-inline-5595db4455 { padding: 12px; font-weight: 600; }
.cbx-inline-55cec09fd9 { margin-top:5px }
.cbx-inline-56f4356299 { margin-top:12px }
.cbx-inline-56fd1d2328 { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); cursor: pointer; user-select: none; }
.cbx-inline-573019b7c6 { color: var(--text-muted); font-size: 13px; margin-bottom: 24px; line-height: 1.5; }
.cbx-inline-5872de20d5 { color:var(--text-muted) }
.cbx-inline-5896f99d19 { text-align:center; padding: 40px; color: var(--primary); }
.cbx-inline-58d955e17a { margin:0 0 4px }
.cbx-inline-59110311b2 { color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.cbx-inline-5a45298849 { color:var(--success) }
.cbx-inline-5b26bff947 { font-size: 11px; color: var(--text-muted); }
.cbx-inline-5c5d8f442d { color:var(--text-main) }
.cbx-inline-5cb57137c7 { width: 150px; }
.cbx-inline-5cc6ddf647 { font-size: 14px; font-weight: 700; margin: 0; color: var(--text-main); }
.cbx-inline-5cfbad9ed3 { margin-right: 12px; padding: 14px 24px; }
.cbx-inline-5e0faad207 { font-size:13px }
.cbx-inline-5e26ac63e0 { font-size:12px;margin-top:5px;font-weight:700 }
.cbx-inline-5efb2661e2 { text-align: center; margin-bottom: 20px; }
.cbx-inline-5fb7e528b2 { display: flex; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; flex: 1; min-width: 150px; }
.cbx-inline-61056dfd04 { background: var(--primary-light); padding: 16px; border-radius: 12px; align-items: center; gap: 12px; }
.cbx-inline-612102590c { color: var(--text-muted); cursor: pointer; font-size: 20px; margin-right: 8px; }
.cbx-inline-62efb583c9 { margin-right: 12px; }
.cbx-inline-6375761098 { color: var(--danger); font-weight: 700; border-color: #FCA5A5; }
.cbx-inline-648149cea2 { margin-bottom: 0; }
.cbx-inline-65dec24f00 { display: flex; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; flex: 1; min-width: 200px; }
.cbx-inline-65f51c8c40 { margin:0; color: #e16349; text-transform: uppercase; }
.cbx-inline-66a036f830 { text-align: center; margin-bottom: 30px; }
.cbx-inline-672d71f990 { padding: 20px; text-align: center; }
.cbx-inline-6745888856 { width:36px;height:36px }
.cbx-inline-6861e0eab2 { background: #FAFAFA; border-bottom: 1px solid var(--border); }
.cbx-inline-687f023c38 { font-size: 18px; color: var(--text-muted); }
.cbx-inline-693434c7de { display: flex; gap: 8px; }
.cbx-inline-69ab929971 { text-align:right; color: #10B981; }
.cbx-inline-6b99de8b69 { display:none }
.cbx-inline-6c1be207c3 { background:var(--surface);border:1px solid var(--border);padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;color:var(--text-main);display:flex;align-items:center;gap:6px }
.cbx-inline-6d667f66c4 { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.cbx-inline-6d9eef1a49 { color: var(--primary); margin: 0 0 16px 0; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.cbx-inline-6eede6c174 { text-align: center; padding: 60px 20px; background: #FEF2F2; border-radius: 16px; border: 1px solid #FCA5A5; margin-top: 20px; }
.cbx-inline-6f09c74387 { padding: 8px 16px; border: none; background: transparent; }
.cbx-inline-6fb2b5d749 { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 24px; }
.cbx-inline-70916dcd41 { font-size: 13px; color: #555; }
.cbx-inline-714155d337 { width: auto; padding: 8px; }
.cbx-inline-7222553c23 { text-align:center;padding:30px;font-size:13px;color:var(--text-muted);display:block;width:100% }
.cbx-inline-72b66b786a { flex: 1; min-width: 200px; }
.cbx-inline-72e4f08183 { font-size: 12px; color: var(--text-muted); }
.cbx-inline-73cb2f828a { width: 100%; text-align: left; border-collapse: collapse; }
.cbx-inline-73ee5f52e4 { color: var(--btn-num-text); }
.cbx-inline-74138aad54 { font-size:20px;color:var(--primary) }
.cbx-inline-74e8c07afa { font-size: 14px; color: var(--text-muted); margin-bottom: 24px; }
.cbx-inline-76461755f6 { margin-top: 6px; font-size: 11px; color: var(--secondary); background: #FAFAFA; padding: 4px; border-radius: 4px; line-height: 1.4; }
.cbx-inline-77345ce242 { padding: 16px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: #FAFAFA; }
.cbx-inline-77cce4fa38 { animation: spin 1s linear infinite; }
.cbx-inline-7838257433 { font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px }
.cbx-inline-787fffb913 { display:flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #FAFAFA; padding: 16px; border-radius: 12px; border: 1px solid var(--border); width: 100%; }
.cbx-inline-78d7af8b7e { font-weight: bold; }
.cbx-inline-7c2160a4dd { margin-bottom: 16px; font-size: 13px; font-weight: 600; }
.cbx-inline-7d7f2217c1 { width: 100%; background: var(--primary); color: white; border: none; padding: 14px; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 14px; transition: opacity 0.2s; }
.cbx-inline-7e13d5a6c6 { color: #10B981; }
.cbx-inline-7e65b65c5e { color: var(--warning); }
.cbx-inline-7ea1e68d1c { font-size: 14px; color: var(--success); }
.cbx-inline-7f3cbaf643 { margin-bottom: 8px; }
.cbx-inline-7fc16fa879 { max-width:620px }
.cbx-inline-7fc448e2b0 { font-size:12px;color:var(--muted) }
.cbx-inline-805e67594c { flex:1;padding:0;overflow-y:auto;overflow-x:hidden;height:100% }
.cbx-inline-81836152bb { font-size:12px; color:var(--primary); font-weight:600; }
.cbx-inline-81d0b84c01 { color: var(--grey-med); font-size: 20px; }
.cbx-inline-81da573029 { padding: 8px 16px; font-size: 12px; background: var(--primary); color: white; border: none; }
.cbx-inline-82510d0f3e { background: #E2E8F0; cursor: not-allowed; }
.cbx-inline-835421628d { color: var(--primary); font-weight: 700; }
.cbx-inline-83b020b78b { color: var(--text-main); }
.cbx-inline-83e793a201 { cursor: pointer; font-size: 20px; }
.cbx-inline-86efbdf121 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); background: var(--bg); padding: 16px; border-radius: 12px; margin-top: 8px; }
.cbx-inline-874660deb3 { margin: 0; color: #10B981; text-transform: uppercase; }
.cbx-inline-87c6966ef3 { font-size:12px;color:var(--text-muted);font-weight:600 }
.cbx-inline-87ecb5e708 { font-size:14px;display:block;margin-bottom:2px }
.cbx-inline-88ca21d71e { text-align:center;padding:40px;color:var(--text-muted);font-size:13px;display:block;width:100% }
.cbx-inline-88f0781ef2 { background: var(--warning); }
.cbx-inline-89af788178 { background: #FAFAFA; border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; display: flex; align-items: center; gap: 6px; }
.cbx-inline-89cd810129 { max-width:220px;white-space:normal;margin-top:5px }
.cbx-inline-8ab4c95358 { margin: 0 0 20px 0; color: var(--text-main); font-size: 16px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.cbx-inline-8ae891d0cd { border: none; background: transparent; outline: none; font-size: 13px; width: 100%; margin-left: 8px; padding: 8px 0; }
.cbx-inline-8b6370ae2d { padding: 4px 8px; font-size: 11px; border-color: var(--success); color: var(--success); }
.cbx-inline-8c16304746 { margin-top:10px; padding-top:10px; border-top:1px solid #eee; }
.cbx-inline-8c4fd04003 { color: var(--text-header); }
.cbx-inline-8c86b4f218 { border: none; background: transparent; outline: none; width: 100%; font-size: 13px; margin-left: 8px; color: #0a0a0a; }
.cbx-inline-8d8569614b { color:red; padding: 20px; }
.cbx-inline-8e63acf974 { border: none; background: transparent; outline: none; font-size: 12px; width: 100%; margin-left: 6px; }
.cbx-inline-8ecf3a1fbb { color: var(--menu-text); }
.cbx-inline-8ef925e15e { display: flex; justify-content: space-between; margin-bottom: 20px; }
.cbx-inline-8f70defb20 { color:var(--primary);cursor:pointer;font-size:20px;background:#FAFAFA;padding:4px;border-radius:6px;border:1px solid var(--border) }
.cbx-inline-8ff4f9649d { border-color: var(--danger); color: var(--danger); padding: 6px 12px; font-size: 12px; }
.cbx-inline-8ffe7946d3 { color: var(--text-muted); font-size: 13px; font-weight: 500; margin-bottom: 24px; }
.cbx-inline-9015623707 { color: var(--danger); font-size: 13px; }
.cbx-inline-9103d88dc4 { width: 100%; max-width: 380px; }
.cbx-inline-9117a8a210 { font-weight: 700; color: var(--danger); background: transparent; border: none; }
.cbx-inline-914de9e806 { font-size: 22px; margin-bottom: 4px; font-weight: 700; }
.cbx-inline-91937bcd13 { color: #3B82F6; }
.cbx-inline-93663a26d7 { transform: scale(1.2); }
.cbx-inline-941fec2eff { display: inline-flex; margin-right: 12px; padding: 14px 24px; }
.cbx-inline-94c35eb2c4 { padding: 20px; color: var(--text-muted); }
.cbx-inline-94f2cf51a2 { font-weight: 700; color: var(--danger); background: transparent; border: none; padding-left: 0; }
.cbx-inline-952f7376d2 { margin-top: 40px; text-align: center; font-size: 10px; color: #999; text-transform: uppercase; }
.cbx-inline-9668368cdc { padding: 8px 12px; }
.cbx-inline-98e8d52710 { width: 100%; background: var(--primary); color: white; border: none; padding: 14px; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 14px; transition: opacity 0.2s; margin-bottom: 16px; }
.cbx-inline-9903790ce1 { display: none; background: var(--surface); padding: 40px; border-radius: 16px; box-shadow: var(--shadow); border: 1px solid var(--border); width: 100%; max-width: 400px; text-align: center; }
.cbx-inline-9936d7cdc5 { color: var(--success); font-weight: 700; border-color: #A7F3D0; }
.cbx-inline-9969efa896 { font-size: 48px; color: var(--grey-med); margin-bottom: 12px; }
.cbx-inline-9a37856b2b { font-weight: 700; font-size: 15px; }
.cbx-inline-9a55f9f0b1 { text-align: center; padding: 30px; color: var(--text-muted); font-size: 13px; }
.cbx-inline-9a9a51d3dc { margin-top: 60px; display: flex; justify-content: space-between; }
.cbx-inline-9be57b9c4b { display:flex; gap: 8px; align-items:center; justify-content: flex-end; }
.cbx-inline-9d74485836 { border-color: var(--screen-divider); }
.cbx-inline-9e355fc2cd { text-align: right; margin-bottom: 16px; }
.cbx-inline-9ea07dbb44 { background: var(--btn-orange); color: var(--btn-orange-text); }
.cbx-inline-9eb4c73197 { padding: 6px; border-radius: 6px; border: 1px solid var(--border); font-size: 11px; outline: none; cursor: pointer; color: var(--text-main); }
.cbx-inline-9edaf05cdb { width:100%;height:100%;border:none;background:transparent }
.cbx-inline-9f3dc69e83 { color: var(--primary); text-decoration: none; font-weight: 600; font-size: 12px; }
.cbx-inline-a077398094 { font-size: 13px; color: var(--text-muted); cursor: pointer; user-select: none; font-weight: 500; }
.cbx-inline-a193cee37b { padding: 8px; font-size: 12px; width: auto; }
.cbx-inline-a3722f1777 { animation-delay: 0s; }
.cbx-inline-a39fcc1fb9 { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 24px; gap: 8px; }
.cbx-inline-a3d76fba19 { position: absolute; left: 14px; top: 16px; color: var(--text-muted); }
.cbx-inline-a527bac1ee { text-align:right; }
.cbx-inline-a559cdb2b4 { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.cbx-inline-a64b79a63a { border: none; background: transparent; outline: none; font-size: 13px; width: 130px; }
.cbx-inline-a7a4df2f90 { margin: 0 0 12px 0; color: var(--text-main); font-size: 14px; }
.cbx-inline-a9c4ca5d90 { color: var(--primary); margin: 24px 0 16px 0; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.cbx-inline-aa550ac6a0 { width:55% }
.cbx-inline-aa63c45940 { border: none; padding: 0; margin: 0; }
.cbx-inline-abed17ced7 { padding: 12px; font-weight: bold; }
.cbx-inline-ac35e4d60c { color: var(--primary); font-size: 18px; }
.cbx-inline-ac5f01c68b { color: var(--danger); cursor: pointer; font-size: 18px; }
.cbx-inline-acadb7d1bd { font-size: 15px; color: var(--primary); text-transform: uppercase; }
.cbx-inline-ace1c28b83 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.cbx-inline-ae39ed69e8 { padding: 14px 16px; }
.cbx-inline-af93efb6cc { padding: 16px 20px; font-weight: 700; color: var(--primary); font-size: 16px; display: none; }
.cbx-inline-b05483c849 { margin: 0; color: var(--primary); }
.cbx-inline-b0adf8f15d { font-size: 14px; color: var(--primary); }
.cbx-inline-b0b6c12a78 { margin: 0 0 8px 0; color: #0062FF; }
.cbx-inline-b0d8f74123 { height: auto; }
.cbx-inline-b14da2c4f4 { font-weight: 600; letter-spacing: 1px; }
.cbx-inline-b43a625563 { display:flex;gap:5px;margin-top:7px }
.cbx-inline-b503e8e4e9 { background: #ECFDF5; border-color: #A7F3D0; }
.cbx-inline-b5504d8401 { color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; }
.cbx-inline-b87efa5bc3 { font-size: 16px; }
.cbx-inline-b8d4e78a4a { background: var(--primary-light); padding: 12px 20px; }
.cbx-inline-b8e5dc920d { text-align:center; padding: 20px; color: var(--danger); }
.cbx-inline-b99c73ccec { text-align: center; padding: 30px; font-size: 13px; color: var(--text-muted); display: block; width: 100%; }
.cbx-inline-b9bb574a91 { width:auto;height:36px }
.cbx-inline-bc62760924 { color: var(--text-main); font-size: 14px; }
.cbx-inline-be28dee5fa { color: var(--secondary); cursor: pointer; font-size: 18px; }
.cbx-inline-bf4f38e4e9 { font-size:22px;margin-bottom:4px;font-weight:700 }
.cbx-inline-bfb4f87802 { background: #fef5e8; padding: 12px 20px; border-bottom: 2px solid var(--primary); border-top: 1px solid var(--border); }
.cbx-inline-bfc60b4648 { color: var(--text-muted); font-size: 12px; }
.cbx-inline-bfc90c8fec { background:var(--secondary) }
.cbx-inline-c01ab1ecd8 { width: 90px; margin-bottom: 0; }
.cbx-inline-c050c0ea36 { font-size: 32px; margin-bottom: 8px; }
.cbx-inline-c312289912 { margin-top: 0; }
.cbx-inline-c3510ba6f0 { background: var(--secondary); }
.cbx-inline-c40116569f { padding:0 15px 15px }
.cbx-inline-c4087d6a12 { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); }
.cbx-inline-c420ff5572 { font-size: 22px; font-weight: 700; margin-bottom: 24px; }
.cbx-inline-c4a2c401c9 { padding: 6px 12px; font-size: 12px; }
.cbx-inline-c655281c8c { padding: 4px 8px; font-size: 11px; border-color: var(--danger); color: var(--danger); margin-left: 4px; }
.cbx-inline-c66ff2c048 { width:30% }
.cbx-inline-c745c9dd20 { background: var(--menu-bg); border: 1px solid var(--menu-border); }
.cbx-inline-c779fa16be { display: flex; align-items: center; gap: 6px; }
.cbx-inline-c889b419e7 { border: none; background: transparent; outline: none; font-size: 13px; width: 100%; margin-left: 8px; }
.cbx-inline-c8be1ccba6 { display:none; }
.cbx-inline-c92cd3b3ae { font-size:9px; color:#888; }
.cbx-inline-c937f3b834 { margin-left: 8px; }
.cbx-inline-c9a7335caf { display: flex; align-items: center; gap: 16px; }
.cbx-inline-cab938e192 { font-size:14px;font-weight:700;margin:0;color:var(--text-main) }
.cbx-inline-cb387ac0ee { display: flex; gap: 16px; }
.cbx-inline-cb92ec43c6 { padding: 8px; }
.cbx-inline-cc3430667f { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: #f0f0f0; cursor: not-allowed; }
.cbx-inline-cdc34a99ce { font-size: 10px; }
.cbx-inline-cf37034751 { padding:16px; }
.cbx-inline-d070ea2fde { color: var(--primary); cursor: pointer; font-size: 22px; }
.cbx-inline-d1a5c60398 { display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px; }
.cbx-inline-d24678f69e { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 16px; }
.cbx-inline-d2484c6f7c { color: #0062FF; font-weight: 700; }
.cbx-inline-d2c171b18b { margin-top:10px }
.cbx-inline-d2cea9f47a { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background: #FFFFFF; border-bottom: 1px solid #E8E5E1; position: sticky; top: 0; z-index: 100; }
.cbx-inline-d2d40e256c { position: relative; cursor: pointer; display: flex; align-items: center; }
.cbx-inline-d39584ae1c { color:var(--primary); font-weight:800; }
.cbx-inline-d4281f8279 { font-size: 56px; color: var(--grey-med); margin-bottom: 16px; display: block; }
.cbx-inline-d4cf1153bc { padding: 40px; text-align: center; color: var(--danger); }
.cbx-inline-d50ab04c47 { text-align: right; margin-top: 24px; }
.cbx-inline-d5621a90fb { text-align:center; padding: 20px; }
.cbx-inline-d5b43342a2 { grid-column: 1 / -1; }
.cbx-inline-d724eb6572 { font-size: 10px; vertical-align: middle; }
.cbx-inline-d7cca88b21 { font-size: 48px; color: #EF4444; margin-bottom: 12px; }
.cbx-inline-d97fae311b { background: var(--menu-bg); color: var(--menu-text); border-color: var(--menu-border); }
.cbx-inline-d9a5a0815c { font-size: 16px; color: var(--secondary); }
.cbx-inline-d9c50f5019 { margin: 0 0 8px 0; color: var(--text-main); }
.cbx-inline-da0d36d342 { color: var(--primary); }
.cbx-inline-da12f2858b { margin-bottom:12px }
.cbx-inline-db93582eff { font-size: 16px; color: var(--primary); }
.cbx-inline-db93eca872 { border-color: var(--primary); background: var(--primary-light); }
.cbx-inline-dc2e428fc7 { color:var(--primary) }
.cbx-inline-dd4139f9ad { border:1px solid var(--border); background:#fff; border-radius:8px; padding:8px 14px; cursor:pointer; font-weight:600; }
.cbx-inline-dd4a31e111 { text-align: right; margin-top: 24px; display: flex; justify-content: flex-end; gap: 12px; }
.cbx-inline-ddf0c7c1d9 { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: #FAFAFA; }
.cbx-inline-ddf83957d0 { border-color: var(--primary); color: var(--primary); padding: 6px 12px; font-size: 12px; }
.cbx-inline-de2db51051 { padding: 14px 16px; white-space: nowrap; }
.cbx-inline-def3d02b1f { display: flex; align-items: center; padding-left: 12px; border-left: 1px solid #E8E5E1; }
.cbx-inline-df67104f3b { font-size: 14px; }
.cbx-inline-df76b1a362 { padding: 8px; font-size: 12px; }
.cbx-inline-dfae7914d2 { padding: 8px 12px; font-size: 12px; }
.cbx-inline-e122662001 { color: var(--primary); background: none; border: none; cursor: pointer; font-weight: bold; }
.cbx-inline-e4a3328213 { flex-direction: row; flex-wrap: wrap; }
.cbx-inline-e503ce1663 { color: #0062FF; margin:0 0 8px 0; text-transform: uppercase; }
.cbx-inline-e555f9a1ea { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; flex: 1; min-width: 150px; }
.cbx-inline-e5acddf740 { border:none; padding:4px; }
.cbx-inline-e5f97e5179 { background: transparent; color: var(--text-muted); border: 1px solid var(--border); padding: 12px 24px; border-radius: 8px; cursor: pointer; font-weight: bold; margin-left: 8px; }
.cbx-inline-e6018dde3c { width: auto; padding: 8px; display: none; }
.cbx-inline-e706252a93 { grid-column: 1 / -1; background: #25D366; }
.cbx-inline-e71ae94b55 { font-size:12px; }
.cbx-inline-e84be8ad38 { text-align:center; padding:40px; color:var(--danger); background:#FEF2F2; border-radius:12px; border:1px solid #FEE2E2; }
.cbx-inline-e850a73c75 { padding: 12px; }
.cbx-inline-e8cfa99139 { margin-top: 4px; font-size: 10px; }
.cbx-inline-e8e9432e9b { color:#e16349; border-bottom:2px solid #e16349; padding-bottom:10px; text-transform:uppercase; }
.cbx-inline-e9447dc52e { font-size:10px; color:var(--text-muted); }
.cbx-inline-ea7ff33cf8 { background: var(--surface); border: 1px solid var(--border); padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-main); display: flex; align-items: center; gap: 6px; transition: 0.2s; }
.cbx-inline-eba923c40f { display: flex; gap: 8px; align-items: center; }
.cbx-inline-ecbc02f2ae { height: fit-content; }
.cbx-inline-ed4f920de6 { width: auto; padding: 8px 12px; }
.cbx-inline-edee482e2c { display:flex; justify-content:space-between; align-items:center; margin-bottom: 16px; }
.cbx-inline-ee3d55bf99 { flex: 1; }
.cbx-inline-ee6fd97755 { width: 34px; height: 34px; background: #fef5e8; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #e16349; font-weight: 700; font-size: 14px; }
.cbx-inline-ef7a9dfbd9 { margin-top: 24px; }
.cbx-inline-ef8b99af1a { color: #8B5CF6; cursor: pointer; font-size: 20px; }
.cbx-inline-f02978eaf1 { max-width: 50%; }
.cbx-inline-f02a5f9f57 { position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; background: #e16349; border-radius: 50%; border: 2px solid #FFF; }
.cbx-inline-f112760ebc { font-size: 15px; }
.cbx-inline-f14e3597f1 { color: #555; }
.cbx-inline-f25f72bb79 { color: var(--danger); font-weight: 700; }
.cbx-inline-f2892a2e8a { display: none; }
.cbx-inline-f2b9ba4a94 { text-align: center; padding: 30px; }
.cbx-inline-f38316681a { font-size:13px;color:var(--primary);display:block;margin-bottom:2px }
.cbx-inline-f437ed5bb3 { margin:0; color: #10B981; text-transform: uppercase; }
.cbx-inline-f608dc7e23 { border-bottom: 1px solid var(--border); }
.cbx-inline-f75d63c1ee { color: var(--danger); }
.cbx-inline-f772612359 { max-width: 120px; height: auto; opacity: 0.7; }
.cbx-inline-f77719404c { text-align: center; padding: 30px; color: var(--text-muted); }
.cbx-inline-f780608dbf { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cbx-inline-f8b7863d6d { color: var(--success); font-size: 12px; }
.cbx-inline-fae452e9db { color: var(--screen-text-muted); }
.cbx-inline-fb93dd3af9 { padding: 6px 12px; font-size: 12px; color: var(--success); border-color: rgba(16, 185, 129, 0.5); }
.cbx-inline-fbfd4ab9b2 { font-size: 16px; color: #3B82F6; }
.cbx-inline-fc6ab714f3 { background: var(--surface); padding: 24px; border-radius: 16px; border: 1px solid var(--border); margin-bottom: 24px; }
.cbx-inline-fc8d9bf156 { margin-top: 20px; text-align: right; }
.cbx-inline-fd8310542e { display:flex; gap: 12px; align-items:center; margin-top: 4px; }
.cbx-inline-fe4c65199f { display: none; height: 100vh; width: 100vw; overflow: hidden; }
.cbx-inline-fe4dbf42f0 { font-size:12px; color:var(--text-muted); }
.cbx-inline-ff13ac5c8d { background: #ECFDF5; padding: 16px; border-radius: 12px; }
.cbx-inline-ff227d0632 { margin: 0; }
.cbx-inline-ffc0ab9b88 { padding: 0 16px; }

/* ===== DYNAMIC ROLE BADGES ===== */
.cbx-role-badge { padding: 4px 8px; border-radius: 6px; font-size: 11px; text-transform: uppercase; font-weight: 700; }
.cbx-role-admin { background: #ECFDF5; color: #059669; }
.cbx-role-user { background: #EFF6FF; color: #2563EB; }

/* Runtime state class used by attendance.html; keeps CSS out of HTML/JS. */
.cbx-hide-admin-columns .admin-only-col { display: none !important; }