/* ======================================
   Portfolio – shared component styles
   --------------------------------------
   Palette variables, base element styles (html/body/a/headings) and
   .section-title live in base.css — the single source of truth. This file
   holds shared component styles only. layout.css and components.css are
   linked directly in _Layout.cshtml; base + utilities are pulled in below.
   ====================================== */
/* base.css and utilities.css used to be @imported here. They are now linked
   directly from _Layout so asp-append-version can cache-bust them — an
   @import carries no version hash of its own, so a palette change in
   base.css never reached a returning visitor. */

/* ======================================
   Buttons
   ====================================== */
/* White label on --accent is 3.24:1 and on --accent-light 2.45:1; both are
   under AA. The filled tokens carry the label instead, and hover goes
   *darker* rather than lighter so the contrast improves on interaction. */
.btn-accent {
    background-color: var(--accent-on-fill);
    border-color: var(--accent-on-fill);
    color: #fff;
    font-weight: 600;
    transition: all var(--transition);
}

.btn-accent:hover,
.btn-accent:focus {
    background-color: var(--accent-on-fill-h);
    border-color: var(--accent-on-fill-h);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(47, 133, 90, 0.35);
}

.btn-outline-accent {
    color: var(--accent-text);
    border-color: var(--accent-text);
    background: transparent;
    font-weight: 600;
}

.btn-outline-accent:hover {
    background-color: var(--accent-on-fill);
    border-color: var(--accent-on-fill);
    color: #fff;
}

/* Light mode: ensure outline buttons on hero have visible contrast */
.hero-section .btn-outline-accent {
    color: #fff;
    border-color: #fff;
}

.hero-section .btn-outline-accent:hover {
    background-color: #fff;
    color: var(--accent-text);
}

/* ======================================
   Theme Toggle
   ====================================== */
.theme-toggle-btn {
    background: transparent;
    border: none;
    color: var(--text);
    padding: 0.5rem 0.75rem;
    font-size: 1.1rem;
    cursor: pointer;
    transition: color var(--transition), transform var(--transition);
}

.theme-toggle-btn:hover {
    transform: rotate(15deg);
}

body.dark-mode .theme-toggle-btn {
    color: #ffd700;
}

/* ======================================
   Profile Avatar
   ====================================== */
.profile-avatar {
    display: flex;
    align-items: center;
}

.profile-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent);
    transition: border-color var(--transition), transform var(--transition);
}

.profile-avatar:hover .profile-img {
    transform: scale(1.05);
    border-color: var(--accent-light);
}

/* ======================================
   User Dropdown - Mobile Touch Target & Positioning
   ====================================== */
.user-dropdown-toggle {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* On mobile, prevent dropdown from going off-screen */
@media (max-width: 991.98px) {
    .nav-item.dropdown .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin-top: 0.25rem;
        border: none;
        box-shadow: none;
        background-color: var(--surface);
    }

    .user-dropdown-toggle {
        justify-content: flex-start;
        padding: 0.5rem 0.75rem !important;
    }

    .user-dropdown-toggle .d-none.d-lg-inline {
        display: inline !important;
    }
}

/* ======================================
   Google Login Button
   ====================================== */
.btn-google {
    background-color: #fff;
    color: #444;
    border: 1px solid #ddd;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: box-shadow var(--transition);
}

.btn-google:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    color: #333;
}

.btn-google-logo {
    width: 20px;
    height: 20px;
}

/* Dark mode adjustments for Google button */
body.dark-mode .btn-google {
    background-color: #fff;
    color: #444;
    border-color: #ddd;
}

/* ======================================
   Login Page
   ====================================== */
.login-section {
    min-height: calc(100vh - 64px);
    background: var(--hero-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    position: relative;
    overflow: hidden;
}

/* Subtle grid pattern matching the hero section */
.login-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.login-card-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
}

.login-card-inner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2.75rem 2.5rem 2.25rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.login-brand {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent-on-fill) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 12px rgba(56, 161, 105, 0.35);
}

.login-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.4rem;
}

.login-subtitle {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 1.75rem;
    line-height: 1.5;
}

.login-google-btn {
    width: 100%;
    justify-content: center;
    font-size: 1rem;
    padding: 0.7rem 1.25rem;
    border-radius: 8px;
    transition: box-shadow var(--transition), transform var(--transition);
    margin-bottom: 1.25rem;
}

.login-google-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.login-privacy {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.login-back-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.875rem;
}

.login-back-link {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.65);
    transition: color var(--transition);
}

.login-back-link:hover {
    color: #fff;
}

/* Login Card (legacy, kept for Login page card used elsewhere) */
.login-card {
    max-width: 350px;
    border-radius: 1rem;
    background: var(--surface);
    border: none;
    box-shadow: 0 4px 20px var(--shadow);
    color: var(--text);
}

/* ======================================
   Modal Compatibility
   ====================================== */
.modal-content {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

.modal-header {
    border-bottom-color: var(--border);
}

.modal-footer {
    border-top-color: var(--border);
}

/* ======================================
   Dropdown Menu Compatibility
   ====================================== */
.dropdown-menu {
    background-color: var(--surface);
    border-color: var(--border);
}

.dropdown-item {
    color: var(--text);
}

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

/* Limit the height of the View Saved modal and add a vertical scrollbar if needed */
#viewSavedModal .modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

/* Flexbox modal content for scrollable body and fixed header/footer */
.custom-modal-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* Never exceed 90% of viewport height */
}

.custom-modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0; /* Required for flexbox scrolling */
}