/* ======================================================
    🎨 APP.CSS — Mathkiss
    Globalni stilovi, gradient pozadine i moderna navigacija
    ====================================================== */

/* ====== GRADIENT BOJE ====== */
:root {
    --unregistered-bg: linear-gradient(135deg, #74b9ff 0%, #a29bfe 100%);
    --registered-bg: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
    --admin-bg: linear-gradient(135deg, #6c5ce7 0%, #341f97 100%);
}

/* ====== TEMA VARIJABLE ====== */
.light-theme {
    --page-bg: #f8f9fa;
    --text-color: #212529;
    --navbar-shadow: rgba(0, 0, 0, 0.15);
    --dropdown-bg: #ffffff;
    --dropdown-item-hover: #0d6efd;
    --footer-bg: #f1f3f5;
    --footer-text: #555;
}

.dark-theme {
    --page-bg: #121212;
    --text-color: #e0e0e0;
    --navbar-shadow: rgba(255, 255, 255, 0.05);
    --dropdown-bg: #2a2a2a;
    --dropdown-item-hover: #0d6efd;
    --footer-bg: #1a1a1a;
    --footer-text: #ccc;
}

/* ISPRAVKA: Primjenjuje se na .btn (i <button> i <a>) unutar .col-lg-5 */
.col-lg-5 .d-grid .btn {
    width: 100% !important;
    /* Klase za btn-lg: */
    padding: 0.5rem 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.5 !important;
}

/* ====== STRANICA ====== */
.page {
    min-height: 100vh;
    background-color: var(--page-bg);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ====== NAVBAR ====== */
.modern-navbar {
    color: white;
    box-shadow: 0 2px 6px var(--navbar-shadow);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.admin-navbar {
    background: var(--admin-bg) !important;
}

.registered-navbar {
    background: var(--registered-bg) !important;
}

.unregistered-navbar {
    background: var(--unregistered-bg) !important;
}

.modern-navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 0;
}

.modern-navbar .container,
.modern-navbar .navbar-brand,
.modern-navbar .nav-link,
.modern-navbar .btn {
    position: relative;
    z-index: 1;
}

/* ====== LINKOVI I TEKST ====== */
.navbar-brand {
    font-weight: 600;
    font-size: 1.25rem;
    color: #fff !important;
}

.navbar-dark .navbar-nav .nav-link {
    color: #f8f9fa !important;
    transition: color 0.2s ease-in-out;
}

    .navbar-dark .navbar-nav .nav-link:hover,
    .navbar-dark .navbar-nav .nav-link:focus {
        color: #ffeaa7 !important;
    }

    .navbar-dark .navbar-nav .nav-link.active {
        color: #ffeaa7 !important;
        font-weight: 600;
    }

/* ====== LOGIN/REGISTER BUTTONS ====== */
.modern-navbar .btn-login,
.modern-navbar .btn-register {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.5);
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .modern-navbar .btn-login:hover,
    .modern-navbar .btn-register:hover {
        color: #212529 !important;
        background-color: #fff;
        border-color: #fff;
    }

.modern-navbar .btn-register {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ====== DROPDOWN ====== */
.dropdown-menu {
    border-radius: 0.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    border: none;
    z-index: 1000;
    background-color: var(--dropdown-bg);
    transition: background-color 0.3s ease;
}

.dropdown-item {
    color: #212529;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

    .dropdown-item:hover,
    .dropdown-item:focus {
        color: #fff;
        background-color: var(--dropdown-item-hover);
    }

/* ====== ADMIN BADGE ====== */
.admin-badge {
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #fff;
    margin-right: 10px;
}

/* ====== AVATAR ====== */
.user-avatar {
    background: #ffdd59;
    color: #000;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* ====== SADRŽAJ ====== */
.content {
    padding: 2rem;
}

/* ====== FOOTER ====== */
footer {
    background: var(--footer-bg);
    border-top: 1px solid #dee2e6;
    padding-top: 1rem;
    padding-bottom: 1rem;
    transition: background-color 0.3s ease;
}

    footer p {
        margin: 0;
        color: var(--footer-text);
    }

/* ====== RESPONSIVE ====== */
@media (max-width: 768px) {
    .modern-navbar .navbar-brand {
        font-size: 1rem;
    }

    .admin-badge {
        display: none;
    }

    .user-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }
}

/* ===== 🌙 DARK MODE DODATNO ===== */
.dark-theme .modern-navbar {
    background-color: #1f1f1f !important;
}

.dark-theme .admin-navbar {
    background: linear-gradient(135deg, #2f2d59 0%, #1b1035 100%) !important;
}

.dark-theme .registered-navbar {
    background: linear-gradient(135deg, #0f5132 0%, #064420 100%) !important;
}

.dark-theme .unregistered-navbar {
    background: linear-gradient(135deg, #003366 0%, #1a1a80 100%) !important;
}

.dark-theme .content {
    background-color: #181818;
    color: #f1f1f1;
}

/* Tema gumb */
.btn-theme-toggle {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.6);
    color: #fff;
    transition: background-color 0.2s ease, transform 0.2s ease;
    border-radius: 50%;
    width: 36px;
    height: 36px;
}

    .btn-theme-toggle:hover {
        background-color: rgba(255,255,255,0.2);
        transform: rotate(20deg);
    }

/* Dropdown tamna verzija */
.dark-theme .dropdown-menu {
    background-color: #2a2a2a;
    color: #fff;
}

.dark-theme .dropdown-item {
    color: #e0e0e0;
}

    .dark-theme .dropdown-item:hover {
        background-color: #0d6efd;
    }

/* Smooth transition */
.page, .navbar, .content, footer, .dropdown-menu {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===== 🧩 iOS VIDLJIVOST FIX ===== */

/* iOS Safari bug fix za visinu */
html, body {
    height: -webkit-fill-available;
}

/* Navigacija vidljiva i na iOS-u */
.modern-navbar {
    position: -webkit-sticky; /* kompatibilnost za iOS */
    top: 0;
    z-index: 1020;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Osiguraj kontrast i pozadinu */
.light-theme .modern-navbar {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #000 !important;
}

.dark-theme .modern-navbar {
    background-color: rgba(0, 0, 0, 0.85) !important;
    color: #fff !important;
}

/* iOS fix — prisilni reflow nakon promjene teme */
.page {
    will-change: background-color, color;
    transform: translateZ(0); /* poboljšava render na iOS-u */
}

/* ===== 🍎 iOS CRITICAL FIXES ===== */

/* Ensure navbar is always visible on iOS */
.modern-navbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    min-height: 56px; /* Ensure consistent height */
}

/* iOS Safari specific background fixes */
@media screen and (max-width: 768px) {
    .modern-navbar {
        background-attachment: scroll !important;
    }
}

/* Force background colors for iOS */
.modern-navbar.unregistered-navbar {
    background: var(--unregistered-bg) !important;
    background-image: var(--unregistered-bg) !important;
}

.modern-navbar.registered-navbar {
    background: var(--registered-bg) !important;
    background-image: var(--registered-bg) !important;
}

.modern-navbar.admin-navbar {
    background: var(--admin-bg) !important;
    background-image: var(--admin-bg) !important;
}

/* iOS dark theme override */
.dark-theme .modern-navbar.unregistered-navbar {
    background: linear-gradient(135deg, #003366 0%, #1a1a80 100%) !important;
}

.dark-theme .modern-navbar.registered-navbar {
    background: linear-gradient(135deg, #0f5132 0%, #064420 100%) !important;
}

.dark-theme .modern-navbar.admin-navbar {
    background: linear-gradient(135deg, #2f2d59 0%, #1b1035 100%) !important;
}

/* iOS text visibility fixes */
.modern-navbar .navbar-brand,
.modern-navbar .nav-link,
.modern-navbar .navbar-text {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* iOS button fixes */
.modern-navbar .btn {
    -webkit-appearance: none;
    border-radius: 6px;
}

/* Prevent zoom on focus for iOS */
@media screen and (max-width: 768px) {
    .modern-navbar input,
    .modern-navbar select,
    .modern-navbar textarea {
        font-size: 16px; /* Prevents zoom on focus */
    }
}

/* iOS smooth transitions */
.modern-navbar,
.modern-navbar * {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Native Social Login Buttons */
.btn-primary[name="provider"] {
    border: 1px solid #dadce0;
    background: white;
    color: #3c4043;
    padding: 12px 16px;
    font-weight: 500;
    border-radius: 4px;
    transition: none; /* Google nema transition */
    margin-bottom: 12px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 14px;
    font-family: 'Roboto', Arial, sans-serif;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

    /* Native Google Button - BEZ HOVER EFEEKTA */
    .btn-primary[name="provider"][value="Google"] {
        background: white;
        color: #3c4043;
        border: 1px solid #dadce0;
    }

        /* Google hover je veoma suptilan - samo malo tamnija border */
        .btn-primary[name="provider"][value="Google"]:hover {
            background: white; /* Ostaje bijela */
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
            border-color: #d2d3d5; /* Veoma suptilna promjena */
            transform: none;
        }

        .btn-primary[name="provider"][value="Google"]::before {
            content: "";
            width: 18px;
            height: 18px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'/%3E%3Cpath fill='%2334A853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'/%3E%3Cpath fill='%23FBBC05' d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'/%3E%3Cpath fill='%23EA4335' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'/%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
        }

    /* Native Facebook Button - SA HOVEROM */
    .btn-primary[name="provider"][value="Facebook"] {
        background: #1877f2;
        color: white;
        border: 1px solid #1877f2;
        transition: background-color 0.2s ease;
    }

        .btn-primary[name="provider"][value="Facebook"]:hover {
            background: #166fe5;
            border-color: #166fe5;
            transform: none;
        }

        .btn-primary[name="provider"][value="Facebook"]::before {
            content: "";
            width: 18px;
            height: 18px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
        }

/* Container styling */
.form-horizontal p {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

/* Dark theme support */
.dark-theme .btn-primary[name="provider"][value="Google"] {
    background: #202124;
    color: #e8eaed;
    border-color: #5f6368;
}

    .dark-theme .btn-primary[name="provider"][value="Google"]:hover {
        background: #202124; /* Ostaje ista u dark modu */
        border-color: #8ab4f8; /* Google plava u dark modu */
    }

.dark-theme .btn-primary[name="provider"][value="Facebook"] {
    background: #1877f2;
    border-color: #1877f2;
}

    .dark-theme .btn-primary[name="provider"][value="Facebook"]:hover {
        background: #166fe5;
        border-color: #166fe5;
    }

/* Focus states for accessibility */
.btn-primary[name="provider"]:focus {
    outline: 2px solid #4285f4;
    outline-offset: 2px;
}

.btn-primary[name="provider"][value="Facebook"]:focus {
    outline-color: #1877f2;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .btn-primary[name="provider"] {
        padding: 14px 16px;
        font-size: 15px;
    }
}