/* ==============================
   Benning Construction — Main Styles
   Official brand palette (Blue / Yellow / Green / Plum)
   ============================== */

/* Brand heading face, self-hosted (licensed files supplied by the client).
   Only the Regular (400) weight was provided, so headings render at 400 and
   `font-synthesis: none` (below) prevents the browser faking a bold — which
   looks crude on a geometric display face. If a Bold/SemiBold weight is added
   later, drop in another @font-face with the matching font-weight and bump the
   heading weights back up. The ?v= keeps the year-long asset cache honest. */
@font-face {
    font-family: 'Bw Gradual';
    src: url('../fonts/BwGradual-Regular.woff2?v=1') format('woff2'),
         url('../fonts/BwGradual-Regular.woff?v=1') format('woff'),
         url('../fonts/BwGradual-Regular.otf?v=1') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* --- Brand palette (from the Benning brand guide) --- */
    --brand-green: #4FA78B;     /* PMS 7723 C/U */
    --brand-blue: #004853;      /* PMS 316 C */
    --brand-grey: #D9E1F2;      /* PMS 7541 C */
    --brand-yellow: #DAAA00;    /* PMS 110 C */
    --brand-plum: #4A2F46;      /* PMS 5185 C */
    --brand-dark-grey: #333F4C; /* PMS 432 C */

    --primary: var(--brand-blue);
    --primary-light: #0a5f6d;
    --primary-dark: #003640;
    --accent: var(--brand-yellow);
    --accent-hover: #b88f00;
    --accent-light: #fbf3d9;
    /* White on brand yellow is only ~2.2:1, so anything sitting ON the yellow
       uses dark ink instead (~4.9:1, AA). --accent-ink is for text/icons that
       sit on a light background but need to read as "the yellow". */
    --accent-on: var(--brand-dark-grey);
    --accent-ink: #6B5400;
    --bg-light: #f5f6f8;
    --bg-white: #ffffff;
    --text-dark: var(--brand-dark-grey);
    --text-muted: #6b7280;
    --text-light: #9ca3af;
    --border: #e5e7eb;
    --success: #059669;
    --success-bg: #ecfdf5;
    --danger: #dc2626;
    --danger-bg: #fef2f2;
    --warning: var(--brand-yellow);
    --radius: 8px;
    --radius-lg: 12px;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);

    /* Brand type: Bw Gradual (headings, self-hosted above) + Barlow (body).
       Poppins stays as the fallback while the font loads or if it 404s. */
    --font-heading: 'Bw Gradual', 'Poppins', sans-serif;
    --font-body: 'Barlow', sans-serif;
    --transition: all 0.2s ease;
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Embed / iframe mode (?isIframe=1): header + footer are omitted server-side.
   Keep the site's own light background so the embed reads as a self-contained
   content panel on any host page, and don't force full-viewport height so it
   can size to its content inside the host's iframe. */
body.iframe-mode {
    min-height: 0;
}

/* The map is 70vh on the standalone site, but inside an auto-resizing iframe a
   viewport-relative height chases the iframe height it's helping to set. Pin it
   so the reported page height is stable. */
body.iframe-mode #projectMap {
    height: 500px;
    min-height: 0;
}

/* The control bar sticks at top:64px to clear the site nav. There's no nav in
   embed mode, and that offset leaves a 64px strip of page background above the
   bar — pin it to the very top instead. */
body.iframe-mode .control-bar {
    top: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background: var(--bg-light);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Bw Gradual ships in Regular only — never let the browser synthesize a
       heavier weight from it (faux-bold looks bad on a geometric display face). */
    font-synthesis: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.3;
}

/* Text links use the darker gold (7.3:1 on white); bright --accent is reserved
   for fills and decorative icons where contrast isn't carrying the meaning. */
a {
    color: var(--accent-ink);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--accent-hover);
}

img {
    max-width: 100%;
    height: auto;
}

/* ===== Navigation ===== */
.main-nav {
    background: var(--primary);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-md);
}

