/*
 * Final site color theme
 *
 * The palette is kept here so public and admin pages share one identity.
 */

:root {
    --public-blue: #7798c8;
    --public-blue-dark: #5277a6;
    --public-blue-soft: #dce6f2;
    --public-cream: #f5f0e7;
    --public-cream-light: #fcfaf6;
    --public-gray-light: #e1e5e8;
    --public-gray-border: #cbd2d7;
    --public-text: #263746;
    --public-text-muted: #65727c;
    --public-white: #ffffff;
    --public-shadow: rgba(38, 55, 70, 0.12);
}

body {
    color: var(--public-text);
    background: var(--public-cream);
}

.site-header-container {
    width: min(1400px, calc(100% - 48px));
}

/* Site headers */

.public-site-header {
    background: rgba(252, 250, 246, 0.94);
    border-bottom-color: rgba(82, 119, 166, 0.2);
    box-shadow: 0 8px 30px rgba(38, 55, 70, 0.08);
}

.public-site-header .site-logo,
.public-site-header .site-nav a {
    color: var(--public-text);
}

.public-site-header .site-logo > span,
.public-site-header .site-nav a:hover,
.public-site-header .site-nav a.active {
    color: var(--public-blue-dark);
}

.public-site-header .site-logo small {
    color: var(--public-text-muted);
}

.public-site-header .admin-area-btn {
    color: var(--public-text);
    border-color: var(--public-blue);
    background: transparent;
}

.public-site-header .admin-area-btn:hover {
    color: var(--public-white);
    background: var(--public-blue-dark);
    box-shadow: 0 10px 24px rgba(82, 119, 166, 0.2);
}

