@charset "UTF-8";

@media (min-width: 769px) {
    .collection-add-form .form-row-a,
    #editEntryForm_modal .form-row-a { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .collection-add-form .form-row-b { grid-template-columns: repeat(3, 175px) minmax(0, 1fr); }
    #editEntryForm_modal .form-row-b { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .form-grid-3 .col-span-3 { grid-column: span 3; }
    .form-grid-3 .col-span-full { grid-column: 1 / -1; }
}

.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-md); }

.collection-entry {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
}

.collection-entry--inactive { opacity: 0.6; }

.entries-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.entries-grid .collection-entry {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-md);
    border-left: 4px solid var(--border-color-strong);
}

.entries-grid .collection-entry--inactive {
    border-left-color: var(--text-muted);
}

.entries-grid .collection-entry-image {
    width: 200px;
    height: 200px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    cursor: pointer;
}

.entries-grid .collection-entry-no-image {
    width: 200px;
    height: 200px;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    text-align: center;
}

.entries-grid .collection-entry-no-image i {
    font-size: var(--font-size-2xl);
}

.entries-grid .collection-entry-body {
    flex: 1;
    min-width: 0;
}

.entries-grid.grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
}

.entries-grid.grid-view .collection-entry {
    display: block;
    padding: 0;
    border-left: 1px solid var(--border-color);
    overflow: hidden;
}

.entries-grid.grid-view .collection-entry-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

.entries-grid.grid-view .collection-entry-no-image {
    width: 100%;
    height: 200px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.entries-grid.grid-view .collection-entry-body {
    padding: var(--space-md);
}

.collection-entry-species { margin: var(--space-xs) 0 var(--space-hairline); font-size: var(--font-size-base); color: var(--text-primary); font-weight: 600; }

.collection-entry-forbidden-notice { margin-bottom: var(--space-sm); padding: var(--space-sm); background: rgba(181, 77, 77, 0.06); border: 1px solid rgba(181, 77, 77, 0.18); border-radius: var(--radius-sm); font-size: var(--font-size-xs); color: var(--accent-danger); line-height: 1.4; }

.collection-entry-redbook-notice { margin-bottom: var(--space-sm); padding: var(--space-sm); background: rgba(196, 138, 44, 0.10); border: 1px solid rgba(196, 138, 44, 0.28); border-radius: var(--radius-sm); font-size: var(--font-size-xs); color: var(--accent-warning); line-height: 1.4; }

.collection-entry-actions { display: flex; gap: var(--space-xs); align-items: stretch; }

.collection-entry-actions form { display: flex; margin: 0; }

.collection-entry-btn { padding: var(--space-sm) var(--space-md); color: var(--text-inverse); border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--font-size-sm); text-decoration: none; text-align: center; display: inline-flex; align-items: center; gap: var(--space-xs); line-height: 1.4; }

.collection-entry-actions .collection-entry-btn { padding: var(--space-sm) var(--space-12); font-size: var(--font-size-xs); gap: var(--space-xs); white-space: nowrap; }

.entries-grid.grid-view .collection-entry .collection-entry-actions > *,
.entries-grid.grid-view .collection-entry .collection-entry-actions form > * {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
}

.entries-grid.grid-view .collection-entry .collection-entry-actions .collection-entry-btn {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
}

.collection-entry-btn--archive { background: var(--accent-warning); }

.collection-entry-btn--archive:hover { background: var(--accent-warning-hover); }

.collection-add-form { display: none; background: var(--bg-secondary); padding: var(--space-xl); border-radius: var(--radius-lg); margin-bottom: var(--space-xl); border: 1px solid var(--border-color); }

/* Скрытое состояние формы держим правилом CSS, а не классом в разметке: иначе несвежий шаблон
   (или кэш Twig с выключенным auto_reload) оставляет форму раскрытой при загрузке страницы. */
.collection-add-form.is-open { display: block; }

.collection-filter-input { width: 100%; height: var(--input-height); padding: 0 var(--space-md); border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: var(--font-size-base); font-family: inherit; color: var(--text-primary); background: var(--bg-primary); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); box-sizing: border-box; }

.collection-filter-input:focus { outline: none; border-color: var(--accent-primary); box-shadow: var(--focus-ring); }