.nav-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.25rem;
    text-decoration: none;
}

.nav-logo i {
    color: var(--accent);
    font-size: 1.4rem;
}

/* The all-white wordmark sits directly on the blue bar — no chip, no border.
   The logo is a horizontal wordmark, so we fix its height and let width flow. */
.logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logo-badge img {
    display: block;
    height: 28px;
    width: auto;
    object-fit: contain;
}

.nav-logo:hover {
    opacity: 0.9;
}

.footer-brand .logo-badge img {
    height: 30px;
}

/* Auth (admin login) card is white, so the logo sits directly without a chip */
.auth-logo {
    display: block;
    margin: 0 auto 1rem;
    text-align: center;
}

.auth-logo img {
    height: 44px;
    width: auto;
    object-fit: contain;
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-links a {
    color: rgba(255, 255, 255, 0.85);
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-weight: 500;
    font-size: 0.9rem;
    transition: var(--transition);
}

.nav-links a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.nav-btn-outline {
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
}

.nav-btn-outline:hover {
    border-color: var(--accent) !important;
    background: var(--accent) !important;
    color: var(--accent-on) !important;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.nav-toggle span {
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: var(--transition);
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    line-height: 1.4;
}

.btn-primary {
    background: var(--accent);
    color: var(--accent-on);
}

.btn-primary:hover {
    background: var(--accent-hover);
    color: var(--accent-on);
}

.btn-secondary {
    background: var(--primary-light);
    color: #fff;
}

.btn-secondary:hover {
    background: var(--primary);
    color: #fff;
}

.btn-danger {
    background: var(--danger);
    color: #fff;
}

.btn-danger:hover {
    background: #b91c1c;
    color: #fff;
}

.btn-block {
    width: 100%;
    justify-content: center;
}

.btn-sm {
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
}

.btn-lg {
    padding: 0.85rem 2rem;
    font-size: 1.05rem;
}

/* ===== Alerts ===== */
.alert {
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
}

.alert-success {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid #a7f3d0;
}

.alert-error {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid #fecaca;
}

/* ===== Badges ===== */
.badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-type {
    background: var(--accent-light);
    color: var(--accent-ink);
}

.badge-completed {
    background: var(--success-bg);
    color: var(--success);
}

.badge-active {
    background: #eff6ff;
    color: #2563eb;
}

/* ===== Auth Section ===== */
.auth-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.auth-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-icon {
    font-size: 2.5rem;
    color: var(--accent);
    margin-bottom: 0.75rem;
}

.auth-header h1 {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 0.25rem;
}

.auth-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.auth-form .form-group {
    margin-bottom: 1.25rem;
}

.auth-form label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.auth-form input[type="text"],
.auth-form input[type="password"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    transition: var(--transition);
    font-family: var(--font-body);
}

.auth-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(218, 170, 0, 0.25);
}

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.auth-footer a {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ===== Admin Section ===== */
.admin-section {
    flex: 1;
    padding: 2rem 0;
}

.admin-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.admin-header h1 {
    font-size: 1.75rem;
    color: var(--primary);
}

.admin-header h1 i {
    color: var(--accent);
    margin-right: 0.5rem;
}

.header-actions {
    display: flex;
    gap: 0.75rem;
}

/* ===== Stats Grid ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.stat-card.stat-primary {
    background: var(--primary);
    border-color: var(--primary);
}

.stat-card.stat-primary .stat-icon {
    background: rgba(255, 255, 255, 0.15);
    color: var(--accent);
}

.stat-card.stat-primary .stat-number,
.stat-card.stat-primary .stat-label {
    color: #fff;
}

.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    background: var(--accent-light);
    color: var(--accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

/* ===== Dashboard Grid ===== */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.dashboard-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.dashboard-card h2 {
    font-size: 1.1rem;
    color: var(--primary);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.dashboard-card h2 i {
    color: var(--accent);
    margin-right: 0.5rem;
}

.type-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bg-light);
}

.type-row:last-child {
    border-bottom: none;
}

.type-name {
    font-size: 0.9rem;
    color: var(--text-dark);
}

.type-count {
    background: var(--primary);
    color: #fff;
    min-width: 28px;
    text-align: center;
}

.recent-list {
    display: flex;
    flex-direction: column;
}

.recent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--bg-light);
    color: var(--text-dark);
    text-decoration: none;
}

