/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Base ───────────────────────────────────────────────── */
body {
    font-family: system-ui, sans-serif;
    margin: 0;
    background: #f5f5f5;
    color: #222;
}

a { color: #2d6a4f; }
a:hover { color: #1b4332; }

h1 { margin-top: 0; }
h2 { margin-bottom: 1rem; }
h3 { margin-top: 0; }

/* ── Layout ─────────────────────────────────────────────── */
.container {
    max-width: 1536px;
    margin: 2rem auto;
    padding: 0 2rem;
}

/* ── Navigation ─────────────────────────────────────────── */
nav {
    background: #2d6a4f;
    color: #fff;
    padding: .75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

nav a {
    color: #d8f3dc;
    text-decoration: none;
    font-weight: 500;
}

nav a:hover { color: #fff; }

.brand {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.nav-logo { height: 2rem; }

.nav-user { position: relative; margin-left: auto; }

.nav-user-btn {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: transparent;
    border: none;
    color: #d8f3dc;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    padding: .3rem .6rem;
    border-radius: 4px;
}
.nav-user-btn:hover { background: rgba(255,255,255,.12); color: #fff; }

.nav-user-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + .4rem);
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
    min-width: 180px;
    z-index: 200;
    overflow: hidden;
}
.nav-user-dropdown.open { display: block; }
.nav-user-dropdown a {
    display: block;
    padding: .65rem 1rem;
    color: #222;
    text-decoration: none;
    font-weight: 500;
    font-size: .9rem;
}
.nav-user-dropdown a:hover { background: #f0f0f0; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: .4rem .9rem;
    border-radius: 4px;
    border: none;
    text-decoration: none;
    font-size: .9rem;
    font-family: inherit;
    cursor: pointer;
    cursor: pointer;
    border: none;
}

.btn-primary { background: #2d6a4f; color: #fff; }
.btn-primary:hover { background: #1b4332; }
.btn-danger { background: #dc3545; color: #fff; }
.btn-danger:hover { background: #b02a37; }
.btn-secondary { background: #6c757d; color: #fff; }
.btn-secondary:hover { background: #545b62; }
.btn-block { width: 100%; }
.btn-sm { font-size: .8rem; padding: .3rem .6rem; }

/* ── Tables ──────────────────────────────────────────────── */
table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

th, td { padding: .65rem 1rem; text-align: left; border-bottom: 1px solid #e9ecef; }
th { background: #e9ecef; font-weight: 600; }

.sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.sort-link:hover { color: #2d6a4f; }
.sort-link--active { color: #2d6a4f; }
tr:last-child td { border-bottom: none; }

.table-flush { box-shadow: none; }
.table-label-col { width: 160px; }

/* ── Cards ───────────────────────────────────────────────── */
.card {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    padding: 1.5rem;
}

.card-sm { padding: .75rem; }
.card-grow { flex: 1; min-width: 260px; }

/* ── Forms ───────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }

.pref-static { margin: 0; color: #444; }

.form-h {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}
.form-h label {
    display: block;
    width: 160px;
    flex-shrink: 0;
    margin-bottom: 0;
}
.form-h select,
.form-h input,
.form-h .pref-static { flex: 1; }

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: .3rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: .45rem .75rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1rem;
    background-color: #fff;
}

.form-group input[type=color] {
    width: 3rem;
    padding: .1rem;
    height: 2rem;
}

.form-group .errors {
    color: #dc3545;
    font-size: .85rem;
    margin-top: .25rem;
}

.form-actions {
    display: flex;
    gap: .5rem;
    margin-top: 1.5rem;
}

.field-help { color: #6c757d; font-size: .875rem; }

.form-group--inline-trio {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

.color-input-group {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.color-swatch {
    width: 2.5rem;
    height: 2.2rem;
    padding: .1rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}

.form-inline { display: inline; }

/* ── Flash messages ──────────────────────────────────────── */
.flash { padding: .75rem 1rem; border-radius: 4px; margin-bottom: 1rem; }
.flash-success { background: #d1e7dd; color: #0a3622; }
.flash-error { background: #f8d7da; color: #58151c; }

/* ── Page headers ────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.page-header-back {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.page-header-back h1 { margin: 0; }

.back-link { color: #555; text-decoration: none; }

/* ── Utilities ───────────────────────────────────────────── */
.actions { display: flex; gap: .5rem; }

.color-dot {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1px solid #aaa;
    vertical-align: middle;
}

/* ── Spacing utilities ───────────────────────────────────── */
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mt-2  { margin-top: .5rem; }
.mt-6  { margin-top: 1.5rem; }

.pref-card { max-width: 480px; }
.pref-card h2 { margin-top: 0; }
.pref-url {
    font-family: monospace;
    font-size: .8rem;
    word-break: break-all;
}
.ml-auto { margin-left: auto; }

.text-muted    { color: #555; }
.text-muted-sm { color: #555; font-size: .85rem; }
.text-secondary { color: #888; }
.text-light    { color: #666; }

/* ── Deceased animals ────────────────────────────────────── */
.deceased { color: #999; }
.deceased-icon { color: #999; margin-left: .3rem; }

/* ── Empty state ─────────────────────────────────────────── */
.empty-state { text-align: center; padding: 4rem 0; color: #aaa; }
.empty-state__logo { width: 30%; opacity: .15; margin: 0 auto 1.5rem; display: block; }
.empty-state__text { font-size: 1.1rem; }

/* ── Login ───────────────────────────────────────────────── */
.login-wrapper { max-width: 380px; margin: 4rem auto; }
.login-title { text-align: center; margin-bottom: 1.5rem; }

/* ── Photo grid ──────────────────────────────────────────── */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.photo-card { display: flex; flex-direction: column; gap: .5rem; }

.photo-thumb {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
}

.photo-meta { font-size: .85rem; color: #444; }
.photo-meta__desc { margin: 0 0 .2rem; }
.photo-meta__date { margin: 0; color: #888; }

.photo-card-actions { display: flex; gap: .4rem; margin-top: auto; }
.photo-card-actions .btn { flex: 1; text-align: center; }
.photo-card-actions form { flex: 1; }
.photo-card-actions form .btn { width: 100%; }

/* ── Upload form ─────────────────────────────────────────── */
.photo-row {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}

.photo-row label { font-weight: 500; display: block; margin-bottom: .3rem; }
.photo-row input { width: 100%; }

.photo-row__file { flex: 1; min-width: 140px; }
.photo-row__desc { flex: 2; min-width: 160px; }
.photo-row__date { min-width: 140px; }
.photo-row__remove { padding-top: 1.6rem; }

.upload-help { margin-left: .75rem; color: #666; }

/* ── Photo edit ──────────────────────────────────────────── */
.photo-edit-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.photo-edit-preview {
    max-width: 320px;
    max-height: 320px;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 1px 6px rgba(0,0,0,.15);
}

/* ── Lightbox ────────────────────────────────────────────── */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
}

.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.lightbox-img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 4px 32px rgba(0,0,0,.5);
}

.lightbox-desc {
    color: #eee;
    font-size: 1rem;
    margin: 0;
    max-width: 60ch;
    text-align: center;
}