.collection-filter-select { width: 100%; height: var(--input-height); padding: 0 var(--space-md); border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: var(--font-size-base); font-family: inherit; color: var(--text-primary); background: var(--bg-primary); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); box-sizing: border-box; appearance: none; -moz-appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23738276%27 stroke-width=%272%27%3e%3cpolyline points=%276 9 12 15 18 9%27%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; padding-right: var(--select-gutter); }

.collection-filter-select:focus { outline: none; border-color: var(--accent-primary); box-shadow: var(--focus-ring); }

.collection-view-toggle { display: flex; gap: var(--space-xs); }

.collection-view-btn { flex: 1; height: var(--input-height); min-width: 40px; padding: 0 var(--space-md); border: 1px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast); font-size: var(--font-size-base); display: inline-flex; align-items: center; justify-content: center; }

.collection-view-btn--active { background: var(--accent-info); color: var(--text-inverse); border-color: var(--accent-info); }

.collection-view-btn:not(.collection-view-btn--active) { background: var(--bg-primary); color: var(--text-primary); }

.collection-alert-success { background: rgba(76, 140, 90, 0.10); color: var(--accent-success); padding: var(--space-md); border-radius: var(--radius-sm); margin-bottom: var(--space-lg); }

.collection-report-link { display: inline-block; padding: var(--space-sm) var(--space-md); background: var(--bg-secondary); color: var(--text-muted); text-decoration: none; border-radius: var(--radius-sm); font-size: var(--font-size-sm); border: 1px solid var(--border-color); }

.collection-report-link:hover { background: rgba(181, 77, 77, 0.06); border-color: var(--accent-danger); color: var(--accent-danger); }

.collection-input--compact { width: 160px; height: 36px; padding-top: 0; padding-bottom: 0; font-size: var(--font-size-xs); }

.text-warning-bg { background: rgba(196, 138, 44, 0.18); padding: var(--space-xs); border-radius: var(--radius-xs); margin-left: var(--space-xs); }

.collection-page .collection-hero {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg) var(--space-xl);
    margin-bottom: var(--space-md);
}

.collection-page .collection-hero-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.collection-page .collection-hero-text {
    min-width: 0;
}

.collection-page .collection-hero-title {
    margin: 0 0 var(--space-xs);
    font-size: var(--font-size-3xl, 1.75rem);
    line-height: 1.15;
}

.collection-page .collection-hero-sub {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-base);
    max-width: 70ch;
}

.collection-page .collection-hero-sep {
    margin: 0 var(--space-hairline);
    color: var(--text-muted);
    font-weight: 400;
}

.collection-page .collection-hero-cats {
    color: var(--text-muted);
}

.collection-page .collection-hero-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    align-items: center;
}

.collection-page .collection-tabs {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    margin-top: var(--space-lg);
}

