:root{
  --taq-primary:#0d6b4f;
  --taq-primary-dark:#08543d;
  --taq-accent:#c8a45c;
  --taq-bg:#f4f6f8;
  --taq-sidebar:#0d6b4f;
  --taq-sidebar-hover:#0b5b43;
}
body{background:var(--taq-bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#2c3a47;}

/* ===== Auth ===== */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0d6b4f 0%,#08543d 100%);padding:1rem;}
.auth-card{background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.2);max-width:420px;width:100%;padding:2.25rem;}
.auth-logo{width:60px;height:60px;border-radius:14px;background:var(--taq-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto 1rem;}

/* ===== Shell ===== */
.app-shell{display:flex;min-height:100vh;}
.app-sidebar{width:250px;background:var(--taq-sidebar);color:#dfeae5;flex-shrink:0;min-height:100vh;position:sticky;top:0;height:100vh;overflow-y:auto;}
.app-sidebar .app-brand{border-bottom:1px solid rgba(255,255,255,.1);}
.app-sidebar .brand-icon{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:1.1rem;}
.app-nav{padding:.5rem 0;}
.app-nav .nav-section{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.5);padding:.85rem 1.25rem .35rem;}
.app-nav .nav-link{color:#dfeae5;padding:.55rem 1.25rem;border-radius:0;font-size:.92rem;display:flex;align-items:center;gap:.65rem;}
.app-nav .nav-link i{width:18px;text-align:center;font-size:1rem;}
.app-nav .nav-link:hover{background:var(--taq-sidebar-hover);color:#fff;}
.app-nav .nav-link.active{background:rgba(255,255,255,.12);color:#fff;border-left:3px solid var(--taq-accent);padding-left:calc(1.25rem - 3px);}

.app-main{flex:1;display:flex;flex-direction:column;min-width:0;}
.app-topbar{background:#fff;height:60px;border-bottom:1px solid #e5e9ec;position:sticky;top:0;z-index:20;}

/* ===== Top horizontal menu ===== */
.app-topnav{background:#fff;border-bottom:1px solid #e5e9ec;position:sticky;top:60px;z-index:15;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.topnav-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:stretch;}
.topnav-item{position:relative;}
.topnav-item.dropdown > .dropdown-menu{margin-top:0;border-radius:0 0 8px 8px;border-top:2px solid var(--taq-primary);min-width:230px;box-shadow:0 6px 18px rgba(0,0,0,.08);}
.topnav-link{
  display:flex;align-items:center;gap:.45rem;
  padding:.7rem 1rem;color:#445262;font-size:.9rem;font-weight:500;
  text-decoration:none;border-bottom:3px solid transparent;
  transition:background .15s,color .15s,border-color .15s;
  white-space:nowrap;
}
.topnav-link i{font-size:1rem;}
.topnav-link:hover{color:var(--taq-primary);background:#f9fbfa;}
.topnav-link.active{color:var(--taq-primary);border-bottom-color:var(--taq-primary);background:#f4f8f6;}
.topnav-link.dropdown-toggle::after{margin-left:.35rem;}
.topnav-list .dropdown-item{padding:.5rem 1rem;font-size:.88rem;display:flex;align-items:center;gap:.55rem;}
.topnav-list .dropdown-item i{width:18px;text-align:center;color:var(--taq-primary);}
.topnav-list .dropdown-item:hover{background:#f4f8f6;}
.topnav-list .dropdown-header{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:#7a8694;padding:.5rem 1rem .25rem;}

@media(max-width:992px){
  .app-topnav{display:none;}
}
.app-content{flex:1;}
.app-footer{background:#fff;border-top:1px solid #e5e9ec;}

.avatar-circle{width:36px;height:36px;border-radius:50%;background:var(--taq-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;}

/* ===== Cards ===== */
.card{border:1px solid #e5e9ec;border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.03);}
.card-header{background:#fff;border-bottom:1px solid #eef1f3;font-weight:600;}
.stat-card{padding:1.25rem;border-radius:10px;background:#fff;border:1px solid #e5e9ec;display:flex;align-items:center;gap:1rem;}
.stat-card .stat-icon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff;flex-shrink:0;}
.stat-card .stat-value{font-size:1.5rem;font-weight:700;line-height:1;}
.stat-card .stat-label{font-size:.8rem;color:#7a8694;text-transform:uppercase;letter-spacing:.04em;}
.bg-grad-1{background:linear-gradient(135deg,#0d6b4f,#13966f);}
.bg-grad-2{background:linear-gradient(135deg,#c8a45c,#a8843d);}
.bg-grad-3{background:linear-gradient(135deg,#3b6bd9,#274ea3);}
.bg-grad-4{background:linear-gradient(135deg,#d94b6b,#a32e4e);}
.bg-grad-5{background:linear-gradient(135deg,#7a3bd9,#5424a3);}
.bg-grad-6{background:linear-gradient(135deg,#d97a3b,#a35324);}

/* ===== Buttons ===== */
.btn-primary,.btn-primary:focus{background:var(--taq-primary);border-color:var(--taq-primary);}
.btn-primary:hover{background:var(--taq-primary-dark);border-color:var(--taq-primary-dark);}
.btn-outline-primary{color:var(--taq-primary);border-color:var(--taq-primary);}
.btn-outline-primary:hover{background:var(--taq-primary);border-color:var(--taq-primary);}
a{color:var(--taq-primary);}

/* ===== Tables ===== */
.table thead th{background:#f9fafb;color:#5a6776;font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.02em;border-bottom:1px solid #e5e9ec;}
.table td,.table th{vertical-align:middle;}
.badge-status{padding:.35em .65em;font-size:.72rem;font-weight:600;border-radius:6px;}
.badge-active{background:#e6f6ee;color:#0d6b4f;}
.badge-inactive{background:#fdecec;color:#a32e2e;}
.badge-pending{background:#fff4dd;color:#a37500;}
.badge-paid{background:#e6f6ee;color:#0d6b4f;}

/* ===== Misc ===== */
.page-title{font-size:1.3rem;font-weight:700;margin:0;}
.page-actions{display:flex;gap:.5rem;flex-wrap:wrap;}
.photo-thumb{width:42px;height:42px;border-radius:50%;object-fit:cover;border:1px solid #e5e9ec;}

@media(max-width:992px){
  .app-sidebar{position:fixed;left:-260px;z-index:1050;transition:left .25s;}
  .app-sidebar.open{left:0;}
}

/* Print (for invoices/certificates) */
@media print{
  .app-sidebar,.app-topbar,.app-topnav,.app-footer,.no-print{display:none !important;}
  .app-main,.app-content{padding:0 !important;}
  body{background:#fff;}
}