/* ================================================================
   Clinic Management System — Full Self-Contained CSS
   No CDN dependency — works completely offline
   ================================================================ */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Tahoma,Arial,sans-serif;font-size:14px;background:#f0f4f7;color:#1a2e35}
a{text-decoration:none}
img{max-width:100%}

/* ── Variables ── */
:root{
  --primary:#1a6b8a;
  --primary-dk:#135570;
  --primary-lt:#e8f4f8;
  --secondary:#2e9eb3;
  --sidebar-w:250px;
}

/* ════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════ */
.cl-sidebar{
  width:var(--sidebar-w);min-height:100vh;
  background:#1a2e35;position:fixed;top:0;left:0;
  z-index:1045;overflow-y:auto;
  transition:transform .28s ease;
  display:flex;flex-direction:column;
}
.cl-sidebar .brand{padding:16px;border-bottom:1px solid rgba(255,255,255,.1)}
.cl-sidebar .brand h1{color:#fff;font-size:15px;font-weight:700;margin:0;line-height:1.3}
.cl-sidebar .brand small{color:rgba(255,255,255,.4);font-size:11px;display:block;margin-top:2px}
.cl-sidebar .brand img{height:38px;border-radius:6px;margin-bottom:8px;display:block}
.nav-section-lbl{padding:8px 16px 2px;color:rgba(255,255,255,.3);font-size:10px;text-transform:uppercase;letter-spacing:1px}
.cl-nav-link{display:flex;align-items:center;gap:10px;padding:10px 16px;color:rgba(255,255,255,.72);text-decoration:none;font-size:13px;border-left:3px solid transparent;transition:all .15s}
.cl-nav-link:hover{background:rgba(255,255,255,.07);color:#fff;border-left-color:var(--secondary)}
.cl-nav-link.active{background:rgba(46,158,179,.2);color:#fff;border-left-color:var(--secondary)}
.cl-nav-link i{width:18px;text-align:center;font-size:14px;flex-shrink:0}
.mt-1{margin-top:4px}

.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1044}
.sidebar-overlay.show{display:block}

.cl-main{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column}

.cl-topbar{height:60px;background:#fff;border-bottom:1px solid #dee2e6;display:flex;align-items:center;padding:0 20px;position:sticky;top:0;z-index:1030;box-shadow:0 1px 4px rgba(0,0,0,.07)}
.cl-topbar .page-title{font-size:17px;font-weight:600;color:#1a2e35}
.user-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}

.cl-content{padding:22px;flex:1}

/* ════════════════════════════════════════
   GRID SYSTEM
   ════════════════════════════════════════ */
.row{display:flex;flex-wrap:wrap;margin-left:-8px;margin-right:-8px}
.row.g-2>*{padding:4px 8px}
.row.g-3>*{padding:8px}
.row.g-4>*{padding:12px}
[class*="col-"]{width:100%}
/* xs — default full width */
.col-6{width:50%}
.col-12{width:100%}
/* sm 576px */
@media(min-width:576px){
  .col-sm-6{width:50%}
  .col-sm-4{width:33.333%}
  .col-sm-3{width:25%}
}
/* md 768px */
@media(min-width:768px){
  .col-md-3{width:25%}
  .col-md-4{width:33.333%}
  .col-md-5{width:41.666%}
  .col-md-6{width:50%}
  .col-md-7{width:58.333%}
  .col-md-8{width:66.666%}
  .col-md-9{width:75%}
  .col-md-12{width:100%}
}
/* lg 992px */
@media(min-width:992px){
  .col-lg-3{width:25%}
  .col-lg-4{width:33.333%}
  .col-lg-5{width:41.666%}
  .col-lg-6{width:50%}
  .col-lg-7{width:58.333%}
  .col-lg-8{width:66.666%}
}
/* xl 1200px */
@media(min-width:1200px){
  .col-xl-3{width:25%}
  .col-xl-4{width:33.333%}
  .col-xl-6{width:50%}
}

/* ════════════════════════════════════════
   CARDS
   ════════════════════════════════════════ */
.cl-card{background:#fff;border-radius:10px;box-shadow:0 1px 6px rgba(0,0,0,.08);margin-bottom:20px;overflow:hidden}
.cl-card-header{padding:14px 20px;border-bottom:1px solid #e9ecef;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.cl-card-header h2{font-size:15px;font-weight:600;color:#1a2e35;margin:0}
.cl-card-body{padding:20px}

/* ════════════════════════════════════════
   STAT CARDS
   ════════════════════════════════════════ */
.stat-card{background:#fff;border-radius:10px;padding:18px 20px;box-shadow:0 1px 6px rgba(0,0,0,.08);display:flex;align-items:center;gap:14px;border-left:4px solid var(--primary);height:100%}
.stat-card.green{border-left-color:#28a745}
.stat-card.orange{border-left-color:#fd7e14}
.stat-card.teal{border-left-color:#17a2b8}
.stat-card.red{border-left-color:#dc3545}
.stat-icon{width:46px;height:46px;border-radius:10px;background:var(--primary-lt);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-icon i{font-size:20px;color:var(--primary)}
.stat-card.green  .stat-icon{background:#e8f5e9} .stat-card.green  .stat-icon i{color:#28a745}
.stat-card.orange .stat-icon{background:#fff3e0} .stat-card.orange .stat-icon i{color:#fd7e14}
.stat-card.teal   .stat-icon{background:#e0f7fa} .stat-card.teal   .stat-icon i{color:#17a2b8}
.stat-card.red    .stat-icon{background:#ffebee} .stat-card.red    .stat-icon i{color:#dc3545}
.stat-value{font-size:24px;font-weight:700;color:#1a2e35;line-height:1.1}
.stat-label{font-size:12px;color:#6c757d;margin-top:2px}

/* ════════════════════════════════════════
   TABLES
   ════════════════════════════════════════ */
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
.table{width:100%;border-collapse:collapse}
.table th{padding:10px 12px;text-align:left;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;background:var(--primary);color:#fff;border:none;white-space:nowrap}
.table td{padding:10px 12px;border-bottom:1px solid #dee2e6;font-size:13px;vertical-align:middle}
.table-hover tbody tr:hover{background:var(--primary-lt)}
.table-borderless td,.table-borderless th{border:none}
.align-middle td,.align-middle th{vertical-align:middle}

/* DataTables override */
table.dataTable thead th{background:var(--primary)!important;color:#fff!important;font-size:12px!important;font-weight:600!important;text-transform:uppercase!important;letter-spacing:.4px!important;border:none!important}
table.dataTable tbody tr:hover>*{background:var(--primary-lt)!important;color:#1a2e35!important}
.dataTables_wrapper .dataTables_filter input{border:1.5px solid #ced4da;border-radius:6px;padding:5px 10px;font-size:13px}
.dataTables_wrapper .dataTables_length select{border:1.5px solid #ced4da;border-radius:6px;padding:4px 8px;font-size:13px}
.dataTables_wrapper .dataTables_info{font-size:12px;color:#6c757d;margin-top:8px}
.dataTables_wrapper .dataTables_paginate{margin-top:8px}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important;border-radius:5px}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{background:var(--primary-lt)!important;border-color:var(--primary-lt)!important;color:var(--primary)!important;border-radius:5px}

/* ════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border:1.5px solid transparent;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;text-decoration:none;line-height:1;white-space:nowrap}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-lg{padding:10px 20px;font-size:15px}
.btn-cl-primary,.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-cl-primary:hover,.btn-primary:hover{background:var(--primary-dk);color:#fff;border-color:var(--primary-dk)}
.btn-success{background:#28a745;color:#fff;border-color:#28a745}
.btn-success:hover{background:#1e7e34;color:#fff}
.btn-danger{background:#dc3545;color:#fff;border-color:#dc3545}
.btn-danger:hover{background:#b21f2d;color:#fff}
.btn-warning{background:#ffc107;color:#333;border-color:#ffc107}
.btn-warning:hover{background:#e0a800;color:#333}
.btn-info{background:#17a2b8;color:#fff;border-color:#17a2b8}
.btn-info:hover{background:#138496;color:#fff}
.btn-secondary{background:#6c757d;color:#fff;border-color:#6c757d}
.btn-light{background:#f8f9fa;color:#333;border-color:#dee2e6}
.btn-dark{background:#343a40;color:#fff;border-color:#343a40}
.btn-outline-primary{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-outline-primary:hover{background:var(--primary);color:#fff}
.btn-outline-secondary{background:transparent;color:#6c757d;border-color:#6c757d}
.btn-outline-secondary:hover{background:#6c757d;color:#fff}
.btn-outline-danger{background:transparent;color:#dc3545;border-color:#dc3545}
.btn-outline-danger:hover{background:#dc3545;color:#fff}
.btn-outline-info{background:transparent;color:#17a2b8;border-color:#17a2b8}
.btn-outline-info:hover{background:#17a2b8;color:#fff}
.btn-outline-success{background:transparent;color:#28a745;border-color:#28a745}
.btn-outline-success:hover{background:#28a745;color:#fff}
.text-white{color:#fff!important}
.w-100{width:100%}

/* ════════════════════════════════════════
   FORMS
   ════════════════════════════════════════ */
.form-control,.form-select{display:block;width:100%;padding:8px 12px;border:1.5px solid #dee2e6;border-radius:6px;font-size:13px;color:#1a2e35;background:#fff;transition:border-color .2s;line-height:1.5}
.form-control:focus,.form-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,107,138,.15)}
.form-control-sm,.form-select-sm{padding:5px 10px;font-size:12px}
textarea.form-control{resize:vertical;min-height:70px}
.form-label{display:block;font-size:12px;font-weight:600;color:#1a2e35;margin-bottom:5px}
.form-text{font-size:11px;color:#6c757d;margin-top:3px}
.form-check{display:flex;align-items:center;gap:8px}
.form-check-input{width:16px;height:16px;cursor:pointer;flex-shrink:0}
.form-check-label{font-size:13px;cursor:pointer}
.required,.text-danger{color:#dc3545}

/* ════════════════════════════════════════
   BADGES
   ════════════════════════════════════════ */
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;line-height:1}
.bg-success{background:#28a745!important;color:#fff!important}
.bg-danger{background:#dc3545!important;color:#fff!important}
.bg-warning{background:#ffc107!important;color:#333!important}
.bg-info{background:#17a2b8!important;color:#fff!important}
.bg-secondary{background:#6c757d!important;color:#fff!important}
.bg-primary{background:var(--primary)!important;color:#fff!important}
.bg-dark{background:#343a40!important;color:#fff!important}
.bg-white{background:#fff!important}
.bg-light{background:#f8f9fa!important}

/* ════════════════════════════════════════
   ALERTS
   ════════════════════════════════════════ */
.alert{padding:11px 16px;border-radius:7px;margin-bottom:14px;display:flex;align-items:flex-start;gap:8px;font-size:13px;border-left:4px solid transparent}
.alert-success{background:#e8f5e9;color:#2e7d32;border-left-color:#28a745}
.alert-danger{background:#ffebee;color:#c62828;border-left-color:#dc3545}
.alert-warning{background:#fff8e1;color:#f57f17;border-left-color:#ffc107}
.alert-info{background:#e0f7fa;color:#006064;border-left-color:#17a2b8}
.alert-secondary{background:#f5f5f5;color:#555;border-left-color:#aaa}

/* ════════════════════════════════════════
   MODALS
   ════════════════════════════════════════ */
.modal{display:none;position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.5);align-items:center;justify-content:center;padding:16px}
.modal.show{display:flex!important}
.modal-dialog{background:#fff;border-radius:10px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.modal-dialog-centered{margin:auto}
.modal-content{border-radius:10px;overflow:hidden}
.modal-header{padding:16px 20px;border-bottom:1px solid #dee2e6;display:flex;align-items:center;justify-content:space-between}
.modal-title{font-size:16px;font-weight:600;margin:0}
.modal-body{padding:20px}
.modal-footer{padding:12px 20px;border-top:1px solid #dee2e6;display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.btn-close{background:none;border:none;font-size:20px;cursor:pointer;color:#6c757d;line-height:1;padding:0}
.btn-close:hover{color:#333}

/* ════════════════════════════════════════
   TABS
   ════════════════════════════════════════ */
.nav-tabs{display:flex;border-bottom:2px solid #dee2e6;margin-bottom:16px;flex-wrap:wrap;gap:2px}
.nav-tabs .nav-item{list-style:none}
.nav-tabs .nav-link{display:block;padding:9px 16px;color:#6c757d;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;transition:all .15s;background:none}
.nav-tabs .nav-link:hover{color:var(--primary)}
.nav-tabs .nav-link.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
.tab-content>.tab-pane{display:none}
.tab-content>.tab-pane.show.active{display:block}
.fade{transition:opacity .15s}

/* ════════════════════════════════════════
   VITAL CARDS
   ════════════════════════════════════════ */
.vital-card{background:var(--primary-lt);border-radius:8px;padding:12px;text-align:center}
.vital-card .val{font-size:18px;font-weight:700;color:var(--primary)}
.vital-card .lbl{font-size:11px;color:#6c757d;margin-top:2px}

/* ════════════════════════════════════════
   PRESCRIPTION TABLE
   ════════════════════════════════════════ */
.rx-table{width:100%;border-collapse:collapse}
.rx-table th{background:#f8f9fa;font-size:12px;font-weight:600;color:#495057;border-bottom:2px solid #dee2e6;padding:8px 10px;text-align:left}
.rx-table td{vertical-align:middle;padding:8px 10px;border-bottom:1px solid #f0f0f0}

/* ════════════════════════════════════════
   SECTION TITLE
   ════════════════════════════════════════ */
.section-title{font-size:12px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;padding-bottom:6px;border-bottom:2px solid var(--primary-lt)}

/* ════════════════════════════════════════
   UTILITY CLASSES
   ════════════════════════════════════════ */
.d-flex{display:flex}.d-inline-flex{display:inline-flex}.d-block{display:block}.d-inline{display:inline}.d-none{display:none!important}
.flex-wrap{flex-wrap:wrap}.flex-column{flex-direction:column}
.align-items-center{align-items:center}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}
.justify-content-between{justify-content:space-between}.justify-content-center{justify-content:center}.justify-content-end{justify-content:flex-end}
.ms-auto{margin-left:auto}.me-auto{margin-right:auto}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-5{gap:20px}
.me-1{margin-right:4px}.me-2{margin-right:8px}.me-3{margin-right:12px}.me-4{margin-right:16px}
.ms-1{margin-left:4px}.ms-2{margin-left:8px}.ms-3{margin-left:12px}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
.my-2{margin-top:8px;margin-bottom:8px}.my-3{margin-top:12px;margin-bottom:12px}
.p-0{padding:0}.p-2{padding:8px}.p-3{padding:12px}.p-4{padding:16px}
.px-3{padding-left:12px;padding-right:12px}.px-4{padding-left:16px;padding-right:16px}
.py-2{padding-top:8px;padding-bottom:8px}.py-3{padding-top:12px;padding-bottom:12px}.py-4{padding-top:16px;padding-bottom:16px}
.pt-2{padding-top:8px}.pb-0{padding-bottom:0}
.text-center{text-align:center}.text-end{text-align:right}.text-start{text-align:left}
.text-muted{color:#6c757d!important}.text-danger{color:#dc3545!important}.text-success{color:#28a745!important}
.text-primary{color:var(--primary)!important}.text-info{color:#17a2b8!important}.text-warning{color:#ffc107!important}
.fw-bold{font-weight:700}.fw-semibold{font-weight:600}.fw-normal{font-weight:400}
.fs-1{font-size:32px}.fs-2{font-size:26px}.fs-3{font-size:22px}.fs-4{font-size:18px}.fs-5{font-size:16px}.fs-6{font-size:14px}
.small{font-size:12px}
.border{border:1px solid #dee2e6}.border-top{border-top:1px solid #dee2e6}.border-bottom{border-bottom:1px solid #dee2e6}
.border-0{border:none}
.rounded{border-radius:6px}.rounded-circle{border-radius:50%}.rounded-pill{border-radius:50px}
.shadow-sm{box-shadow:0 1px 4px rgba(0,0,0,.08)}
.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}
.h-100{height:100%}
.position-relative{position:relative}.position-absolute{position:absolute}.position-fixed{position:fixed}
.top-0{top:0}.bottom-0{bottom:0}.start-0{left:0}.end-0{right:0}.inset-0{inset:0}
.float-end{float:right}
.clearfix::after{content:'';display:table;clear:both}
code{font-family:monospace;background:#f8f9fa;padding:2px 6px;border-radius:3px;font-size:12px;color:var(--primary)}
.w-100{width:100%}.w-50{width:50%}.w-auto{width:auto}

/* ════════════════════════════════════════
   AUTH PAGES
   ════════════════════════════════════════ */
.auth-bg{min-height:100vh;background:linear-gradient(135deg,#0f3d4a 0%,#1a6b8a 60%,#2e9eb3 100%);display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{width:100%;max-width:420px;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35);background:#fff}
.auth-header{background:var(--primary);padding:28px 32px;text-align:center}
.auth-header h1{color:#fff;font-size:22px;font-weight:700;margin:0}
.auth-header p{color:rgba(255,255,255,.7);font-size:13px;margin:4px 0 0}

/* ════════════════════════════════════════
   PRINT
   ════════════════════════════════════════ */
@media print{
  .cl-sidebar,.cl-topbar,.no-print{display:none!important}
  .cl-main{margin:0!important}
  .cl-content{padding:0!important}
}

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */
@media(max-width:991.98px){
  .cl-sidebar{transform:translateX(-100%)}
  .cl-sidebar.show{transform:translateX(0)}
  .cl-main{margin-left:0!important}
  .d-lg-none{display:none!important}
  .d-lg-inline-flex{display:none!important}
}
@media(min-width:992px){
  .d-lg-none{display:none!important}
  .d-lg-inline-flex{display:inline-flex!important}
}
@media(max-width:767px){
  .cl-content{padding:14px}
  .stat-value{font-size:18px}
  .d-sm-none{display:none!important}
  .d-sm-inline{display:inline!important}
  .d-sm-block{display:block!important}
}