/* ============================================================
   AAROGYOM Dashboard — Shared CSS
   dist/assets/vendor/css/db-shared.css
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
    --primary:        #e65d0a;
    --primary-dark:   #c44f08;
    --primary-light:  #ff8534;
    --dark-blue:      #0a2351;
    --mid-blue:       #0d2d6b;
    --sidebar-w:      248px;
    --sidebar-min:    66px;
    --header-h:       62px;
    --bn-h:           66px;
    --bg:             #f0f2f7;
    --card:           #ffffff;
    --text:           #1e2742;
    --muted:          #7a8599;
    --border:         rgba(0,0,0,0.07);
    --shadow-sm:      0 2px 12px rgba(0,0,0,0.06);
    --shadow-md:      0 8px 30px rgba(0,0,0,0.1);
    --radius:         16px;
    --radius-sm:      10px;
    --ease:           all 0.26s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Poppins',sans-serif;background:var(--bg);color:var(--text);overflow-x:clip;min-height:100vh;}

/* ── HEADER ───────────────────────────────────────────── */
.db-header{
    position:fixed;top:0;left:0;right:0;
    height:var(--header-h);
    background:var(--dark-blue);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 20px;z-index:1050;
    box-shadow:0 2px 16px rgba(0,0,0,0.2);
}
.db-header-left{display:flex;align-items:center;gap:10px;}

.sidebar-toggle-btn{
    width:36px;height:36px;background:rgba(255,255,255,0.08);
    border:none;border-radius:10px;color:white;font-size:1.1rem;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:var(--ease);flex-shrink:0;
}
.sidebar-toggle-btn:hover{background:rgba(255,255,255,0.16);}

.db-brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.db-brand-logo{height:38px;max-height:38px;width:auto;object-fit:contain;filter:brightness(1.4);}
.db-brand-name{font-size:1.1rem;font-weight:800;color:white;letter-spacing:1px;display:block;line-height:1;}
.db-brand-tagline{font-size:0.57rem;color:rgba(255,255,255,0.42);font-weight:600;letter-spacing:1px;text-transform:uppercase;display:block;}

.db-header-right{display:flex;align-items:center;gap:10px;}

.db-user-chip{
    display:flex;align-items:center;gap:8px;
    background:rgba(255,255,255,0.08);border-radius:50px;
    padding:5px 14px 5px 5px;cursor:pointer;text-decoration:none;
    transition:var(--ease);
}
.db-user-chip:hover{background:rgba(255,255,255,0.14);}
.db-avatar{
    width:30px;height:30px;border-radius:50%;
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    display:flex;align-items:center;justify-content:center;
    font-size:0.78rem;font-weight:700;color:white;flex-shrink:0;
}
.db-user-name{font-size:0.8rem;font-weight:600;color:white;max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.db-menu-btn{
    display:flex;align-items:center;gap:6px;
    background:rgba(255,255,255,0.08);border:none;border-radius:10px;
    color:white;font-size:0.78rem;font-weight:600;
    padding:7px 14px;cursor:pointer;transition:var(--ease);
    font-family:'Poppins',sans-serif;text-decoration:none;
}
.db-menu-btn:hover{background:rgba(255,255,255,0.16);}
.db-menu-btn i{font-size:1rem;}

/* ── SIDEBAR (PC) ─────────────────────────────────────── */
.db-sidebar{
    position:fixed;top:var(--header-h);left:0;
    width:var(--sidebar-w);
    height:calc(100vh - var(--header-h));
    background:white;border-right:1px solid var(--border);
    display:flex;flex-direction:column;overflow:hidden;
    transition:width 0.28s cubic-bezier(0.4,0,0.2,1);
    z-index:1040;box-shadow:2px 0 12px rgba(0,0,0,0.04);
}
.db-sidebar.collapsed{width:var(--sidebar-min);}
.db-sidebar.collapsed .nav-label,
.db-sidebar.collapsed .nav-section,
.db-sidebar.collapsed .su-info,
.db-sidebar.collapsed .sb-foot-text{display:none;}
.db-sidebar.collapsed .su-wrap{padding:12px 0;justify-content:center;}
.db-sidebar.collapsed .db-nav-link{justify-content:center;padding:12px 0;}
.db-sidebar.collapsed .db-nav-link .ni{margin-right:0;}
.db-sidebar.collapsed .nav-badge{display:none;}

.su-wrap{display:flex;align-items:center;gap:10px;padding:14px 16px 12px;border-bottom:1px solid var(--border);transition:var(--ease);}
.su-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-light));display:flex;align-items:center;justify-content:center;font-weight:700;color:white;font-size:0.88rem;flex-shrink:0;}
.su-name{font-weight:700;font-size:0.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);}
.su-role{font-size:0.68rem;color:var(--primary);font-weight:600;}

