/* =============================================
   AJC Admin - Custom Styles
   ============================================= */

/* Global Styles */
:root {
    --primary-color: #0d6efd;
    --secondary-color: #6c757d;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f8f9fa;
}

/* ============================================= 
   Login Page Styles
   ============================================= */

/* ========================================
   PARTICLE BACKGROUND CONTAINER
   ======================================== */
#particles-js {
    position: fixed;           /* Fixed position untuk background penuh */
    top: 0;
    left: 0;
    width: 100%;              /* Full width */
    height: 100%;             /* Full height */
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%); /* Dark blue to purple gradient */
    z-index: 1;               /* Di belakang content */
}

/* ========================================
   LOGIN PAGE BODY
   ======================================== */
.login-page {
    position: relative;       /* Untuk z-index positioning */
    min-height: 100vh;        /* Full viewport height */
    overflow-x: hidden;       /* Prevent horizontal scroll */
}

/* ========================================
   LOGIN CONTAINER
   Z-index 10 untuk tampil di atas particles
   ======================================== */
.login-container {
    position: relative;       /* Untuk z-index */
    z-index: 10;             /* Di atas particles background */
}

/* ========================================
   LOGIN CARD (WHITE)
   Background putih untuk kontras
   ======================================== */
.login-page .card {
    border: none;                      /* Hapus default border */
    border-radius: 15px;              /* Rounded corners (15px) - EDIT DI SINI untuk ubah corner */
    overflow: hidden;                 /* Crop content keluar border-radius */
    background: #ffffff;              /* White background - EDIT DI SINI untuk ubah warna card */
}

/* ========================================
   CARD BODY PADDING
   ======================================== */
.login-page .card-body {
    background: #fff;                 /* White background */
    /* p-5 dari Bootstrap = padding: 3rem (48px) di semua sisi */
    /* Untuk edit padding, ganti class p-5 di HTML atau tambah padding: XXpx; di sini */
}

/* ========================================
   LOGO LOGIN (ic_ajc.png)
   ======================================== */
.logo-login {
    width: 90px;                     /* Logo width - EDIT DI SINI untuk ubah ukuran */
    height: auto;                    /* Maintain aspect ratio */
    margin-bottom: 1rem;             /* Space ke title (16px) - EDIT DI SINI */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); /* Subtle shadow - EDIT DI SINI untuk ganti shadow */
}

/* ========================================
   TITLE TEXT (AJC Admin)
   ======================================== */
.login-page h2 {
    font-size: 1.8rem;               /* Title size (28.8px) - EDIT DI SINI untuk ubah ukuran */
    margin-bottom: 0.5rem;           /* Space ke subtitle (8px) - EDIT DI SINI */
    /* Color: text-primary dari Bootstrap (blue) */
}

/* ========================================
   SUBTITLE TEXT (Please login to continue)
   ======================================== */
.login-page .text-muted {
    /* Color: text-muted dari Bootstrap (gray #6c757d) */
    /* Font size: inherit dari parent */
}

/* ========================================
   FORM INPUT FIELDS
   ======================================== */
.login-page .form-control {
    padding: 0.75rem 1rem;           /* Padding inside input: 12px vertical, 16px horizontal - EDIT DI SINI */
    border-radius: 8px;              /* Rounded corners (8px) - EDIT DI SINI */
    border: 1px solid #dee2e6;       /* Border color (light gray) - EDIT DI SINI */
    transition: all 0.3s ease;       /* Smooth transition untuk hover/focus */
    font-size: 1rem;                 /* Text size inside input (16px) */
}

/* Input field saat di-focus (diklik) */
.login-page .form-control:focus {
    border-color: var(--primary-color);                    /* Border color jadi blue */
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);   /* Glow effect (blue) - EDIT DI SINI untuk ganti warna */
    outline: none;                                         /* Hapus default outline */
}

/* ========================================
   LOGIN BUTTON
   ======================================== */
.login-page .btn-primary {
    padding: 0.75rem 1.5rem;         /* Padding button: 12px vertical, 24px horizontal - EDIT DI SINI */
    border-radius: 8px;              /* Rounded corners (8px) - EDIT DI SINI */
    font-weight: 600;                /* Bold text (semi-bold) */
    transition: all 0.3s ease;       /* Smooth animation */
    font-size: 1rem;                 /* Button text size (16px) - EDIT DI SINI */
    /* Background color: Bootstrap primary blue (#0d6efd) */
}

