/* =========================================
   MATERIAL DESIGN UI GLOBAL STYLES
   ========================================= */
:root {
    --primary-color: #35abe5;
    --secondary-color: #6c757d;
    --success-color: #82b704;
    --accent-dark: #3f484d;
    --accent-light: #ffffff;
    --bg-color: #f0f2f5; 
    --surface-color: #ffffff;
    --text-main: #202124;
    --text-muted: #5f6368;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* =========================================
   CUSTOM UTILITY CLASSES
   ========================================= */
/* Font Sizes */
.fs-8 { font-size: 8px !important; }
.fs-10 { font-size: 10px !important; }
.fs-11 { font-size: 11px !important; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.fs-14 { font-size: 14px !important; }
.fs-15 { font-size: 15px !important; }
.fs-16 { font-size: 16px !important; }
.fs-18 { font-size: 18px !important; }
.fs-20 { font-size: 20px !important; }
.fs-24 { font-size: 24px !important; }
.fs-32 { font-size: 32px !important; }
.xsmall { font-size: 0.75rem !important; }
.xxsmall { font-size: 0.65rem !important; }

/* Dimensions */
.w-10 { width: 10% !important; }
.w-20 { width: 20% !important; }
.w-30 { width: 30% !important; }
.w-40 { width: 40% !important; }
.w-50 { width: 50% !important; }
.w-60 { width: 60% !important; }
.w-70 { width: 70% !important; }
.w-80 { width: 80% !important; }
.w-90 { width: 90% !important; }
.w-100 { width: 100% !important; }

/* Custom Spacing Scale 6 (approx 4rem / 64px) */
.pl-6, .ps-6 { padding-left: 4rem !important; }
.pr-6, .pe-6 { padding-right: 4rem !important; }
.pt-6 { padding-top: 4rem !important; }
.pb-6 { padding-bottom: 4rem !important; }
.px-6 { padding-left: 4rem !important; padding-right: 4rem !important; }
.py-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }

/* =========================================
   BOOTSTRAP THEME OVERRIDES
   ========================================= */
/* Primary */
.text-primary { color: var(--primary-color) !important; }
.bg-primary { background-color: var(--primary-color) !important; color: #ffffff !important; }
.border-primary { border-color: var(--primary-color) !important; }
.btn-primary { 
    background-color: var(--primary-color) !important; 
    border-color: var(--primary-color) !important; 
    color: #ffffff !important;
}
.badge.bg-primary { color: #ffffff !important; }
.badge.bg-primary.text-primary { background-color: rgba(53, 171, 229, 0.1) !important; color: var(--primary-color) !important; }

.btn-outline-primary { 
    color: var(--primary-color) !important; 
    border-color: var(--primary-color) !important; 
}
.btn-outline-primary:hover { 
    background-color: var(--primary-color) !important; 
    color: #ffffff !important; 
}

/* Secondary */
.text-secondary { color: var(--secondary-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; color: #ffffff !important; }
.border-secondary { border-color: var(--secondary-color) !important; }
.btn-secondary { 
    background-color: var(--secondary-color) !important; 
    border-color: var(--secondary-color) !important; 
    color: #ffffff !important;
}
.badge.bg-secondary { color: #ffffff !important; }
.badge.bg-secondary.text-secondary { background-color: rgba(108, 117, 125, 0.1) !important; color: var(--secondary-color) !important; }

.btn-outline-secondary { 
    color: var(--secondary-color) !important; 
    border-color: var(--secondary-color) !important; 
}
.btn-outline-secondary:hover { 
    background-color: var(--secondary-color) !important; 
    color: #ffffff !important; 
}

/* Success */
.text-success { color: var(--success-color) !important; }
.bg-success { background-color: var(--success-color) !important; color: #ffffff !important; }
.border-success { border-color: var(--success-color) !important; }
.btn-success { 
    background-color: var(--success-color) !important; 
    border-color: var(--success-color) !important; 
    color: #ffffff !important;
}
.badge.bg-success { color: #ffffff !important; }
.badge.bg-success.text-success { background-color: rgba(130, 183, 4, 0.1) !important; color: var(--success-color) !important; }

.btn-outline-success { 
    color: var(--success-color) !important; 
    border-color: var(--success-color) !important; 
}
.btn-outline-success:hover { 
    background-color: var(--success-color) !important; 
    color: #ffffff !important; 
}

/* =========================================
   RESPONSIVE SIDEBAR LAYOUT
   ========================================= */
#wrapper {
    display: flex;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}

.sidebar {
    width: 384px; 
    background-color: var(--surface-color);
    transition: margin 0.3s ease-out;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    box-shadow: 1px 0 3px rgba(60,64,67,0.1);
}

.sidebar-heading {
    padding: 1.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-dark);
    letter-spacing: -0.5px;
}

.sidebar-link {
    padding: 12px 20px;
    margin: 4px 16px;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    font-weight: 500;
    transition: all 0.2s;
}

.sidebar-link i {
    width: 24px;
    margin-right: 12px;
    font-size: 1.2rem;
    text-align: center;
}

.sidebar-link:hover {
    background-color: rgba(53, 171, 229, 0.08);
    color: var(--primary-color);
}

.sidebar-link.active {
    background-color: rgba(53, 171, 229, 0.15);
    color: var(--primary-color);
    font-weight: 700;
}

/* =========================================
   MATERIAL COMPONENTS
   ========================================= */
.material-card {
    background-color: var(--surface-color);
    border-radius: 16px;
    border: none;
    box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.material-card.interactive:hover {
    box-shadow: 0 4px 8px 3px rgba(60,64,67,0.15), 0 1px 3px rgba(60,64,67,0.3);
    transform: translateY(-2px);
}

.btn-momus-blue {
    background-color: #35abe5 !important;
    color: white !important;
    border: none;
    transition: all 0.3s ease;
    border-radius: 24px;
    padding: 8px 20px;
}

.btn-momus-blue:hover {
    background-color: #82b704 !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(130, 183, 4, 0.3);
}

.btn-momus-green {
    background-color: #82b704 !important;
    color: white !important;
    border: none;
    transition: all 0.3s ease;
    border-radius: 24px;
    padding: 8px 20px;
}

.btn-momus-green:hover {
    background-color: #35abe5 !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(53, 171, 229, 0.3);
}

.material-input {
    border-radius: 8px;
    border: 1px solid #dadce0;
    padding: 12px 16px;
    transition: border-color 0.2s;
}

.material-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(53, 171, 229, 0.2);
    outline: none;
}

/* Load Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.anim-load {
    animation: fadeIn 0.4s ease-out forwards;
    opacity: 0;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }