:root {
    --shaafi-primary: #0f766e;
    --shaafi-dark: #0f172a;
    --shaafi-soft: #f4f7fb;
    --shaafi-card: #ffffff;
    --shaafi-border: #e5e7eb;
}
* { box-sizing: border-box; }
body { background: var(--shaafi-soft); color: #1f2937; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 280px; background: linear-gradient(180deg, #0f172a, #134e4a); color: #fff; padding: 20px 16px; position: fixed; inset: 0 auto 0 0; overflow-y: auto; z-index: 1030; box-shadow: 12px 0 35px rgba(15, 23, 42, .18); }
.brand-box { display: flex; gap: 12px; align-items: center; padding: 10px 8px 24px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 14px; }
.brand-icon { width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.15); font-size: 22px; }
.brand-title { font-size: 22px; font-weight: 800; line-height: 1; }
.brand-subtitle { color: rgba(255,255,255,.65); font-size: 12px; }
.sidebar-nav { gap: 6px; }
.sidebar-nav .nav-link { color: rgba(255,255,255,.76); display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 12px 14px; font-weight: 600; transition: .2s ease; }
.sidebar-nav .nav-link i { width: 20px; text-align: center; }
.sidebar-nav .nav-link:hover, .sidebar-nav .nav-link.active { color: #fff; background: rgba(255,255,255,.14); transform: translateX(3px); }
.main-content { margin-left: 280px; width: calc(100% - 280px); }
.topbar { height: 88px; display: flex; align-items: center; gap: 15px; padding: 0 28px; background: rgba(255,255,255,.86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--shaafi-border); position: sticky; top: 0; z-index: 100; }
.topbar h1 { margin: 0; font-size: 24px; font-weight: 800; color: var(--shaafi-dark); }
.topbar p { margin: 4px 0 0; color: #64748b; font-size: 13px; }
.user-pill { border: 1px solid var(--shaafi-border); background: #fff; border-radius: 999px; padding: 7px 12px 7px 7px; }
.avatar { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--shaafi-primary); color: #fff; font-weight: 800; margin-right: 6px; }
.page-body { padding: 28px; }
.card { border: 0; border-radius: 20px; box-shadow: 0 12px 30px rgba(15, 23, 42, .06); }
.stat-card { overflow: hidden; position: relative; }
.stat-card .icon { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: rgba(15, 118, 110, .1); color: var(--shaafi-primary); font-size: 23px; }
.stat-value { font-size: 28px; font-weight: 850; color: var(--shaafi-dark); }
.table-card .card-header { background: #fff; border-bottom: 1px solid var(--shaafi-border); border-radius: 20px 20px 0 0; }
.btn-primary { --bs-btn-bg: var(--shaafi-primary); --bs-btn-border-color: var(--shaafi-primary); --bs-btn-hover-bg: #115e59; --bs-btn-hover-border-color: #115e59; }
.text-primary { color: var(--shaafi-primary) !important; }
.bg-primary { background-color: var(--shaafi-primary) !important; }
.form-control, .form-select, .select2-container--bootstrap-5 .select2-selection { border-radius: 12px; }
.modal-content { border-radius: 22px; border: 0; }
.auth-body { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at top left, #14b8a6, transparent 35%), linear-gradient(135deg, #0f172a, #134e4a); }
.auth-card { width: min(430px, 92vw); background: #fff; border-radius: 28px; padding: 34px; }
.auth-logo { width: 70px; height: 70px; margin: 0 auto 14px; border-radius: 24px; display: grid; place-items: center; background: rgba(15,118,110,.12); color: var(--shaafi-primary); font-size: 32px; }
.action-btn { border: 0; background: transparent; color: #475569; margin: 0 3px; }
.action-btn:hover { color: var(--shaafi-primary); }
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); transition: .25s ease; }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left: 0; width: 100%; }
    .topbar { padding: 0 16px; }
    .page-body { padding: 18px; }
}