:root{--primary:#0d6efd;--sidebar-bg:#1a2332;--sidebar-hover:#253347;--sidebar-active:#0d6efd;--body-bg:#f0f2f5;--card-shadow:0 2px 12px rgba(0,0,0,.08)}
*{font-family:'Cairo',sans-serif;box-sizing:border-box}
body{background:var(--body-bg);margin:0;min-height:100vh}

/* Sidebar */
.sidebar{width:240px;min-height:100vh;background:var(--sidebar-bg);color:#fff;position:fixed;right:0;top:0;z-index:1050;display:flex;flex-direction:column;transition:transform .3s ease}
.sidebar-header{padding:16px 14px 12px;text-align:center;border-bottom:1px solid rgba(255,255,255,.1)}
.sidebar-logo{width:50px;height:50px;object-fit:contain;border-radius:10px;background:#fff;padding:3px}
.sidebar-icon{font-size:32px;color:var(--primary)}
.sidebar .nav{padding:6px 0;flex:1;overflow-y:auto}
.sidebar .nav-link{color:rgba(255,255,255,.7);padding:8px 16px;display:flex;align-items:center;gap:8px;font-size:13px;transition:all .2s;white-space:nowrap}
.sidebar .nav-link:hover{color:#fff;background:var(--sidebar-hover)}
.sidebar .nav-link.active{color:#fff;background:var(--sidebar-active);font-weight:600}
.sidebar .nav-link i{font-size:16px;width:20px;text-align:center;flex-shrink:0}
.sidebar-footer{padding:10px 14px;border-top:1px solid rgba(255,255,255,.1);text-align:center;font-size:11px}

/* Main */
.main-content{margin-right:240px;flex:1;padding:16px;min-height:100vh;width:calc(100% - 240px)}

/* Cards */
.stat-card{border:none;border-radius:14px;box-shadow:var(--card-shadow);transition:transform .2s}
.stat-card:hover{transform:translateY(-2px)}
.stat-card .card-body{padding:16px}
.stat-card .stat-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.card{border:none;border-radius:14px;box-shadow:var(--card-shadow)}
.card-header{background:#fff;border-bottom:1px solid #eee;font-weight:600;border-radius:14px 14px 0 0!important;padding:12px 16px}
.table{font-size:13px}.table th{background:#f8f9fa;font-weight:600;white-space:nowrap}
.badge{font-weight:500;padding:4px 10px;border-radius:16px;font-size:11px}

/* Login */
.login-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--sidebar-bg),#0a58ca);padding:16px}
.login-card{width:100%;max-width:400px;border-radius:20px;box-shadow:0 8px 40px rgba(0,0,0,.15)}

/* WhatsApp */
.btn-whatsapp{background:#25D366;color:#fff;border:none;border-radius:8px;padding:4px 10px;font-size:12px}
.btn-whatsapp:hover{background:#1da851;color:#fff}

/* Print */
@media print{body *{visibility:hidden}.print-area,.print-area *{visibility:visible}.print-area{position:absolute;top:0;right:0;width:100%}.sidebar,.main-content>nav{display:none!important}}

/* Sidebar overlay for mobile */
.sidebar-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:1040}

/* MOBILE */
@media(max-width:991px){
    .sidebar{transform:translateX(100%);width:260px}
    .sidebar.show{transform:translateX(0)}
    .main-content{margin-right:0;width:100%;padding:8px}
    .stat-card .card-body{padding:8px}
    .stat-card h5{font-size:14px}
    .card-header{padding:8px 12px;font-size:13px}
    h4{font-size:18px}
    .nav-tabs{font-size:11px}
    .nav-tabs .nav-link{padding:6px 8px}
    .btn-lg{font-size:14px;padding:8px 16px}
    .table{font-size:12px}
    .table th,.table td{padding:4px 6px}
}

/* Reminders */
.reminder-item{padding:8px 12px;border-bottom:1px solid #f0f0f0;font-size:12px}
.reminder-item:last-child{border-bottom:none}
.reminder-overdue{border-right:3px solid #dc3545}
.reminder-today{border-right:3px solid #ffc107}
.reminder-upcoming{border-right:3px solid #198754}

/* ===== TOOTH CHART - RESPONSIVE ===== */
.tooth-chart-wrapper{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:10px 0}
.tooth-chart{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;background:#fff;border-radius:14px;min-width:420px}
.tooth-row{display:inline-flex;gap:2px;flex-shrink:0}
.tooth-cell{width:38px;height:44px;border:2px solid #dee2e6;border-radius:6px;text-align:center;cursor:pointer;transition:all .15s;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;font-weight:600;background:#fff;flex-shrink:0;user-select:none}
.tooth-cell:hover{border-color:var(--primary);background:#e8f0fe}
.tooth-cell.selected{border-color:var(--primary);background:#cfe2ff;box-shadow:0 0 0 2px rgba(13,110,253,.3)}
.tooth-cell.has-record{border-color:#198754;background:#d1e7dd}
.tooth-cell .tooth-num{font-size:12px;font-weight:700;color:#333;line-height:1}
.tooth-cell .tooth-icon{font-size:12px;line-height:1}
.jaw-label{font-size:11px;color:#6c757d;font-weight:600;margin:2px 0}
.jaw-divider{width:2px;height:44px;background:#adb5bd;margin:0 4px;border-radius:2px;flex-shrink:0}
.jaw-line{width:90%;max-width:420px;height:2px;background:#dee2e6;margin:3px 0}

/* Child chart */
.child-chart{background:#fffbf0!important;border:2px dashed #f0ad4e}
.child-tooth{border-color:#f0ad4e!important;background:#fff8ec}
.child-tooth:hover{border-color:#e09900!important;background:#fff3d6}
.child-tooth.selected{border-color:#e09900!important;background:#ffe0a0;box-shadow:0 0 0 2px rgba(240,173,78,.3)}
.child-tooth.has-record{border-color:#198754!important;background:#d1e7dd}
.child-tooth .tooth-num{color:#a85d00}

/* Proc tooth badge */
.proc-tooth{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:#e8f0fe;border-radius:6px;font-weight:700;font-size:12px;color:var(--primary)}
.proc-tooth.child{background:#fff3d6;color:#a85d00;border:1px solid #f0ad4e}

/* Image gallery */
.img-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.img-card{border:1px solid #dee2e6;border-radius:10px;overflow:hidden;transition:transform .2s;cursor:pointer}
.img-card:hover{transform:scale(1.03);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.img-card img{width:100%;height:110px;object-fit:cover}
.img-card .img-info{padding:6px 8px;font-size:10px;background:#f8f9fa}

/* Quick actions */
.quick-actions .btn{padding:12px 20px;font-size:14px;border-radius:12px}

/* Patient search autocomplete */
.patient-search-wrap{position:relative}
.patient-search-results{position:absolute;top:100%;right:0;left:0;background:#fff;border:1px solid #dee2e6;border-radius:0 0 8px 8px;max-height:200px;overflow-y:auto;z-index:100;display:none;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.patient-search-results.show{display:block}
.patient-search-item{padding:8px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid #f0f0f0}
.patient-search-item:hover{background:#e8f0fe}

@media(max-width:576px){
    .tooth-cell{width:32px;height:38px}
    .tooth-cell .tooth-num{font-size:10px}
    .tooth-cell .tooth-icon{font-size:10px}
    .tooth-chart{min-width:360px}
    .quick-actions .btn{font-size:12px;padding:8px 12px}
}