/* Adjust for mobile view */
@media (max-width: 768px) {
    .hero-body {
        padding-left: 16px;
    }
    .column.is-4 {
        padding: 4px; /* Adjust as needed */
        margin-left: 8px;
        margin-top: 4px; /* Optional: adds space above the box */
        margin-bottom: 0rem; /* Optional: adds space below the box */
        /* justify-content: center; */
    }
    
    .box {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* 
.logo-navbar {
    height: 40px !important;
    width: auto !important;
    max-width: 200px !important;
    max-height: 40px !important;
    margin: 5px;
    text-align: center;
    object-fit: contain;
}

/* Additional specificity for navbar logo */
/* .navbar-brand .logo-navbar {
    height: 40px !important;
    width: auto !important;
    max-width: 200px !important;
    max-height: 40px !important;
    margin: 5px;
    text-align: center;
    object-fit: contain;
}

/* Force override for production */
/* .navbar .navbar-brand img.logo-navbar {
    height: 40px !important;
    width: auto !important;
    max-width: 200px !important;
    max-height: 40px !important;
    margin: 5px;
    text-align: center;
    object-fit: contain;
} */

/* .logo {
    height: 200px !important;
    max-height: 200px !important;
    width: auto !important;
    text-align: center;
    object-fit: contain;
} */

/* Light mode (default) */
@media (prefers-color-scheme: light) {
    body {
        background-color: #f5f5f5;
        color: #363636;
    }
    
    .hero.is-primary {
        background: linear-gradient(135deg, #00d1b2 0%, #00c4a7 100%);
    }
    
    .box {
        background-color: #ffffff;
        box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
    }
    
    .input {
        background-color: #ffffff;
        border-color: #dbdbdb;
        color: #363636;
    }
    
    .input:focus {
        border-color: #00d1b2;
        box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
    }
    
    .table {
        background-color: #ffffff;
        color: #363636;
    }
    
    .table th {
        color: #363636;
    }
    
    .table td {
        color: #363636;
    }

    .navbar-item {
        color: #363636;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
        color: #f5f5f5;
    }
    
    .hero.is-primary {
        background: linear-gradient(135deg, #2d5a5a 0%, #1a3d3d 100%);
    }
    
    .box {
        background-color: #2d2d2d;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
        border: 1px solid #404040;
    }
    
    .input {
        background-color: #404040;
        border-color: #555555;
        color: #f5f5f5;
    }
    
    .input:focus {
        border-color: #00d1b2;
        box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
    }
    
    .input::placeholder {
        color: #b5b5b5;
    }
    
    .table {
        background-color: #2d2d2d;
        color: #f5f5f5;
    }
    
    .table th {
        color: #f5f5f5;
        background-color: #404040;
    }
    
    .table td {
        color: #f5f5f5;
        border-color: #404040;
    }
    
    .table tbody tr:hover {
        background-color: #404040;
    }
    
    .notification {
        background-color: #2d2d2d;
        color: #f5f5f5;
        border: 1px solid #404040;
    }
    
    .notification.is-success {
        background-color: #2d4a2d;
        color: #f5f5f5;
        border-color: #48c774;
    }
    
    .notification.is-danger {
        background-color: #4a2d2d;
        color: #f5f5f5;
        border-color: #f14668;
    }
    
    .notification.is-warning {
        background-color: #4a3d2d;
        color: #f5f5f5;
        border-color: #ffdd57;
    }
    
    .notification.is-info {
        background-color: #2d3d4a;
        color: #f5f5f5;
        border-color: #3298dc;
    }
    
    .button {
        background-color: #404040;
        border-color: #555555;
        color: #f5f5f5;
    }
    
    .button:hover {
        background-color: #555555;
        border-color: #666666;
        color: #f5f5f5;
    }
    
    .button.is-primary {
        background-color: #00d1b2;
        border-color: #00d1b2;
        color: #ffffff;
    }
    
    .button.is-primary:hover {
        background-color: #00c4a7;
        border-color: #00c4a7;
        color: #ffffff;
    }
    
    .button.is-info {
        background-color: #3298dc;
        border-color: #3298dc;
        color: #ffffff;
    }
    
    .button.is-info:hover {
        background-color: #2793da;
        border-color: #2793da;
        color: #ffffff;
    }
    
    .title {
        color: #f5f5f5;
    }
    
    .subtitle {
        color: #b5b5b5;
    }

    .navbar {
        background: linear-gradient(135deg, #2d5a5a 0%, #1a3d3d 100%);
    }
    
    .navbar-item {
        color: #f5f5f5 !important;
    }
    
    .navbar-item:hover {
        background-color: #404040 !important;
        color: #f5f5f5 !important;
    }
    
    .navbar-burger span {
        background-color: #f5f5f5;
    }
    
    .navbar-menu {
        background-color: linear-gradient(135deg, #2d5a5a 0%, #1a3d3d 100%);
    }

    
    .tabs.is-boxed li a {
        color: #00d1b2;
        /* border-color: #00d1b2; */
    }
    
    /* .tabs.is-boxed li.is-active a {
        background-color: #00d1b2;
        border-color: #00d1b2;
        color: #ffffff;
    }
     */
    .tabs.is-boxed li:not(.is-active) a:hover {
        background-color: rgba(0, 209, 178, 0.1);
        border-color: #00d1b2;
        color: #00d1b2;
    }
}