:root {
    --ashmi-blue: #0072bc;
    --ashmi-orange: #f36f21;
    --surface: #ffffff;
    --background: #f8fafc;
    --text-main: #1e293b;
    --text-sub: #64748b;
    --border: #e2e8f0;
    --sidebar-width: 260px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    background: var(--background); 
    color: var(--text-main);
    overflow: hidden;
}

.app-shell { display: flex; height: 100vh; }

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background: #ffffff;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.logo-img { width: 100%; max-height: 80px; object-fit: contain; margin-bottom: 40px; }

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--text-sub);
    border-radius: 12px;
    font-weight: 600;
    transition: 0.2s;
    margin-bottom: 6px;
}

.nav-link.active {
    background: #eff6ff;
    color: var(--ashmi-blue);
}

.nav-link:hover:not(.active) { background: #f1f5f9; color: var(--text-main); }

/* Top Bar Customization */
.workspace { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

.top-bar {
    /*height: 80px;*/
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border-bottom: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.top-bar-left { display: flex; align-items: center; gap: 20px; }

.search-wrapper {
    background: #f1f5f9;
    padding: 10px 18px;
    border-radius: 12px;
    width: 300px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-wrapper input { background: transparent; border: none; outline: none; font-size: 0.9rem; width: 100%; }

/* Professional Dept Selector */
.dept-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--border);
    padding: 10px 16px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.dept-selector select {
    border: none;
    outline: none;
    font-weight: 700;
    color: var(--ashmi-blue);
    cursor: pointer;
    font-family: inherit;
}

.action-stack { display: flex; align-items: center; gap: 24px; }
.divider { width: 1px; height: 30px; background: var(--border); }

.profile-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 12px;
}

.profile-trigger:hover { background: #f8fafc; }
.avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ashmi-blue); }
.p-name { display: block; font-weight: 700; font-size: 0.9rem; }
.p-role { display: block; font-size: 0.75rem; color: var(--text-sub); }

/* View Content */
.view-content { padding: 40px; max-width: 1500px; margin: 0 auto; width: 100%; }
.view-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; }
.view-header h1 { font-size: 2.2rem; font-weight: 800; letter-spacing: -1px; color: var(--ashmi-blue); }

/* Premium Export & Dropdowns */
.header-actions { display: flex; gap: 14px; }

.btn-export {
    background: var(--ashmi-orange);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 14px rgba(243, 111, 33, 0.2);
}

.btn-export:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(243, 111, 33, 0.3); }

.custom-select-wrapper { position: relative; }
.date-select {
    appearance: none;
    background: var(--surface);
    border: 2px solid var(--border);
    padding: 12px 40px 12px 20px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-main);
}
.custom-select-wrapper i { position: absolute; right: 18px; top: 18px; font-size: 0.8rem; color: var(--text-sub); pointer-events: none; }

/* Bento Grid */
.bento-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 32px; }
.stat-card { background: var(--surface); padding: 28px; border-radius: 24px; border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
.stat-card.accent { border-top: 4px solid var(--ashmi-orange); }
.stat-card .label { font-size: 0.8rem; color: var(--text-sub); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.stat-card h2 { font-size: 2.2rem; margin-top: 12px; font-weight: 800; }

.progress-bar { width: 100%; height: 8px; background: #f1f5f9; border-radius: 10px; margin-top: 15px; }
.progress-bar .fill { height: 100%; background: var(--ashmi-blue); border-radius: 10px; }

.trend.positive { color: #10b981; font-weight: 700; font-size: 0.9rem; }

.analytics-row { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.chart-card { background: var(--surface); padding: 28px; border-radius: 28px; border: 1px solid var(--border); }
.canvas-wrapper { height: 350px; position: relative; margin-top: 20px; }

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}
.animate-text { animation: slideIn 0.4s ease forwards; }