.collection-page .collection-tab {
    padding: var(--space-sm) var(--space-md);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.collection-page .collection-tab:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.collection-page .collection-tab.is-active {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 600;
}

.collection-page .collection-tab b {
    font-weight: 700;
}

.collection-page .collection-controls {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.collection-page .collection-search {
    position: relative;
    flex: 1 1 320px;
    min-width: 0;
}

.collection-page .collection-search-icon {
    position: absolute;
    left: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: var(--font-size-base);
    pointer-events: none;
}

.collection-page .collection-search .collection-filter-input {
    padding-left: var(--space-36);
}

/* Сортировка коллекции: наша панель встаёт на место прежнего нативного селекта */
.collection-page .collection-sort-select,
.collection-page .collection-controls .filter-select {
    width: 200px;
    flex: 0 0 200px;
}

.collection-page .collection-view-toggle {
    display: flex;
    gap: var(--space-sm);
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    margin-left: 0;
}

.collection-page .collection-view-btn {
    width: 120px;
    height: var(--input-height);
    min-width: 0;
    padding: 0 var(--space-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--font-size-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.collection-page .collection-view-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color-strong);
}

.collection-page .collection-view-btn--active,
.collection-page .collection-view-btn--active:hover {
    background: var(--accent-info);
    color: var(--text-inverse);
    border-color: var(--accent-info);
    font-weight: 600;
}

.collection-page .collection-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.collection-page .collection-entry-cat {
    position: absolute;
    top: var(--space-12);
    left: var(--space-12);
    z-index: 2;
    max-width: calc(100% - 20px);
    padding: 5px var(--space-sm);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.9);
    color: #4f5d6d;
    font-size: var(--font-size-xs);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="dark"] .collection-page .collection-entry-cat {
    background: rgba(0, 0, 0, 0.55);
    color: var(--text-secondary);
}

.collection-page .u-lightbox-source {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.collection-page .collection-entry {
    cursor: default;
    border-color: var(--border-color);
    transition: none;
}

.collection-page .collection-entry:has(:focus-visible) {
    border-color: var(--accent-primary);
}

.collection-page .collection-entry-media {
    position: relative;
    flex-shrink: 0;
    background: var(--bg-tertiary);
}

.collection-page .collection-entry-no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    text-align: center;
}

.collection-page .collection-entry-title {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.collection-page .collection-entry-title:hover {
    color: var(--accent-primary);
}

.collection-page .collection-entry-title:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.pet-modal--view .collection-entry-chips,
.collection-page .collection-entry-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
    margin-top: var(--space-sm);
}

.pet-modal--view .collection-chip,
.collection-page .collection-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-hairline) var(--space-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.6;
    text-decoration: none;
    white-space: nowrap;
}

a.collection-chip:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.pet-modal--view .collection-chip--male,
.collection-page .collection-chip--male {
    color: var(--accent-info);
    border-color: rgba(58, 134, 168, 0.35);
    background: rgba(58, 134, 168, 0.08);
}

.pet-modal--view .collection-chip--female,
.collection-page .collection-chip--female {
    color: var(--accent-danger);
    border-color: rgba(181, 77, 77, 0.32);
    background: rgba(181, 77, 77, 0.07);
}

.pet-modal--view .collection-chip--group,
.collection-page .collection-chip--group {
    color: var(--accent-primary);
    border-color: rgba(45, 122, 78, 0.35);
    background: rgba(45, 122, 78, 0.08);
    cursor: help;
}

.pet-modal--view .collection-chip--archived,
.collection-page .collection-chip--archived {
    color: var(--text-muted);
    border-style: dashed;
    background: transparent;
}

.pet-modal--view .collection-chip--forbidden,
.collection-page .collection-chip--forbidden {
    color: var(--text-inverse);
    background: var(--accent-danger);
    border-color: var(--accent-danger);
    cursor: help;
}

.pet-modal--view .collection-chip--redbook,
.collection-page .collection-chip--redbook {
    color: var(--accent-warning);
    background: var(--accent-warning-bg);
    border-color: rgba(196, 138, 44, 0.35);
    cursor: help;
}

.pet-modal--view .collection-chip--pedigree,
.collection-page .collection-chip--pedigree {
    color: var(--accent-success);
    border-color: rgba(76, 140, 90, 0.35);
    background: rgba(76, 140, 90, 0.08);
}

.pet-modal--view .collection-chip--breeding,
.collection-page .collection-chip--breeding {
    color: var(--accent-danger);
    border-color: rgba(181, 77, 77, 0.32);
    background: rgba(181, 77, 77, 0.07);
}

.collection-page .collection-entry-id {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin: 0 0 var(--space-hairline);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-family-mono, monospace);
    font-size: var(--font-size-xs);
    letter-spacing: 0.02em;
    padding: 0;
}