/* Button saat di-hover (mouse over) */
.login-page .btn-primary:hover {
    transform: translateY(-2px);                          /* Naik 2px ke atas */
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);     /* Shadow biru - EDIT DI SINI untuk ganti warna/size */
}

/* ========================================
   FOOTER TEXT
   ======================================== */
.login-page .text-white {
    color: #ffffff !important;       /* White text - EDIT DI SINI untuk ganti warna */
    /* Font size: small dari HTML (<small> tag) */
}

/* ============================================= 
   Dashboard Page Styles - Modern Sidebar Layout
   ============================================= */
.dashboard-page {
    background: #f8f9fa;          /* Light gray background - EDIT DI SINI */
    min-height: 100vh;
    overflow-x: hidden;           /* Prevent horizontal scroll */
}

/* ========================================
   SIDEBAR STYLES (Desktop & Mobile)
   White background dengan shadow untuk modern look
   ======================================== */
.sidebar {
    position: fixed;              /* Fixed position di desktop */
    top: 0;
    left: 0;
    width: 260px;                 /* Sidebar width - EDIT DI SINI untuk ubah lebar */
    height: 100vh;                /* Full height */
    background: #ffffff;          /* White background - EDIT DI SINI */
    box-shadow: 2px 0 8px rgba(0,0,0,0.05); /* Subtle shadow - EDIT DI SINI */
    z-index: 1000;                /* Di atas content */
    transition: transform 0.3s ease; /* Smooth slide animation */
    overflow-y: auto;             /* Scroll kalau menu banyak */
}

/* ========================================
   SIDEBAR HEADER (Logo + Title)
   ======================================== */
.sidebar-header {
    padding: 1.5rem 1.5rem 1rem;  /* Padding header - EDIT DI SINI */
    text-align: center;
    border-bottom: 1px solid #e9ecef; /* Border bottom - EDIT DI SINI */
}

.sidebar-logo {
    width: 45px;                  /* Logo width - EDIT DI SINI */
    height: auto;
    margin-bottom: 0.75rem;       /* Space ke title - EDIT DI SINI */
}

.sidebar-title {
    font-size: 1.1rem;            /* Title size - EDIT DI SINI */
    font-weight: 600;             /* Semi-bold */
    color: #0d6efd;               /* Primary blue - EDIT DI SINI */
    margin: 0;
}

/* ========================================
   SIDEBAR MENU
   ======================================== */
.sidebar-menu {
    list-style: none;
    padding: 1rem 0;              /* Padding menu list - EDIT DI SINI */
    margin: 0;
}

.sidebar-item {
    margin: 0;                    /* No margin between items */
}

.sidebar-link {
    display: flex;
    align-items: center;
    padding: 0.875rem 1.5rem;     /* Padding menu item - EDIT DI SINI */
    color: #6c757d;               /* Gray text - EDIT DI SINI */
    text-decoration: none;
    transition: all 0.2s ease;    /* Smooth transition */
    border-left: 3px solid transparent; /* Left border (hidden by default) */
    font-size: 0.95rem;           /* Font size - EDIT DI SINI */
}

.sidebar-link i {
    font-size: 1.2rem;            /* Icon size - EDIT DI SINI */
    margin-right: 0.75rem;        /* Space between icon and text - EDIT DI SINI */
    width: 24px;                  /* Fixed width untuk alignment */
}

/* Sidebar Link Hover State */
.sidebar-link:hover {
    background: #f8f9fa;          /* Light gray hover background - EDIT DI SINI */
    color: #0d6efd;               /* Primary blue - EDIT DI SINI */
}

/* Sidebar Link Active State */
.sidebar-item.active .sidebar-link {
    background: #e7f3ff;          /* Light blue background - EDIT DI SINI */
    color: #0d6efd;               /* Primary blue - EDIT DI SINI */
    border-left-color: #0d6efd;  /* Blue left border - EDIT DI SINI */
    font-weight: 600;             /* Bold text */
}

