/* Common Styles - Kindergarten Management System */
body {
    font-family: 'Lexend', sans-serif;
    overflow-x: hidden;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Sidebar active state */
.sidebar-item-active {
    background-color: rgba(71, 153, 235, 0.1);
    color: #4799eb;
}

.active-nav {
    background-color: rgba(99, 166, 233, 1);
    color: white !important;
}

/* Soft shadows */
.soft-shadow {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.04), 0 4px 6px -2px rgba(0,0,0,0.02);
}

.soft-3d-shadow {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

/* Soft 3D button */
.soft-3d-button {
    box-shadow: 0 4px 0px 0px rgba(0, 0, 0, 0.1);
    transition: transform 0.1s, box-shadow 0.1s;
}

.soft-3d-button:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0px 0px rgba(0, 0, 0, 0.1);
}

/* Card animations */
.card-lift {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.card-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.student-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.student-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Soft 3D elements */
.soft-3d {
    box-shadow: 0px 10px 20px rgba(0,0,0,0.04), inset 0px -4px 0px rgba(0,0,0,0.05);
}

.soft-3d-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0px 15px 30px rgba(0,0,0,0.08), inset 0px -4px 0px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #e2e8f0;
    border-radius: 10px;
}

/* Chat bubbles */
.chat-bubble-left {
    border-bottom-left-radius: 4px;
}

.chat-bubble-right {
    border-bottom-right-radius: 4px;
}

/* Form card shadow */
.form-card {
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
}

.inner-glow-3d {
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 6px rgba(0,0,0,0.05);
}

/* Glass card */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Switch styles */
.switch-peer:checked ~ .switch-dot {
    transform: translateX(100%);
}

.switch-peer:checked ~ .switch-bg {
    background-color: #e2f9f5;
}