.collection-page .collection-entry-details {
    display: grid;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.collection-page .collection-detail {
    display: flex;
    gap: var(--space-sm);
    align-items: baseline;
    min-width: 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.collection-page .collection-detail-label {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

.collection-page .collection-detail-value {
    min-width: 0;
    color: var(--text-primary);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.collection-page .collection-entry-health,
.collection-page .collection-entry-breeding-notes {
    border-left-width: 3px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.collection-page .collection-entry-health strong,
.collection-page .collection-entry-breeding-notes strong {
    font-weight: 600;
}

.collection-page .collection-entry-actions {
    flex-wrap: wrap;
}

.collection-page .collection-entry-btn--open,
.collection-page .collection-entry-btn--manage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    height: 36px;
    padding: 0 var(--space-12);
    line-height: 1;
    white-space: nowrap;
}

.collection-page .collection-entry-btn--open .las,
.collection-page .collection-entry-btn--manage .las {
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
    font-size: var(--font-size-sm);
}

.collection-page .entries-grid.grid-view .collection-entry-actions .collection-entry-btn {
    flex: 1 1 0;
    min-width: 0;
}

.collection-page .entries-grid.grid-view .collection-entry-btn--manage {
    width: 100%;
}

.collection-page .collection-entry-btn--open {
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.collection-page .collection-entry-btn--open:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-inverse);
}

.collection-page .collection-entry-btn--manage {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.collection-page .collection-entry-btn--manage:hover,
.collection-page .collection-entry-btn--manage[aria-expanded="true"] {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-inverse);
}

.collection-manage {
    position: relative;
    display: flex;
}

.collection-manage-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + var(--space-sm));
    z-index: 40;
    min-width: 232px;
    max-width: 280px;
    padding: var(--space-xs);
    display: flex;
    flex-direction: column;
    gap: var(--space-hairline);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    text-align: left;
}

.collection-manage-menu[hidden],
.collection-manage-sub[hidden] {
    display: none;
}

.collection-manage-menu .collection-manage-item[hidden],
.collection-manage-menu form[hidden] {
    display: none;
}

.collection-manage-menu form {
    display: block;
    margin: 0;
}

.collection-manage-item {
    display: grid;
    grid-template-columns: 16px 1fr;
    align-items: center;
    column-gap: var(--space-sm);
    width: 100%;
    padding: var(--space-sm) var(--space-12);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-family: inherit;
    line-height: 1.4;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.collection-manage-item:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.collection-manage-item > .las {
    width: 16px;
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.collection-manage-item:hover > .las {
    color: var(--accent-primary);
}

.collection-manage-item--danger {
    color: var(--accent-danger);
}

.collection-manage-item--danger > .las,
.collection-manage-item--danger:hover > .las {
    color: var(--accent-danger);
}

.collection-manage-item--danger:hover {
    background: rgba(181, 77, 77, 0.08);
}

.collection-manage-sub {
    padding: var(--space-xs) var(--space-sm) var(--space-sm);
    margin: var(--space-hairline) 0 var(--space-hairline) var(--space-12);
    border-left: 1px solid var(--border-color);
}

.collection-manage-sub form {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.collection-manage-sub .collection-input--compact {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.pet-modal--view .collection-manage-menu {
    max-height: min(60vh, 360px);
    overflow-y: auto;
}

.pet-modal--view .pet-manage .collection-manage-menu {
    left: 0;
    right: auto;
}

.pet-manage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    height: 36px;
    padding: 0 var(--space-sm);
    font-family: inherit;
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.pet-manage-btn:hover,
.pet-manage-btn[aria-expanded="true"] {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-inverse);
}

.pet-manage-btn .las {
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
    font-size: var(--font-size-sm);
}

.pet-modal--view .pet-modal-footer .btn--secondary {
    height: 36px;
    padding: 0 var(--space-md);
    font-size: var(--font-size-sm);
}

.collection-page .entries-grid:not(.grid-view) {
    gap: var(--space-sm);
}

.collection-page .entries-grid:not(.grid-view) .collection-entry {
    padding: var(--space-sm);
    gap: var(--space-md);
}

.collection-page .entries-grid:not(.grid-view) .collection-entry-actions {
    justify-content: center;
}

.collection-page .entries-grid {
    margin-bottom: var(--space-md);
}

.collection-page .entries-grid.grid-view {
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: var(--space-md);
}

.collection-page .entries-grid.grid-view .collection-entry {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-left: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.collection-page .entries-grid.grid-view .collection-entry-media {
    width: 100%;
    height: 160px;
}

.collection-page .entries-grid.grid-view .collection-entry-image {
    width: 100%;
    height: 160px;
}

.collection-page .entries-grid.grid-view .collection-entry-no-image {
    width: 100%;
    height: 160px;
}

.collection-page .entries-grid.grid-view .collection-entry-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-md);
}

.collection-page .entries-grid.grid-view .collection-entry-details {
    margin-bottom: var(--space-sm);
}

.collection-page .entries-grid.grid-view .collection-entry-actions {
    margin-top: auto;
    padding-top: var(--space-xs);
}

.collection-page .entries-grid:not(.grid-view) {
    gap: var(--space-sm);
}

.collection-page .entries-grid:not(.grid-view) .collection-entry {
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-md);
    border-left: 3px solid var(--border-color-strong);
    border-radius: var(--radius-md);
    align-items: center;
}

.collection-page .entries-grid:not(.grid-view) .collection-entry-media {
    width: 150px;
    height: 150px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.collection-page .entries-grid:not(.grid-view) .collection-entry-no-image {
    width: 150px;
    height: 150px;
    border-radius: var(--radius-md);
}

.collection-page .entries-grid:not(.grid-view) .collection-entry-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-lg);
}

.collection-page .entries-grid:not(.grid-view) .collection-entry-body {
    padding-right: 240px;
}

.collection-page .entries-grid:not(.grid-view) .collection-entry-actions {
    position: absolute;
    top: 50%;
    right: var(--space-md);
    transform: translateY(-50%);
}

.pet-modal--view {
    max-width: 720px;
}

.pet-modal--view .pet-modal-body {
    display: grid;
    gap: var(--space-md);
}

.pet-modal--view .pet-modal-footer {
    justify-content: space-between;
    align-items: center;
}

.pet-view-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: var(--space-sm);
    background: transparent;
    padding: 0;
    border: 0;
}