/* Sidebar submenu container */
.sidebar-item.has-submenu .sidebar-toggle {
    width: 100%;                  /* Full width click area untuk toggle submenu */
    background: none;
    border: none;
    text-align: left;
    padding: 0.875rem 1.5rem;     /* Padding toggle - EDIT DI SINI */
    color: #6c757d;               /* Gray text - EDIT DI SINI */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sidebar-item.has-submenu .sidebar-toggle:hover {
    background: #f8f9fa;          /* Hover background - EDIT DI SINI */
    color: #0d6efd;               /* Hover color - EDIT DI SINI */
}

.sidebar-item.has-submenu.submenu-open .sidebar-toggle {
    color: #0d6efd;               /* Active color - EDIT DI SINI */
    font-weight: 600;
}

.sidebar-caret {
    margin-left: auto;            /* Dorong icon caret ke kanan */
    transition: transform 0.2s ease;
}

.sidebar-item.has-submenu.submenu-open .sidebar-caret {
    transform: rotate(180deg);    /* Rotasi caret saat submenu terbuka - EDIT DI SINI */
}

.sidebar-submenu {
    list-style: none;
    margin: 0;
    padding: 0 0 0 2.75rem;       /* Indent submenu - EDIT DI SINI */
    display: none;
}

.sidebar-item.has-submenu.submenu-open .sidebar-submenu {
    display: block;               /* Tampilkan submenu saat open */
}

.sidebar-sublink {
    display: block;
    padding: 0.5rem 1.5rem 0.5rem 0; /* Padding link submenu - EDIT DI SINI */
    color: #6c757d;               /* Submenu text color - EDIT DI SINI */
    text-decoration: none;
    font-size: 0.9rem;            /* Submenu font size - EDIT DI SINI */
    transition: color 0.2s ease;
}

.sidebar-sublink:hover {
    color: #0d6efd;               /* Hover color - EDIT DI SINI */
}

.sidebar-sublink.active {
    color: #0d6efd;               /* Active submenu color - EDIT DI SINI */
    font-weight: 600;
}

/* ========================================
   SIDEBAR BACKDROP (Mobile Only)
   Dark overlay saat sidebar open di mobile
   ======================================== */
.sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black - EDIT DI SINI */
    z-index: 999;                 /* Di bawah sidebar, di atas content */
    opacity: 0;                   /* Hidden by default */
    visibility: hidden;
    transition: all 0.3s ease;
}

.sidebar-backdrop.active {
    opacity: 1;                   /* Show backdrop */
    visibility: visible;
}

/* ========================================
   MAIN CONTENT WRAPPER
   Adjusted untuk accommodate sidebar
   ======================================== */
.main-content {
    margin-left: 260px;           /* Push content ke kanan (sama dengan sidebar width) - EDIT DI SINI */
    min-height: 100vh;
    background: #f8f9fa;          /* Light gray background - EDIT DI SINI */
    transition: margin-left 0.3s ease;
}

/* ========================================
   TOP NAVBAR
   ======================================== */
.top-navbar {
    background: #ffffff;          /* White background - EDIT DI SINI */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow - EDIT DI SINI */
    padding: 1rem 1.5rem;         /* Padding navbar - EDIT DI SINI */
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Hamburger Button (Hidden di desktop, visible di mobile) */
.hamburger-btn {
    display: none;                /* Hidden di desktop - EDIT di responsive section */
    background: none;
    border: none;
    font-size: 1.5rem;            /* Icon size - EDIT DI SINI */
    color: #6c757d;
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.2s ease;
}

.hamburger-btn:hover {
    color: #0d6efd;               /* Primary blue on hover */
}

/* Navbar Logo (Hidden di desktop, visible di mobile) */
.navbar-logo {
    display: none;                /* Hidden di desktop - EDIT di responsive section */
    align-items: center;
    gap: 0.5rem;
}

.navbar-logo img {
    width: 30px;                  /* Small logo - EDIT DI SINI */
    height: auto;
}

.navbar-logo span {
    font-size: 1.1rem;
    font-weight: 600;
    color: #0d6efd;
}

/* ========================================
   USER DROPDOWN
   ======================================== */
.navbar-user {
    margin-left: auto;            /* Push ke kanan */
}

.user-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;                  /* Space between elements - EDIT DI SINI */
    background: none;
    border: 1px solid #dee2e6;    /* Light border - EDIT DI SINI */
    border-radius: 8px;           /* Rounded corners - EDIT DI SINI */
    padding: 0.5rem 1rem;         /* Padding button - EDIT DI SINI */
    color: #495057;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-dropdown-btn:hover {
    background: #f8f9fa;          /* Light gray hover */
    border-color: #0d6efd;        /* Blue border on hover */
}