.recent-item:last-child {
    border-bottom: none;
}

.recent-item:hover {
    color: var(--accent);
}

.recent-info {
    display: flex;
    flex-direction: column;
}

.recent-info strong {
    font-size: 0.9rem;
}

.recent-info span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ===== Admin Table ===== */
.admin-search {
    margin-bottom: 1.5rem;
}

.search-form {
    display: flex;
    gap: 0.5rem;
    max-width: 500px;
}

.search-form input {
    flex: 1;
    padding: 0.6rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-family: var(--font-body);
}

.search-form input:focus {
    outline: none;
    border-color: var(--accent);
}

.admin-table-wrapper {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th {
    background: var(--primary);
    color: #fff;
    padding: 0.85rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-table th:first-child {
    border-radius: var(--radius-lg) 0 0 0;
}

.admin-table th:last-child {
    border-radius: 0 var(--radius-lg) 0 0;
}

.admin-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

.admin-table tbody tr:hover {
    background: var(--bg-light);
}

.admin-table .text-center {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem;
}

.project-link {
    font-weight: 600;
    color: var(--primary);
}

.project-link:hover {
    color: var(--accent);
}

.actions-cell {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.inline-form {
    display: inline;
}

/* ===== Project Form ===== */
.project-form {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.form-section-title {
    font-size: 1.1rem;
    color: var(--primary);
    margin: 2rem 0 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.form-section-title i {
    color: var(--accent);
    margin-right: 0.4rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    margin-bottom: 0.5rem;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-family: var(--font-body);
    transition: var(--transition);
    background: var(--bg-white);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(218, 170, 0, 0.25);
}

.form-group small {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.form-group input[type="file"] {
    padding: 0.5rem;
    font-size: 0.85rem;
}

.current-image {
    margin-bottom: 0.75rem;
}

.thumb-preview {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    display: block;
}

.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 0.4rem;
    font-weight: 400 !important;
    font-size: 0.85rem !important;
    color: var(--text-muted) !important;
    cursor: pointer;
}

/* Admin: multi-image manager (edit form) */
.image-manager {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.image-manager-item {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-light);
}

.image-manager-item img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
}

.img-primary-flag {
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--accent);
    color: var(--accent-on);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.image-manager-controls {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
}

.image-manager-controls label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
    margin: 0;
}

.muted-note {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

/* Admin: read-only gallery thumbs on the project show page */
.admin-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.admin-gallery-thumb {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border: 2px solid transparent;
}

.admin-gallery-thumb.is-primary {
    border-color: var(--accent);
}

.admin-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-gallery-thumb span {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--accent);
    color: var(--accent-on);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
}

.form-actions {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 0.75rem;
}

.geocode-preview-map {
    height: 250px;
    border-radius: var(--radius);
    margin-top: 1rem;
    border: 1px solid var(--border);
    display: none;
}

.geocode-preview-map.active {
    display: block;
}

/* ===== Project Detail ===== */
.project-detail-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 1.5rem;
}

.project-detail-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.project-detail-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.project-detail-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    margin-bottom: 1.5rem;
}

.project-detail-card h2 {
    font-size: 1rem;
    color: var(--primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.project-detail-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-dark);
}

.admin-detail-map {
    height: 300px;
    border-radius: var(--radius);
}

.detail-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1rem;
}