.db-nav{list-style:none;padding:10px 10px;flex:1;overflow-y:auto;overflow-x:hidden;}
.db-nav::-webkit-scrollbar{width:3px;}
.db-nav::-webkit-scrollbar-thumb{background:#eee;border-radius:3px;}

.nav-section{font-size:0.63rem;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);padding:10px 8px 4px;}

.db-nav-item{margin-bottom:2px;}
.db-nav-link{
    display:flex;align-items:center;gap:0;
    padding:11px 14px;border-radius:var(--radius-sm);
    color:var(--muted);text-decoration:none;
    font-size:0.86rem;font-weight:500;
    transition:var(--ease);white-space:nowrap;position:relative;
}
.db-nav-link .ni{font-size:1.1rem;flex-shrink:0;margin-right:12px;width:20px;text-align:center;}
.db-nav-link:hover{background:rgba(230,93,10,0.07);color:var(--primary);}
.db-nav-link.active{background:linear-gradient(135deg,rgba(230,93,10,0.12),rgba(255,133,52,0.07));color:var(--primary);font-weight:600;}
.db-nav-link.active::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:3px;background:var(--primary);border-radius:0 3px 3px 0;}

.nav-badge{margin-left:auto;background:var(--primary);color:white;font-size:0.6rem;font-weight:700;padding:2px 7px;border-radius:20px;line-height:1.4;}

.sb-foot{padding:10px 16px;border-top:1px solid var(--border);font-size:0.67rem;color:#ccc;text-align:center;flex-shrink:0;white-space:nowrap;overflow:hidden;}

/* ── MAIN CONTENT ─────────────────────────────────────── */
.db-main{
    margin-left:var(--sidebar-w);
    margin-top:var(--header-h);
    min-height:calc(100vh - var(--header-h));
    transition:margin-left 0.28s cubic-bezier(0.4,0,0.2,1);
    padding:26px 28px;
}
.db-main.sb-collapsed{margin-left:var(--sidebar-min);}

/* ── PAGE HEADER ──────────────────────────────────────── */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:24px;}
.page-title{font-size:1.55rem;font-weight:800;color:var(--text);line-height:1.2;}
.page-sub{font-size:0.81rem;color:var(--muted);margin-top:2px;}