.user-dropdown-btn i:first-child {
    font-size: 1.25rem;           /* User icon size - EDIT DI SINI */
}

.user-dropdown-btn i:last-child {
    font-size: 0.875rem;          /* Chevron size - EDIT DI SINI */
}

/* ========================================
   PAGE CONTENT AREA
   ======================================== */
.page-content {
    padding: 2rem;                /* Padding content area - EDIT DI SINI */
}

/* Page Header */
.page-header {
    margin-bottom: 2rem;          /* Space ke content - EDIT DI SINI */
}

.page-title {
    font-size: 1.75rem;           /* Title size - EDIT DI SINI */
    font-weight: 700;             /* Bold */
    color: #212529;               /* Dark gray - EDIT DI SINI */
    margin-bottom: 0.25rem;
}

.page-subtitle {
    font-size: 1rem;              /* Subtitle size - EDIT DI SINI */
    color: #6c757d;               /* Gray - EDIT DI SINI */
    margin: 0;
}

/* ========================================
   STATS CARDS
   ======================================== */
.stats-card {
    display: flex;
    align-items: center;
    background: #ffffff;          /* White background - EDIT DI SINI */
    border-radius: 12px;          /* Rounded corners - EDIT DI SINI */
    padding: 1.5rem;              /* Card padding - EDIT DI SINI */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle shadow - EDIT DI SINI */
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;    /* Light border - EDIT DI SINI */
}

.stats-card:hover {
    transform: translateY(-4px);  /* Lift up on hover */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Bigger shadow - EDIT DI SINI */
}

.stats-icon {
    width: 60px;                  /* Icon container size - EDIT DI SINI */
    height: 60px;
    border-radius: 12px;          /* Rounded corners - EDIT DI SINI */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.25rem;        /* Space ke content - EDIT DI SINI */
    flex-shrink: 0;               /* Don't shrink */
}

.stats-icon i {
    font-size: 1.75rem;           /* Icon size - EDIT DI SINI */
    color: #ffffff;               /* White icon */
}

.stats-content {
    flex: 1;
}

.stats-value {
    font-size: 1.75rem;           /* Value size - EDIT DI SINI */
    font-weight: 700;             /* Bold */
    color: #212529;               /* Dark gray - EDIT DI SINI */
    margin-bottom: 0.25rem;
}

.stats-label {
    font-size: 0.875rem;          /* Label size - EDIT DI SINI */
    color: #6c757d;               /* Gray - EDIT DI SINI */
    margin: 0;
}

/* ========================================
   WELCOME CARD (Original Purple - Not Used)
   ======================================== */
.welcome-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Purple gradient - EDIT DI SINI */
    border: none;
    border-radius: 12px;          /* Rounded corners - EDIT DI SINI */
    color: #ffffff;               /* White text */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.welcome-card .card-body {
    padding: 2rem;                /* Card padding - EDIT DI SINI */
}

.welcome-card h3 {
    color: #ffffff;               /* White heading */
}

.welcome-card p {
    color: rgba(255,255,255,0.9); /* Slightly transparent white */
}

/* ========================================
   WELCOME CARD WHITE (New Style)
   Background putih dengan border dan shadow seperti stats cards
   ======================================== */
.welcome-card-white {
    background: #ffffff;          /* White background - EDIT DI SINI */
    border: 1px solid #e9ecef;    /* Light border - EDIT DI SINI */
    border-radius: 12px;          /* Rounded corners - EDIT DI SINI */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle shadow - EDIT DI SINI */
}

.welcome-card-white .card-body {
    padding: 2rem;                /* Card padding - EDIT DI SINI */
}

/* ========================================
   COMING SOON CARD
   ======================================== */