/* Play button gradient */
.soft-3d-play {
    background: linear-gradient(145deg, #e1bee7, #ce93d8);
    box-shadow: 4px 4px 8px #d1d1d1, -4px -4px 8px #ffffff;
}

/* Alien gradient */
.alien-gradient {
    background: linear-gradient(135deg, #4799eb 0%, #3b82f6 100%);
}

/* Handwritten style */
.handwritten {
    font-family: 'Lexend', sans-serif;
    font-style: italic;
}

/* Table wrapper for horizontal scroll */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Text overflow handling */
.text-break {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ===== MOBILE RESPONSIVENESS ===== */

/* Utility classes for responsive visibility */
.mobile-hide {
    display: block;
}

.mobile-only {
    display: none;
}

@media (max-width: 767px) {
    .mobile-hide {
        display: none !important;
    }
    .mobile-only {
        display: block !important;
    }
}

.tablet-hide {
    display: block;
}

.tablet-only {
    display: none;
}

@media (max-width: 1023px) {
    .tablet-hide {
        display: none !important;
    }
    .tablet-only {
        display: block !important;
    }
}

/* ===== TABLET BREAKPOINT (<=1023px) ===== */
@media (max-width: 1023px) {
    /* Hide ALL sidebars on tablet/mobile */
    aside.w-64,
    aside.w-72,
    aside.w-80,
    aside.w-20,
    aside[class*="w-64"],
    aside[class*="w-72"],
    aside[class*="w-80"],
    .sidebar-nav {
        display: none !important;
    }

    /* Remove left margin when sidebar is hidden */
    main.ml-64,
    main.ml-72,
    main.ml-80,
    .flex-1.ml-64,
    .flex-1.ml-72,
    [class*="ml-64"],
    [class*="ml-72"] {
        margin-left: 0 !important;
    }

    /* Right utility sidebars also hide */
    aside.w-80,
    .utility-sidebar {
        display: none !important;
    }

    /* Full width main content */
    main,
    main.flex-1 {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Header/Topbar flex wrap fix */
    header {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
    }

    header > div {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Hide desktop nav in header */
    header nav:not(.mobile-nav) {
        display: none;
    }

    /* Search bar adjustments */
    header label.min-w-40,
    header label.min-w-64,
    header .max-w-md,
    header .max-w-64 {
        min-width: 0;
        max-width: 100%;
        width: 100%;
        order: 10;
        flex: 1 1 100%;
        margin-top: 0.5rem;
    }

    /* Messaging layout: vertical stack */
    section.w-80,
    section.w-96,
    section[class*="w-80"],
    section[class*="w-96"],
    section[class*="lg:w-96"] {
        width: 100% !important;
        max-height: 280px;
        overflow-y: auto;
    }

    /* Grid adjustments for 2-column layouts */
    .lg\:grid-cols-2,
    .lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* Flex containers that need vertical stacking */
    .lg\:col-span-2,
    .lg\:col-span-3 {
        grid-column: span 1 !important;
    }
}

/* ===== MOBILE BREAKPOINT (<=767px) ===== */
@media (max-width: 767px) {
    /* Base padding reductions */
    .p-6 { padding: 1rem !important; }
    .p-8 { padding: 1rem !important; }
    .p-10 { padding: 1rem !important; }
    .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .px-10 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .py-8 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

    /* Header mobile optimizations */
    header {
        padding: 0.5rem 0.75rem !important;
        position: sticky;
        top: 0;
        z-index: 50;
    }

    header h1,
    header h2 {
        font-size: 0.9rem !important;
    }

    /* Hide header elements on mobile */
    header nav,
    header .hidden.md\:flex,
    header label.hidden.sm\:block,
    header label.hidden.lg\:flex {
        display: none !important;
    }

    /* Profile/avatar in header smaller */
    header .size-10,
    header [class*="size-10"] {
        width: 2rem !important;
        height: 2rem !important;
    }

    /* Main content */
    main {
        padding: 0.75rem !important;
        min-height: calc(100vh - 60px);
    }

    /* All grid layouts to single column */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .md\:grid-cols-2,
    .md\:grid-cols-3,
    .md\:grid-cols-4,
    .lg\:grid-cols-2,
    .lg\:grid-cols-3,
    .lg\:grid-cols-4,
    .xl\:grid-cols-2,
    .xl\:grid-cols-3,
    .xl\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* Gap reductions */
    .gap-6 { gap: 0.75rem !important; }
    .gap-8 { gap: 1rem !important; }

    /* Typography scaling */
    h1, .text-3xl, .text-4xl {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }

    h2, .text-2xl {
        font-size: 1.1rem !important;
    }

    h3, .text-xl {
        font-size: 1rem !important;
    }

    .text-lg {
        font-size: 0.9rem !important;
    }

    /* Card styling */
    .rounded-xl { border-radius: 0.75rem !important; }
    .rounded-2xl { border-radius: 1rem !important; }
    .rounded-3xl { border-radius: 1rem !important; }
    .rounded-\[24px\] { border-radius: 1rem !important; }
    .rounded-\[48px\] { border-radius: 1rem !important; }

    /* Table responsiveness */
    table {
        font-size: 0.75rem;
        display: block;
        width: 100%;
    }

    thead {
        display: none;
    }

    tbody {
        display: block;
    }

    tr {
        display: flex;
        flex-direction: column;
        padding: 0.75rem;
        border-bottom: 1px solid #e5e7eb;
        margin-bottom: 0.5rem;
        background: #fff;
        border-radius: 0.5rem;
    }

    td {
        display: flex;
        justify-content: space-between;
        padding: 0.25rem 0 !important;
        border: none !important;
    }

    td::before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: 1rem;
        color: #637588;
        font-size: 0.7rem;
        text-transform: uppercase;
    }

    /* Alternative: horizontal scroll for tables */
    .table-responsive table {
        display: table;
        min-width: 600px;
    }

    .table-responsive thead {
        display: table-header-group;
    }

    .table-responsive tbody {
        display: table-row-group;
    }

    .table-responsive tr {
        display: table-row;
        flex-direction: row;
        padding: 0;
        border-bottom: none;
        margin-bottom: 0;
        background: transparent;
        border-radius: 0;
    }

    .table-responsive td {
        display: table-cell;
        padding: 0.5rem !important;
    }

    .table-responsive td::before {
        display: none;
    }

    /* Fixed elements positioning */
    .fixed.bottom-6.right-8,
    .fixed.bottom-8.right-8,
    .fixed[class*="bottom-"][class*="right-"] {
        right: 0.5rem !important;
        bottom: 0.5rem !important;
        transform: scale(0.65);
        transform-origin: bottom right;
        z-index: 40;
    }

    /* Mascot/decorative elements */
    .fixed .w-32.h-32,
    .fixed .size-24,
    .fixed svg[viewbox="0 0 100 100"] {
        width: 60px !important;
        height: 60px !important;
    }

    /* Speech bubbles near mascot */
    .fixed .max-w-\[240px\],
    .fixed .max-w-\[200px\],
    .fixed .max-w-\[180px\] {
        display: none !important;
    }

    /* Form inputs */
    input, select, textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
    }

    /* Button sizing */
    button.h-14,
    button.h-12 {
        height: 2.75rem !important;
        font-size: 0.875rem !important;
    }

    /* Profile sections */
    .flex-col.md\:flex-row,
    .flex.md\:flex-row {
        flex-direction: column !important;
        text-align: center;
    }

    .md\:text-left {
        text-align: center !important;
    }

    /* Avatar/profile pics smaller */
    .size-32, .size-24, .size-20 {
        width: 4rem !important;
        height: 4rem !important;
    }

    .size-16 {
        width: 3rem !important;
        height: 3rem !important;
    }

    .size-14 {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    .size-12 {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }

    /* Hero/banner sections */
    .min-h-\[400px\],
    .min-h-\[500px\],
    .min-h-\[700px\] {
        min-height: auto !important;
    }

    .h-64, .h-48 {
        height: auto !important;
        min-height: 8rem;
    }

    /* Horizontal scroll prevention */
    body, html {
        overflow-x: hidden !important;
    }

    /* Wide containers */
    .max-w-6xl,
    .max-w-\[1200px\],
    .max-w-\[1440px\],
    .max-w-\[1024px\] {
        max-width: 100% !important;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Flex wrapping */
    .flex.justify-between,
    .flex.items-center.justify-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Date picker / calendar compact */
    .flex.gap-1 > .size-12 {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }

    .flex.gap-1 > .size-12 span {
        font-size: 0.6rem !important;
    }

    /* Login page specific */
    .max-w-\[1100px\] {
        max-width: 100% !important;
    }

    .min-h-\[700px\] {
        min-height: auto !important;
        height: auto !important;
    }

    /* Gallery grid */
    .sm\:grid-cols-2,
    .lg\:grid-cols-3,
    .xl\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Keep 2 columns for very small items on mobile */
    .grid.gap-6 > .aspect-square {
        min-height: 150px;
    }

    /* Mobile bottom nav compensation */
    .pb-12, .pb-16 {
        padding-bottom: 5rem !important;
    }
}

/* ===== PICKUP TRACKING PAGE MOBILE FIX ===== */
@media (max-width: 767px) {
    /* Force single column for all grids */
    .grid.grid-cols-1.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* Full width columns */
    .grid.grid-cols-1.lg\:grid-cols-3 > div {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Input flex containers */
    .flex.items-center.justify-between input {
        min-width: 0 !important;
    }

    /* Textarea full width */
    .space-y-4 textarea {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ===== SMALL MOBILE (<=657px) FULL WIDTH FIX ===== */
@media (max-width: 657px) {
    /* Remove max-width constraints on main containers */
    main,
    main.flex-1,
    [class*="max-w-[1200px]"],
    [class*="max-w-[1000px]"],
    [class*="max-w-[1024px]"],
    [class*="max-w-6xl"],
    .max-w-6xl,
    .max-w-5xl,
    .max-w-4xl {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Reduce horizontal padding */
    main {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Full width content wrappers */
    .layout-container,
    .flex-1 {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Cards and panels full width */
    .glass-card,
    .bg-pastel-blue,
    .bg-pastel-mint,
    .bg-pastel-lavender,
    .bg-white.rounded-xl,
    [class*="rounded-xl"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Reduce card padding */
    .p-4 { padding: 0.75rem !important; }
    .p-6 { padding: 1rem !important; }
    .px-4 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
    .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }

    /* Profile header adjustments */
    .flex.p-4.glass-card {
        padding: 0.75rem !important;
    }

    /* Remove mx-auto centering effect */
    .mx-auto {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Grid gap reduction */
    .gap-4 { gap: 0.75rem !important; }
    .gap-6 { gap: 1rem !important; }

    /* Header compact */
    header {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Form inputs full width */
    input, select, textarea {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Button groups full width */
    .flex.gap-2 > button,
    .flex.gap-3 > button {
        min-width: 0 !important;
    }

    /* Profile section stacking */
    .flex.flex-col.sm\:flex-row {
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Smaller profile image */
    .h-16.w-16 {
        height: 3.5rem !important;
        width: 3.5rem !important;
    }

    /* Smaller typography */
    .text-xl { font-size: 1rem !important; }
    .text-2xl { font-size: 1.125rem !important; }
    .text-3xl { font-size: 1.25rem !important; }

    /* Time display smaller */
    .text-2xl.font-mono,
    .text-4xl.font-mono {
        font-size: 1.5rem !important;
    }
}

/* ===== VERY SMALL SCREENS (<=480px) ===== */
@media (max-width: 480px) {
    /* Single column for gallery */
    .sm\:grid-cols-2,
    .grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Even smaller padding */
    .p-4, .p-5, .p-6 {
        padding: 0.75rem !important;
    }

    /* Smaller fonts */
    h1, .text-3xl, .text-4xl {
        font-size: 1.1rem !important;
    }

    h2, .text-2xl {
        font-size: 1rem !important;
    }

    /* Hide decorative elements */
    .absolute.-top-10,
    .absolute.-bottom-10,
    .absolute.-right-10,
    .absolute.-left-10,
    [class*="blur-3xl"],
    [class*="blur-xl"] {
        display: none !important;
    }

    /* Button full width */
    button.px-6,
    button.px-8,
    button.px-10 {
        width: 100%;
        justify-content: center;
    }
}

/* ===== LANDSCAPE MOBILE FIX ===== */
@media (max-width: 896px) and (orientation: landscape) {
    .fixed.bottom-6.right-8,
    .fixed.bottom-8.right-8 {
        display: none !important;
    }

    main {
        min-height: auto !important;
    }
}

/* ===== iOS SAFE AREA ===== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .fixed.bottom-0 {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ===== HAMBURGER MENU BUTTON ===== */
.hamburger-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background-color: #f0f2f4;
    color: #637588;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.hamburger-btn:hover {
    background-color: #e5e7eb;
    color: #111418;
}

.hamburger-btn:active {
    transform: scale(0.95);
}

@media (max-width: 1023px) {
    .hamburger-btn {
        display: flex !important;
    }
}

/* ===== MOBILE NAVIGATION MENU (for pages without sidebar) ===== */
.mobile-nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 85vw;
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    background-color: #fff;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
}

.mobile-nav-menu.menu-open {
    transform: translateX(0);
}

.mobile-nav-menu .nav-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-nav-menu .nav-links {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mobile-nav-menu .nav-links a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    color: #637588;
    font-weight: 500;
    transition: all 0.2s ease;
}

.mobile-nav-menu .nav-links a:hover,
.mobile-nav-menu .nav-links a.active {
    background-color: rgba(71, 153, 235, 0.1);
    color: #4799eb;
}

.mobile-nav-menu .nav-footer {
    margin-top: auto;
    padding: 1rem;
    border-top: 1px solid #e5e7eb;
}

.close-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background-color: #f0f2f4;
    color: #637588;
    border: none;
    cursor: pointer;
}

/* Dark mode for mobile nav */
.dark .mobile-nav-menu {
    background-color: #1a242d;
}

.dark .mobile-nav-menu .nav-header,
.dark .mobile-nav-menu .nav-footer {
    border-color: #374151;
}

.dark .mobile-nav-menu .nav-links a {
    color: #9ca3af;
}

.dark .mobile-nav-menu .nav-links a:hover,
.dark .mobile-nav-menu .nav-links a.active {
    background-color: rgba(71, 153, 235, 0.2);
    color: #4799eb;
}

/* ===== MOBILE SIDEBAR SYSTEM ===== */
/* Overlay */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-overlay.overlay-visible {
    opacity: 1;
    visibility: visible;
}

.sidebar-overlay.overlay-hidden {
    opacity: 0;
    visibility: hidden;
}

/* Mobile Sidebar */
@media (max-width: 1023px) {
    /* Base sidebar - hidden by default */
    aside#sidebar,
    aside.sidebar-nav,
    aside[class*="w-64"],
    aside[class*="w-72"] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 999 !important;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        background-color: #fff;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    }

    /* Sidebar open state */
    aside#sidebar.sidebar-open,
    aside.sidebar-nav.sidebar-open,
    aside[class*="w-64"].sidebar-open,
    aside[class*="w-72"].sidebar-open {
        transform: translateX(0) !important;
    }

    /* Sidebar closed state */
    aside#sidebar.sidebar-closed,
    aside.sidebar-nav.sidebar-closed,
    aside[class*="w-64"].sidebar-closed,
    aside[class*="w-72"].sidebar-closed {
        transform: translateX(-100%) !important;
    }

    /* Body scroll lock */
    body.sidebar-is-open {
        overflow: hidden !important;
    }
}

/* ===== MOBILE FULL WIDTH LOCK (<=657px) ===== */
@media (max-width: 657px) {
    /* Container reset - CRITICAL */
    .container,
    [class*="max-w-"],
    .mx-auto {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Main content full width - CRITICAL */
    main,
    .main,
    .page,
    .page-content,
    .layout-container,
    .flex-1 {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Remove all max-width constraints */
    [class*="max-w-["],
    .max-w-6xl,
    .max-w-5xl,
    .max-w-4xl,
    .max-w-3xl,
    .max-w-2xl,
    .max-w-xl,
    .max-w-lg,
    .max-w-md {
        max-width: 100% !important;
    }

    /* Sidebar width on mobile */
    aside#sidebar,
    aside.sidebar-nav,
    aside[class*="w-64"],
    aside[class*="w-72"] {
        width: 85vw !important;
        max-width: 320px !important;
    }

    /* Content containers */
    .p-4, .p-6, .p-8, .p-10 {
        padding: 0.75rem !important;
    }

    .px-4, .px-6, .px-8, .px-10 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    aside, .fixed, header nav {
        display: none !important;
    }
    main {
        margin: 0 !important;
        padding: 1rem !important;
    }
}