/* Layout */

/* Header */
.header {
    /* No safe-area padding math here (19 August 2026) - the camera-cutout/
       status-bar/gesture-nav-bar clearance is handled natively now
       (MainActivity.java applies real WindowInsets as padding directly on
       the WebView), so the WebView's own rendering surface is already
       physically inset between the system bars - plain flat padding is
       all this needs. */
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    padding: 16px 20px 10px;
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-logo {
    font-size: 28px;
}

.header-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
}

.header-right {
    display: flex;
    gap: 8px;
}

.header-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 26px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.header-btn:hover, .header-btn:focus-visible {
    background: rgba(255,255,255,0.3);
}

/* Offline Banner */
.offline-banner {
    background: var(--warning);
    color: white;
    padding: 8px 16px;
    text-align: center;
    font-size: 0.95rem;
    display: none;
}

.offline-banner.show {
    display: block;
}

/* Daily Tip Banner */
.daily-tip-banner {
    background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f0e6cc;
}

.daily-tip-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.daily-tip-text {
    flex: 1;
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.3;
}

.daily-tip-refresh {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    padding: 4px;
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.3s;
}

.daily-tip-refresh:hover, .daily-tip-refresh:focus-visible {
    opacity: 1;
}

.daily-tip-refresh.spinning {
    animation: spin 0.5s ease;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Main Content */
/* No max-width, same as .header - it should fill the screen like the
   header does, not sit capped in a narrow centered column. .cards-grid's
   own auto-fill + per-card max-width (see components.css) is what
   controls how many cards pack into a row; modals/forms keep their own
   comfortable 600px cap (see .modal-content) since long input rows are
   unreadable, but that's a form-readability limit, not a page-width one. */
.main {
    padding: 20px;
}

@media (min-width: 700px) {
    .main { padding: 24px; }
}
@media (min-width: 1000px) {
    .main { padding: 28px; }
}

/* Section Title */
.section-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-light);
    margin: 24px 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title .badge {
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.badge-premium {
    background: var(--premium);
    color: white;
}

.badge-breeder {
    background: var(--breeder);
    color: white;
}


/* .cards-grid lives in components.css - it was previously duplicated here
   with different values, silently overridden by components.css (loads
   after this file, same specificity, wins the cascade). Removed rather
   than left as dead CSS that looks like it does something. */

/* Dog Card */
#dogsList {
    max-height: 450px;
    overflow-y: auto;
}

.dog-card {
    background: var(--card);
    border: 5px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.1s;
}

.dog-card-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.1rem;
    width: 100%;
    text-align: center;
}

.dog-card-body {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dog-card.active {
    border-color: var(--primary-text);
}

.dog-card:active {
    transform: scale(0.98);
}

.dog-info {
    flex: 1;
}

.dog-card-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}

.dog-edit-btn, .dog-delete-btn {
    border: none;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    min-width: 80px;
    text-align: center;
    touch-action: manipulation;
    transition: opacity 0.2s;
}

.dog-edit-btn {
    background: var(--primary);
    color: white;
}

.dog-delete-btn {
    background: var(--danger);
    color: white;
}

.dog-edit-btn:hover, .dog-edit-btn:active, .dog-edit-btn:focus-visible {
    opacity: 0.8;
}

.dog-delete-btn:hover, .dog-delete-btn:active, .dog-delete-btn:focus-visible {
    opacity: 0.8;
}

.dog-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    overflow: hidden;
    flex-shrink: 0;
}

.dog-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dog-info h3 {
    font-family: 'Fredoka', sans-serif;
    font-size: 1rem;
    margin-bottom: 2px;
}

.dog-info p {
    font-size: 0.95rem;
    color: var(--text-muted);
}

.add-dog-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--primary);
    border: none;
    border-radius: var(--radius);
    padding: 12px;
    text-align: center;
    cursor: pointer;
    color: white;
    transition: opacity 0.2s;
}

.add-dog-btn:hover, .add-dog-btn:focus-visible {
    opacity: 0.85;
}

.add-dog-btn .icon {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    color: white;
}

/* Active Dog Banner */
/* Now that .main can grow to the full screen width, the banner still caps
   at 3 feature cards wide (3 * 260px + 2 * 12px gap = 804px, see
   .cards-grid in components.css) rather than following .main - it's a dog
   profile summary, not something that should stretch across a wide
   screen. Centered to match the grid below it. */
.active-dog-banner {
    background: var(--card);
    border: 5px solid var(--primary);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 20px;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    box-shadow: var(--shadow);
    max-width: 804px;
    margin-left: auto;
    margin-right: auto;
}

.active-dog-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Avatar + name markup now comes from dogAvatarNameHTML() (js/dogs.js),
   which uses the generic .dog-avatar class - avatar/name sizing is set
   inline via its opts instead of dedicated active-dog-avatar/-name rules. */
.active-dog-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.active-dog-sex {
    font-size: 1rem;
    color: var(--text);
}

.active-dog-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.95rem;
    color: var(--text);
}

.active-dog-detail {
    display: flex;
    align-items: center;
    gap: 4px;
}

.active-dog-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: auto;
    align-items: flex-end;
}

.active-dog-switch {
    background: var(--primary);
    border: none;
    color: white;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    min-width: 100px;
    text-align: center;
    touch-action: manipulation;
    transition: opacity 0.2s;
}

.active-dog-switch:hover, .active-dog-switch:active, .active-dog-switch:focus-visible {
    opacity: 0.8;
}

/* No Dog State */
/* Same 3-card cap and centering as .active-dog-banner above - same slot, same rule. */
.no-dog-banner {
    background: var(--card);
    border: 2px dashed var(--accent);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 20px;
    text-align: center;
    cursor: pointer;
    max-width: 804px;
    margin-left: auto;
    margin-right: auto;
}

.no-dog-banner:hover, .no-dog-banner:focus-visible {
    border-color: var(--primary-text);
    background: var(--background);
}

.no-dog-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}

.no-dog-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-text);
    margin-bottom: 8px;
}

.no-dog-text {
    font-size: 0.95rem;
    color: var(--text-muted);
}