.detail-list dt {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.detail-list dd {
    font-size: 0.9rem;
}

.detail-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ===== Footer ===== */
.main-footer {
    background: var(--primary);
    color: rgba(255, 255, 255, 0.7);
    margin-top: auto;
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 1.5rem;
}

.footer-brand {
    margin-bottom: 1.25rem;
}

.footer-brand h3 {
    color: #fff;
    font-size: 1.15rem;
    margin-bottom: 0.3rem;
}

.footer-brand h3 i {
    color: var(--accent);
}

.footer-brand p {
    font-size: 0.9rem;
}

.footer-contact {
    margin-bottom: 1.5rem;
}

.footer-contact p {
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

.footer-contact i {
    color: var(--accent);
    width: 18px;
    margin-right: 0.4rem;
}

.footer-contact a {
    color: inherit;
    text-decoration: none;
}

.footer-contact a:hover {
    color: var(--accent);
}

.footer-bottom {
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .project-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--primary);
        flex-direction: column;
        padding: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: var(--shadow-lg);
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links a {
        padding: 0.75rem 1rem;
        width: 100%;
    }

    .admin-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-group.full-width {
        grid-column: 1;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .search-form {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .admin-container {
        padding: 0 1rem;
    }
}

/* ==============================
   Drag & drop image uploader (admin project forms) — see public/js/upload.js
   ============================== */
.dropzone {
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-light);
    padding: 1.75rem 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.dropzone.is-dragover {
    border-color: var(--accent);
    background: var(--accent-light);
}

/* Native input is hidden; the whole zone acts as the trigger. In the no-support
   fallback (.dropzone-plain) it's shown again so uploads still work. */
.dropzone input[type="file"] { display: none; }
.dropzone.dropzone-plain input[type="file"] { display: inline-block; }

.dropzone-prompt i {
    font-size: 2rem;
    color: var(--primary);
}

.dropzone-prompt p {
    margin: 0.5rem 0 0.25rem;
    color: var(--text-dark);
}

.dropzone-browse {
    color: var(--accent-ink);
    font-weight: 600;
    text-decoration: underline;
}

.dropzone-prompt small { color: var(--text-muted); }

.dropzone-note {
    display: block;
    color: var(--danger);
    font-size: 0.8rem;
    margin-top: 0.4rem;
}

.dropzone-previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.dz-item {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border);
    text-align: left;
}

.dz-item img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    display: block;
}

.dz-primary {
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--accent);
    color: var(--accent-on);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

.dz-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.dz-remove:hover { background: var(--danger); }

/* "Make primary" star on non-primary uploads (sits where the Primary badge is) */
.dz-makeprimary {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.dz-makeprimary:hover { background: var(--accent); color: var(--accent-on); }

.dz-item.is-primary { outline: 2px solid var(--accent); outline-offset: -2px; }

.dropzone-primary-hint {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.dropzone-primary-hint i { color: var(--accent-ink); }

.dz-name {
    display: block;
    font-size: 0.7rem;
    padding: 0.25rem 0.4rem 0;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dz-size {
    display: block;
    font-size: 0.65rem;
    padding: 0 0.4rem 0.35rem;
    color: var(--text-muted);
}

/* Preview ribbon — shown on the real project page when opened via admin "Preview" */
.preview-ribbon {
    position: sticky;
    top: 0;
    z-index: 1100;
    background: var(--accent);
    color: var(--accent-on);
    text-align: center;
    padding: 0.6rem 1rem;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    box-shadow: var(--shadow);
}

.preview-ribbon i { margin-right: 0.4rem; }

/* ===== Admin: Categories ===== */
.category-add {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.category-add input[type="text"],
.category-table input[type="text"] {
    padding: 0.5rem 0.75rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-family: var(--font-body);
    background: var(--bg-white);
}

.category-add input[type="text"] {
    flex: 1 1 220px;
    max-width: 320px;
}

.category-table input[type="text"] {
    width: 100%;
    min-width: 160px;
}

.category-add input[type="color"],
.category-table input[type="color"] {
    width: 44px;
    height: 34px;
    padding: 2px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-white);
    cursor: pointer;
}