:root{--pri:#0f766e;--pri2:#14b8a6;--dark:#0b3b3a;--bg:#f3f6f8;--side:260px}
*{font-family:'Cairo',Tahoma,'Segoe UI',sans-serif}
body{background:var(--bg);font-size:14.5px;color:#1f2d3d}
a{color:var(--pri)}
.btn-primary{--bs-btn-bg:var(--pri);--bs-btn-border-color:var(--pri);--bs-btn-hover-bg:#0d5f59;--bs-btn-hover-border-color:#0d5f59;--bs-btn-active-bg:#0b504b}
.btn-outline-primary{--bs-btn-color:var(--pri);--bs-btn-border-color:var(--pri);--bs-btn-hover-bg:var(--pri);--bs-btn-hover-border-color:var(--pri)}
.text-primary{color:var(--pri)!important}.bg-primary{background:var(--pri)!important}
.app{display:flex;min-height:100vh}
.sidebar{width:var(--side);background:linear-gradient(180deg,var(--dark),#0f4f4c);color:#cfe;position:fixed;top:0;bottom:0;right:0;overflow-y:auto;z-index:1040;transition:.25s}
.sidebar .brand{display:flex;gap:10px;align-items:center;padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.08);color:#fff}
.sidebar .brand i{font-size:30px;color:#5eead4}.sidebar .brand img{width:42px;height:42px;object-fit:contain;background:#fff;border-radius:8px}
.sidebar .brand small{color:#9dd;font-size:11px}
.menu{padding:8px}
.menu-title{font-size:11px;color:#7fb;opacity:.7;padding:12px 12px 4px;font-weight:700}
.menu a{display:flex;align-items:center;gap:10px;color:#d6f0ee;text-decoration:none;padding:8px 12px;border-radius:8px;margin-bottom:2px;font-size:14px}
.menu a i{font-size:17px;width:20px;text-align:center}
.menu a:hover{background:rgba(255,255,255,.08);color:#fff}
.menu a.active{background:var(--pri2);color:#fff;box-shadow:0 4px 12px rgba(20,184,166,.35)}
.main{flex:1;margin-right:var(--side);min-width:0;display:flex;flex-direction:column}
.topbar{height:62px;background:#fff;display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid #e6ebef;position:sticky;top:0;z-index:1030}
.topbar .search{align-items:center;background:#f1f4f6;border-radius:10px;padding:0 12px;width:420px}
.topbar .search input{border:0;background:transparent;padding:9px;width:100%;outline:none}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--pri);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.content{padding:20px;flex:1}
.footer{padding:12px 20px;color:#8a99a8;font-size:12px;text-align:center}
.card{border:0;border-radius:14px;box-shadow:0 1px 3px rgba(16,40,60,.06),0 4px 14px rgba(16,40,60,.04);margin-bottom:18px}
.card-header{background:#fff;border-bottom:1px solid #eef2f4;font-weight:700;padding:13px 18px;border-radius:14px 14px 0 0!important}
.page-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.page-head h4{margin:0;font-weight:700;color:var(--dark)}
.page-head h4 i{color:var(--pri2)}
.stat{display:flex;align-items:center;gap:14px;padding:16px}
.stat .ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px}
.stat .v{font-size:22px;font-weight:700;line-height:1.2}.stat .l{color:#6b7c8c;font-size:13px}
.ic-teal{background:#ccfbf1;color:#0f766e}.ic-blue{background:#dbeafe;color:#1d4ed8}.ic-amber{background:#fef3c7;color:#b45309}
.ic-rose{background:#ffe4e6;color:#be123c}.ic-violet{background:#ede9fe;color:#6d28d9}.ic-green{background:#dcfce7;color:#15803d}
.table{margin:0}.table th{background:#f6f9fa;color:#475569;font-weight:600;font-size:13px;white-space:nowrap}
.table td{vertical-align:middle}
.table-hover tbody tr:hover{background:#f8fdfc}
.form-label{font-weight:600;font-size:13px;color:#475569;margin-bottom:4px}
.form-control,.form-select{border-radius:9px;border-color:#dbe3e8}
.form-control:focus,.form-select:focus{border-color:var(--pri2);box-shadow:0 0 0 .2rem rgba(20,184,166,.15)}
.nav-tabs .nav-link{color:#475569;font-weight:600}.nav-tabs .nav-link.active{color:var(--pri);border-bottom:3px solid var(--pri)}
.pet-head{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;border-radius:14px;padding:20px;margin-bottom:18px}
.pet-head .ph{width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:36px;overflow:hidden}
.pet-head .ph img{width:100%;height:100%;object-fit:cover}
.picker{position:relative}
.picker-list{position:absolute;top:100%;right:0;left:0;background:#fff;border:1px solid #dbe3e8;border-radius:9px;max-height:260px;overflow:auto;z-index:1060;display:none;box-shadow:0 8px 20px rgba(0,0,0,.08)}
.picker-list div{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f1f4f6}
.picker-list div:hover,.picker-list div.hl{background:#ecfdf9}
.timeline{border-right:2px solid #d5e5e3;padding-right:18px}
.timeline .ti{position:relative;margin-bottom:16px}
.timeline .ti:before{content:'';position:absolute;right:-25px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--pri2);border:2px solid #fff}
.cal-slot{border-right:4px solid var(--pri2);background:#f3fbfa;border-radius:8px;padding:6px 10px;margin-bottom:6px;font-size:13px}
.flag-H{color:#dc2626;font-weight:700}.flag-L{color:#2563eb;font-weight:700}
.login-bg{min-height:100vh;background:linear-gradient(135deg,#0b3b3a,#0f766e 55%,#14b8a6);display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{width:100%;max-width:410px;border-radius:18px}
.print-doc{background:#fff;max-width:850px;margin:auto;padding:30px;border-radius:12px}
.doc-head{display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid var(--pri);padding-bottom:12px;margin-bottom:16px}
.doc-head img{max-height:75px}
.doc-title{background:var(--pri);color:#fff;text-align:center;padding:6px;border-radius:6px;font-weight:700;margin-bottom:14px}
.tbl-doc th{background:#e6f4f2!important}
.tbl-doc td,.tbl-doc th{border:1px solid #cfdcdc!important;padding:6px 8px}
@media (max-width:576px){.stat{padding:12px;gap:10px}.stat .v{font-size:16px}.stat .ic{width:42px;height:42px;font-size:20px}.content{padding:12px}.print-doc{padding:10px}}
@media (max-width:991px){.sidebar{right:calc(-1 * var(--side))}.sidebar.open{right:0}.main{margin-right:0}}
@media print{
  .sidebar,.topbar,.footer,.no-print,.btn,.alert{display:none!important}
  .main{margin:0!important}.content{padding:0!important}body{background:#fff;font-size:12.5px}
  .card{box-shadow:none;border:0}.print-doc{padding:0;max-width:100%}
  a{text-decoration:none;color:#000}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.inv-doc .en{color:#6b7c8c;font-size:10px;font-weight:normal}
.inv-doc .bi-tbl td{width:33%}