.pet-view-photo {
    display: block;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    cursor: zoom-in;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.pet-view-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pet-view-photos-count,
.pet-view-latin {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.pet-view-name {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.pet-view-latin {
    font-style: italic;
    margin-top: calc(-1 * var(--space-xs));
}

.pet-modal--view .collection-entry-chips.pet-view-chips {
    margin-top: 0;
}

.pet-view-details {
    display: block;
}

.pet-view-detail {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.pet-view-detail:last-child {
    border-bottom: none;
}

.pet-view-detail-label {
    flex: 0 1 auto;
    min-width: 0;
    color: var(--text-primary);
    font-weight: 600;
}

.pet-view-detail-value {
    margin-left: auto;
    min-width: 0;
    text-align: right;
    color: var(--text-primary);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.pet-view-group {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.pet-view-pair {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm);
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--accent-danger);
    font-size: var(--font-size-sm);
}

.pet-view-pair-date {
    font-weight: 600;
    color: var(--accent-danger);
}

.pet-view-pair a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-xs);
    color: var(--text-link);
    text-decoration: none;
}

.pet-view-pair a:hover {
    text-decoration: underline;
}

.pet-view-owner {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--text-link);
    text-decoration: none;
}

.pet-view-owner:hover {
    text-decoration: underline;
}

@media (max-width: 1200px) {
    .collection-page .entries-grid.grid-view {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .collection-page .entries-grid.grid-view {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .collection-page .collection-hero {
        padding: var(--space-lg);
    }
    .collection-page .collection-hero-row {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-md);
    }
    .collection-page .collection-hero-actions {
        width: 100%;
    }
    .collection-page .collection-view-toggle {
        margin-left: 0;
        flex: 1 1 100%;
    }
    .collection-page .collection-view-btn {
        width: auto;
        flex: 1 1 0;
    }
    .collection-page .collection-sort-select,
    .collection-page .collection-controls .filter-select {
        width: auto;
        flex: 1 1 140px;
    }
}

@media (max-width: 600px) {
    .collection-page .collection-view-toggle {
        display: none;
    }
    .collection-page .collection-hero-title {
        font-size: var(--font-size-2xl);
    }
    .collection-page .collection-tabs {
        margin-top: var(--space-md);
    }
    .collection-page .entries-grid.grid-view {
        grid-template-columns: 1fr;
    }
    .collection-page .entries-grid:not(.grid-view) .collection-entry {
        flex-wrap: wrap;
    }
    .collection-page .entries-grid:not(.grid-view) .collection-entry-media,
    .collection-page .entries-grid:not(.grid-view) .collection-entry-no-image {
        width: 96px;
        height: 96px;
    }
    .pet-view-gallery {
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    }
}

@media (max-width: 768px) {
    .collection-view-toggle {
        display: flex;
        gap: var(--space-xs);
    }
    .collection-view-btn {
        min-width: 36px;
        padding: 0 var(--space-12);
        font-size: var(--font-size-sm);
    }
    .form-grid-3 { grid-template-columns: 1fr; }
    .entries-grid.grid-view { grid-template-columns: 1fr; }
    .entries-grid .collection-entry { flex-direction: column; gap: var(--space-md); align-items: stretch; }
    .collection-page .entries-grid:not(.grid-view) .collection-entry-body { display: block; padding-right: 0; }
    .collection-page .entries-grid:not(.grid-view) .collection-entry-actions {
        position: static;
        top: auto;
        right: auto;
        transform: none;
        width: 100%;
        margin-top: var(--space-xs);
    }
    .entries-grid .collection-entry-image,
    .entries-grid .collection-entry-no-image { width: 100%; height: 200px; }
    .collection-entry-actions .collection-entry-btn { padding: var(--space-sm) var(--space-12); font-size: var(--font-size-xs); }
}

@media (max-width: 600px) {
    .collection-view-toggle { display: none; }
}

[data-theme="dark"] .collection-entry-forbidden-notice { background: rgba(242, 122, 122, 0.08); border-color: rgba(242, 122, 122, 0.22); }

[data-theme="dark"] .collection-entry-redbook-notice { background: var(--accent-warning-bg); border-color: rgba(240, 179, 75, 0.30); }

[data-theme="dark"] .collection-alert-success { background: rgba(77, 184, 123, 0.12); }

[data-theme="dark"] .collection-report-link:hover { background: rgba(242, 122, 122, 0.08); }

[data-theme="dark"] .text-warning-bg { background: var(--accent-warning-bg); }

.pet-modal-backdrop.is-above { z-index: calc(var(--z-modal) + 10); }

.pet-modal-icon { font-size: 22px; color: var(--text-muted); flex-shrink: 0; }

.pet-modal-id-text { display: flex; flex-direction: column; min-width: 0; }

.pet-modal-id-text .id { font-size: 11px; color: var(--text-muted); letter-spacing: 0.04em; }

.pet-modal-category { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pet-modal-category[hidden] { display: none; }

.pet-modal-id-text .name { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }

.pet-save-error { display: none; font-size: var(--font-size-sm); color: var(--accent-danger); margin: var(--space-sm) 0 var(--space-12); }

.pet-save-error.is-visible { display: block; }

.pet-gallery-grid { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-sm); }

.pet-gallery-cell { position: relative; width: 100px; height: 100px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; cursor: default; transition: border-color .15s; }

.pet-gallery-cell[draggable="true"] { cursor: grab; }

.pet-gallery-cell[draggable="true"]:active { cursor: grabbing; }

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

.pet-gallery-cell--primary { border-color: var(--accent-primary, #4a9); }

.pet-gallery-badge { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; text-align: center; padding: var(--space-hairline) 0; line-height: 1.2; }

.pet-gallery-actions { position: absolute; top: 2px; right: 2px; display: flex; gap: var(--space-hairline); opacity: 0; transition: opacity .15s; }

.pet-gallery-cell:hover .pet-gallery-actions { opacity: 1; }

.pet-gallery-btn { width: 22px; height: 22px; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; padding: 0; }

.pet-gallery-btn--star { background: rgba(255,255,255,.85); color: #d4a017; }

.pet-gallery-btn--star:hover { background: #d4a017; color: #fff; }

.pet-gallery-btn--star:disabled { opacity: .3; cursor: default; }

.pet-gallery-btn--del { background: var(--bg-primary); color: var(--accent-danger); }

.pet-gallery-btn--del:hover { background: var(--accent-danger); color: var(--text-inverse); }

.pet-gallery-add { margin-top: var(--space-xs); }

.pet-gallery-cell--pending { opacity: 0.65; }

.pet-gallery-badge--pending { background: rgba(200,150,0,.85); }

@media (max-width: 640px) {
    .pet-modal-footer .btn-cancel { display: none; }
}