/* ── CARDS ────────────────────────────────────────────── */
.db-card{background:var(--card);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow-sm);border:1px solid var(--border);}
.card-title{font-size:0.76rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.card-title i{color:var(--primary);font-size:0.95rem;}

/* ── TABLE ────────────────────────────────────────────── */
.db-table-wrap{overflow-x:auto;}
.db-table{width:100%;border-collapse:collapse;font-size:0.84rem;}
.db-table th{background:#f7f8fc;color:var(--muted);font-weight:700;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.8px;padding:10px 13px;text-align:left;border-bottom:2px solid var(--border);white-space:nowrap;}
.db-table td{padding:12px 13px;border-bottom:1px solid #f3f4f8;color:var(--text);vertical-align:middle;}
.db-table tr:last-child td{border-bottom:none;}
.db-table tr:hover td{background:#fafbff;}

/* ── BADGES ───────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:0.71rem;font-weight:700;}
.badge-success{background:#d1fae5;color:#065f46;}
.badge-warn{background:#fef3c7;color:#92400e;}
.badge-info{background:#dbeafe;color:#1e40af;}
.badge-danger{background:#fee2e2;color:#991b1b;}
.badge-neutral{background:#f3f4f6;color:#6b7280;}
.badge-premium{background:linear-gradient(135deg,rgba(230,93,10,0.12),rgba(255,133,52,0.08));color:var(--primary);}

/* ── BUTTONS ──────────────────────────────────────────── */
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;border:none;border-radius:50px;padding:11px 26px;font-family:'Poppins',sans-serif;font-weight:700;font-size:0.87rem;cursor:pointer;transition:var(--ease);display:inline-flex;align-items:center;gap:8px;box-shadow:0 6px 18px rgba(230,93,10,0.28);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(230,93,10,0.38);}
.btn-outline{background:transparent;color:var(--primary);border:2px solid var(--primary);border-radius:50px;padding:9px 22px;font-family:'Poppins',sans-serif;font-weight:700;font-size:0.87rem;cursor:pointer;transition:var(--ease);display:inline-flex;align-items:center;gap:8px;}
.btn-outline:hover{background:var(--primary);color:white;}
.btn-ghost{background:rgba(230,93,10,0.08);color:var(--primary);border:none;border-radius:50px;padding:9px 22px;font-family:'Poppins',sans-serif;font-weight:700;font-size:0.87rem;cursor:pointer;transition:var(--ease);display:inline-flex;align-items:center;gap:8px;}
.btn-ghost:hover{background:var(--primary);color:white;}

/* ── FORM ─────────────────────────────────────────────── */
.form-label{font-weight:600;font-size:0.81rem;color:var(--text);margin-bottom:6px;display:block;}
.form-control,.form-select{border:2px solid #f0f0f0;border-radius:var(--radius-sm);padding:11px 15px;font-family:'Poppins',sans-serif;font-size:0.86rem;transition:var(--ease);color:var(--text);width:100%;background:white;}
.form-control:focus,.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(230,93,10,0.12);outline:none;}

/* ── BOTTOM NAV (Mobile) — matches public site style ─────
   Uses ::before dot indicator (28px rounded) + align-items:center
   Same pattern as header-footer.css mobile-bottom-nav
   ─────────────────────────────────────────────────────── */
.db-bn{
    display:none;position:fixed;
    bottom:0;left:0;right:0;height:64px;
    background:rgba(255,255,255,0.97);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-top:1px solid rgba(0,0,0,0.07);
    z-index:1045;
    box-shadow:0 -6px 24px rgba(0,0,0,0.07);
}
.db-bn-inner{
    display:flex;
    align-items:center;
    justify-content:space-around;
    height:100%;
}
.db-bn-tab{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    flex:1;
    padding:6px 4px;
    color:#a0a0a0;
    text-decoration:none;
    font-size:0.58rem;
    font-weight:600;
    font-family:'Poppins',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.4px;
    border:none;
    background:none;
    cursor:pointer;
    transition:all 0.3s ease;
    position:relative;
}
.db-bn-tab i{
    font-size:1.3rem;
    transition:transform 0.3s ease;
    line-height:1;
}
.db-bn-tab:hover:not(.active){ color:var(--primary); }
.db-bn-tab.active,
.db-bn-tab:hover{ color:var(--primary); text-decoration:none; }
.db-bn-tab.active i,
.db-bn-tab:hover i{ transform:translateY(-3px); }

/* Orange dot indicator at top — 28px wide, rounded bottom corners */
.db-bn-tab.active::before{
    content:'';
    position:absolute;
    top:0;
    width:28px;height:3px;
    background:linear-gradient(90deg,var(--primary),#ff8534);
    border-radius:0 0 6px 6px;
}

/* Notification badge */
.bn-dot{
    position:absolute;top:3px;right:calc(50% - 18px);
    background:var(--primary);color:white;
    font-size:0.52rem;font-weight:800;
    min-width:16px;height:16px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    padding:0 4px;border:1.5px solid white;
}

/* ── LOGOUT CONFIRM OVERLAY ───────────────────────────── */
.logout-overlay{
    display:none;position:fixed;inset:0;z-index:9999;
    align-items:center;justify-content:center;
    background:rgba(10,35,81,0.6);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    animation:fadeOverlay 0.25s ease;
}
.logout-overlay.show{display:flex;}
@keyframes fadeOverlay{from{opacity:0}to{opacity:1}}

.logout-card{
    background:white;border-radius:24px;
    padding:40px 36px;text-align:center;
    max-width:360px;width:90%;
    animation:popUp 0.3s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow:0 30px 80px rgba(0,0,0,0.25);
    position:relative;overflow:hidden;
}
.logout-card::before{
    content:'';position:absolute;
    top:-60px;left:50%;transform:translateX(-50%);
    width:180px;height:180px;
    background:radial-gradient(circle,rgba(230,93,10,0.1),transparent 70%);
    border-radius:50%;pointer-events:none;
}
@keyframes popUp{
    from{opacity:0;transform:scale(0.82) translateY(20px)}
    to{opacity:1;transform:scale(1) translateY(0)}
}

.logout-icon-wrap{
    width:72px;height:72px;margin:0 auto 20px;
    background:linear-gradient(135deg,rgba(230,93,10,0.12),rgba(255,133,52,0.08));
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:2rem;color:var(--primary);position:relative;z-index:1;
}
.logout-title{font-size:1.2rem;font-weight:800;color:var(--text);margin-bottom:8px;}
.logout-subtitle{font-size:0.85rem;color:var(--muted);line-height:1.6;margin-bottom:28px;}

.logout-actions{display:flex;gap:12px;justify-content:center;}
.btn-logout-cancel{
    flex:1;padding:13px 20px;border-radius:50px;
    border:2px solid var(--border);background:white;
    color:var(--muted);font-family:'Poppins',sans-serif;
    font-weight:700;font-size:0.87rem;cursor:pointer;transition:var(--ease);
}
.btn-logout-cancel:hover{border-color:var(--muted);color:var(--text);}
.btn-logout-confirm{
    flex:1;padding:13px 20px;border-radius:50px;
    border:none;
    background:linear-gradient(135deg,#ef4444,#dc2626);
    color:white;font-family:'Poppins',sans-serif;
    font-weight:700;font-size:0.87rem;cursor:pointer;transition:var(--ease);
    box-shadow:0 6px 18px rgba(239,68,68,0.3);
    display:flex;align-items:center;justify-content:center;gap:7px;
}
.btn-logout-confirm:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(239,68,68,0.42);}

/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width:991px){
    .db-sidebar,.sidebar-toggle-btn{display:none!important;}
    .db-main{margin-left:0!important;padding:18px 14px;}
    body{padding-bottom:64px;}   /* match nav height exactly */
    .db-bn{display:block;}       /* show the nav container */
    .db-bn-inner{display:flex;}  /* flex the inner row */
    .db-user-chip{display:none!important;}
    .db-menu-btn span{display:none;}
}
@media (max-width:576px){
    .db-main{padding:14px 12px;}
    .db-header{padding:0 14px;}
    .db-brand-name{font-size:1rem;}
    .page-title{font-size:1.25rem;}
    .logout-card{padding:30px 22px;}
    /* Slightly smaller nav items on very small phones */
    .db-bn-tab{font-size:0.54rem;}
    .db-bn-tab i{font-size:1.2rem;}
}