@media (max-width: 1050px) {
    .public-site-header .site-header-container {
        height: auto;
        min-height: 70px;
        flex-wrap: wrap;
        gap: 8px;
        padding-block: 12px;
    }

    .public-site-header .site-nav {
        display: flex;
        order: 3;
        width: 100%;
        justify-content: space-between;
        gap: 8px;
    }

    .public-site-header .site-nav a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

.site-header:not(.public-site-header) {
    background: rgba(252, 250, 246, 0.94);
    border-bottom-color: rgba(82, 119, 166, 0.2);
    box-shadow: 0 8px 30px rgba(38, 55, 70, 0.08);
}

.site-header:not(.public-site-header) .admin-back-link {
    color: var(--public-blue-dark);
    font-weight: 700;
}

.site-header:not(.public-site-header) .admin-area-btn {
    color: var(--public-text);
    border-color: var(--public-blue);
}

.site-header:not(.public-site-header) .admin-area-btn:hover {
    color: var(--public-white);
    background: var(--public-blue-dark);
    box-shadow: 0 10px 24px rgba(82, 119, 166, 0.2);
}

.admin-logout-form {
    margin: 0;
}

.admin-logout-form .admin-area-btn {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    font: inherit;
    cursor: pointer;
}

/* Shared public surfaces */

.home-page,
.about-page,
.projects-page,
.details-page,
.contact-page {
    color: var(--public-text);
    background-color: var(--public-cream);
}

.projects-page.page-background,
.details-page.page-background,
.contact-page {
    background:
        radial-gradient(circle at 72% 12%, rgba(119, 152, 200, 0.18), transparent 34%),
        linear-gradient(rgba(82, 119, 166, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(82, 119, 166, 0.055) 1px, transparent 1px),
        var(--public-cream);
    background-size: auto, 52px 52px, 52px 52px, auto;
}

/* Home and project-detail background */

.home-page .portfolio-bg,
.details-page .portfolio-bg {
    background:
        radial-gradient(circle at 78% 20%, rgba(119, 152, 200, 0.35), transparent 30%),
        radial-gradient(circle at 18% 78%, rgba(225, 229, 232, 0.72), transparent 28%),
        linear-gradient(rgba(82, 119, 166, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(82, 119, 166, 0.055) 1px, transparent 1px),
        var(--public-cream);
    background-size: auto, auto, 48px 48px, 48px 48px, auto;
}

.home-page .portfolio-bg::after,
.details-page .portfolio-bg::after {
    background:
        linear-gradient(120deg, transparent 15%, rgba(119, 152, 200, 0.2), transparent 72%);
}

.home-page .hero-left h1,
.details-page .project-detail h1 {
    color: var(--public-text);
}

.home-page .hero-left h1 span,
.home-page .hero-label,
.home-page .section-label,
.details-page .back-link {
    color: var(--public-blue-dark);
}

.home-page .hero-left p,
.details-page .project-description {
    color: var(--public-text-muted);
}

.home-page .tech-list span,
.details-page .tech-list span {
    color: var(--public-text);
    background: rgba(255, 255, 255, 0.62);
    border-color: var(--public-gray-border);
}

.home-page .tech-list span {
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

@media (hover: hover) {
    .home-page .tech-list span:hover {
        transform: translateY(-2px);
        border-color: var(--public-blue);
        background: var(--public-white);
        box-shadow: 0 8px 18px rgba(82, 119, 166, 0.12);
    }
}

.home-page .hero-right::before {
    border-color: rgba(82, 119, 166, 0.22);
}

.home-page .code-window {
    background: rgba(38, 55, 70, 0.97);
    border-color: rgba(119, 152, 200, 0.7);
    box-shadow: 0 30px 70px rgba(38, 55, 70, 0.2);
}

.home-page .code-top {
    background: rgba(255, 255, 255, 0.08);
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.home-page .code-top small {
    color: #dce6f2;
}

.home-page .code-floating {
    background: rgba(252, 250, 246, 0.96);
    border-color: rgba(82, 119, 166, 0.5);
    box-shadow: 0 16px 38px rgba(38, 55, 70, 0.16);
}

.home-page .code-floating strong {
    color: var(--public-blue-dark);
}

.home-page .code-floating span {
    color: var(--public-text);
}

.details-page .project-detail-image {
    border: 1px solid var(--public-gray-border);
    box-shadow: 0 24px 60px var(--public-shadow);
}

/* About */

.about-page {
    background:
        linear-gradient(rgba(82, 119, 166, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(82, 119, 166, 0.05) 1px, transparent 1px),
        var(--public-cream);
    background-size: 48px 48px;
}

.about-hero {
    border-bottom-color: rgba(82, 119, 166, 0.2);
}

.about-hero::after {
    background: rgba(119, 152, 200, 0.28);
}

.about-kicker,
.about-card-label,
.about-hero h1 span,
.about-hero-note small {
    color: var(--public-blue-dark);
}

.about-page .about-card-label {
    color: var(--public-blue-dark);
}

.about-hero h1,
.about-hero-copy .about-lead,
.about-hero-note strong,
.about-card h2,
.about-card-location strong {
    color: var(--public-text);
}

.about-hero-copy > p:not(.about-kicker),
.about-card > p:not(.about-card-label),
.about-card-location span {
    color: var(--public-text-muted);
}

.about-hero-note {
    border-color: rgba(82, 119, 166, 0.3);
    background: rgba(255, 255, 255, 0.55);
}

.about-hero-note span {
    color: var(--public-text-muted);
}

.about-details {
    background: rgba(225, 229, 232, 0.78);
}

.about-card {
    border-color: var(--public-gray-border);
    background: rgba(252, 250, 246, 0.9);
    box-shadow: 0 16px 36px rgba(38, 55, 70, 0.06);
}

.about-card-project {
    background:
        linear-gradient(135deg, rgba(119, 152, 200, 0.18), transparent 65%),
        rgba(252, 250, 246, 0.94);
}

.about-code-flow {
    color: var(--public-blue-dark);
}

.about-code-flow i {
    color: #99a4ac;
}

/* Projects */

.projects-page,
.projects {
    color: var(--public-text);
}

.projects {
    display: flow-root;
}

.projects h2 {
    color: var(--public-text);
}

.projects-sidebar,
.technology-dropdown-button,
.technology-filter,
.projects-empty-state,
.project-card,
.public-projects-table {
    color: var(--public-text);
    background: rgba(252, 250, 246, 0.94);
    border-color: var(--public-gray-border);
    box-shadow: 0 16px 38px rgba(38, 55, 70, 0.08);
}

.projects-sidebar p,
.technology-dropdown-button,
.technology-filter label {
    color: var(--public-text);
}

.technology-filter label:hover,
.technology-filter label:has(input:checked) {
    color: var(--public-blue-dark);
    background: var(--public-blue-soft);
}

.technology-filter label:has(input:checked)::after,
.project-card h3,
.project-details-link,
.public-projects-table th {
    color: var(--public-blue-dark);
}

.technology-filter input {
    accent-color: var(--public-blue-dark);
}

.projects-count,
.project-summary,
.projects-empty-state {
    color: var(--public-text-muted);
}

.project-card {
    border-color: var(--public-gray-border);
}

.project-card:hover {
    border-color: var(--public-blue);
    box-shadow: 0 18px 42px rgba(82, 119, 166, 0.14);
}

.project-card:hover h3 {
    color: var(--public-blue-dark);
}

.project-image,
.public-project-image {
    border-color: var(--public-gray-border);
}

.public-projects-table th,
.public-projects-table td {
    border-bottom-color: var(--public-gray-border);
}

/* Public buttons */

:is(.home-page, .about-page, .projects-page, .details-page, .contact-page) .btn-primary {
    color: var(--public-white);
    background: var(--public-blue);
    box-shadow: 0 10px 24px rgba(82, 119, 166, 0.2);
}

:is(.home-page, .about-page, .projects-page, .details-page, .contact-page) .btn-primary:hover {
    background: var(--public-blue-dark);
}

:is(.home-page, .about-page, .projects-page, .details-page, .contact-page) .btn-secondary {
    color: var(--public-text);
    border-color: #b7c0c7;
    background: rgba(255, 255, 255, 0.46);
}

:is(.home-page, .about-page, .projects-page, .details-page, .contact-page) .btn-secondary:hover {
    color: var(--public-blue-dark);
    border-color: var(--public-blue);
    background: var(--public-white);
}

/* Admin login */

.login-page {
    color: var(--public-text);
    background: var(--public-cream);
}

.login-page > .portfolio-bg {
    background:
        radial-gradient(circle at 70% 18%, rgba(119, 152, 200, 0.3), transparent 34%),
        linear-gradient(rgba(82, 119, 166, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(82, 119, 166, 0.055) 1px, transparent 1px),
        var(--public-cream);
    background-size: auto, 48px 48px, 48px 48px, auto;
}

.login-card {
    color: var(--public-text);
    background: rgba(252, 250, 246, 0.94);
    border: 1px solid var(--public-gray-border);
    box-shadow: 0 24px 60px rgba(38, 55, 70, 0.12);
}

.login-card h1,
.login-card label {
    color: var(--public-text);
}

.login-subtitle {
    color: var(--public-text-muted);
}

.login-page input[type="email"],
.login-page input[type="password"],
.login-page input[type="text"] {
    color: var(--public-text);
    background: var(--public-white);
    border-color: var(--public-gray-border);
}

.login-page input[type="email"]::placeholder,
.login-page input[type="password"]::placeholder,
.login-page input[type="text"]::placeholder {
    color: #8c98a1;
}

.login-page input[type="email"]:focus,
.login-page input[type="password"]:focus,
.login-page input[type="text"]:focus {
    border-color: var(--public-blue);
    box-shadow: 0 0 0 3px rgba(119, 152, 200, 0.2);
}

.login-button {
    color: var(--public-white);
    background: var(--public-blue);
    box-shadow: 0 10px 24px rgba(82, 119, 166, 0.2);
}

.login-page .login-button:hover {
    background: var(--public-blue-dark);
    box-shadow: 0 14px 28px rgba(82, 119, 166, 0.24);
}

/* Admin dashboard */

.dashboard-page {
    color: var(--public-text);
    background:
        radial-gradient(circle at 72% 12%, rgba(119, 152, 200, 0.2), transparent 34%),
        linear-gradient(rgba(82, 119, 166, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(82, 119, 166, 0.055) 1px, transparent 1px),
        var(--public-cream);
    background-size: auto, 52px 52px, 52px 52px, auto;
}

.dashboard-header,
.admin-projects-count-row,
.admin-projects {
    width: min(1180px, calc(100% - clamp(3rem, 8vw, 8rem)));
}

.dashboard-label,
.dashboard-page .admin-table th {
    color: var(--public-blue-dark);
}

.dashboard-header h1 {
    color: var(--public-text);
}

.dashboard-page .projects-count,
.admin-projects-count-row .projects-count,
.dashboard-page .admin-created,
.dashboard-page .admin-updated,
.dashboard-page .empty-state {
    color: var(--public-text-muted);
}

.dashboard-page .button--primary {
    color: var(--public-white);
    background: var(--public-blue);
    box-shadow: 0 10px 24px rgba(82, 119, 166, 0.18);
}

.dashboard-page .button--primary:hover {
    background: var(--public-blue-dark);
}

.dashboard-page .projects-sidebar,
.dashboard-page .technology-dropdown-button,
.dashboard-page .technology-filter,
.dashboard-page .admin-projects {
    color: var(--public-text);
    background: rgba(252, 250, 246, 0.95);
    border-color: var(--public-gray-border);
    box-shadow: 0 18px 42px rgba(38, 55, 70, 0.08);
}

.dashboard-page .projects-sidebar p,
.dashboard-page .technology-dropdown-button,
.dashboard-page .technology-filter label {
    color: var(--public-text);
}

.dashboard-page .technology-dropdown-button:hover {
    border-color: var(--public-blue);
}

.dashboard-page .technology-filter label:hover {
    color: var(--public-blue-dark);
    background: var(--public-blue-soft);
}

.dashboard-page .technology-filter input {
    accent-color: var(--public-blue-dark);
}

.dashboard-page .active-filters {
    color: var(--public-text-muted);
}

.dashboard-page .active-filter-badge {
    color: var(--public-blue-dark);
    background: var(--public-blue-soft);
    border-color: rgba(82, 119, 166, 0.25);
}

.dashboard-page .active-filter-badge:hover {
    background: #cbd9e9;
}

.dashboard-page .admin-table th,
.dashboard-page .admin-table td {
    border-bottom-color: var(--public-gray-border);
}

.dashboard-page .admin-table td,
.dashboard-page .admin-tech-list li,
.dashboard-page .admin-links a,
.dashboard-page .admin-action-btn--edit {
    color: var(--public-text);
}

.dashboard-page .admin-table tbody tr:hover {
    background: rgba(119, 152, 200, 0.08);
}

.dashboard-page .admin-project-image {
    border-color: var(--public-gray-border);
}

.dashboard-page .admin-tech-list li:not(:last-child)::after {
    color: var(--public-text-muted);
}

.dashboard-page .admin-links a:hover,
.dashboard-page .admin-action-btn--edit:hover {
    color: var(--public-blue-dark);
}

.dashboard-page .admin-action-btn--delete {
    color: #a45151;
}

/* Admin create and edit forms */

.create-page,
.edit-page {
    color: var(--public-text);
    background:
        radial-gradient(circle at 72% 12%, rgba(119, 152, 200, 0.2), transparent 34%),
        linear-gradient(rgba(82, 119, 166, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(82, 119, 166, 0.055) 1px, transparent 1px),
        var(--public-cream);
    background-size: auto, 52px 52px, 52px 52px, auto;
}

.create-page .admin-card,
.edit-page .admin-card {
    color: var(--public-text);
    background: rgba(252, 250, 246, 0.96);
    border-color: var(--public-gray-border);
    box-shadow: 0 24px 60px rgba(38, 55, 70, 0.1);
}

.create-page h1,
.edit-page h1,
.create-page label,
.edit-page label,
.create-page legend,
.edit-page legend {
    color: var(--public-text);
}

.admin-subtitle,
.char-count,
.checkbox-item label {
    color: var(--public-text-muted);
}

.create-page input[type="text"],
.create-page input[type="url"],
.create-page textarea,
.edit-page input[type="text"],
.edit-page input[type="url"],
.edit-page textarea {
    color: var(--public-text);
    background: var(--public-white);
    border-color: var(--public-gray-border);
}

.create-page input::placeholder,
.create-page textarea::placeholder,
.edit-page input::placeholder,
.edit-page textarea::placeholder {
    color: #8c98a1;
}

.create-page input[type="text"]:focus,
.create-page input[type="url"]:focus,
.create-page textarea:focus,
.edit-page input[type="text"]:focus,
.edit-page input[type="url"]:focus,
.edit-page textarea:focus {
    border-color: var(--public-blue);
    box-shadow: 0 0 0 3px rgba(119, 152, 200, 0.2);
}

.create-page fieldset,
.edit-page fieldset {
    background: rgba(225, 229, 232, 0.45);
    border-color: var(--public-gray-border);
}

.checkbox-item input[type="checkbox"] {
    accent-color: var(--public-blue-dark);
}

.create-page button[type="submit"],
.edit-page button[type="submit"] {
    color: var(--public-white);
    background: var(--public-blue);
}

.create-page button[type="submit"]:hover,
.edit-page button[type="submit"]:hover {
    background: var(--public-blue-dark);
}

.login-page .errors,
.create-page .errors,
.edit-page .errors {
    color: #7f2f2f;
    background: #f8e4e4;
    border-color: #dbaaaa;
}

.create-page .success-message,
.edit-page .success-message {
    color: #315f45;
    background: #e3f1e8;
    border-color: #a8cfb7;
}