.coming-soon-card {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.coming-soon-badge {
    margin: 1rem 0;               /* Space around badge - EDIT DI SINI */
}

.coming-soon-badge .badge {
    font-size: 0.875rem;          /* Badge text size - EDIT DI SINI */
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ========================================
   UPLOAD PROMO CARD
   Styling untuk form upload promo
   ======================================== */
.upload-promo-card {
    background: #ffffff;          /* White background - EDIT DI SINI */
    border: 1px solid #e9ecef;    /* Light border - EDIT DI SINI */
    border-radius: 12px;          /* Rounded corners - EDIT DI SINI */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle shadow - EDIT DI SINI */
}

.upload-promo-card .card-body {
    padding: 2rem;                /* Card padding - EDIT DI SINI */
}

.upload-promo-card h2 {
    color: #212529;               /* Dark heading - EDIT DI SINI */
    font-size: 1.75rem;           /* Heading size - EDIT DI SINI */
}

/* Form label styling */
.upload-promo-card .form-label {
    color: #495057;               /* Label color - EDIT DI SINI */
    margin-bottom: 0.5rem;        /* Space ke input - EDIT DI SINI */
}

/* Form input styling */
.upload-promo-card .form-control,
.upload-promo-card .form-select {
    border-radius: 8px;           /* Rounded corners - EDIT DI SINI */
    border: 1px solid #dee2e6;    /* Border color - EDIT DI SINI */
    padding: 0.75rem 1rem;        /* Input padding - EDIT DI SINI */
    font-size: 1rem;              /* Text size - EDIT DI SINI */
    transition: all 0.3s ease;    /* Smooth transition */
}

.upload-promo-card .form-control:focus,
.upload-promo-card .form-select:focus {
    border-color: var(--primary-color);                    /* Blue border on focus */
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);    /* Blue glow - EDIT DI SINI */
    outline: none;
}

/* Submit button styling */
.upload-promo-card .btn-primary {
    padding: 0.875rem 1.5rem;     /* Button padding - EDIT DI SINI */
    font-size: 1.1rem;            /* Button text size - EDIT DI SINI */
    font-weight: 600;             /* Semi-bold text */
    border-radius: 8px;           /* Rounded corners - EDIT DI SINI */
    transition: all 0.3s ease;    /* Smooth animation */
}

.upload-promo-card .btn-primary:hover {
    transform: translateY(-2px);                          /* Lift up on hover */
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);      /* Blue shadow - EDIT DI SINI */
}

/* ========================================
   PROMO MANAGE TABLE STYLES
   ======================================== */
.promo-manage-card {
    background: #ffffff;          /* Background card daftar promo - EDIT DI SINI */
    border: 1px solid #e9ecef;    /* Border card - EDIT DI SINI */
    border-radius: 12px;          /* Corner radius card - EDIT DI SINI */
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); /* Soft shadow card - EDIT DI SINI */
}

.promo-manage-card .card-body {
    padding: 2rem;                /* Padding card body - EDIT DI SINI */
}

.promo-thumbnail-wrapper {
    width: 72px;                  /* Lebar thumbnail promo - EDIT DI SINI */
    height: 48px;                 /* Tinggi thumbnail - EDIT DI SINI */
    border-radius: 6px;           /* Rounded thumbnail - EDIT DI SINI */
    overflow: hidden;
    border: 1px solid #e9ecef;    /* Border thumbnail - EDIT DI SINI */
    background: #f8f9fa;          /* Background placeholder - EDIT DI SINI */
}

.promo-thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;            /* Crop gambar agar cover area - EDIT DI SINI */
}

.promo-manage-card table td {
    vertical-align: middle;       /* Align content tengah vertikal - EDIT DI SINI */
}

.promo-manage-card .badge {
    font-size: 0.75rem;           /* Ukuran badge status - EDIT DI SINI */
    padding: 0.35rem 0.75rem;     /* Padding badge - EDIT DI SINI */
}

/* ========================================
   GENERAL CARD STYLES
   ======================================== */
.card {
    border-radius: 12px;          /* Rounded corners - EDIT DI SINI */
    border: 1px solid #e9ecef;    /* Light border - EDIT DI SINI */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.card-body {
    padding: 1.5rem;              /* Card body padding - EDIT DI SINI */
}

/* ============================================= 
   Responsive Adjustments
   ============================================= */

/* ========================================
   TABLET & MOBILE (max-width: 992px)
   Breakpoint untuk sidebar jadi overlay
   ======================================== */
@media (max-width: 992px) {
    /* Sidebar jadi overlay (slide dari kiri) */
    .sidebar {
        transform: translateX(-100%); /* Hidden by default (slide ke kiri) */
    }
    
    /* Sidebar active state (visible) */
    .sidebar.active {
        transform: translateX(0);     /* Slide in from left */
    }
    
    /* Main content full width (no margin) */
    .main-content {
        margin-left: 0;               /* No left margin di mobile */
    }
    
    /* Show hamburger button */
    .hamburger-btn {
        display: block;               /* Visible di mobile */
    }
    
    /* Show navbar logo */
    .navbar-logo {
        display: flex;                /* Visible di mobile */
    }
    
    /* Prevent body scroll saat sidebar open */
    body.sidebar-open {
        overflow: hidden;
    }
}

/* ========================================
   MOBILE (max-width: 768px)
   Adjust spacing dan font sizes
   ======================================== */
@media (max-width: 768px) {
    /* Login Page Adjustments */
    .login-page h2 {
        font-size: 1.5rem;            /* Smaller title - EDIT DI SINI */
    }
    
    .login-page .card-body {
        padding: 2rem !important;     /* Less padding - EDIT DI SINI */
    }
    
    .logo-login {
        width: 70px;                  /* Smaller logo - EDIT DI SINI */
    }
    
    /* Dashboard Page Adjustments */
    .page-content {
        padding: 1.5rem;              /* Less padding - EDIT DI SINI */
    }
    
    .page-title {
        font-size: 1.5rem;            /* Smaller title - EDIT DI SINI */
    }
    
    .page-subtitle {
        font-size: 0.875rem;          /* Smaller subtitle - EDIT DI SINI */
    }
    
    /* Stats Cards Adjustments */
    .stats-card {
        padding: 1.25rem;             /* Less padding - EDIT DI SINI */
    }
    
    .stats-icon {
        width: 50px;                  /* Smaller icon - EDIT DI SINI */
        height: 50px;
    }
    
    .stats-icon i {
        font-size: 1.5rem;            /* Smaller icon - EDIT DI SINI */
    }
    
    .stats-value {
        font-size: 1.5rem;            /* Smaller value - EDIT DI SINI */
    }
    
    /* Welcome Card Adjustments */
    .welcome-card .card-body {
        padding: 1.5rem;              /* Less padding - EDIT DI SINI */
    }
    
    .welcome-card h3 {
        font-size: 1.25rem;           /* Smaller heading - EDIT DI SINI */
    }
    
    /* User Dropdown - Hide text, show only icon */
    .user-dropdown-btn span {
        display: none;                /* Hide username text di mobile kecil */
    }
    
    .user-dropdown-btn i:last-child {
        display: none;                /* Hide chevron di mobile kecil */
    }
}

/* ========================================
   SMALL MOBILE (max-width: 576px)
   Further adjustments untuk layar kecil
   ======================================== */
@media (max-width: 576px) {
    /* Login Page */
    .login-page .col-md-5 {
        padding: 1rem;                /* Less padding - EDIT DI SINI */
    }
    
    /* Dashboard Page */
    .page-content {
        padding: 1rem;                /* Minimal padding - EDIT DI SINI */
    }
    
    .top-navbar {
        padding: 0.75rem 1rem;        /* Less padding - EDIT DI SINI */
    }
    
    /* Stats Cards - Stack vertically with less spacing */
    .stats-card {
        flex-direction: column;       /* Stack icon dan content vertically */
        text-align: center;
    }
    
    .stats-icon {
        margin-right: 0;              /* No right margin */
        margin-bottom: 1rem;          /* Space ke content - EDIT DI SINI */
    }
    
    /* Welcome Card - Hide emoji icon */
    .welcome-card .col-md-4 {
        display: none;                /* Hide emoji di mobile kecil */
    }
}

/* ============================================= 
   Utility Classes
   ============================================= */
.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075) !important;
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.175) !important;
}

/* Loading Animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner-border {
    animation: spin 0.75s linear infinite;
}