body {
    font-family: Arial, sans-serif;
    padding: 12px;
    background: #f3f4f6;
    color: #111827;
}

h1 { margin-bottom: 4px; }
h2 { margin-top: 0; color: #374151; }

.card, .nav-card, .login-card {
    background: white;
    padding: 16px;
    margin-bottom: 14px;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.login-card {
    max-width: 420px;
    margin: 40px auto;
    padding: 24px;
}

.top-card { border-top: 5px solid #2563eb; }

.nav-card, .dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.nav-card a, .dash-button {
    display: block;
    text-decoration: none;
    text-align: center;
    background: #2563eb;
    color: white;
    font-weight: bold;
    padding: 13px;
    border-radius: 12px;
}

.nav-card .logout-link {
    background: #dc2626;
}

.dashboard-grid {
    margin-bottom: 14px;
}

.dash-button {
    background: #059669;
    padding: 18px 10px;
}

.animal {
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 5px rgba(0,0,0,0.04);
}

.animal-summary, .section-summary, .status-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    list-style: none;
}

.animal-summary::-webkit-details-marker,
.section-summary::-webkit-details-marker,
.status-summary::-webkit-details-marker {
    display: none;
}

.animal-summary::after,
.section-summary::after,
.status-summary::after {
    content: "⌄";
    margin-left: auto;
    font-size: 26px;
    color: #6b7280;
}

details[open] > .animal-summary::after,
details[open] > .section-summary::after,
details[open] > .status-summary::after {
    content: "⌃";
}

.animal-title-box { flex: 1; }

.animal-form {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,0.08);
}

.animal-name {
    font-size: 22px;
    font-weight: bold;
}

.profile-photo, .profile-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.profile-photo {
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 1px 5px rgba(0,0,0,0.15);
}

.profile-placeholder {
    background: #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #374151;
}

label {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    font-size: 19px;
}

.date-label {
    display: block;
    padding: 6px 0 2px;
    font-size: 15px;
    color: #374151;
}

input[type="checkbox"] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    margin: 0;
    accent-color: #2563eb;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="time"],
input,
select,
textarea {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    box-sizing: border-box;
    background: white;
}

textarea {
    min-height: 75px;
    margin-top: 10px;
}

input[type="file"] {
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
}

button {
    width: 100%;
    padding: 15px;
    margin-top: 10px;
    font-size: 17px;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    background: #2563eb;
}

.pdf-button { background: #7c3aed; }
.top-button { background: #2563eb; }
.manage-button { background: #059669; }
.danger-button, .delete { background: #dc2626; }
.owner-report-button { background: #f59e0b; }
.cleaning-button { background: #0f766e; }
.speech-button { background: #0891b2; }
.keyboard-button { background: #475569; }
.reminder-button { background: #9333ea; }
.save-button { display: none; background: #16a34a; }
.save-button-always { background: #16a34a; }

.small {
    color: #6b7280;
    font-size: 14px;
}

.status, .success, .alert {
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 15px;
    margin-top: 8px;
}

.status { background: #f3f4f6; color: #374151; }
.success { background: #dcfce7; color: #166534; }
.alert { background: #fef3c7; color: #92400e; }

.mini-card {
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(0,0,0,0.08);
    padding: 10px;
    border-radius: 14px;
    margin: 10px 0;
}

.hidden { display: none; }

.daily-photo {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 12px;
    margin: 5px;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.photo-wrapper {
    position: relative;
    display: inline-block;
}

.photo-delete-button {
    position: absolute;
    top: 2px;
    right: 2px;
    width: auto;
    padding: 5px 8px;
    font-size: 13px;
    margin: 0;
    background: #dc2626;
    border-radius: 10px;
}

.badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.2;
}

.badge-urgent { background: #fee2e2; color: #991b1b; }
.badge-info { background: #dbeafe; color: #1e40af; }
.badge-ok { background: #dcfce7; color: #166534; }
.badge-boarding { background: #fef3c7; color: #92400e; }
.badge-training { background: #ede9fe; color: #5b21b6; }

.timeline-note {
    background: white;
    border-left: 4px solid #2563eb;
    padding: 10px;
    border-radius: 10px;
    margin-top: 8px;
    font-size: 15px;
}

.icon-delete-button {
    width: auto;
    min-width: 44px;
    padding: 8px 10px;
    font-size: 16px;
    background: #dc2626;
    border-radius: 10px;
    margin-top: 0;
}

.spoken-note {
    margin-top: 10px;
}

.spoken-note-text {
    margin-top: 8px;
    white-space: pre-wrap;
    font-size: 16px;
}

.spoken-note-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.small-action-button {
    width: auto;
    flex: 1;
    padding: 10px;
    font-size: 14px;
    margin-top: 0;
}

.done-button { background: #16a34a; }
.delete-small-button { background: #dc2626; }

summary {
    font-size: 21px;
    font-weight: bold;
    padding: 10px 0;
    cursor: pointer;
}

details { margin-bottom: 14px; }

@media (min-width: 700px) {
    .nav-card, .dashboard-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* Dark mode */
.top-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.darkmode-toggle {
    width: auto;
    padding: 10px 14px;
    margin-top: 0;
    background: #111827;
    color: white;
    font-size: 14px;
    border-radius: 999px;
}

html.dark-mode body {
    background: #0f172a;
    color: #e5e7eb;
}

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode strong {
    color: #f8fafc;
}

html.dark-mode .card,
html.dark-mode .nav-card,
html.dark-mode .login-card,
html.dark-mode .mini-card,
html.dark-mode .animal {
    background: #1e293b !important;
    color: #e5e7eb;
    border-color: #334155;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

html.dark-mode .animal {
    border-color: #475569 !important;
}

html.dark-mode .small {
    color: #cbd5e1;
}

html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
    background: #0f172a;
    color: #f8fafc;
    border-color: #475569;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: #94a3b8;
}

html.dark-mode .status {
    background: #334155;
    color: #e5e7eb;
}

html.dark-mode .success {
    background: #14532d;
    color: #dcfce7;
}

html.dark-mode .alert {
    background: #78350f;
    color: #fef3c7;
}

html.dark-mode .timeline-note {
    background: #0f172a;
    color: #e5e7eb;
    border-left-color: #60a5fa;
}

html.dark-mode .profile-placeholder {
    background: #475569;
    color: #e5e7eb;
}

html.dark-mode .badge-urgent {
    background: #7f1d1d;
    color: #fee2e2;
}

html.dark-mode .badge-info {
    background: #1e3a8a;
    color: #dbeafe;
}

html.dark-mode .badge-ok {
    background: #14532d;
    color: #dcfce7;
}

html.dark-mode .badge-boarding {
    background: #78350f;
    color: #fef3c7;
}

html.dark-mode .badge-training {
    background: #4c1d95;
    color: #ede9fe;
}

html.dark-mode .darkmode-toggle {
    background: #f8fafc;
    color: #111827;
}

html.dark-mode .nav-card a,
html.dark-mode .dash-button {
    background: #1d4ed8;
}

html.dark-mode .nav-card .logout-link {
    background: #b91c1c;
}


/* Animal profile page */
.profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.large-profile-photo,
.large-profile {
    width: 110px;
    height: 110px;
    border-radius: 18px;
}

.large-profile-photo {
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 1px 6px rgba(0,0,0,0.18);
}

.large-profile {
    background: #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 40px;
    color: #374151;
}

.profile-link {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #059669;
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
}

.photo-history-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.photo-history-item {
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(0,0,0,0.08);
    padding: 8px;
    border-radius: 14px;
}

.history-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
}

html.dark-mode .photo-history-item {
    background: #0f172a;
    border-color: #475569;
}

html.dark-mode .large-profile {
    background: #475569;
    color: #e5e7eb;
}

@media (min-width: 700px) {
    .photo-history-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* Upgrade 1 animal profile fields */
.profile-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (min-width: 700px) {
    .profile-detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Photo upload visibility */
input[type="file"] {
    padding: 12px;
    background: #f9fafb;
    border: 1px dashed #9ca3af;
    border-radius: 12px;
    margin-top: 8px;
    margin-bottom: 8px;
}

html.dark-mode input[type="file"] {
    background: #0f172a;
    border-color: #64748b;
    color: #e5e7eb;
}


/* Upgrade 2 medication and feeding */
.med-feed-two-column {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 800px) {
    .med-feed-two-column {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Daily Care medication and feeding view */
.daily-med-feed-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
}

.daily-info-box {
    border-radius: 14px;
    padding: 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}

.daily-med-box {
    background: #fff7ed;
    border-color: #fed7aa;
}

.daily-feed-box {
    background: #ecfdf5;
    border-color: #bbf7d0;
}

.daily-schedule-row {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.08);
}

html.dark-mode .daily-info-box {
    background: #0f172a;
    border-color: #475569;
}

html.dark-mode .daily-med-box {
    background: #431407;
    border-color: #9a3412;
}

html.dark-mode .daily-feed-box {
    background: #052e16;
    border-color: #166534;
}

@media (min-width: 800px) {
    .daily-med-feed-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Medication undo button */
.warning-button {
    background: #f59e0b;
    color: white;
    font-weight: bold;
}

html.dark-mode .warning-button {
    background: #d97706;
    color: #111827;
}


/* Dashboard clickable status */
.dashboard-status-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.status-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 14px;
    padding: 10px 12px;
    margin: 6px 0;
    font-weight: 700;
}

.status-link:hover {
    filter: brightness(0.96);
    transform: translateY(-1px);
}

html.dark-mode .status-link:hover {
    filter: brightness(1.12);
}

#daily-report-action {
    scroll-margin-top: 16px;
}


/* Boarding date and time fields */
.boarding-time-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (min-width: 700px) {
    .boarding-time-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Upgrade 5A walk groups and volunteers */
.walk-date-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.walk-count-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 10px;
}

.walk-dog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.walk-dog-option {
    display: block;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.62);
}

html.dark-mode .walk-dog-option {
    background: rgba(15, 23, 42, 0.62);
}

.walk-dog-option span {
    font-weight: 700;
}

.walk-dog-option small {
    display: block;
    opacity: 0.75;
    margin-top: 3px;
}

.walk-group-card {
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 14px;
    padding: 12px;
    margin: 12px 0;
    background: rgba(255, 255, 255, 0.72);
}

html.dark-mode .walk-group-card {
    background: rgba(15, 23, 42, 0.72);
}

.walk-group-done {
    opacity: 0.72;
}

.walk-group-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.walk-group-dog-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.walk-group-dog {
    padding: 8px;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.12);
}

.walk-group-dog .small {
    display: block;
}

.walk-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

@media (min-width: 700px) {
    .walk-date-form {
        grid-template-columns: 1fr auto;
        align-items: end;
    }

    .walk-count-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .walk-dog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .walk-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
}


/* Upgrade 5B daily volunteers */
.daily-volunteer-card {
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 14px;
    padding: 12px;
    margin: 10px 0;
    background: rgba(255, 255, 255, 0.72);
}

html.dark-mode .daily-volunteer-card {
    background: rgba(15, 23, 42, 0.72);
}

.daily-volunteer-time-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (min-width: 700px) {
    .daily-volunteer-time-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Upgrade 5C group volunteers and dog assignment */
.walk-volunteer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.walk-volunteer-option {
    display: block;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.62);
}

html.dark-mode .walk-volunteer-option {
    background: rgba(15, 23, 42, 0.62);
}

.walk-volunteer-option span {
    font-weight: 700;
}

.walk-volunteer-option small {
    display: block;
    opacity: 0.75;
    margin-top: 3px;
}

.walk-group-volunteer-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

@media (min-width: 700px) {
    .walk-volunteer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Walks quick add volunteer */
.mini-card form input[name="name"] {
    font-weight: 600;
}


/* Upgrade 5D users, dashboard, backup visibility */
.developer-card {
    border: 2px dashed rgba(245, 158, 11, 0.55);
}

.nav-card {
    align-items: stretch;
}

.nav-card a {
    text-align: center;
}

.status-link {
    cursor: pointer;
}

.status-link:hover {
    transform: translateY(-1px);
    filter: brightness(0.98);
}


/* Small dark/light mode icon button */
.top-actions {
    display: flex;
    justify-content: flex-end;
    margin: 6px 10px 0 10px;
}

.darkmode-toggle.icon-only {
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    border-radius: 999px;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* Logo branding update */
.page-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.brand-logo {
    width: 58px;
    height: 58px;
    object-fit: contain;
    border-radius: 14px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    flex-shrink: 0;
}

.brand-text h1 {
    margin: 0 0 4px 0;
    font-size: 34px;
    line-height: 1;
}

.brand-text h2 {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}

.top-actions {
    display: flex;
    justify-content: flex-end;
    align-self: flex-start;
}

.login-brand-card {
    text-align: center;
}

.login-logo {
    width: 120px;
    max-width: 42vw;
    height: auto;
    margin: 0 auto 10px auto;
    display: block;
}

.login-subtitle {
    margin-top: 4px;
    margin-bottom: 14px;
}

.darkmode-toggle.icon-only {
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    border-radius: 999px;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 640px) {
    .page-topbar {
        align-items: flex-start;
    }

    .brand-logo {
        width: 50px;
        height: 50px;
    }

    .brand-text h1 {
        font-size: 28px;
    }

    .brand-text h2 {
        font-size: 13px;
    }
}

/* YARA Core 1.0.12: Settings destination and high-visibility red button outline. */
.settings-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.settings-action-grid form {
    margin: 0;
}

.settings-action-grid button {
    width: 100%;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button-link,
.manage-button,
.profile-link,
.back-link,
.dashboard-menu-button,
.dashboard-main-hub-button,
.dashboard-quick-button,
.top-action-button,
.hub-link-button,
.animals-hard-button,
.planned-walk-small-button,
.open-button,
.open-pill,
.pdf-button,
.owner-report-button,
.submit-button,
.primary-button,
.save-button-always,
.danger-button,
.small-danger-button,
.delete,
.delete-button {
    background: #15171a !important;
    background-color: #15171a !important;
    border: 3px solid #f05252 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(240, 82, 82, 0.24) !important;
}

/* YARA Core 1.0.10: unified black controls with a red outline.
   Status surfaces deliberately keep their semantic colour; controls do not. */
.page-topbar.logo-only-header {
    position: relative;
    align-items: center !important;
    gap: 10px !important;
}

.page-topbar.logo-only-header .brand-block {
    min-width: 0;
    flex: 1 1 auto;
}

.page-topbar.logo-only-header .brand-text {
    min-width: 0;
}

.page-topbar.logo-only-header .brand-text h2,
.page-topbar.logo-only-header .brand-organisation-name,
.page-topbar.logo-only-header .brand-employee-name {
    overflow-wrap: anywhere;
}

.session-menu {
    position: relative;
    flex: 0 0 auto;
}

.session-menu > summary {
    display: inline-flex;
    width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    list-style: none;
    cursor: pointer;
    font-size: 1.25rem;
}

.session-menu > summary::-webkit-details-marker {
    display: none;
}

.session-menu-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    gap: 8px;
    min-width: 168px;
    padding: 10px;
    border: 2px solid var(--yara-red);
    border-radius: 14px;
    background: var(--yara-carbon-dark);
    box-shadow: 0 10px 24px rgba(17, 19, 21, 0.30);
}

.session-menu-logout-form {
    margin: 0;
}

/* Every clickable control uses the same YARA treatment. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button-link,
.manage-button,
.profile-link,
.back-link,
.dashboard-menu-button,
.dashboard-main-hub-button,
.dashboard-quick-button,
.top-action-button,
.hub-link-button,
.animals-hard-button,
.planned-walk-small-button,
.pdf-button,
.owner-report-button,
.submit-button,
.primary-button,
.save-button-always,
.danger-button,
.small-danger-button,
.delete,
.delete-button {
    background: var(--yara-carbon) !important;
    background-color: var(--yara-carbon) !important;
    border: 2px solid var(--yara-red) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(198, 40, 40, 0.18) !important;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.button-link:hover,
.manage-button:hover,
.profile-link:hover,
.back-link:hover,
.dashboard-menu-button:hover,
.dashboard-main-hub-button:hover,
.dashboard-quick-button:hover,
.top-action-button:hover,
.hub-link-button:hover,
.animals-hard-button:hover,
.planned-walk-small-button:hover,
.pdf-button:hover,
.owner-report-button:hover,
.submit-button:hover,
.primary-button:hover,
.save-button-always:hover,
.danger-button:hover,
.small-danger-button:hover,
.delete:hover,
.delete-button:hover,
.session-menu[open] > summary {
    background: #111315 !important;
    border-color: #ff7979 !important;
}

.top-action-nav .dashboard-top-button {
    min-height: 40px !important;
    padding: 7px 14px !important;
}

/* YARA Core 1.0.11: fast context navigation and Dashboard-only general actions. */
.context-back-nav {
    justify-content: flex-start;
}

.context-back-nav .back-link {
    min-height: 40px !important;
    padding: 7px 14px !important;
    text-decoration: none;
}

.dashboard-general-actions {
    margin-top: 12px;
}

.dashboard-general-actions > summary {
    display: flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    list-style: none;
    cursor: pointer;
    font-weight: 800;
}

.dashboard-general-actions > summary::-webkit-details-marker {
    display: none;
}

.general-actions-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.general-actions-panel form {
    margin: 0;
}

.general-actions-panel button {
    width: 100%;
    min-height: 42px;
}

@media (max-width: 640px) {
    .context-back-nav .back-link {
        width: 100% !important;
    }
}

@media (max-width: 640px) {
    .page-topbar.logo-only-header .clean-header-logo {
        width: 54px !important;
        height: 54px !important;
        flex: 0 0 54px;
    }

    .page-topbar.logo-only-header .brand-text h2 {
        font-size: 0.82rem !important;
        line-height: 1.15 !important;
    }

    .page-topbar.logo-only-header .brand-organisation-name,
    .page-topbar.logo-only-header .brand-employee-name {
        font-size: 0.7rem !important;
        line-height: 1.15 !important;
    }
}

/* YARA Core 1.0.5: centre a role dashboard that has one permitted hub. */
.dashboard-menu-grid.dashboard-menu-single-action {
    display: flex !important;
    justify-content: center !important;
}

.dashboard-menu-grid.dashboard-menu-single-action .dashboard-menu-button {
    flex: 0 1 420px !important;
    width: min(100%, 420px) !important;
}


/* Logo-only header cleanup */
.logo-only-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 12px 0;
}

.clean-header-logo {
    width: 96px;
    height: auto;
    max-height: 72px;
    object-fit: contain;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
}

/* 1.0.6: the Yara dog logo is square, unlike the former wide wordmark. */
.page-topbar.logo-only-header .clean-header-logo,
.logo-only-header .clean-header-logo {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
    flex: 0 0 64px !important;
}

.yara-clean-login-box .yara-login-logo,
.yara-clean-login-box .login-logo-large {
    width: min(210px, 58vw) !important;
    height: auto !important;
    object-fit: contain !important;
}

.login-logo-large {
    width: 220px;
    max-width: 78vw;
    margin-bottom: 8px;
}

.login-brand-card h1,
.login-brand-card h2 {
    display: none;
}

@media (max-width: 640px) {
    .clean-header-logo {
        width: 82px;
        max-height: 62px;
    }

    .login-logo-large {
        width: 190px;
        max-width: 82vw;
    }

    .logo-only-header {
        margin-top: 0;
    }
}


/* Restore YARA subtitle without duplicate YARA text */
.tagline-only h2 {
    margin: 0;
    font-size: 15px;
    color: #6b7280;
    letter-spacing: 0.02em;
}

.login-tagline {
    margin: 4px 0 6px 0;
    font-size: 18px;
    color: #374151;
    font-weight: 700;
}

html.dark-mode .tagline-only h2,
html.dark-mode .login-tagline {
    color: #d1d5db;
}

@media (max-width: 640px) {
    .tagline-only h2 {
        font-size: 13px;
    }

    .login-tagline {
        font-size: 16px;
    }
}


/* Clean Dashboard: Quick Status + Animal Overview only */
.clean-dashboard-hero {
    margin-bottom: 12px;
}

.animal-overview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
}

.overview-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-decoration: none;
    background: #f3f4f6;
    color: #111827;
    border-radius: 14px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.overview-tile strong {
    font-size: 16px;
}

.overview-tile span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #2563eb;
    color: white;
    font-weight: 800;
}

.overview-tile:hover {
    transform: translateY(-1px);
    filter: brightness(0.98);
}

html.dark-mode .overview-tile {
    background: rgba(15, 23, 42, 0.8);
    color: #f9fafb;
}

@media (min-width: 700px) {
    .animal-overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Easy Boarding active/returning layout */
.boarding-hero-card {
    border-top: 5px solid #0f766e;
}

.boarding-count-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 10px;
}

.boarding-card {
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 16px;
    padding: 12px;
    margin: 12px 0;
    background: rgba(255, 255, 255, 0.78);
}

html.dark-mode .boarding-card {
    background: rgba(15, 23, 42, 0.78);
}

.active-boarding-card {
    border-left: 6px solid #16a34a;
}

.returning-boarding-card {
    border-left: 6px solid #f59e0b;
}

.boarding-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.boarding-stay-summary {
    background: rgba(59, 130, 246, 0.10);
    border: 1px solid rgba(59, 130, 246, 0.22);
    border-radius: 14px;
    padding: 10px 12px;
    margin: 8px 0;
    color: inherit;
}

.boarding-action-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 8px;
}

@media (min-width: 700px) {
    .boarding-count-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .boarding-action-row {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Upgrade 6A Food and Water Rounds */
.daily-round-count-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 10px;
}

.food-water-round-card {
    border-top: 5px solid #2563eb;
}

.round-progress-wrap {
    margin: 10px 0 12px 0;
}

.round-progress-text {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 5px;
    font-weight: 700;
}

.round-progress-bar {
    height: 12px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.round-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: #16a34a;
}

.round-action-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 10px 0;
}

.round-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 10px 0;
}

.round-animal-card {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 14px;
    padding: 10px;
    margin: 0;
}

.round-animal-card input[type="checkbox"] {
    flex-shrink: 0;
}

.round-card-done {
    background: rgba(220, 252, 231, 0.80);
    border-color: rgba(22, 163, 74, 0.35);
}

.round-card-open {
    background: rgba(254, 243, 199, 0.80);
    border-color: rgba(245, 158, 11, 0.35);
}

.round-animal-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.round-animal-info span {
    color: #6b7280;
    font-size: 13px;
}

html.dark-mode .round-card-done {
    background: rgba(22, 101, 52, 0.35);
}

html.dark-mode .round-card-open {
    background: rgba(146, 64, 14, 0.35);
}

html.dark-mode .round-animal-info span {
    color: #d1d5db;
}

@media (min-width: 700px) {
    .daily-round-count-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .round-action-row {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .round-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Upgrade 6B Daily Care dogs/cats cleanup */
.cat-care-round-card {
    border-top: 5px solid #0f766e;
}

.cat-progress-fill {
    background: #0f766e;
}

.food-water-round-card .section-summary span,
.cat-care-round-card .section-summary span {
    font-weight: 800;
}

.round-animal-card.round-card-done {
    border-left: 6px solid #16a34a;
}

.round-animal-card.round-card-open {
    border-left: 6px solid #f59e0b;
}


/* Profile photo + delete animal fix */
.animal-profile-header-clean {
    text-align: center;
}

.animal-profile-title-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    text-align: left;
    margin-bottom: 12px;
}

.profile-photo-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.profile-photo-tap-form {
    text-align: center;
    margin: 4px 0 8px 0;
}

.profile-photo-tap-label {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.profile-photo-large {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid white;
    box-shadow: 0 3px 12px rgba(0,0,0,0.16);
    background: #e5e7eb;
}

.profile-photo-upload-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    color: #6b7280;
}

.clickable-profile-photo {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.clickable-profile-photo:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 16px rgba(0,0,0,0.20);
}

.profile-photo-hidden-input {
    display: none;
}

.profile-photo-help {
    text-align: center;
    margin-top: 6px;
}

.danger-zone-card {
    border: 2px solid rgba(220, 38, 38, 0.35);
}

.small-danger-button {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 7px 11px;
    font-weight: 700;
    cursor: pointer;
}

html.dark-mode .profile-photo-large {
    border-color: #1f2937;
    background: #374151;
}

@media (max-width: 700px) {
    .animal-profile-title-row {
        flex-direction: column;
    }
}


/* Shelter vs Boarding Profile Cleanup */
.shelter-profile-card {
    border-top: 5px solid #0f766e;
}

.boarding-profile-card {
    border-top: 5px solid #2563eb;
}

.profile-two-column {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.adoption-appointment-card {
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 14px;
    padding: 10px;
    margin: 10px 0;
    background: rgba(255,255,255,0.76);
}

.appointment-card-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 8px;
}

html.dark-mode .adoption-appointment-card {
    background: rgba(15, 23, 42, 0.78);
}

@media (min-width: 700px) {
    .profile-two-column {
        grid-template-columns: 1fr 1fr;
    }
}


/* Upgrade 6D Dashboard Weather Block */
.weather-card {
    border-top: 5px solid #0f766e;
}

.weather-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.weather-condition {
    background: rgba(15, 118, 110, 0.12);
    border: 1px solid rgba(15, 118, 110, 0.20);
    color: #0f766e;
    font-weight: 800;
    border-radius: 999px;
    padding: 8px 12px;
    white-space: nowrap;
}

.weather-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 12px 0;
}

.weather-tile {
    background: rgba(255,255,255,0.76);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 14px;
    padding: 10px;
}

.weather-tile strong {
    display: block;
    font-size: 20px;
}

.weather-tile span {
    display: block;
    color: #6b7280;
    font-size: 13px;
    margin-top: 2px;
}

.weather-advice {
    background: rgba(236, 253, 245, 0.85);
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: 14px;
    padding: 10px 12px;
}

.weather-warning-badge {
    display: inline-block;
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 999px;
    padding: 4px 8px;
    margin-right: 6px;
    font-size: 12px;
    font-weight: 800;
}

.weather-source {
    margin-top: 8px;
}

.weather-card-unavailable {
    border-top-color: #f59e0b;
}

html.dark-mode .weather-tile {
    background: rgba(15, 23, 42, 0.78);
}

html.dark-mode .weather-condition {
    color: #99f6e4;
    background: rgba(15, 118, 110, 0.22);
}

html.dark-mode .weather-tile span {
    color: #d1d5db;
}

html.dark-mode .weather-advice {
    background: rgba(6, 78, 59, 0.45);
}

@media (min-width: 700px) {
    .weather-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 700px) {
    .weather-head {
        flex-direction: column;
    }

    .weather-condition {
        white-space: normal;
    }
}


/* Weather folding menu */
.weather-fold-card {
    border-top: 5px solid #0f766e;
}

.weather-fold-summary {
    cursor: pointer;
}

.weather-fold-card .weather-card {
    box-shadow: none;
    border: 1px solid rgba(148, 163, 184, 0.35);
    margin-top: 12px;
}

.weather-fold-card > .weather-card {
    margin-bottom: 0;
}


/* Weather recursion fix */
.weather-fold-inner {
    margin-top: 10px;
}

.weather-fold-inner .weather-card {
    margin: 0;
}


/* YARA Polish 1 - green theme and cleaner layout */
:root {
    --yara-green: #0f766e;
    --yara-green-dark: #115e59;
    --yara-green-soft: #ccfbf1;
    --yara-green-soft-2: #ecfdf5;
    --yara-cream: #fffaf0;
    --yara-border: rgba(15, 118, 110, 0.18);
    --yara-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

/* Page cards */
.card,
.animal,
.mini-card,
.boarding-card,
.adoption-appointment-card,
.weather-card {
    border-radius: 18px !important;
    box-shadow: var(--yara-shadow);
    border: 1px solid var(--yara-border);
}

.card {
    margin-bottom: 14px;
}

/* Cleaner section headers */
.section-summary {
    padding: 10px 4px;
    border-radius: 14px;
}

.section-summary span {
    font-weight: 850;
    letter-spacing: -0.01em;
}

/* Friendly fold indicator */
details > summary {
    cursor: pointer;
}

details > summary::-webkit-details-marker {
    color: var(--yara-green);
}

/* Main save/action buttons */
.save-button-always,
.pdf-button,
.owner-report-button,
button[type="submit"]:not(.danger-button):not(.small-danger-button),
.button-link {
    background: var(--yara-green) !important;
    color: white !important;
    border: 1px solid var(--yara-green-dark) !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    box-shadow: 0 3px 10px rgba(15, 118, 110, 0.18);
}

.save-button-always:hover,
.pdf-button:hover,
.owner-report-button:hover,
button[type="submit"]:not(.danger-button):not(.small-danger-button):hover,
.button-link:hover {
    background: var(--yara-green-dark) !important;
}

/* Secondary buttons */
.manage-button,
.profile-link {
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid rgba(148, 163, 184, 0.45) !important;
    border-radius: 12px !important;
    font-weight: 750 !important;
}

/* Keep danger buttons red */
.danger-button,
.small-danger-button {
    background: #dc2626 !important;
    color: white !important;
    border: 1px solid #991b1b !important;
    border-radius: 12px !important;
    font-weight: 850 !important;
}

/* Status blocks */
.success {
    background: rgba(204, 251, 241, 0.72) !important;
    border: 1px solid rgba(15, 118, 110, 0.24) !important;
    color: #134e4a !important;
    border-radius: 14px !important;
}

.status {
    border-radius: 14px !important;
}

/* Progress bars */
.round-progress-fill,
.cat-progress-fill {
    background: var(--yara-green) !important;
}

/* Done/open animal round cards */
.round-card-done {
    background: rgba(204, 251, 241, 0.75) !important;
    border-color: rgba(15, 118, 110, 0.28) !important;
}

.round-card-open {
    background: rgba(254, 243, 199, 0.78) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}

/* Dashboard / overview tiles if present */
.overview-tile,
.dashboard-tile,
.quick-status-card,
.weather-fold-card {
    border-radius: 18px !important;
}

/* Profile photo polish */
.profile-photo-large {
    border-color: white !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16) !important;
}

/* Inputs */
input,
textarea,
select {
    border-radius: 12px !important;
    border: 1px solid rgba(148, 163, 184, 0.55) !important;
}

input:focus,
textarea:focus,
select:focus {
    outline: 2px solid rgba(15, 118, 110, 0.28) !important;
    border-color: var(--yara-green) !important;
}

/* Better spacing on mobile */
.animal-form label,
.card form label {
    margin-top: 8px;
}

.badge {
    border-radius: 999px !important;
    font-weight: 750 !important;
}

/* Header/logo polish without forcing layout */
.app-header,
.topbar,
.header-card {
    border-bottom-color: rgba(15, 118, 110, 0.18) !important;
}

/* Dark mode support */
html.dark-mode .card,
html.dark-mode .animal,
html.dark-mode .mini-card,
html.dark-mode .boarding-card,
html.dark-mode .adoption-appointment-card,
html.dark-mode .weather-card {
    border-color: rgba(45, 212, 191, 0.18) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

html.dark-mode .manage-button,
html.dark-mode .profile-link {
    background: #1f2937 !important;
    color: #f9fafb !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
}

html.dark-mode .success {
    background: rgba(19, 78, 74, 0.55) !important;
    color: #ccfbf1 !important;
    border-color: rgba(45, 212, 191, 0.25) !important;
}

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
    border-color: rgba(148, 163, 184, 0.35) !important;
}

/* Keep the app calm and professional */
button,
.button-link,
.profile-link {
    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

button:hover,
.button-link:hover,
.profile-link:hover {
    transform: translateY(-1px);
}


/* YARA Polish 2 - compact dashboard menu and quick status */
:root {
    --yara-green: #0f766e;
    --yara-green-dark: #115e59;
    --yara-green-light: #ccfbf1;
}

/* Make header/nav buttons consistently YARA green */
.top-nav a,
.nav a,
.menu a,
header a,
.app-header a,
.topbar a,
.dashboard-nav-button,
.logout-nav-button {
    background: var(--yara-green) !important;
    color: white !important;
    border: 1px solid var(--yara-green-dark) !important;
    border-radius: 12px !important;
    padding: 9px 12px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    box-shadow: 0 3px 10px rgba(15, 118, 110, 0.16);
}

/* Dashboard + logout next to each other */
.dashboard-nav-button,
.logout-nav-button,
a[href="/dashboard"],
a[href="/logout"] {
    flex: 1 1 0;
}

.top-nav,
.nav,
.menu,
.app-header nav,
.topbar nav,
header nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}

/* Put dashboard/logout first when browser supports order */
a[href="/dashboard"] {
    order: 1;
}

a[href="/logout"] {
    order: 2;
}

.top-nav a:not([href="/dashboard"]):not([href="/logout"]),
.nav a:not([href="/dashboard"]):not([href="/logout"]),
.menu a:not([href="/dashboard"]):not([href="/logout"]),
header nav a:not([href="/dashboard"]):not([href="/logout"]) {
    order: 5;
}

/* Compact quick status: less chunky, faster scrolling */
.quick-status-title {
    margin-bottom: 6px !important;
}

.quick-status-card,
.quick-status,
.status-card,
.dashboard-status-card {
    padding: 8px 10px !important;
    margin: 6px 0 !important;
    border-radius: 12px !important;
}

.quick-status-card .status,
.quick-status .status,
.dashboard-status-card .status,
.card .quick-status-row,
.quick-status-row {
    padding: 7px 9px !important;
    margin: 5px 0 !important;
    border-radius: 11px !important;
    font-size: 14px !important;
}

.compact-quick-summary {
    padding: 7px 2px !important;
}

/* Dashboard compact menu below quick status */
.dashboard-menu-compact-card {
    padding: 10px !important;
    border-top: 4px solid var(--yara-green);
}

.dashboard-menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.dashboard-menu-button {
    background: var(--yara-green) !important;
    color: white !important;
    border: 1px solid var(--yara-green-dark) !important;
    border-radius: 12px !important;
    padding: 10px 9px !important;
    text-align: center !important;
    text-decoration: none !important;
    font-weight: 850 !important;
    box-shadow: 0 3px 10px rgba(15, 118, 110, 0.16);
}

.dashboard-menu-button:hover {
    background: var(--yara-green-dark) !important;
}

/* Make overview/dashboard cards less tall */
.dashboard-menu-compact-card + .card,
.weather-fold-card,
.card:has(.quick-status-title) {
    margin-bottom: 10px !important;
}

/* General mobile spacing improvements */
@media (max-width: 700px) {
    .top-nav,
    .nav,
    .menu,
    .app-header nav,
    .topbar nav,
    header nav {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100%;
    }

    .top-nav a,
    .nav a,
    .menu a,
    .app-header nav a,
    .topbar nav a,
    header nav a {
        width: 100%;
        padding: 9px 8px !important;
        font-size: 14px !important;
    }

    .dashboard-menu-grid {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .dashboard-menu-button {
        padding: 9px 6px !important;
        font-size: 14px !important;
    }

    .card {
        padding: 12px !important;
        margin-bottom: 10px !important;
    }
}

@media (min-width: 900px) {
    .dashboard-menu-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}





/* YARA Polish 2 Final - clean compact dashboard */
:root {
    --yara-green: #0f766e;
    --yara-green-dark: #115e59;
}

/* Hide the old chunky top navigation button panel on the dashboard area.
   The compact dashboard menu replaces it. */
.yara-main-nav,
.menu.yara-main-nav,
.nav.yara-main-nav,
.top-nav.yara-main-nav,
.button-grid.yara-main-nav,
.menu-grid.yara-main-nav {
    display: none !important;
}

/* Extra fallback: old giant nav buttons often live in the first big card. Keep app logo/header, but hide old card-style menu if it contains many nav links. */
.card:has(a[href="/animals"]):has(a[href="/boarding"]),
.card:has(a[href="/archive"]):has(a[href="/reports-page"]),
.card:has(a[href="/weekly"]):has(a[href="/cleaning"]),
.card:has(a[href="/logout"]):has(a[href="/boarding"]) {
    display: none !important;
}

/* Compact menu retained and styled */
.dashboard-menu-compact-card {
    padding: 8px !important;
    margin-bottom: 8px !important;
    border-top: 4px solid var(--yara-green) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07) !important;
}

.dashboard-menu-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
}

.dashboard-menu-button {
    background: var(--yara-green) !important;
    color: white !important;
    border: 1px solid var(--yara-green-dark) !important;
    border-radius: 12px !important;
    padding: 9px 6px !important;
    text-align: center !important;
    text-decoration: none !important;
    font-weight: 850 !important;
    font-size: 14px !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.dashboard-menu-button:hover {
    background: var(--yara-green-dark) !important;
}

/* Compact quick status */
.quick-status-compact-card,
.card:has(.quick-status-title) {
    padding: 9px 10px !important;
    margin-bottom: 8px !important;
}

.quick-status-title {
    font-size: 20px !important;
    margin: 0 0 6px 0 !important;
}

.quick-status-compact-card .status,
.card:has(.quick-status-title) .status {
    padding: 7px 9px !important;
    margin: 5px 0 !important;
    border-radius: 11px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
}

.compact-quick-summary {
    padding: 7px 2px !important;
}

/* Weather folds should stay below menu and not be oversized */
.weather-fold-card {
    padding: 10px !important;
    margin-bottom: 8px !important;
}

.weather-fold-card h3 {
    font-size: 21px !important;
}

/* Make all regular links/buttons green, keep danger red */
a.button-link,
.profile-link,
.manage-button,
.save-button-always,
.pdf-button,
.owner-report-button,
button[type="submit"]:not(.danger-button):not(.small-danger-button) {
    background: var(--yara-green) !important;
    color: white !important;
    border-color: var(--yara-green-dark) !important;
}

.danger-button,
.small-danger-button,
a[href="/logout"] {
    background: #dc2626 !important;
    color: white !important;
    border-color: #991b1b !important;
}

/* Mobile spacing */
@media (max-width: 700px) {
    .dashboard-menu-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .dashboard-menu-button {
        padding: 8px 5px !important;
        min-height: 36px !important;
        font-size: 14px !important;
    }

    .quick-status-compact-card,
    .card:has(.quick-status-title),
    .weather-fold-card,
    .dashboard-menu-compact-card {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (min-width: 900px) {
    .dashboard-menu-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}


/* YARA Polish 2 Real Nav Replacement - final clean */
.top-action-nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 8px 0 12px 0 !important;
}

.top-action-button {
    border-radius: 14px !important;
    padding: 10px 12px !important;
    text-align: center !important;
    text-decoration: none !important;
    color: white !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.dashboard-top-button {
    background: #0f766e !important;
    border: 1px solid #115e59 !important;
}

.logout-top-button {
    background: #dc2626 !important;
    border: 1px solid #991b1b !important;
}

/* Make old nav-card harmless if browser shows any cached/older HTML */
.nav-card {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
    margin-bottom: 10px !important;
}

.nav-card a {
    background: #0f766e !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 9px 7px !important;
    min-height: 38px !important;
    font-size: 14px !important;
    text-decoration: none !important;
    font-weight: 850 !important;
}

.nav-card a.logout-link,
.nav-card a[href="/logout"] {
    background: #dc2626 !important;
}

/* Compact dashboard work menu below Quick Status */
.dashboard-menu-compact-card {
    padding: 8px !important;
    margin: 8px 0 10px 0 !important;
    border-top: 4px solid #0f766e !important;
}

.dashboard-menu-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
}

.dashboard-menu-button {
    background: #0f766e !important;
    color: white !important;
    border: 1px solid #115e59 !important;
    border-radius: 12px !important;
    padding: 8px 6px !important;
    min-height: 36px !important;
    text-align: center !important;
    text-decoration: none !important;
    font-weight: 850 !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Quick Status less chunky */
.quick-status-compact-card,
.card:has(.quick-status-title) {
    padding: 8px 10px !important;
    margin-bottom: 8px !important;
}

.quick-status-title {
    font-size: 19px !important;
    margin: 0 0 4px 0 !important;
}

.quick-status-compact-card p.small,
.card:has(.quick-status-title) p.small {
    margin: 0 0 6px 0 !important;
}

.dashboard-status-list .status,
.quick-status-compact-card .status,
.card:has(.quick-status-title) .status {
    padding: 6px 8px !important;
    margin: 4px 0 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}

/* Remove diagnostic cards if still cached in body */
.polish2-marker-card {
    display: none !important;
}

@media (min-width: 900px) {
    .dashboard-menu-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}


/* YARA Polish 3C - hard clean dashboard */
.dashboard-hero,
.clean-dashboard-hero,
.dashboard-summary-card,
.polish2-marker-card {
    display: none !important;
}

/* Thin Quick Status card */
.quick-status-compact-card {
    padding: 7px 9px !important;
    margin: 0 0 7px 0 !important;
    border-top: 4px solid #0f766e !important;
}

.quick-status-title {
    font-size: 18px !important;
    line-height: 1.1 !important;
    margin: 0 0 5px 0 !important;
}

/* The clickable bars are .status-link, not .status */
.compact-dashboard-status-list,
.dashboard-status-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.dashboard-status-list .status-link,
.compact-dashboard-status-list .status-link,
.status-link {
    padding: 5px 8px !important;
    margin: 0 !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    font-weight: 750 !important;
}

.dashboard-info-status {
    display: block !important;
    padding: 5px 8px !important;
    margin: 0 !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    font-weight: 750 !important;
    background: rgba(204, 251, 241, 0.72) !important;
    border: 1px solid rgba(15, 118, 110, 0.28) !important;
    color: #134e4a !important;
}

/* Full compact button menu */
.dashboard-menu-compact-card {
    display: block !important;
    padding: 8px !important;
    margin: 7px 0 9px 0 !important;
    border-top: 4px solid #0f766e !important;
}

.dashboard-menu-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
}

.dashboard-menu-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 35px !important;
    padding: 8px 6px !important;
    border-radius: 12px !important;
    background: #0f766e !important;
    color: white !important;
    border: 1px solid #115e59 !important;
    text-align: center !important;
    text-decoration: none !important;
    font-weight: 850 !important;
    font-size: 14px !important;
}

.dashboard-menu-button:hover {
    background: #115e59 !important;
}

/* Weather stays folded and compact */
.weather-fold-card {
    padding: 9px !important;
    margin: 7px 0 9px 0 !important;
}

.weather-fold-card h3 {
    font-size: 19px !important;
}

/* Animal overview slightly tighter */
.animal-overview-card {
    padding: 10px !important;
}

.overview-tile {
    min-height: 54px !important;
    padding: 9px !important;
}

html.dark-mode .dashboard-info-status {
    background: rgba(19, 78, 74, 0.55) !important;
    color: #ccfbf1 !important;
    border-color: rgba(45, 212, 191, 0.25) !important;
}

@media (min-width: 900px) {
    .dashboard-menu-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}


/* YARA Polish 3D - compact weather, animal view and visible buttons */

/* IMPORTANT:
   Older CSS hid cards containing both /animals and /boarding.
   The compact button menu contains both, so it disappeared.
   This overrides that rule with higher specificity. */
.card.dashboard-menu-compact-card,
.card.dashboard-menu-compact-card:has(a[href="/animals"]):has(a[href="/boarding"]),
.card.dashboard-menu-compact-card:has(a[href="/archive"]):has(a[href="/reports-page"]),
.card.dashboard-menu-compact-card:has(a[href="/weekly"]):has(a[href="/cleaning"]) {
    display: block !important;
    visibility: visible !important;
}

/* Thinner compact button menu */
.dashboard-menu-compact-card {
    display: block !important;
    padding: 6px !important;
    margin: 6px 0 7px 0 !important;
    border-top: 3px solid #0f766e !important;
    border-radius: 14px !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06) !important;
}

.dashboard-menu-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
}

.dashboard-menu-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 30px !important;
    padding: 6px 5px !important;
    border-radius: 10px !important;
    background: #0f766e !important;
    color: white !important;
    border: 1px solid #115e59 !important;
    text-align: center !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    line-height: 1.05 !important;
    box-shadow: none !important;
}

/* Weather folding menu less chunky */
.weather-fold-card {
    padding: 7px 9px !important;
    margin: 6px 0 7px 0 !important;
    border-top: 3px solid #0f766e !important;
    border-radius: 14px !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06) !important;
}

.weather-fold-summary {
    padding: 4px 0 !important;
}

.weather-fold-summary span {
    font-size: 15px !important;
    font-weight: 850 !important;
}

.weather-fold-inner {
    margin-top: 6px !important;
}

.weather-fold-inner .weather-card,
.weather-card {
    padding: 7px 8px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.weather-head {
    gap: 6px !important;
}

.weather-head h3 {
    font-size: 16px !important;
    margin: 0 0 2px 0 !important;
}

.weather-condition {
    padding: 4px 7px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
}

.weather-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
    margin: 7px 0 !important;
}

.weather-tile {
    padding: 6px 7px !important;
    border-radius: 10px !important;
}

.weather-tile strong {
    font-size: 15px !important;
    line-height: 1.1 !important;
}

.weather-tile span {
    font-size: 11px !important;
    margin-top: 1px !important;
}

.weather-advice {
    padding: 6px 7px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
}

.weather-source {
    display: none !important;
}

/* Animal Overview less chunky */
.animal-overview-card {
    padding: 8px 9px !important;
    margin: 6px 0 7px 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06) !important;
}

.animal-overview-card h3 {
    font-size: 17px !important;
    margin: 0 0 3px 0 !important;
}

.animal-overview-card p.small {
    margin: 0 0 6px 0 !important;
    font-size: 12px !important;
}

.animal-overview-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
}

.overview-tile {
    min-height: 34px !important;
    padding: 6px 7px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.overview-tile strong {
    font-size: 13px !important;
    line-height: 1.05 !important;
}

.overview-tile span {
    font-size: 16px !important;
    line-height: 1.05 !important;
}

/* Keep compact quick status untouched except tiny margin alignment */
.quick-status-compact-card {
    margin-bottom: 6px !important;
}

/* Mobile: keep everything quick to scroll */
@media (max-width: 700px) {
    .dashboard-menu-grid,
    .animal-overview-grid,
    .weather-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .dashboard-menu-button {
        min-height: 30px !important;
        padding: 6px 4px !important;
        font-size: 13px !important;
    }
}

@media (min-width: 900px) {
    .dashboard-menu-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .animal-overview-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .weather-grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}


/* YARA Polish 3E - requested button order */
.dashboard-menu-grid {
    grid-template-columns: 1fr 1fr !important;
}

.dashboard-menu-button {
    white-space: normal !important;
    word-break: normal !important;
}


/* YARA emergency report route fix */
.report-month-card,
.report-type-card {
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 12px;
    padding: 6px;
    margin: 7px 0;
    background: rgba(255,255,255,0.55);
    display: block !important;
}

.report-type-card {
    background: rgba(248,250,252,0.72);
}

.report-month-summary,
.report-type-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 850;
    font-size: 14px;
    padding: 4px 2px;
}

.report-type-summary {
    font-size: 13px;
}

.small-report-empty {
    padding: 6px 8px !important;
    margin: 5px 0 !important;
    border-radius: 9px !important;
    font-size: 13px !important;
}

.report-list-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    align-items: center;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 11px;
    padding: 7px;
    margin: 5px 0;
    background: rgba(255,255,255,0.76);
}

.report-list-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.report-list-info strong {
    font-size: 13px;
    line-height: 1.15;
    word-break: break-word;
}

.report-list-info span {
    font-size: 12px;
    color: #6b7280;
}

.report-list-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.report-open-button,
.report-delete-link {
    border-radius: 10px !important;
    padding: 7px 8px !important;
    text-align: center !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    min-height: 32px !important;
}

.report-open-button {
    background: #0f766e !important;
    color: white !important;
    border: 1px solid #115e59 !important;
}

.report-delete-link {
    background: #dc2626 !important;
    color: white !important;
    border: 1px solid #991b1b !important;
}

html.dark-mode .report-month-card,
html.dark-mode .report-type-card,
html.dark-mode .report-list-row {
    background: rgba(15, 23, 42, 0.78);
}

@media (min-width: 700px) {
    .report-list-row {
        grid-template-columns: 1fr 210px;
    }
}


/* YARA report delete token + dashboard status fix */
.report-delete-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.status-ok {
    border-color: rgba(22, 163, 74, 0.45) !important;
}

.status-warn {
    border-color: rgba(245, 158, 11, 0.45) !important;
}


/* YARA report delete + PDF logo/employee fix */
.report-delete-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #dc2626 !important;
    color: white !important;
    border: 1px solid #991b1b !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    min-height: 32px !important;
    padding: 7px 8px !important;
}


/* YARA professional PDF/mobile open polish */
.report-open-button {
    white-space: nowrap;
}

.pdf-button,
.owner-report-button {
    background: #0f766e !important;
    border-color: #115e59 !important;
}


/* YARA professional report layout + dashboard status */
.status-link strong {
    display: block;
    font-size: 13px;
    line-height: 1.15;
}

.status-link span {
    display: block;
    font-size: 12px;
    line-height: 1.15;
    opacity: 0.86;
    margin-top: 2px;
}


/* YARA report status outline + PDF polish */
.status-link.success,
.status-link.alert {
    border-width: 1px !important;
    border-style: solid !important;
}

.status-link.success {
    border-color: rgba(22, 163, 74, 0.55) !important;
}

.status-link.alert {
    border-color: rgba(245, 158, 11, 0.65) !important;
}

.status-link strong,
.status-link span {
    display: inline !important;
}

.report-list-row {
    border: 1px solid rgba(148, 163, 184, 0.30) !important;
    border-radius: 11px !important;
}

.pdf-button,
.owner-report-button {
    background: #0f766e !important;
    border-color: #115e59 !important;
}



/* YARA report archive generated time + download button */
.report-list-actions {
    grid-template-columns: 1fr 1fr 1fr !important;
}

.report-download-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #0f766e !important;
    color: white !important;
    border: 1px solid #115e59 !important;
    border-radius: 10px !important;
    padding: 7px 8px !important;
    text-align: center !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    min-height: 32px !important;
}

.report-list-info span {
    font-size: 12px !important;
    line-height: 1.2 !important;
}




/* YARA boarding status/profile photo report polish */
.status-link.info {
    border-color: rgba(59, 130, 246, 0.55) !important;
}




/* YARA boarding status outline fix */
.status-link.info,
.status.info {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(59, 130, 246, 0.60) !important;
    background: rgba(219, 234, 254, 0.75) !important;
}

html.dark-mode .status-link.info,
html.dark-mode .status.info {
    background: rgba(30, 64, 175, 0.22) !important;
}




/* YARA upcoming boarding visit outline + time display */
.status-link.info,
.status.info,
a.status-link.info {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(59, 130, 246, 0.70) !important;
    background: rgba(219, 234, 254, 0.78) !important;
    color: #0f172a !important;
}

html.dark-mode .status-link.info,
html.dark-mode .status.info,
html.dark-mode a.status-link.info {
    background: rgba(30, 64, 175, 0.24) !important;
    border-color: rgba(96, 165, 250, 0.72) !important;
    color: #e5e7eb !important;
}




/* YARA Walk Groups fast volunteer assignment */
.quick-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.quick-chip {
    border: 1px solid rgba(20, 184, 166, 0.35);
    background: rgba(204, 251, 241, 0.70);
    border-radius: 999px;
    padding: 5px 9px;
    font-weight: 750;
    font-size: 13px;
}

.compact-volunteer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.compact-volunteer-option {
    border: 1px solid rgba(148, 163, 184, 0.30);
    border-radius: 10px;
    padding: 7px 8px;
    background: rgba(255,255,255,0.66);
}

.compact-volunteer-option input {
    width: 18px;
    height: 18px;
}

.bulk-dog-assignment-form {
    margin: 0;
}

.compact-dog-assignment {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 10px;
    padding: 8px;
    margin: 6px 0;
}

.compact-dog-assignment select {
    min-height: 34px;
}

.walk-group-card .mini-card {
    margin: 8px 0;
    padding: 8px;
    border-radius: 12px;
}

@media (min-width: 720px) {
    .compact-volunteer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .compact-dog-assignment {
        grid-template-columns: 1fr 220px;
        align-items: center;
    }
}




/* YARA Walk Groups available dogs + volunteer times */
.walk-dog-option {
    border: 1px solid rgba(148, 163, 184, 0.30) !important;
}

.walk-dog-option input {
    width: 18px;
    height: 18px;
}

.compact-dog-assignment select option {
    font-size: 14px;
}




/* YARA global compact green polish */
:root {
    --af-green: #0f5f1a;
    --af-green-soft: rgba(15, 95, 26, 0.10);
    --af-green-line: rgba(15, 95, 26, 0.30);
}

details.card,
details.mini-card {
    border: 1px solid var(--af-green-line) !important;
    border-radius: 12px !important;
    margin: 7px 0 !important;
    padding: 5px 7px !important;
}

details.card > summary,
details.mini-card > summary,
.section-summary {
    cursor: pointer !important;
    min-height: 30px !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
    background: var(--af-green-soft) !important;
    color: #073b10 !important;
    font-weight: 850 !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

details.card > summary::after,
details.mini-card > summary::after {
    content: "Open";
    font-size: 11px;
    font-weight: 800;
    border: 1px solid var(--af-green-line);
    border-radius: 999px;
    padding: 2px 7px;
    background: rgba(255,255,255,0.75);
    color: #0f5f1a;
}

details.card[open] > summary::after,
details.mini-card[open] > summary::after {
    content: "Close";
}

.card {
    padding: 9px !important;
}

.status,
.status-link,
.success,
.warning {
    padding: 6px 8px !important;
    margin: 4px 0 !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    line-height: 1.18 !important;
}

button,
.manage-button,
.save-button-always,
.danger-button,
.pdf-button,
.owner-report-button,
.dashboard-menu-button,
.top-action-button {
    min-height: 30px !important;
    padding: 6px 9px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
}

.planned-walk-status-list {
    display: grid;
    gap: 5px;
    margin: 7px 0;
}

.planned-walk-status,
.planned-walks-top-card .status {
    border: 1px solid var(--af-green-line) !important;
    background: rgba(209, 250, 229, 0.70) !important;
    border-radius: 10px !important;
}

html.dark-mode details.card > summary,
html.dark-mode details.mini-card > summary,
html.dark-mode .section-summary {
    background: rgba(15, 95, 26, 0.30) !important;
    color: #e7f8ea !important;
}

html.dark-mode .planned-walk-status,
html.dark-mode .planned-walks-top-card .status {
    background: rgba(15, 95, 26, 0.22) !important;
    border-color: rgba(34, 197, 94, 0.45) !important;
}




/* YARA planned walk complete button on status bar */
.planned-walk-status-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
    align-items: center !important;
}

.planned-walk-status-text {
    min-width: 0 !important;
}

.planned-walk-complete-form {
    margin: 0 !important;
}

.planned-walk-complete-button {
    min-height: 28px !important;
    padding: 5px 9px !important;
    border-radius: 9px !important;
    border: 1px solid rgba(15, 95, 26, 0.45) !important;
    background: #0f5f1a !important;
    color: white !important;
    font-weight: 850 !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}

.planned-walk-done-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 24px !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: rgba(22, 163, 74, 0.16) !important;
    border: 1px solid rgba(22, 163, 74, 0.35) !important;
    color: #166534 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

@media (max-width: 520px) {
    .planned-walk-status-row {
        grid-template-columns: 1fr !important;
    }

    .planned-walk-complete-button {
        width: 100% !important;
    }
}




/* YARA visible planned walk status + dashboard completion count */
.planned-walks-top-card {
    display: block !important;
    border: 1px solid rgba(15, 95, 26, 0.32) !important;
    background: rgba(240, 253, 244, 0.75) !important;
    margin: 8px 0 !important;
}

.planned-walks-top-card h3 {
    margin: 0 0 6px 0 !important;
    font-size: 15px !important;
    color: #0f5f1a !important;
}

.planned-walk-status-list {
    display: grid !important;
    gap: 5px !important;
    margin: 5px 0 !important;
}

.planned-walk-status-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
    align-items: center !important;
    border: 1px solid rgba(15, 95, 26, 0.32) !important;
    background: rgba(209, 250, 229, 0.70) !important;
}

.planned-walk-complete-form {
    margin: 0 !important;
}

.planned-walk-complete-button {
    min-height: 28px !important;
    padding: 5px 9px !important;
    border-radius: 9px !important;
    border: 1px solid rgba(15, 95, 26, 0.45) !important;
    background: #0f5f1a !important;
    color: white !important;
    font-weight: 850 !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}

.planned-walk-done-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 24px !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: rgba(22, 163, 74, 0.16) !important;
    border: 1px solid rgba(22, 163, 74, 0.35) !important;
    color: #166534 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

@media (max-width: 520px) {
    .planned-walk-status-row {
        grid-template-columns: 1fr !important;
    }
    .planned-walk-complete-button {
        width: 100% !important;
    }
}




/* YARA RESTORE: compact green layout */
:root {
    --af-green: #0f5f1a;
    --af-green-dark: #073b10;
    --af-green-soft: rgba(15, 95, 26, 0.08);
    --af-green-soft-2: rgba(15, 95, 26, 0.14);
    --af-green-line: rgba(15, 95, 26, 0.28);
    --af-green-line-strong: rgba(15, 95, 26, 0.46);
}

/* Cards: less chunky */
.card {
    padding: 8px 9px !important;
    margin: 7px 0 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
}

/* Foldable sections: compact, outlined, obvious */
details.card,
details.mini-card,
details.report-month-card,
details.report-type-card {
    padding: 5px 7px !important;
    margin: 7px 0 !important;
    border-radius: 13px !important;
    border: 1px solid var(--af-green-line) !important;
    background: rgba(255,255,255,0.64) !important;
}

details.card[open],
details.mini-card[open],
details.report-month-card[open],
details.report-type-card[open] {
    border-color: var(--af-green-line-strong) !important;
    box-shadow: 0 1px 0 rgba(15, 95, 26, 0.08) !important;
}

details.card > summary,
details.mini-card > summary,
details.report-month-card > summary,
details.report-type-card > summary,
.section-summary,
.report-month-summary,
.report-type-summary {
    cursor: pointer !important;
    min-height: 30px !important;
    padding: 6px 8px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: var(--af-green-soft) !important;
    border: 1px solid rgba(15, 95, 26, 0.16) !important;
    color: var(--af-green-dark) !important;
    font-weight: 850 !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

/* Open / Close pill */
details.card > summary::after,
details.mini-card > summary::after,
details.report-month-card > summary::after,
details.report-type-card > summary::after {
    content: "Open";
    flex: 0 0 auto;
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
    border: 1px solid var(--af-green-line);
    border-radius: 999px;
    padding: 4px 8px;
    background: rgba(255,255,255,0.82);
    color: var(--af-green);
}

details.card[open] > summary::after,
details.mini-card[open] > summary::after,
details.report-month-card[open] > summary::after,
details.report-type-card[open] > summary::after {
    content: "Close";
    background: var(--af-green);
    color: white;
    border-color: var(--af-green);
}

/* Status bars: compact but outlined */
.status,
.status-link,
.success,
.warning,
.status-warn,
.status-ok,
.status-alert {
    padding: 6px 8px !important;
    margin: 4px 0 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 1.18 !important;
    border-width: 1px !important;
    border-style: solid !important;
}

.status,
.status-link {
    border-color: rgba(148, 163, 184, 0.28) !important;
}

.status-link.success,
.status.success,
.success {
    border-color: rgba(22, 163, 74, 0.48) !important;
}

.status-link.alert,
.status.alert,
.warning,
.status-warn {
    border-color: rgba(245, 158, 11, 0.58) !important;
}

.status-link.info,
.status.info,
a.status-link.info {
    border-color: rgba(59, 130, 246, 0.55) !important;
}

/* Buttons: smaller, clearer, less scrolling */
button,
.manage-button,
.save-button-always,
.danger-button,
.pdf-button,
.owner-report-button,
.dashboard-menu-button,
.top-action-button,
.report-open-button,
.report-download-button,
.report-delete-link,
.planned-walk-complete-button {
    min-height: 30px !important;
    padding: 6px 9px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
}

.save-button-always,
.manage-button,
.pdf-button,
.owner-report-button,
.report-open-button,
.report-download-button,
.planned-walk-complete-button {
    background: var(--af-green) !important;
    border-color: var(--af-green) !important;
    color: white !important;
}

/* Form controls compact */
input,
select,
textarea {
    border-radius: 9px !important;
    font-size: 14px !important;
}

input,
select {
    min-height: 34px !important;
    padding: 6px 8px !important;
}

textarea {
    min-height: 52px !important;
    padding: 7px 8px !important;
}

/* Walk cards / planned walks */
.planned-walks-top-card {
    display: block !important;
    border: 1px solid var(--af-green-line) !important;
    background: rgba(240, 253, 244, 0.78) !important;
    margin: 8px 0 !important;
    padding: 8px 9px !important;
    border-radius: 14px !important;
}

.planned-walks-top-card h3 {
    margin: 0 0 6px 0 !important;
    font-size: 15px !important;
    color: var(--af-green) !important;
}

.planned-walk-status-list {
    display: grid !important;
    gap: 5px !important;
    margin: 5px 0 !important;
}

.planned-walk-status-row,
.planned-walk-status {
    border: 1px solid var(--af-green-line) !important;
    background: rgba(209, 250, 229, 0.68) !important;
    border-radius: 10px !important;
}

.quick-chip {
    border: 1px solid var(--af-green-line) !important;
    background: rgba(204, 251, 241, 0.62) !important;
    border-radius: 999px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
}

/* Compact grids */
.walk-count-grid,
.dashboard-status-grid,
.quick-status-grid {
    gap: 6px !important;
}

.compact-volunteer-option,
.walk-dog-option,
.compact-dog-assignment {
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    border-radius: 10px !important;
    padding: 7px 8px !important;
}

/* Dark mode */
html.dark-mode details.card,
html.dark-mode details.mini-card,
html.dark-mode details.report-month-card,
html.dark-mode details.report-type-card {
    background: rgba(15, 23, 42, 0.76) !important;
    border-color: rgba(34, 197, 94, 0.28) !important;
}

html.dark-mode details.card > summary,
html.dark-mode details.mini-card > summary,
html.dark-mode details.report-month-card > summary,
html.dark-mode details.report-type-card > summary,
html.dark-mode .section-summary,
html.dark-mode .report-month-summary,
html.dark-mode .report-type-summary {
    background: rgba(15, 95, 26, 0.30) !important;
    color: #e7f8ea !important;
    border-color: rgba(34, 197, 94, 0.26) !important;
}

html.dark-mode .planned-walks-top-card,
html.dark-mode .planned-walk-status-row,
html.dark-mode .planned-walk-status {
    background: rgba(15, 95, 26, 0.20) !important;
    border-color: rgba(34, 197, 94, 0.38) !important;
}

html.dark-mode .quick-chip {
    background: rgba(20, 83, 45, 0.45) !important;
    border-color: rgba(34, 197, 94, 0.32) !important;
}




/* YARA edit existing planned walk */
details.mini-card form input,
details.mini-card form textarea,
details.mini-card form select {
    margin-bottom: 6px !important;
}

details.mini-card textarea[name="notes"] {
    min-height: 58px !important;
}

.walk-group-card details.mini-card {
    border-color: rgba(15, 95, 26, 0.24) !important;
}




/* YARA easy edit walk notes + employees */
.easy-edit-walk-bar {
    border-color: rgba(15, 95, 26, 0.45) !important;
    background: rgba(209, 250, 229, 0.72) !important;
    font-weight: 850 !important;
}

.easy-edit-walk-card {
    border-color: rgba(15, 95, 26, 0.36) !important;
}

.easy-edit-walk-card textarea {
    min-height: 74px !important;
}

.dog-people-assignment {
    grid-template-columns: 1fr !important;
}

@media (min-width: 820px) {
    .dog-people-assignment {
        grid-template-columns: 1fr 210px 210px !important;
    }
}

.day-volunteer-time-card {
    border: 1px solid rgba(15, 95, 26, 0.24) !important;
    background: rgba(240, 253, 244, 0.55) !important;
    border-radius: 12px !important;
    padding: 8px !important;
}

html.dark-mode .easy-edit-walk-bar,
html.dark-mode .day-volunteer-time-card {
    background: rgba(15, 95, 26, 0.20) !important;
    border-color: rgba(34, 197, 94, 0.32) !important;
}




/* YARA walk status edit + quick summary */
.planned-walk-status-actions,
.walk-card-top-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-top: 5px !important;
}

.planned-walk-small-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 24px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(15, 95, 26, 0.36) !important;
    background: rgba(240, 253, 244, 0.82) !important;
    color: #0f5f1a !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    text-decoration: none !important;
}

.walk-quick-summary-card,
.easy-edit-walk-card {
    border-color: rgba(15, 95, 26, 0.32) !important;
}

.walk-quick-summary-list {
    display: grid !important;
    gap: 5px !important;
    margin: 6px 0 !important;
}

.walk-summary-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3px !important;
    padding: 7px 8px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
}

.walk-summary-assigned {
    background: rgba(240, 253, 244, 0.64) !important;
    border-color: rgba(15, 95, 26, 0.22) !important;
}

.walk-summary-missing {
    background: rgba(255, 251, 235, 0.82) !important;
    border-color: rgba(245, 158, 11, 0.45) !important;
}

.walk-group-head {
    gap: 8px !important;
}

@media (min-width: 720px) {
    .walk-summary-row {
        grid-template-columns: 1fr 1fr !important;
        align-items: center !important;
    }
}

html.dark-mode .planned-walk-small-button,
html.dark-mode .walk-summary-assigned {
    background: rgba(15, 95, 26, 0.24) !important;
    border-color: rgba(34, 197, 94, 0.30) !important;
    color: #e7f8ea !important;
}

html.dark-mode .walk-summary-missing {
    background: rgba(120, 53, 15, 0.26) !important;
    border-color: rgba(245, 158, 11, 0.45) !important;
}




/* YARA employee dropdown + edit dogs in planned walk */
.easy-edit-dogs-card,
.easy-edit-walk-card,
.walk-quick-summary-card {
    border-color: rgba(15, 95, 26, 0.32) !important;
}

.walk-edit-dogs-grid .walk-dog-option {
    border-color: rgba(15, 95, 26, 0.22) !important;
}

.dog-people-assignment {
    grid-template-columns: 1fr !important;
}

@media (min-width: 840px) {
    .dog-people-assignment {
        grid-template-columns: 1fr 210px 210px !important;
    }
}

.planned-walk-status-actions,
.walk-card-top-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-top: 5px !important;
}

.planned-walk-small-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 24px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(15, 95, 26, 0.36) !important;
    background: rgba(240, 253, 244, 0.82) !important;
    color: #0f5f1a !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    text-decoration: none !important;
}

.walk-quick-summary-list {
    display: grid !important;
    gap: 5px !important;
}

.walk-summary-row {
    padding: 7px 8px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
}

.walk-summary-assigned {
    background: rgba(240, 253, 244, 0.64) !important;
    border-color: rgba(15, 95, 26, 0.22) !important;
}

.walk-summary-missing {
    background: rgba(255, 251, 235, 0.82) !important;
    border-color: rgba(245, 158, 11, 0.45) !important;
}




/* YARA selected walk edit from status bar */
.selected-walk-edit-card,
.selected-walk-summary-card {
    border: 1px solid rgba(15, 95, 26, 0.34) !important;
    background: rgba(240, 253, 244, 0.76) !important;
}

.selected-walk-edit-card h3,
.selected-walk-summary-card h3 {
    margin: 0 0 6px 0 !important;
    font-size: 16px !important;
    color: #0f5f1a !important;
}

.planned-walk-status-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-top: 5px !important;
}

.planned-walk-small-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 24px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(15, 95, 26, 0.36) !important;
    background: rgba(240, 253, 244, 0.82) !important;
    color: #0f5f1a !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    text-decoration: none !important;
}

.walk-quick-summary-list {
    display: grid !important;
    gap: 5px !important;
    margin: 6px 0 !important;
}

.walk-summary-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3px !important;
    padding: 7px 8px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
}

.walk-summary-assigned {
    background: rgba(240, 253, 244, 0.64) !important;
    border-color: rgba(15, 95, 26, 0.22) !important;
}

.walk-summary-missing {
    background: rgba(255, 251, 235, 0.82) !important;
    border-color: rgba(245, 158, 11, 0.45) !important;
}

html.dark-mode .selected-walk-edit-card,
html.dark-mode .selected-walk-summary-card,
html.dark-mode .planned-walk-small-button,
html.dark-mode .walk-summary-assigned {
    background: rgba(15, 95, 26, 0.24) !important;
    border-color: rgba(34, 197, 94, 0.30) !important;
    color: #e7f8ea !important;
}




/* YARA two employee dropdowns for walks */
.walk-employee-dropdown-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin: 8px 0 !important;
}

.walk-employee-dropdown-grid select {
    border-color: rgba(15, 95, 26, 0.34) !important;
}

@media (min-width: 700px) {
    .walk-employee-dropdown-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

.selected-walk-edit-card .walk-employee-dropdown-grid {
    border: 1px solid rgba(15, 95, 26, 0.20) !important;
    background: rgba(240, 253, 244, 0.50) !important;
    border-radius: 12px !important;
    padding: 8px !important;
}




/* YARA combined missing walk changes */
.selected-walk-dogs-card,
.walk-edit-dogs-grid,
.walk-employee-dropdown-grid {
    border-color: rgba(15, 95, 26, 0.28) !important;
}

.dog-already-selected-light {
    background: rgba(148, 163, 184, 0.10) !important;
    border-style: dashed !important;
}

.dog-people-assignment {
    grid-template-columns: 1fr !important;
}

@media (min-width: 840px) {
    .dog-people-assignment {
        grid-template-columns: 1fr 210px 210px !important;
    }
}

.walk-summary-missing {
    background: rgba(255, 251, 235, 0.82) !important;
    border-color: rgba(245, 158, 11, 0.45) !important;
}

.walk-summary-assigned {
    background: rgba(240, 253, 244, 0.64) !important;
    border-color: rgba(15, 95, 26, 0.22) !important;
}




/* YARA people roles + boarding active dates + cleaning sections */
.people-role-form {
    display: grid !important;
    gap: 7px !important;
}

@media (min-width: 760px) {
    .people-role-form {
        grid-template-columns: 1.2fr 0.8fr 1fr 1.4fr auto !important;
        align-items: end !important;
    }
}

.cleaning-section-grid {
    margin: 8px 0 !important;
}

.cleaning-check-row {
    border: 1px solid rgba(15, 95, 26, 0.22) !important;
    background: rgba(240, 253, 244, 0.52) !important;
}

.walk-employee-dropdown-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin: 8px 0 !important;
}

@media (min-width: 700px) {
    .walk-employee-dropdown-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

.dog-already-selected-light {
    background: rgba(148, 163, 184, 0.10) !important;
    border-style: dashed !important;
}

html.dark-mode .cleaning-check-row {
    background: rgba(15, 95, 26, 0.20) !important;
    border-color: rgba(34, 197, 94, 0.32) !important;
}




/* YARA cleaning same tasks + people management */
.people-management-list {
    display: grid !important;
    gap: 6px !important;
    margin-top: 10px !important;
}

.people-management-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 7px 8px !important;
    border: 1px solid rgba(15, 95, 26, 0.22) !important;
    border-radius: 10px !important;
    background: rgba(240, 253, 244, 0.52) !important;
}

.people-role-form {
    display: grid !important;
    gap: 7px !important;
}

.cleaning-section-grid {
    margin: 8px 0 !important;
}

.cleaning-check-row {
    border: 1px solid rgba(15, 95, 26, 0.22) !important;
    background: rgba(240, 253, 244, 0.52) !important;
}

@media (min-width: 760px) {
    .people-role-form {
        grid-template-columns: 1.2fr 0.8fr 1fr 1.4fr auto !important;
        align-items: end !important;
    }
}

@media (max-width: 560px) {
    .people-management-row {
        grid-template-columns: 1fr !important;
    }
}

html.dark-mode .people-management-row,
html.dark-mode .cleaning-check-row {
    background: rgba(15, 95, 26, 0.20) !important;
    border-color: rgba(34, 197, 94, 0.32) !important;
}




/* YARA hide people management from normal workflow + completed by dropdowns */
.cleaning-section-grid {
    margin: 8px 0 !important;
}

.cleaning-check-row {
    border: 1px solid rgba(15, 95, 26, 0.22) !important;
    background: rgba(240, 253, 244, 0.52) !important;
}

.people-role-form,
.people-management-list,
.people-management-row {
    display: none !important;
}

html.dark-mode .cleaning-check-row {
    background: rgba(15, 95, 26, 0.20) !important;
    border-color: rgba(34, 197, 94, 0.32) !important;
}




/* YARA cleaning extra checkbox tasks + volunteers + cat volunteers */
.cleaning-extra-task-list,
.cleaning-extra-add-grid,
.cleaning-volunteer-grid,
.cat-volunteer-grid {
    margin: 8px 0 !important;
}

.cleaning-extra-task-list {
    display: grid !important;
    gap: 6px !important;
}

.cleaning-extra-task-row,
.cleaning-check-row {
    border: 1px solid rgba(15, 95, 26, 0.22) !important;
    background: rgba(240, 253, 244, 0.52) !important;
}

.cleaning-extra-add-grid {
    display: grid !important;
    gap: 6px !important;
}

@media (min-width: 760px) {
    .cleaning-extra-add-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
    }
}

html.dark-mode .cleaning-extra-task-row,
html.dark-mode .cleaning-check-row {
    background: rgba(15, 95, 26, 0.20) !important;
    border-color: rgba(34, 197, 94, 0.32) !important;
}




/* YARA two daily volunteers + quick add employee fix */
.daily-two-volunteer-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin: 8px 0 !important;
    padding: 8px !important;
    border: 1px solid rgba(15, 95, 26, 0.22) !important;
    border-radius: 12px !important;
    background: rgba(240, 253, 244, 0.52) !important;
}

@media (min-width: 720px) {
    .daily-two-volunteer-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

.daily-two-volunteer-grid select {
    border-color: rgba(15, 95, 26, 0.34) !important;
}

html.dark-mode .daily-two-volunteer-grid {
    background: rgba(15, 95, 26, 0.20) !important;
    border-color: rgba(34, 197, 94, 0.32) !important;
}




/* YARA master employee list + leading employee */
.employee-master-list,
.employee-day-list {
    margin-top: 8px !important;
}

.employee-day-card,
.people-management-row {
    border: 1px solid rgba(15, 95, 26, 0.22) !important;
    background: rgba(240, 253, 244, 0.52) !important;
}

.employee-day-card .quick-chip {
    margin-left: 4px !important;
}

html.dark-mode .employee-day-card,
html.dark-mode .people-management-row {
    background: rgba(15, 95, 26, 0.20) !important;
    border-color: rgba(34, 197, 94, 0.32) !important;
}




/* YARA animal daily photo restore */
.animal-photos-section {
    border-color: rgba(15, 95, 26, 0.24) !important;
}

.animal-photo-upload-form {
    display: grid !important;
    gap: 8px !important;
}

.animal-photo-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

.animal-photo-card {
    border: 1px solid rgba(15, 95, 26, 0.22) !important;
    border-radius: 14px !important;
    padding: 10px !important;
    background: rgba(240, 253, 244, 0.55) !important;
    display: grid !important;
    gap: 8px !important;
}

.animal-photo-thumb {
    width: 100% !important;
    max-height: 260px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    border: 1px solid rgba(15, 95, 26, 0.18) !important;
}

.animal-photo-note {
    white-space: pre-wrap !important;
    font-size: 0.95rem !important;
}

@media (min-width: 760px) {
    .animal-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .animal-photo-upload-form {
        grid-template-columns: 1fr 1fr !important;
    }

    .animal-photo-upload-form textarea,
    .animal-photo-upload-form button,
    .animal-photo-upload-form label {
        grid-column: 1 / -1;
    }
}

html.dark-mode .animal-photo-card {
    background: rgba(15, 95, 26, 0.20) !important;
    border-color: rgba(34, 197, 94, 0.32) !important;
}




/* YARA animal information + medication profile sections */
.animal-info-section,
.medication-profile-section {
    border-color: rgba(15, 95, 26, 0.24) !important;
}

.animal-info-section input,
.animal-info-section select,
.medication-profile-section input,
.medication-profile-section select {
    width: 100% !important;
}

.medication-profile-section label {
    display: block !important;
    margin-top: 8px !important;
}

html.dark-mode .animal-info-section,
html.dark-mode .medication-profile-section {
    border-color: rgba(34, 197, 94, 0.32) !important;
}




/* YARA medication profile bridge status */
.dashboard-medication-list {
    display: grid !important;
    gap: 8px !important;
}

.dashboard-medication-row {
    border-left: 4px solid #d97706 !important;
}

.medication-profile-section .badge-urgent,
.dashboard-medication-row .badge-urgent {
    white-space: nowrap !important;
}




/* YARA dashboard val + medication rescue */
.dashboard-medication-row {
    border-left: 4px solid #d97706 !important;
}




/* YARA medication profile open count fix */
.medication-profile-open-note {
    font-size: 0.9rem !important;
    opacity: 0.85 !important;
}




/* YARA Daily Care medication rescue + medication give button */
.daily-medication-card {
    border-left: 4px solid #d97706 !important;
}

.daily-medication-details {
    display: grid !important;
    gap: 8px !important;
    margin: 8px 0 !important;
}

.daily-medication-line {
    padding: 8px !important;
    border-radius: 10px !important;
    background: rgba(217, 119, 6, 0.10) !important;
    border: 1px solid rgba(217, 119, 6, 0.18) !important;
}

.daily-medication-given-label {
    display: block !important;
    padding: 8px !important;
    border-radius: 10px !important;
    background: rgba(34, 197, 94, 0.12) !important;
}




/* YARA medication top open given button linked fix */
.medication-open-card .medication-button-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 8px !important;
    align-items: center !important;
}

.medication-open-card form {
    margin: 0 !important;
}




/* YARA dashboard medication status + boarding upcoming fix */
.dashboard-status-list .status-link.success {
    text-decoration: none !important;
}




/* YARA boarding booking / check-in workflow */
.boarding-card .boarding-action-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

.boarding-card .boarding-action-row form {
    margin: 0 !important;
}

.boarding-time-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}

@media (min-width: 760px) {
    .boarding-time-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

.boarding-card .badge-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 6px !important;
}




/* YARA boarding history + manage animals folded menus */
.manage-animal-section {
    margin-bottom: 10px !important;
}

.manage-animal-list {
    display: grid !important;
    gap: 8px !important;
}

.manage-animal-card {
    padding: 10px !important;
    border-radius: 14px !important;
}

.manage-animal-card .badge-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 6px 0 !important;
}

.manage-animal-button-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 8px !important;
    align-items: center !important;
}

.manage-animal-button-row form {
    margin: 0 !important;
}

.manage-animal-button-row select {
    min-width: 130px !important;
}

.boarding-history-card {
    border-left: 4px solid rgba(15, 95, 26, 0.55) !important;
    margin-bottom: 8px !important;
}




/* YARA boarding actual check-in/check-out time fix */
.boarding-card .boarding-action-row .save-button-always,
.boarding-card .boarding-action-row .danger-button {
    white-space: normal !important;
    min-height: 40px !important;
}




/* YARA reports startup + volunteer dashboard */
.volunteer-screen {
    padding: 8px !important;
}

.volunteer-screen-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
}

.volunteer-screen-header h1 {
    margin: 0 !important;
    font-size: clamp(1.4rem, 3vw, 2.4rem) !important;
}

.volunteer-dashboard-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

@media (min-width: 950px) {
    .volunteer-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1300px) {
    .volunteer-dashboard-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

.volunteer-dashboard-card h2 {
    margin-top: 0 !important;
}

.startup-list {
    display: grid !important;
    gap: 8px !important;
}

.startup-list-row {
    padding: 9px !important;
    border-radius: 10px !important;
    background: rgba(34, 197, 94, 0.10) !important;
    border: 1px solid rgba(34, 197, 94, 0.18) !important;
}

.report-list-row {
    animation: none !important;
}




/* YARA owner report checked-in status and aligned report buttons */
.card form .pdf-button,
.card > form .pdf-button {
    width: 100% !important;
}

.report-action-grid {
    display: grid !important;
    gap: 8px !important;
}

.owner-report-button,
.pdf-button {
    display: block !important;
}




/* YARA new shelter arrival dashboard status */
.status-link.info,
.dashboard-status-link.info {
    border-left-color: rgba(59, 130, 246, 0.85) !important;
}

.new-shelter-arrival-status {
    border-left: 4px solid rgba(59, 130, 246, 0.85) !important;
}




/* YARA new shelter animals card rescue */
.new-shelter-animals-card {
    border-color: rgba(59, 130, 246, 0.35) !important;
}

.new-shelter-animal-list {
    display: grid !important;
    gap: 8px !important;
}

.new-shelter-animal-row {
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    align-items: center !important;
    text-decoration: none !important;
    padding: 10px !important;
    border-radius: 12px !important;
    background: rgba(59, 130, 246, 0.10) !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
}

.new-shelter-animal-row span {
    opacity: 0.85 !important;
    font-size: 0.9rem !important;
}




/* YARA new shelter animals separate card safe fix */
.new-shelter-animals-card {
    border-color: rgba(59, 130, 246, 0.35) !important;
}

.new-shelter-animal-list {
    display: grid !important;
    gap: 8px !important;
}

.new-shelter-animal-row {
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    align-items: center !important;
    text-decoration: none !important;
    padding: 10px !important;
    border-radius: 12px !important;
    background: rgba(59, 130, 246, 0.10) !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
}

.new-shelter-animal-row span:last-child {
    opacity: 0.85 !important;
    font-size: 0.9rem !important;
}




/* YARA polish new shelter animals and dashboard button order */
.new-shelter-animals-card {
    border: 2px solid rgba(59, 130, 246, 0.55) !important;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.20), 0 8px 24px rgba(0,0,0,0.18) !important;
}

.new-shelter-summary {
    align-items: center !important;
}

.new-shelter-sign {
    display: inline-block !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: #2563eb !important;
    color: #ffffff !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
}

.new-shelter-animal-card-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

@media (min-width: 760px) {
    .new-shelter-animal-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

.new-shelter-animal-card {
    display: grid !important;
    grid-template-columns: 48px 1fr auto !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 12px !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    background: rgba(59, 130, 246, 0.12) !important;
    border: 1px solid rgba(59, 130, 246, 0.35) !important;
}

.new-shelter-animal-icon {
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,0.12) !important;
    font-size: 1.45rem !important;
}

.new-shelter-animal-main {
    display: grid !important;
    gap: 2px !important;
}

.new-shelter-animal-main strong {
    font-size: 1.05rem !important;
}

.new-shelter-animal-main span,
.new-shelter-animal-main small {
    opacity: 0.85 !important;
}

.new-shelter-open-pill {
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: rgba(34,197,94,0.20) !important;
    border: 1px solid rgba(34,197,94,0.35) !important;
    font-weight: 800 !important;
    font-size: 0.8rem !important;
}

.volunteer-dashboard-new-shelter {
    border: 2px solid rgba(59, 130, 246, 0.50) !important;
}




/* YARA employee-only dogs */
.employee-only-badge {
    background: rgba(220, 38, 38, 0.95) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    font-weight: 900 !important;
}

.employee-only-profile-toggle {
    display: block !important;
    margin: 10px 0 !important;
    padding: 10px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(220, 38, 38, 0.35) !important;
    background: rgba(220, 38, 38, 0.10) !important;
    font-weight: 800 !important;
}

/* YARA volunteer dashboard task checklist */
.volunteer-dashboard-task-card {
    border: 2px solid rgba(34, 197, 94, 0.35) !important;
}

.volunteer-task-checklist {
    display: grid !important;
    gap: 8px !important;
}

.volunteer-task-row {
    margin: 0 !important;
    padding: 0 !important;
}

.volunteer-task-row label {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
    padding: 10px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    cursor: pointer !important;
}

.volunteer-task-row input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    margin-top: 2px !important;
}

.volunteer-task-done label {
    background: rgba(34, 197, 94, 0.16) !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
}

.volunteer-task-done strong {
    text-decoration: line-through !important;
    opacity: 0.8 !important;
}




/* YARA employee-only rescue + visible volunteer dashboard button */
.dashboard-volunteer-button-row {
    margin: 8px 0 12px 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
}

.volunteer-dashboard-last-button {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    border: 2px solid rgba(34, 197, 94, 0.45) !important;
}

.employee-only-badge {
    background: rgba(220, 38, 38, 0.95) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    font-weight: 900 !important;
}

.employee-only-profile-toggle {
    display: block !important;
    margin: 10px 0 !important;
    padding: 10px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(220, 38, 38, 0.35) !important;
    background: rgba(220, 38, 38, 0.10) !important;
    font-weight: 800 !important;
}




/* YARA Walk Groups employee-only rescue + linked volunteer cleaning */
.employee-only-badge {
    background: rgba(220, 38, 38, 0.95) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    font-weight: 900 !important;
}

.volunteer-dashboard-task-card {
    border: 2px solid rgba(34, 197, 94, 0.35) !important;
}

.volunteer-cleaning-linked-list {
    display: grid !important;
    gap: 8px !important;
}

.volunteer-cleaning-section-title {
    margin-top: 8px !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    font-weight: 900 !important;
    background: rgba(34, 197, 94, 0.12) !important;
    border: 1px solid rgba(34, 197, 94, 0.25) !important;
}

.volunteer-task-row {
    margin: 0 !important;
    padding: 0 !important;
}

.volunteer-task-row label {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
    padding: 10px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    cursor: pointer !important;
}

.volunteer-task-row input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    margin-top: 2px !important;
}

.volunteer-task-done label {
    background: rgba(34, 197, 94, 0.16) !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
}

.volunteer-task-done strong {
    text-decoration: line-through !important;
    opacity: 0.8 !important;
}




/* YARA folded volunteer dashboard */
.volunteer-dashboard-folded {
    display: grid !important;
    gap: 10px !important;
}

.volunteer-dashboard-folded details.card {
    margin-bottom: 0 !important;
}

.volunteer-dashboard-folded .section-summary {
    cursor: pointer !important;
}

.volunteer-dashboard-task-card {
    border: 2px solid rgba(34, 197, 94, 0.35) !important;
}

.volunteer-dev-actions {
    display: grid !important;
    gap: 8px !important;
}

.volunteer-dev-actions form {
    margin: 0 !important;
}

.volunteer-dev-actions .danger-button {
    width: 100% !important;
}




/* YARA Volunteer Dashboard restore: only cleaning folded */
.volunteer-dashboard-task-card {
    border: 2px solid rgba(34, 197, 94, 0.35) !important;
}

.volunteer-dashboard-task-card > summary {
    cursor: pointer !important;
}

.volunteer-dev-actions {
    display: grid !important;
    gap: 8px !important;
}

.volunteer-dev-actions form {
    margin: 0 !important;
}

.volunteer-dev-actions .danger-button,
.volunteer-dev-actions .button-link {
    width: 100% !important;
    text-align: center !important;
}



/* YARA animal section cards with profile photos */
.section-animal-card-with-photo{display:grid!important;grid-template-columns:72px 1fr!important;gap:12px!important;align-items:start!important;}
.section-animal-summary-with-photo{display:grid!important;grid-template-columns:64px 1fr!important;gap:12px!important;align-items:center!important;}
.section-animal-photo-link{text-decoration:none!important;}
.section-animal-profile-photo{width:64px!important;height:64px!important;border-radius:16px!important;object-fit:cover!important;border:1px solid rgba(255,255,255,.18)!important;background:rgba(255,255,255,.08)!important;}
.section-animal-profile-placeholder{display:grid!important;place-items:center!important;font-size:1.8rem!important;}
.section-animal-card-main{min-width:0!important;}
.employee-only-badge{background:rgba(220,38,38,.95)!important;color:#fff!important;border:1px solid rgba(255,255,255,.25)!important;font-weight:900!important;}
.dashboard-menu-grid .dashboard-menu-button[href="/volunteer-dashboard"]{border:2px solid rgba(34,197,94,.45)!important;}



/* YARA vet visits and history cleanup */
.vet-visits-card {
    border-color: rgba(59, 130, 246, 0.35) !important;
}

.vet-visit-note {
    border-left: 4px solid rgba(59, 130, 246, 0.85) !important;
}

.small-danger-button {
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: rgba(220, 38, 38, 0.95) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 800 !important;
}



/* YARA profile route + shelter photo badge rescue */
.employee-only-badge {
    background: rgba(220, 38, 38, 0.95) !important;
    color: #fff !important;
    border: 1px solid rgba(220, 38, 38, 0.95) !important;
    font-size: inherit !important;
    line-height: inherit !important;
    padding: inherit !important;
    border-radius: inherit !important;
    font-weight: inherit !important;
}

.section-animal-summary-with-photo {
    display: grid !important;
    grid-template-columns: 64px 1fr !important;
    gap: 12px !important;
    align-items: center !important;
}

.section-animal-photo-link {
    text-decoration: none !important;
}

.section-animal-profile-photo {
    width: 64px !important;
    height: 64px !important;
    border-radius: 16px !important;
    object-fit: cover !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    background: rgba(255,255,255,0.08) !important;
}

.section-animal-profile-placeholder {
    display: grid !important;
    place-items: center !important;
    font-size: 1.8rem !important;
}




/* YARA shelter photo/badge rescue + comfortable iPhone text */
.employee-only-badge {
    background: rgba(220, 38, 38, 0.95) !important;
    color: #ffffff !important;
    border-color: rgba(220, 38, 38, 0.95) !important;
    font-size: 0.82rem !important;
    line-height: 1.15 !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
    max-width: max-content !important;
}

.section-animal-summary-with-photo {
    display: grid !important;
    grid-template-columns: 64px 1fr !important;
    gap: 12px !important;
    align-items: center !important;
}

.section-animal-photo-link {
    text-decoration: none !important;
}

.section-animal-profile-photo {
    width: 64px !important;
    height: 64px !important;
    border-radius: 16px !important;
    object-fit: cover !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    background: rgba(255,255,255,0.08) !important;
}

.section-animal-profile-placeholder {
    display: grid !important;
    place-items: center !important;
    font-size: 1.8rem !important;
}

@media (max-width: 430px) {
    html {
        font-size: 17px !important;
    }

    body {
        font-size: 1rem !important;
        line-height: 1.45 !important;
    }

    .small,
    small {
        font-size: 0.92rem !important;
        line-height: 1.35 !important;
    }

    button,
    input,
    select,
    textarea,
    .button-link,
    .dashboard-menu-button,
    .manage-button,
    .save-button-always,
    .pdf-button {
        font-size: 1rem !important;
        line-height: 1.25 !important;
    }

    h1 {
        font-size: 1.45rem !important;
    }

    h2 {
        font-size: 1.25rem !important;
    }

    h3 {
        font-size: 1.15rem !important;
    }

    .animal-name {
        font-size: 1.05rem !important;
    }

    .badge {
        font-size: 0.82rem !important;
        padding: 4px 8px !important;
    }

    .section-animal-summary-with-photo {
        grid-template-columns: 66px 1fr !important;
    }

    .section-animal-profile-photo {
        width: 66px !important;
        height: 66px !important;
    }
}




/* YARA HARD FIX: shelter/manage animal thumbnails and mobile readability */
.yara-animal-list-card,
.yara-animal-list-summary {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
}

.yara-animal-thumb-link,
.yara-animal-thumb-box {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    overflow: hidden !important;
    display: block !important;
    border-radius: 16px !important;
    text-decoration: none !important;
    flex: 0 0 64px !important;
}

.yara-animal-thumb-box {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
}

.yara-animal-thumb-img {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 16px !important;
}

.yara-animal-thumb-placeholder {
    display: grid !important;
    place-items: center !important;
    font-size: 1.8rem !important;
}

.yara-animal-list-main {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
}

.employee-only-badge {
    background: rgba(220, 38, 38, 0.95) !important;
    color: #ffffff !important;
    border-color: rgba(220, 38, 38, 0.95) !important;
    font-size: 0.82rem !important;
    line-height: 1.15 !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    max-width: max-content !important;
    min-width: 0 !important;
}

@media (max-width: 430px) {
    html {
        font-size: 17px !important;
    }

    body {
        font-size: 1rem !important;
        line-height: 1.45 !important;
    }

    .small,
    small {
        font-size: 0.92rem !important;
        line-height: 1.35 !important;
    }

    button,
    input,
    select,
    textarea,
    .button-link,
    .dashboard-menu-button,
    .manage-button,
    .save-button-always,
    .pdf-button {
        font-size: 1rem !important;
        line-height: 1.25 !important;
    }

    h1 { font-size: 1.45rem !important; }
    h2 { font-size: 1.25rem !important; }
    h3 { font-size: 1.15rem !important; }

    .animal-name {
        font-size: 1.05rem !important;
    }

    .badge {
        font-size: 0.82rem !important;
        padding: 4px 8px !important;
    }

    .yara-animal-list-card,
    .yara-animal-list-summary {
        grid-template-columns: 72px minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .yara-animal-thumb-link,
    .yara-animal-thumb-box,
    .yara-animal-thumb-img {
        width: 64px !important;
        height: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
    }
}




/* YARA FINAL shelter restore + compact employee badge */
.employee-only-badge,
.badge.employee-only-badge,
.manage-animal-card .employee-only-badge,
.yara-shelter-animal-card .employee-only-badge {
    background: rgba(220, 38, 38, 0.95) !important;
    color: #ffffff !important;
    border: 1px solid rgba(220, 38, 38, 0.95) !important;
    font-size: 0.72rem !important;
    line-height: 1.05 !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 24px !important;
    white-space: nowrap !important;
}

.yara-animal-list-card,
.yara-animal-list-summary {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
}

.yara-animal-thumb-link,
.yara-animal-thumb-box {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    overflow: hidden !important;
    display: block !important;
    border-radius: 16px !important;
    text-decoration: none !important;
    flex: 0 0 64px !important;
}

.yara-animal-thumb-box {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
}

.yara-animal-thumb-img {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 16px !important;
}

.yara-animal-thumb-placeholder {
    display: grid !important;
    place-items: center !important;
    font-size: 1.8rem !important;
}

.yara-animal-list-main {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
}

@media (max-width: 430px) {
    html {
        font-size: 17px !important;
    }

    body {
        font-size: 1rem !important;
        line-height: 1.45 !important;
    }

    .small,
    small {
        font-size: 0.92rem !important;
        line-height: 1.35 !important;
    }

    button,
    input,
    select,
    textarea,
    .button-link,
    .dashboard-menu-button,
    .manage-button,
    .save-button-always,
    .pdf-button {
        font-size: 1rem !important;
        line-height: 1.25 !important;
    }

    h1 { font-size: 1.45rem !important; }
    h2 { font-size: 1.25rem !important; }
    h3 { font-size: 1.15rem !important; }

    .animal-name {
        font-size: 1.05rem !important;
    }

    .badge:not(.employee-only-badge) {
        font-size: 0.82rem !important;
        padding: 4px 8px !important;
    }
}




/* YARA INLINE THUMB RESCUE - final override */
.yara-animal-thumb-link,
.yara-animal-thumb-box,
.yara-animal-thumb-img,
.section-animal-profile-photo {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    overflow: hidden !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    flex: 0 0 56px !important;
}

.yara-animal-list-card,
.yara-animal-list-summary,
.section-animal-card-with-photo,
.section-animal-summary-with-photo {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
}

.employee-only-badge,
.badge.employee-only-badge,
.manage-animal-card .employee-only-badge,
.yara-shelter-animal-card .employee-only-badge,
.badge-row .employee-only-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 22px !important;
    font-size: 0.70rem !important;
    line-height: 1.05 !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    background: #dc2626 !important;
    color: #ffffff !important;
    border: 1px solid #dc2626 !important;
    white-space: nowrap !important;
}

@media (max-width: 430px) {
    .yara-animal-thumb-link,
    .yara-animal-thumb-box,
    .yara-animal-thumb-img,
    .section-animal-profile-photo {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
    }

    .yara-animal-list-card,
    .yara-animal-list-summary,
    .section-animal-card-with-photo,
    .section-animal-summary-with-photo {
        grid-template-columns: 64px minmax(0, 1fr) !important;
        gap: 10px !important;
    }
}




/* YARA Phase 1 readability + dark mode contrast + animal thumbnails everywhere */
:root {
    --yara-text-strong: #f8fafc;
    --yara-text-normal: #e5edf8;
    --yara-text-muted: #cbd5e1;
    --yara-link-readable: #93c5fd;
}

body {
    color: var(--yara-text-normal) !important;
}

.card,
.mini-card,
.status,
.success,
.alert,
.status-warn,
.animal,
.manage-animal-card {
    color: var(--yara-text-normal) !important;
}

h1, h2, h3, strong,
.animal-name,
.section-summary,
summary {
    color: var(--yara-text-strong) !important;
}

.small,
small {
    color: var(--yara-text-muted) !important;
}

a,
.profile-link,
.button-link {
    color: var(--yara-link-readable) !important;
}

.profile-link,
.button-link,
.manage-button,
.dashboard-menu-button {
    font-weight: 800 !important;
}

.round-animal-card,
.yara-daily-animal-summary,
.walk-dog-card,
.dog-checkbox-card,
.yara-animal-list-card,
.yara-animal-list-summary {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
}

.yara-select-thumb-box,
.yara-select-thumb-img,
.yara-animal-thumb-box,
.yara-animal-thumb-img {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    object-fit: cover !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    flex: 0 0 48px !important;
}

.employee-only-badge,
.badge.employee-only-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    height: auto !important;
    max-height: 22px !important;
    font-size: 0.70rem !important;
    line-height: 1.05 !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    background: #dc2626 !important;
    color: #ffffff !important;
    border: 1px solid #dc2626 !important;
    white-space: nowrap !important;
}

.boarding-direct-subtitle {
    font-weight: 900 !important;
    margin: 12px 0 8px 0 !important;
    color: var(--yara-text-strong) !important;
}

@media (max-width: 430px) {
    html {
        font-size: 17px !important;
    }

    body {
        font-size: 1rem !important;
        line-height: 1.45 !important;
    }

    .small,
    small {
        font-size: 0.92rem !important;
        line-height: 1.35 !important;
    }

    button,
    input,
    select,
    textarea,
    .button-link,
    .dashboard-menu-button,
    .manage-button,
    .save-button-always,
    .pdf-button {
        font-size: 1rem !important;
        line-height: 1.25 !important;
    }

    h1 { font-size: 1.45rem !important; }
    h2 { font-size: 1.25rem !important; }
    h3 { font-size: 1.15rem !important; }

    .animal-name {
        font-size: 1.08rem !important;
    }

    .badge:not(.employee-only-badge) {
        font-size: 0.82rem !important;
        padding: 4px 8px !important;
    }
}




/* YARA Boarding rescue + Daily employee-only badge */
.employee-only-badge,
.badge.employee-only-badge,
.badge-row .employee-only-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    height: auto !important;
    max-height: 22px !important;
    font-size: 0.70rem !important;
    line-height: 1.05 !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    background: #dc2626 !important;
    color: #ffffff !important;
    border: 1px solid #dc2626 !important;
    white-space: nowrap !important;
}

.yara-animal-list-summary,
.yara-daily-animal-summary,
.round-animal-card {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
}

.yara-animal-thumb-box,
.yara-animal-thumb-img,
.yara-select-thumb-box,
.yara-select-thumb-img {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    object-fit: cover !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    flex: 0 0 48px !important;
}

.boarding-direct-subtitle {
    font-weight: 900 !important;
    margin: 12px 0 8px 0 !important;
}




/* YARA callback notes + employee header + clean descriptions */
.brand-employee-name {
    margin-top: 4px !important;
    font-size: 0.92rem !important;
    line-height: 1.25 !important;
    color: rgba(229, 237, 248, 0.92) !important;
    font-weight: 700 !important;
}

.callback-note-card {
    padding: 12px !important;
    margin: 8px 0 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    background: rgba(255,255,255,0.05) !important;
}

.callback-note-done {
    opacity: 0.72 !important;
}

.callback-note-header {
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    align-items: center !important;
}

.callback-note-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}

.timeline-note {
    padding: 10px !important;
    margin: 8px 0 !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}

.volunteer-dashboard-task-card[open] {
    border: 2px solid rgba(34,197,94,0.45) !important;
}

@media (max-width: 430px) {
    .brand-employee-name {
        font-size: 0.78rem !important;
    }

    .callback-note-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
}




/* YARA volunteer dashboard rescue: keep cleaning open, hide dev cleanup on volunteer page */
.volunteer-dashboard-task-card.keep-open {
    border: 2px solid rgba(34, 197, 94, 0.45) !important;
}

.volunteer-screen .volunteer-dashboard-dev-card {
    display: none !important;
}




/* YARA header one-line centered tagline + username */
.logo-only-header .brand-block,
.page-topbar.logo-only-header .brand-block {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
}

.logo-only-header .brand-text.tagline-only,
.page-topbar.logo-only-header .brand-text.tagline-only {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-width: 0 !important;
}

.logo-only-header .brand-text.tagline-only h2,
.page-topbar.logo-only-header .brand-text.tagline-only h2 {
    white-space: nowrap !important;
    margin: 0 !important;
    line-height: 1.08 !important;
    font-size: clamp(0.82rem, 3.2vw, 1.08rem) !important;
    letter-spacing: 0 !important;
    text-align: center !important;
}

.logo-only-header .brand-employee-name,
.page-topbar.logo-only-header .brand-employee-name {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 4px !important;
    font-size: clamp(0.74rem, 2.8vw, 0.92rem) !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    color: rgba(229, 237, 248, 0.9) !important;
}

.volunteer-dashboard-task-card.keep-open {
    border: 2px solid rgba(34, 197, 94, 0.45) !important;
}

@media (max-width: 430px) {
    .page-topbar.logo-only-header {
        padding: 8px 10px !important;
    }

    .page-topbar.logo-only-header .brand-block {
        gap: 10px !important;
    }

    .page-topbar.logo-only-header .clean-header-logo,
    .logo-only-header .clean-header-logo {
        width: 56px !important;
        height: 56px !important;
        object-fit: contain !important;
        flex: 0 0 56px !important;
    }

    .page-topbar.logo-only-header .brand-text.tagline-only h2 {
        font-size: clamp(0.76rem, 3.1vw, 0.94rem) !important;
    }

    .page-topbar.logo-only-header .brand-employee-name {
        font-size: clamp(0.70rem, 2.7vw, 0.82rem) !important;
    }
}




/* YARA profile button + compact employee badge + callback status */
.profile-open-button,
a.manage-button.profile-open-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    width: fit-content !important;
    min-width: 0 !important;
}

.employee-only-badge,
.badge.employee-only-badge,
.badge-row .employee-only-badge,
.manage-animal-card .employee-only-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 20px !important;
    font-size: 0.68rem !important;
    line-height: 1.0 !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    background: #dc2626 !important;
    color: #ffffff !important;
    border: 1px solid #dc2626 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.dashboard-status-link {
    display: block !important;
    text-decoration: none !important;
}

.callback-status-warning {
    border: 2px solid rgba(245, 158, 11, 0.7) !important;
    background: rgba(245, 158, 11, 0.12) !important;
}

.callback-status-ok {
    border: 1px solid rgba(34, 197, 94, 0.45) !important;
}

.callback-status-note {
    border-left: 4px solid rgba(245, 158, 11, 0.9) !important;
}

.callback-status-warning ul {
    margin: 8px 0 6px 18px !important;
    padding: 0 !important;
}




/* YARA final profile route + callback status rescue */
.dashboard-callback-status {
    border-left: 4px solid rgba(245, 158, 11, 0.95) !important;
}

.dashboard-callback-status.success {
    border-left-color: rgba(34, 197, 94, 0.85) !important;
}




/* YARA developer delete keep-section-open */
.boarding-section-card.keep-open,
.card.keep-open,
.vet-visits-card.keep-open {
    scroll-margin-top: 12px !important;
}

.boarding-section-card.keep-open[open],
#callback-notes.keep-open[open],
#shelter-history.keep-open[open],
#vet-visits.keep-open[open] {
    border-color: rgba(34, 197, 94, 0.45) !important;
}




/* YARA boarding delete-only keep-open */
#boarding-past.keep-open[open] {
    border-color: rgba(34, 197, 94, 0.5) !important;
    scroll-margin-top: 12px !important;
}




/* YARA selected new animal badge + delete target open */
.new-animal-selected-badge,
.badge.new-animal-selected-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    height: auto !important;
    max-height: 20px !important;
    font-size: 0.68rem !important;
    line-height: 1.0 !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    font-weight: 900 !important;
    background: #2563eb !important;
    color: #ffffff !important;
    border: 1px solid #2563eb !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.new-animal-profile-toggle {
    border: 1px solid rgba(37, 99, 235, 0.45) !important;
    background: rgba(37, 99, 235, 0.10) !important;
    border-radius: 12px !important;
    padding: 10px !important;
    display: block !important;
    margin: 10px 0 !important;
}

#boarding-past.keep-open[open] {
    border-color: rgba(34, 197, 94, 0.55) !important;
    scroll-margin-top: 12px !important;
}




/* YARA new animals status bar always visible */
.new-animal-status-card {
    border: 2px solid rgba(37, 99, 235, 0.65) !important;
    background: rgba(37, 99, 235, 0.10) !important;
}

.new-animal-status-card .new-shelter-summary {
    align-items: center !important;
}

.new-shelter-sign {
    background: #2563eb !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 3px 8px !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
}

.new-shelter-animal-card-grid {
    display: grid !important;
    gap: 8px !important;
}

.new-shelter-animal-card {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}




/* YARA new animal status profile photos + profile fold cleanup */
.new-shelter-animal-photo {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    display: block !important;
}

.animal-profile-header-clean + details:not(.keep-open) {
    scroll-margin-top: 12px !important;
}




/* YARA dashboard restore: compact status bars and 2-column buttons */
.dashboard-status-list,
.compact-dashboard-status-list {
    display: grid !important;
    gap: 8px !important;
}

.status-link {
    display: block !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    min-height: 0 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    font-size: 0.92rem !important;
}

.quick-status-compact-card {
    padding: 10px !important;
}

.quick-status-title {
    margin: 0 0 8px 0 !important;
    font-size: 1.05rem !important;
}

.dashboard-menu-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.dashboard-menu-button,
.top-action-button,
.button-link,
.manage-button,
.save-button-always {
    min-height: 36px !important;
    padding: 8px 10px !important;
    line-height: 1.15 !important;
    font-size: 0.92rem !important;
}

.card,
.status,
.mini-card {
    padding: 10px !important;
    border-radius: 13px !important;
}

body {
    font-size: 15px !important;
    line-height: 1.35 !important;
}

.small,
small {
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
}

input,
select,
textarea {
    font-size: 16px !important;
}

@media (max-width: 430px) {
    .dashboard-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .dashboard-menu-button {
        min-height: 36px !important;
        padding: 8px 8px !important;
        font-size: 0.88rem !important;
    }

    .dashboard-status-list,
    .compact-dashboard-status-list {
        gap: 7px !important;
    }

    .status-link {
        padding: 8px 9px !important;
        font-size: 0.90rem !important;
    }

    .card,
    .status,
    .mini-card {
        padding: 9px !important;
    }
}




/* YARA FORCE RESTORE: visible quick status + compact 2-column buttons */
.yara-force-status-panel,
.quick-status-compact-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 10px !important;
    margin: 0 0 10px 0 !important;
}

.yara-force-status-list,
.dashboard-status-list,
.compact-dashboard-status-list {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    gap: 7px !important;
}

.status-link {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 8px 10px !important;
    margin: 0 0 7px 0 !important;
    border-radius: 12px !important;
    min-height: 0 !important;
    line-height: 1.25 !important;
    font-size: 0.92rem !important;
    text-decoration: none !important;
}

.status-link.success {
    background: rgba(34, 197, 94, 0.13) !important;
    border: 1px solid rgba(34, 197, 94, 0.35) !important;
}

.status-link.alert {
    background: rgba(245, 158, 11, 0.14) !important;
    border: 1px solid rgba(245, 158, 11, 0.40) !important;
}

.status-link.info {
    background: rgba(59, 130, 246, 0.13) !important;
    border: 1px solid rgba(59, 130, 246, 0.35) !important;
}

.dashboard-menu-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.dashboard-menu-button {
    min-height: 34px !important;
    padding: 8px 8px !important;
    font-size: 0.88rem !important;
    line-height: 1.12 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.button-link,
.manage-button,
.save-button-always,
.top-action-button {
    min-height: 34px !important;
    padding: 8px 10px !important;
    font-size: 0.90rem !important;
    line-height: 1.15 !important;
}

@media (max-width: 430px) {
    .dashboard-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .dashboard-menu-button {
        min-height: 34px !important;
        padding: 7px 6px !important;
        font-size: 0.84rem !important;
    }

    .status-link {
        padding: 7px 8px !important;
        font-size: 0.88rem !important;
    }
}




/* YARA dashboard status dropdown bars */
.dashboard-status-select {
    border: 1px solid rgba(59, 130, 246, 0.45) !important;
    background: rgba(59, 130, 246, 0.08) !important;
}

.yara-force-status-panel,
.quick-status-compact-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.yara-force-status-list,
.dashboard-status-list,
.compact-dashboard-status-list {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.status-link {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}




/* YARA bundled dashboard status bars */
.status-bundle {
    display: block !important;
    border-radius: 12px !important;
    padding: 0 !important;
    margin: 0 0 7px 0 !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    overflow: hidden !important;
    background: rgba(255,255,255,0.045) !important;
}

.status-bundle > summary {
    min-height: 34px !important;
    padding: 7px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    cursor: pointer !important;
    font-weight: 850 !important;
    line-height: 1.12 !important;
}

.status-bundle.has-info > summary {
    background: rgba(245, 158, 11, 0.14) !important;
}

.status-bundle.is-clear > summary {
    background: rgba(34, 197, 94, 0.10) !important;
}

.bundle-alert-mark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 21px !important;
    height: 21px !important;
    border-radius: 999px !important;
    background: #f59e0b !important;
    color: #111827 !important;
    font-weight: 950 !important;
}

.status-bundle-body {
    display: grid !important;
    gap: 6px !important;
    padding: 8px 10px 10px 10px !important;
}

.status-bundle-subtitle {
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    opacity: 0.82 !important;
    margin-top: 2px !important;
}

.status-bundle-item,
.status-bundle-body .status-link {
    display: block !important;
    padding: 7px 8px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    background: rgba(255,255,255,0.055) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    min-height: 0 !important;
    font-size: 0.88rem !important;
    line-height: 1.2 !important;
}

.status-bundle-link {
    display: inline-flex !important;
    width: fit-content !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    background: rgba(59, 130, 246, 0.18) !important;
    border: 1px solid rgba(59, 130, 246, 0.35) !important;
    font-weight: 800 !important;
    font-size: 0.82rem !important;
}

.dashboard-status-select,
select[name="dashboard_status"] {
    display: block !important;
    width: 100% !important;
    min-height: 38px !important;
    font-size: 16px !important;
}




/* YARA status radio buttons + light mode readability fix */
.dashboard-status-radio-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 6px 0 8px 0 !important;
}

.dashboard-status-radio {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    background: rgba(255,255,255,0.06) !important;
    cursor: pointer !important;
    font-weight: 800 !important;
    min-height: 38px !important;
}

.dashboard-status-radio input {
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
}

/* Light mode text contrast: keep dark mode untouched */
html:not(.dark-mode) body {
    color: #111827 !important;
    background: #f4f7f2 !important;
}

html:not(.dark-mode) .card,
html:not(.dark-mode) .status,
html:not(.dark-mode) .mini-card,
html:not(.dark-mode) .animal,
html:not(.dark-mode) .manage-animal-card,
html:not(.dark-mode) .yara-shelter-animal-card,
html:not(.dark-mode) .quick-status-compact-card,
html:not(.dark-mode) .dashboard-menu-compact-card,
html:not(.dark-mode) .animal-overview-card {
    color: #111827 !important;
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
}

html:not(.dark-mode) .small,
html:not(.dark-mode) small,
html:not(.dark-mode) .dashboard-info-status {
    color: #374151 !important;
}

html:not(.dark-mode) h1,
html:not(.dark-mode) h2,
html:not(.dark-mode) h3,
html:not(.dark-mode) h4,
html:not(.dark-mode) strong,
html:not(.dark-mode) label,
html:not(.dark-mode) summary {
    color: #111827 !important;
}

html:not(.dark-mode) input,
html:not(.dark-mode) select,
html:not(.dark-mode) textarea {
    color: #111827 !important;
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.24) !important;
}

html:not(.dark-mode) input::placeholder,
html:not(.dark-mode) textarea::placeholder {
    color: #6b7280 !important;
}

html:not(.dark-mode) .dashboard-menu-button,
html:not(.dark-mode) .button-link,
html:not(.dark-mode) .manage-button,
html:not(.dark-mode) .save-button-always,
html:not(.dark-mode) .top-action-button,
html:not(.dark-mode) .status-bundle-link {
    color: #0f172a !important;
    background: #e8f5ec !important;
    border-color: rgba(22, 101, 52, 0.22) !important;
}

html:not(.dark-mode) .status-link,
html:not(.dark-mode) .status-bundle,
html:not(.dark-mode) .status-bundle-item {
    color: #111827 !important;
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
}

html:not(.dark-mode) .status-bundle.has-info > summary {
    background: #fff7ed !important;
    color: #111827 !important;
}

html:not(.dark-mode) .status-bundle.is-clear > summary {
    background: #ecfdf5 !important;
    color: #111827 !important;
}

html:not(.dark-mode) .dashboard-status-radio {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: rgba(15, 23, 42, 0.18) !important;
}

@media (max-width: 430px) {
    .dashboard-status-radio-grid {
        grid-template-columns: 1fr !important;
    }
}




/* YARA Beta 2.7 compact profile flags */
.profile-flag-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 8px 0 10px 0 !important;
}

.profile-flag-toggle,
.employee-only-profile-toggle,
.quarantine-profile-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-height: 32px !important;
    padding: 6px 9px !important;
    border-radius: 11px !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    background: rgba(255,255,255,0.055) !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

.profile-flag-toggle input,
.employee-only-profile-toggle input,
.quarantine-profile-toggle input {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    transform: none !important;
}

.quarantine-badge {
    background: #f97316 !important;
    color: #111827 !important;
    border-color: #f97316 !important;
    font-weight: 900 !important;
}

@media (max-width: 520px) {
    .profile-flag-grid {
        grid-template-columns: 1fr !important;
    }
}




/* YARA Beta 2.8 cat care + checkbox polish */
.cat-group-action-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 10px 0 !important;
}

.profile-flag-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 8px 0 10px 0 !important;
}

.profile-flag-toggle,
.employee-only-profile-toggle,
.quarantine-profile-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-height: 32px !important;
    padding: 6px 9px !important;
    border-radius: 11px !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    background: rgba(255,255,255,0.055) !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

.profile-flag-toggle input,
.employee-only-profile-toggle input,
.quarantine-profile-toggle input {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    transform: none !important;
    appearance: auto !important;
}

.quarantine-badge {
    background: #f97316 !important;
    color: #111827 !important;
    border-color: #f97316 !important;
    font-weight: 900 !important;
}

@media (max-width: 650px) {
    .cat-group-action-grid,
    .profile-flag-grid {
        grid-template-columns: 1fr !important;
    }
}




/* YARA Beta 2.9 practical cat care + compact flags */
.cat-group-action-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 10px 0 !important;
}

.profile-flag-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 8px 0 10px 0 !important;
}

.profile-flag-toggle,
.employee-only-profile-toggle,
.quarantine-profile-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-height: 30px !important;
    padding: 5px 8px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    background: rgba(255,255,255,0.055) !important;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

.profile-flag-toggle input,
.employee-only-profile-toggle input,
.quarantine-profile-toggle input {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    max-width: 15px !important;
    max-height: 15px !important;
    margin: 0 !important;
    transform: none !important;
    appearance: auto !important;
    accent-color: #166534 !important;
}

.quarantine-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 20px !important;
    font-size: 0.68rem !important;
    line-height: 1.0 !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    background: #f97316 !important;
    color: #111827 !important;
    border: 1px solid #f97316 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

@media (max-width: 650px) {
    .cat-group-action-grid,
    .profile-flag-grid {
        grid-template-columns: 1fr !important;
    }
}



/* YARA Beta 2.15 compact dog round cards */
.compact-round-animal-card,
.round-animal-card.compact-round-animal-card {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 9px !important;
    min-height: 54px !important;
    border-radius: 12px !important;
}

.compact-round-animal-card input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    margin: 0 !important;
}

.compact-round-animal-card .yara-select-thumb-box,
.compact-round-animal-card .yara-select-thumb-img {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    border-radius: 10px !important;
}

.compact-round-animal-card .round-animal-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}




/* YARA Beta 2.19 mobile animal name visibility */
.mobile-visible-animal-name,
.yara-daily-animal-summary .animal-name,
.animal-summary .animal-name {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
    font-weight: 900 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.2 !important;
}

@media (max-width: 650px) {
    .yara-daily-animal-summary {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    .yara-daily-animal-summary .animal-title-box {
        display: block !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .yara-daily-animal-summary .animal-name {
        display: block !important;
        font-size: 0.98rem !important;
        color: var(--text, inherit) !important;
        margin-bottom: 3px !important;
    }

    html.dark-mode .yara-daily-animal-summary .animal-name {
        color: #f9fafb !important;
    }
}



/* YARA Beta 2.23 daily photo upload */
.daily-photo-upload-card {
    margin-top: 10px !important;
    padding: 10px !important;
}
.daily-photo-upload-card input[type="file"] {
    padding: 6px 0 !important;
}



/* YARA Beta 2.24 daily photo upload visibility */
.daily-photo-upload-card {
    margin-top: 10px !important;
    padding: 10px !important;
    border: 1px solid rgba(5, 51, 9, 0.25) !important;
    border-radius: 12px !important;
}
.daily-photo-upload-card input[type="file"] {
    display: block !important;
    padding: 6px 0 !important;
    max-width: 100% !important;
}



/* YARA Beta 2.25 daily photo upload visibility */
.daily-photo-upload-card {
    margin-top: 10px !important;
    padding: 10px !important;
    border: 1px solid rgba(5, 51, 9, 0.28) !important;
    border-radius: 12px !important;
    background: rgba(5, 51, 9, 0.04) !important;
}
.daily-photo-title {
    font-weight: 900 !important;
    margin-bottom: 6px !important;
}
.daily-photo-upload-card input[type="file"],
.daily-photo-upload-card input[name="note"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 6px 0 !important;
}



/* YARA Beta 2.26 photo upload rescue */
.daily-photo-upload-card {
    margin-top: 10px !important;
    padding: 10px !important;
    border: 1px solid rgba(5, 51, 9, 0.28) !important;
    border-radius: 12px !important;
    background: rgba(5, 51, 9, 0.04) !important;
}
.daily-photo-title {
    font-weight: 900 !important;
    margin-bottom: 6px !important;
}
.daily-photo-upload-card input[type="file"],
.daily-photo-upload-card input[name="note"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 6px 0 !important;
}



/* YARA Beta 2.29 manage animals name visibility fix */
.manage-animal-card .manage-animal-name,
.manage-animal-card .animal-name {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: var(--text, #111827) !important;
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
}
html.dark-mode .manage-animal-card .manage-animal-name,
html.dark-mode .manage-animal-card .animal-name {
    color: #f9fafb !important;
}
.yara-animal-list-main {
    min-width: 0 !important;
}



/* YARA Beta 2.31 animal profile daily note history */
.animal-daily-history-card .animal-history-day-card {
    border: 1px solid rgba(5, 51, 9, 0.16) !important;
    border-left: 4px solid rgba(5, 51, 9, 0.55) !important;
    border-radius: 12px !important;
    padding: 10px !important;
    margin: 8px 0 !important;
    background: rgba(5, 51, 9, 0.035) !important;
}
.animal-history-date {
    font-weight: 900 !important;
    color: #0f5f1a !important;
    margin-bottom: 6px !important;
}
.animal-history-note-line {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
    align-items: start !important;
    padding: 6px 0 !important;
    border-top: 1px solid rgba(5, 51, 9, 0.08) !important;
}
.animal-history-note-line:first-of-type {
    border-top: none !important;
}
.animal-history-note-text {
    line-height: 1.35 !important;
    word-break: break-word !important;
}
.history-delete-button {
    width: auto !important;
    min-width: 70px !important;
    padding: 7px 10px !important;
    margin: 0 !important;
}
@media (max-width: 520px) {
    .animal-history-note-line {
        grid-template-columns: 1fr !important;
    }
    .history-delete-button {
        width: 100% !important;
    }
}



/* YARA Beta 2.32 profile history visibility + cat group workflow */
.animal-daily-history-card {
    display: block !important;
    visibility: visible !important;
}
.animal-daily-history-card .section-summary span {
    font-weight: 900 !important;
}
.cat-group-action-grid {
    margin-bottom: 10px !important;
}


/* YARA Beta 2.33 callback discussion notes */
.callback-discussion-box {
    border-left: 4px solid rgba(5, 51, 9, 0.55) !important;
    background: rgba(5, 51, 9, 0.04) !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    margin: 8px 0 !important;
}
.callback-discussion-form textarea {
    min-height: 80px !important;
}


/* YARA Beta 2.34 training notes and callback polish */
.training-note-label {
    font-weight: 900 !important;
    color: #0f5f1a !important;
}
.training-note-textarea {
    min-height: 95px !important;
    border: 2px solid rgba(15, 95, 26, 0.22) !important;
}



/* YARA Beta 3.0 People page */
.people-header-card h3 {
    margin-top: 0 !important;
}
.people-date-form {
    max-width: 360px !important;
}
.people-two-column {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}
.people-card {
    border: 1px solid rgba(5, 51, 9, 0.12) !important;
    border-radius: 14px !important;
    padding: 8px !important;
    margin: 8px 0 !important;
    background: rgba(5, 51, 9, 0.025) !important;
}
.people-summary-badges {
    margin-left: auto !important;
    display: inline-flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}
.people-form {
    margin-top: 8px !important;
}
.people-day-form {
    border-top: 1px solid rgba(5, 51, 9, 0.12) !important;
    padding-top: 8px !important;
}
.people-assignment-card {
    border-left: 4px solid rgba(5, 51, 9, 0.55) !important;
}
.people-check-grid {
    display: grid !important;
    gap: 6px !important;
}
.people-check-option {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 0 !important;
}
.people-walk-group-card summary {
    font-weight: 800 !important;
}
@media (max-width: 780px) {
    .people-two-column {
        grid-template-columns: 1fr !important;
    }
    .people-summary-badges {
        width: 100% !important;
        margin-left: 0 !important;
    }
}



/* YARA Beta 3.0.1 navigation cleanup */
.dashboard-menu-clean-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.dashboard-main-hub-button {
    font-size: 1.05rem !important;
    font-weight: 900 !important;
}
.dashboard-quick-button {
    opacity: 0.96 !important;
}
.dashboard-menu-hint {
    margin: 10px 4px 0 !important;
    text-align: center !important;
}
.hub-card h3 {
    margin-top: 0 !important;
}
.hub-link-grid {
    margin-top: 10px !important;
}
.hub-link-button {
    min-height: 54px !important;
}
.day-volunteer-time-list {
    display: grid !important;
    gap: 10px !important;
}
.day-volunteer-option-card {
    border: 1px solid rgba(5, 51, 9, 0.14) !important;
    border-radius: 12px !important;
    padding: 10px !important;
    background: rgba(5, 51, 9, 0.035) !important;
}
.day-volunteer-time-fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}
@media (max-width: 640px) {
    .dashboard-menu-clean-grid,
    .hub-link-grid {
        grid-template-columns: 1fr !important;
    }
    .day-volunteer-time-fields {
        grid-template-columns: 1fr !important;
    }
}



/* YARA Beta 3.0.3 animals hub and dog-level assignment visibility */
.animal-tools-hub-card {
    display: block !important;
    visibility: visible !important;
}
.dog-people-section {
    border-left: 4px solid rgba(5, 51, 9, 0.55) !important;
}
.dog-people-hint {
    margin: 8px 0 !important;
    background: rgba(5, 51, 9, 0.04) !important;
}
.dog-people-assignment select {
    min-width: 180px !important;
}
@media (max-width: 700px) {
    .dog-people-assignment {
        grid-template-columns: 1fr !important;
    }
    .dog-people-assignment select {
        width: 100% !important;
    }
}



/* YARA Beta 3.0.4 hard-visible Animals hub */
.animals-hard-hub-card,
.animals-hard-hub-card * {
    visibility: visible !important;
    opacity: 1 !important;
}
.animals-hard-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}
.animals-hard-button {
    display: block !important;
    min-height: 56px !important;
    padding: 18px !important;
    border-radius: 14px !important;
    text-align: center !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    background: #287d72 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
}
.animals-hard-button:hover {
    filter: brightness(1.08) !important;
}
@media (max-width: 640px) {
    .animals-hard-grid {
        grid-template-columns: 1fr !important;
    }
}







/* YARA Beta 3.0.6 scoped dashboard polish + dog assignment visibility */
.dashboard-menu-compact-card .dashboard-menu-clean-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}
.dashboard-menu-compact-card .dashboard-menu-button,
.hub-card .hub-link-button,
.animals-hard-hub-card .animals-hard-button {
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}
.dashboard-menu-compact-card .dashboard-menu-hint,
.hub-card p.small,
.animals-hard-hub-card p.small {
    color: #374151 !important;
}
html.dark-mode .dashboard-menu-compact-card .dashboard-menu-hint,
html.dark-mode .hub-card p.small,
html.dark-mode .animals-hard-hub-card p.small {
    color: #e5e7eb !important;
}
.dog-people-section {
    border-left: 4px solid rgba(5, 51, 9, 0.55) !important;
}
.dog-people-hint,
.dog-assignment-help {
    margin: 8px 0 10px 0 !important;
    background: rgba(5, 51, 9, 0.04) !important;
}
.dog-people-assignment {
    display: grid !important;
    grid-template-columns: minmax(180px, 1.2fr) minmax(170px, 1fr) minmax(170px, 1fr) !important;
    gap: 10px !important;
    align-items: end !important;
}
.dog-people-assignment select {
    width: 100% !important;
    min-width: 160px !important;
}
.bulk-dog-assignment-form .save-button-always {
    margin-top: 10px !important;
}
@media (max-width: 900px) {
    .dashboard-menu-compact-card .dashboard-menu-clean-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 640px) {
    .dashboard-menu-compact-card .dashboard-menu-button,
    .hub-card .hub-link-button,
    .animals-hard-hub-card .animals-hard-button {
        font-size: 14px !important;
        min-height: 52px !important;
    }
    .dog-people-assignment {
        grid-template-columns: 1fr !important;
    }
}



/* YARA Beta 3.0.7 final dashboard navigation cleanup */
.dashboard-menu-compact-card .dashboard-hub-only-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}
.dashboard-menu-compact-card .dashboard-hub-only-grid .dashboard-menu-button {
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    min-height: 58px !important;
    padding: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}
@media (max-width: 760px) {
    .dashboard-menu-compact-card .dashboard-hub-only-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 420px) {
    .dashboard-menu-compact-card .dashboard-hub-only-grid .dashboard-menu-button {
        font-size: 14px !important;
        min-height: 54px !important;
    }
}



/* YARA Beta 3.1 login, users and role-aware dashboard */
.role-aware-dashboard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.remember-login-option,
.user-active-check {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    margin: 10px 0 !important;
}
.user-admin-list {
    display: grid !important;
    gap: 12px !important;
}
.user-admin-row {
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    border-radius: 14px !important;
    padding: 12px !important;
    display: grid !important;
    gap: 8px !important;
}
.user-admin-edit-form,
.user-admin-password-form,
.user-admin-add-form {
    display: grid !important;
    gap: 8px !important;
}
@media (min-width: 900px) {
    .user-admin-edit-form {
        grid-template-columns: 1.4fr 1fr 1fr auto auto !important;
        align-items: center !important;
    }
    .user-admin-password-form {
        grid-template-columns: 1fr auto !important;
    }
    .user-admin-add-form {
        grid-template-columns: 1fr 1fr 1fr 1fr auto auto !important;
        align-items: center !important;
    }
}
@media (max-width: 760px) {
    .role-aware-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}



/* YARA Beta 3.1.5 reliable login + clean logo */
.yara-clean-login-box {
    text-align: center !important;
}
.yara-login-logo,
.yara-clean-login-box .login-logo-large {
    display: block !important;
    width: 190px !important;
    max-width: 75vw !important;
    height: auto !important;
    margin: 0 auto 14px auto !important;
}
.yara-clean-login-box .login-tagline {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}
.remember-login-option {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    margin: 10px 0 !important;
}



/* YARA Beta 3.1.7 reliable login + legacy user rescue */
.yara-clean-login-box {
    text-align: center !important;
}
.yara-login-logo,
.yara-clean-login-box .login-logo-large {
    display: block !important;
    width: 190px !important;
    max-width: 75vw !important;
    height: auto !important;
    margin: 0 auto 14px auto !important;
}
.yara-clean-login-box .login-tagline {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}
.remember-login-option {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    margin: 10px 0 !important;
}



/* YARA Beta 3.1.8 User Admin Rescue */
.user-admin-rescue-list { display: grid !important; gap: 12px !important; }
.user-admin-rescue-row {
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    border-radius: 14px !important;
    padding: 12px !important;
    display: grid !important;
    gap: 8px !important;
}
.user-admin-rescue-form, .user-admin-password-form {
    display: grid !important;
    gap: 8px !important;
}
@media (min-width: 900px) {
    .user-admin-rescue-form {
        grid-template-columns: 1.3fr 1fr 1fr auto auto !important;
        align-items: center !important;
    }
    .user-admin-password-form { grid-template-columns: 1fr auto !important; }
}



/* YARA Beta 3.1.9 user delete/deactivate */
.user-admin-danger-row {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.warning-button {
    border: none !important;
    border-radius: 10px !important;
    padding: 9px 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    background: #f59e0b !important;
    color: #111827 !important;
}
.danger-button {
    border: none !important;
    border-radius: 10px !important;
    padding: 9px 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    background: #dc2626 !important;
    color: #ffffff !important;
}



/* YARA Beta 3.2 role rights layer */
.role-rights-card {
    border-left: 4px solid rgba(40, 125, 114, 0.6) !important;
}



/* YARA Beta 3.3.0 Adoption Import Preview */
.adoption-import-list {
    display: grid !important;
    gap: 12px !important;
}
.adoption-import-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 12px !important;
    align-items: start !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    border-radius: 14px !important;
    padding: 12px !important;
}
.adoption-import-row h4 {
    margin: 0 0 6px 0 !important;
}
.adoption-description-preview {
    max-width: 760px !important;
    white-space: pre-wrap !important;
}
.adoption-import-action {
    min-width: 150px !important;
}
@media (max-width: 760px) {
    .adoption-import-row {
        grid-template-columns: 1fr !important;
    }
    .adoption-import-action {
        min-width: 0 !important;
    }
}



/* YARA Beta 3.3.1 adoption parser fix */
.adoption-description-preview strong {
    color: inherit !important;
}
.adoption-import-row .badge-success {
    background: rgba(34, 197, 94, 0.18) !important;
}



/* YARA Beta 3.3.3 adoption info and photo import */
.adoption-import-title-line {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
}
.adoption-import-photo-preview {
    width: 76px !important;
    height: 76px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    flex: 0 0 76px !important;
}
.adoption-website-info-card .adoption-website-text {
    white-space: pre-wrap !important;
    line-height: 1.45 !important;
}
.adoption-website-badge {
    background: rgba(40, 125, 114, 0.18) !important;
    color: inherit !important;
    text-decoration: none !important;
}



/* YARA Beta 3.3.4 adoption photo safety rescue */
.adoption-photo-rescue-photos {
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    margin-top: 8px !important;
}
.adoption-website-photo-box {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin: 10px 0 !important;
}



/* YARA Beta 3.3.6 walk assignment cleanup + theme visibility */
.walk-workflow-box {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 12px 0 !important;
}
.walk-workflow-box > div,
.dog-people-section-clear,
.dog-assignment-help,
.dog-people-hint {
    border: 1px solid rgba(40, 125, 114, 0.35) !important;
    border-radius: 14px !important;
    padding: 12px !important;
    background: rgba(40, 125, 114, 0.08) !important;
    color: inherit !important;
}
.dog-people-section-clear summary {
    font-weight: 900 !important;
    font-size: 1.04rem !important;
}
.dog-people-assignment {
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    border-radius: 14px !important;
    padding: 12px !important;
    margin: 8px 0 !important;
    background: rgba(255,255,255,0.04) !important;
}
body.dark .card,
body.dark .mini-card,
body.dark .status,
body.dark .success,
body.dark details,
body.dark summary,
body.dark .small,
body.dark label,
body.dark p,
body.dark div,
.dark .card,
.dark .mini-card,
.dark .status,
.dark .success,
.dark details,
.dark summary,
.dark .small,
.dark label,
.dark p,
.dark div {
    color: #f3f4f6 !important;
}
body.dark input,
body.dark textarea,
body.dark select,
.dark input,
.dark textarea,
.dark select {
    background: #111827 !important;
    color: #f9fafb !important;
    border-color: rgba(209, 213, 219, 0.45) !important;
}
body.dark input::placeholder,
body.dark textarea::placeholder,
.dark input::placeholder,
.dark textarea::placeholder {
    color: #cbd5e1 !important;
}
body:not(.dark) .card,
body:not(.dark) .mini-card,
body:not(.dark) .status,
body:not(.dark) .success,
body:not(.dark) details,
body:not(.dark) summary,
body:not(.dark) .small,
body:not(.dark) label,
body:not(.dark) p,
body:not(.dark) div {
    color: #111827;
}
body:not(.dark) input,
body:not(.dark) textarea,
body:not(.dark) select {
    color: #111827 !important;
    background: #ffffff !important;
}
@media (max-width: 760px) {
    .walk-workflow-box {
        grid-template-columns: 1fr !important;
    }
}



/* YARA Beta 3.4.0 UI cleanup / duplicate section reduction */
.people-workflow-box {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 12px 0 !important;
}
.people-workflow-box > div,
.advanced-cleanup-section {
    border: 1px solid rgba(40, 125, 114, 0.28) !important;
    border-radius: 14px !important;
    padding: 12px !important;
    background: rgba(40, 125, 114, 0.06) !important;
}
.advanced-cleanup-section > summary {
    font-weight: 900 !important;
}
.advanced-cleanup-section .mini-card {
    margin-top: 10px !important;
}
.dashboard-menu-hint,
.people-header-card .small,
.walk-workflow-box .small,
.people-workflow-box .small {
    opacity: 1 !important;
}
body.dark .advanced-cleanup-section,
body.dark .people-workflow-box > div,
.dark .advanced-cleanup-section,
.dark .people-workflow-box > div {
    background: rgba(40, 125, 114, 0.16) !important;
    color: #f9fafb !important;
}
@media (max-width: 760px) {
    .people-workflow-box {
        grid-template-columns: 1fr !important;
    }
}



/* YARA Beta 3.4.3 walk groups internal error rescue */
.walk-summary-assigned {
    border-left: 4px solid rgba(34, 197, 94, 0.8) !important;
}
.walk-summary-missing {
    border-left: 4px solid rgba(245, 158, 11, 0.9) !important;
}



/* YARA Beta 3.4.5 walk groups missing helper rescue */
.walk-status-bar {
    margin: 10px 0 !important;
}
.walk-summary-assigned {
    border-left: 4px solid rgba(34, 197, 94, 0.8) !important;
}
.walk-summary-missing {
    border-left: 4px solid rgba(245, 158, 11, 0.9) !important;
}



/* YARA Beta 3.4.6 dark mode contrast and display name fix */
html.dark-mode,
html.dark-mode body,
body.dark,
.dark {
    color: #f8fafc !important;
}

html.dark-mode *,
body.dark *,
.dark * {
    border-color: rgba(203, 213, 225, 0.30);
}

html.dark-mode .card,
html.dark-mode .mini-card,
html.dark-mode .status,
html.dark-mode .success,
html.dark-mode .status-warn,
html.dark-mode details,
html.dark-mode summary,
html.dark-mode label,
html.dark-mode p,
html.dark-mode span,
html.dark-mode div,
html.dark-mode strong,
html.dark-mode small,
html.dark-mode .small,
html.dark-mode .profile-link,
html.dark-mode .animal-name,
html.dark-mode .manage-animal-name,
html.dark-mode .walk-dog-option,
html.dark-mode .walk-dog-option span,
html.dark-mode .walk-dog-option small,
body.dark .card,
body.dark .mini-card,
body.dark .status,
body.dark .success,
body.dark .status-warn,
body.dark details,
body.dark summary,
body.dark label,
body.dark p,
body.dark span,
body.dark div,
body.dark strong,
body.dark small,
body.dark .small,
body.dark .profile-link,
body.dark .animal-name,
body.dark .manage-animal-name,
body.dark .walk-dog-option,
body.dark .walk-dog-option span,
body.dark .walk-dog-option small {
    color: #f8fafc !important;
}

html.dark-mode a,
html.dark-mode a:visited,
body.dark a,
body.dark a:visited {
    color: #93c5fd !important;
}

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select,
body.dark input,
body.dark textarea,
body.dark select {
    background: #f8fafc !important;
    color: #111827 !important;
    border: 1px solid rgba(226, 232, 240, 0.65) !important;
}

html.dark-mode option,
body.dark option {
    background: #ffffff !important;
    color: #111827 !important;
}

html.dark-mode input[type="checkbox"],
body.dark input[type="checkbox"] {
    accent-color: #2563eb !important;
    outline: 2px solid rgba(147, 197, 253, 0.65) !important;
    outline-offset: 1px !important;
}

html.dark-mode .badge,
html.dark-mode .badge-info,
html.dark-mode .badge-success,
html.dark-mode .badge-warning,
html.dark-mode .badge-urgent,
body.dark .badge,
body.dark .badge-info,
body.dark .badge-success,
body.dark .badge-warning,
body.dark .badge-urgent {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.35) !important;
}

html.dark-mode .page-topbar,
body.dark .page-topbar {
    color: #ffffff !important;
}

html.dark-mode .brand-employee-name,
body.dark .brand-employee-name,
.logo-only-header .brand-employee-name,
.page-topbar.logo-only-header .brand-employee-name {
    color: #ffffff !important;
    opacity: 1 !important;
}



/* YARA Beta 3.4.7 global text contrast + header display name only */

/* Header display name: light mode must be dark/readable */
html:not(.dark-mode) .brand-employee-name,
html:not(.dark-mode) .logo-only-header .brand-employee-name,
html:not(.dark-mode) .page-topbar.logo-only-header .brand-employee-name,
body:not(.dark) .brand-employee-name,
body:not(.dark) .logo-only-header .brand-employee-name,
body:not(.dark) .page-topbar.logo-only-header .brand-employee-name {
    color: #111827 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Header display name: dark mode must be white/readable */
html.dark-mode .brand-employee-name,
html.dark-mode .logo-only-header .brand-employee-name,
html.dark-mode .page-topbar.logo-only-header .brand-employee-name,
body.dark .brand-employee-name,
body.dark .logo-only-header .brand-employee-name,
body.dark .page-topbar.logo-only-header .brand-employee-name {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Dark mode: make normal content text white across all pages */
html.dark-mode body,
html.dark-mode main,
html.dark-mode section,
html.dark-mode article,
html.dark-mode .card,
html.dark-mode .mini-card,
html.dark-mode .status,
html.dark-mode .status-warn,
html.dark-mode .success,
html.dark-mode .warning,
html.dark-mode details,
html.dark-mode summary,
html.dark-mode label,
html.dark-mode p,
html.dark-mode span,
html.dark-mode div,
html.dark-mode strong,
html.dark-mode small,
html.dark-mode .small,
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode .animal-name,
html.dark-mode .manage-animal-name,
html.dark-mode .animal-card-title,
html.dark-mode .profile-link,
html.dark-mode .walk-dog-option,
html.dark-mode .walk-dog-option *,
html.dark-mode .daily-dog-option,
html.dark-mode .daily-dog-option *,
html.dark-mode .people-card,
html.dark-mode .people-card *,
html.dark-mode .manage-animal-card,
html.dark-mode .manage-animal-card *,
body.dark,
body.dark main,
body.dark section,
body.dark article,
body.dark .card,
body.dark .mini-card,
body.dark .status,
body.dark .status-warn,
body.dark .success,
body.dark .warning,
body.dark details,
body.dark summary,
body.dark label,
body.dark p,
body.dark span,
body.dark div,
body.dark strong,
body.dark small,
body.dark .small,
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark .animal-name,
body.dark .manage-animal-name,
body.dark .animal-card-title,
body.dark .profile-link,
body.dark .walk-dog-option,
body.dark .walk-dog-option *,
body.dark .daily-dog-option,
body.dark .daily-dog-option *,
body.dark .people-card,
body.dark .people-card *,
body.dark .manage-animal-card,
body.dark .manage-animal-card * {
    color: #ffffff !important;
}

/* Dark mode links stay clearly visible */
html.dark-mode a,
html.dark-mode a:visited,
body.dark a,
body.dark a:visited {
    color: #bfdbfe !important;
}

/* Light mode: normal content text dark/readable across all pages */
html:not(.dark-mode) body,
html:not(.dark-mode) main,
html:not(.dark-mode) section,
html:not(.dark-mode) article,
html:not(.dark-mode) .card,
html:not(.dark-mode) .mini-card,
html:not(.dark-mode) .status,
html:not(.dark-mode) .status-warn,
html:not(.dark-mode) .success,
html:not(.dark-mode) details,
html:not(.dark-mode) summary,
html:not(.dark-mode) label,
html:not(.dark-mode) p,
html:not(.dark-mode) span,
html:not(.dark-mode) div,
html:not(.dark-mode) strong,
html:not(.dark-mode) small,
html:not(.dark-mode) .small,
html:not(.dark-mode) h1,
html:not(.dark-mode) h2,
html:not(.dark-mode) h3,
html:not(.dark-mode) h4,
html:not(.dark-mode) h5,
html:not(.dark-mode) .animal-name,
html:not(.dark-mode) .manage-animal-name,
html:not(.dark-mode) .animal-card-title,
html:not(.dark-mode) .profile-link,
html:not(.dark-mode) .walk-dog-option,
html:not(.dark-mode) .walk-dog-option *,
html:not(.dark-mode) .daily-dog-option,
html:not(.dark-mode) .daily-dog-option *,
html:not(.dark-mode) .people-card,
html:not(.dark-mode) .people-card *,
html:not(.dark-mode) .manage-animal-card,
html:not(.dark-mode) .manage-animal-card *,
body:not(.dark) .card,
body:not(.dark) .mini-card,
body:not(.dark) .status,
body:not(.dark) .status-warn,
body:not(.dark) .success,
body:not(.dark) details,
body:not(.dark) summary,
body:not(.dark) label,
body:not(.dark) p,
body:not(.dark) span,
body:not(.dark) div,
body:not(.dark) strong,
body:not(.dark) small,
body:not(.dark) .small,
body:not(.dark) h1,
body:not(.dark) h2,
body:not(.dark) h3,
body:not(.dark) h4,
body:not(.dark) h5,
body:not(.dark) .animal-name,
body:not(.dark) .manage-animal-name,
body:not(.dark) .animal-card-title,
body:not(.dark) .profile-link,
body:not(.dark) .walk-dog-option,
body:not(.dark) .walk-dog-option *,
body:not(.dark) .daily-dog-option,
body:not(.dark) .daily-dog-option *,
body:not(.dark) .people-card,
body:not(.dark) .people-card *,
body:not(.dark) .manage-animal-card,
body:not(.dark) .manage-animal-card * {
    color: #111827 !important;
}

/* Keep button text readable and not destroyed by global page text rules */
button,
.button-link,
.manage-button,
.save-button-always,
.danger-button,
.warning-button,
.dashboard-menu-button,
.dashboard-main-hub-button,
.dashboard-quick-button,
.top-action-button,
.hub-link-button,
.animals-hard-button,
.planned-walk-small-button,
a.button-link,
a.manage-button,
a.dashboard-menu-button,
a.dashboard-main-hub-button,
a.dashboard-quick-button,
a.top-action-button,
a.hub-link-button,
a.animals-hard-button,
a.planned-walk-small-button {
    color: #ffffff !important;
}

/* Inputs/dropdowns: readable in both modes */
input,
textarea,
select,
option {
    color: #111827 !important;
    background: #ffffff !important;
}

input::placeholder,
textarea::placeholder {
    color: #64748b !important;
}

/* Checkboxes: make visible in dark mode */
html.dark-mode input[type="checkbox"],
body.dark input[type="checkbox"] {
    accent-color: #2563eb !important;
    outline: 2px solid rgba(147, 197, 253, 0.9) !important;
    outline-offset: 1px !important;
}



/* YARA Beta 3.4.8 final theme contrast override
   The app toggles dark mode on html.dark-mode. These rules are at the end to win conflicts.
*/

/* Header display name */
html:not(.dark-mode) .page-topbar .brand-employee-name,
html:not(.dark-mode) .logo-only-header .brand-employee-name,
html:not(.dark-mode) .brand-employee-name {
    color: #0f172a !important;
    opacity: 1 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

html.dark-mode .page-topbar .brand-employee-name,
html.dark-mode .logo-only-header .brand-employee-name,
html.dark-mode .brand-employee-name {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

/* Dark mode: force normal content text white/readable */
html.dark-mode body,
html.dark-mode .app-container,
html.dark-mode .page,
html.dark-mode .card,
html.dark-mode .mini-card,
html.dark-mode .form-card,
html.dark-mode .animal-card,
html.dark-mode .manage-animal-card,
html.dark-mode .people-card,
html.dark-mode .walk-group-card,
html.dark-mode .daily-card,
html.dark-mode .boarding-card,
html.dark-mode .status,
html.dark-mode .status-warn,
html.dark-mode .success,
html.dark-mode .warning,
html.dark-mode details,
html.dark-mode summary,
html.dark-mode label,
html.dark-mode .date-label,
html.dark-mode .field-label,
html.dark-mode .checkbox-label,
html.dark-mode p,
html.dark-mode span,
html.dark-mode div,
html.dark-mode strong,
html.dark-mode small,
html.dark-mode .small,
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode .animal-name,
html.dark-mode .manage-animal-name,
html.dark-mode .animal-card-title,
html.dark-mode .profile-link,
html.dark-mode .badge-row,
html.dark-mode .walk-dog-option,
html.dark-mode .walk-dog-option *,
html.dark-mode .daily-dog-option,
html.dark-mode .daily-dog-option *,
html.dark-mode .planned-arrival-row,
html.dark-mode .planned-arrival-row *,
html.dark-mode .compact-dog-assignment,
html.dark-mode .compact-dog-assignment *,
html.dark-mode .dog-people-assignment,
html.dark-mode .dog-people-assignment * {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Dark mode muted/helper text */
html.dark-mode .muted,
html.dark-mode .hint,
html.dark-mode .help-text,
html.dark-mode .form-help,
html.dark-mode .dashboard-menu-hint {
    color: #e5e7eb !important;
    opacity: 1 !important;
}

/* Light mode: force normal content text dark/readable */
html:not(.dark-mode) body,
html:not(.dark-mode) .card,
html:not(.dark-mode) .mini-card,
html:not(.dark-mode) .form-card,
html:not(.dark-mode) .animal-card,
html:not(.dark-mode) .manage-animal-card,
html:not(.dark-mode) .people-card,
html:not(.dark-mode) .walk-group-card,
html:not(.dark-mode) .daily-card,
html:not(.dark-mode) .boarding-card,
html:not(.dark-mode) .status,
html:not(.dark-mode) .status-warn,
html:not(.dark-mode) .success,
html:not(.dark-mode) details,
html:not(.dark-mode) summary,
html:not(.dark-mode) label,
html:not(.dark-mode) .date-label,
html:not(.dark-mode) .field-label,
html:not(.dark-mode) .checkbox-label,
html:not(.dark-mode) p,
html:not(.dark-mode) span,
html:not(.dark-mode) div,
html:not(.dark-mode) strong,
html:not(.dark-mode) small,
html:not(.dark-mode) .small,
html:not(.dark-mode) h1,
html:not(.dark-mode) h2,
html:not(.dark-mode) h3,
html:not(.dark-mode) h4,
html:not(.dark-mode) h5,
html:not(.dark-mode) .animal-name,
html:not(.dark-mode) .manage-animal-name,
html:not(.dark-mode) .animal-card-title,
html:not(.dark-mode) .profile-link {
    color: #0f172a !important;
    text-shadow: none !important;
}

/* Buttons keep readable text */
html.dark-mode button,
html.dark-mode .button-link,
html.dark-mode .manage-button,
html.dark-mode .save-button-always,
html.dark-mode .danger-button,
html.dark-mode .warning-button,
html.dark-mode .dashboard-menu-button,
html.dark-mode .dashboard-main-hub-button,
html.dark-mode .dashboard-quick-button,
html.dark-mode .top-action-button,
html.dark-mode .hub-link-button,
html.dark-mode .animals-hard-button,
html.dark-mode a.button-link,
html.dark-mode a.manage-button,
html:not(.dark-mode) button,
html:not(.dark-mode) .button-link,
html:not(.dark-mode) .manage-button,
html:not(.dark-mode) .save-button-always,
html:not(.dark-mode) .danger-button,
html:not(.dark-mode) .warning-button,
html:not(.dark-mode) .dashboard-menu-button,
html:not(.dark-mode) .dashboard-main-hub-button,
html:not(.dark-mode) .dashboard-quick-button,
html:not(.dark-mode) .top-action-button,
html:not(.dark-mode) .hub-link-button,
html:not(.dark-mode) .animals-hard-button,
html:not(.dark-mode) a.button-link,
html:not(.dark-mode) a.manage-button {
    color: #ffffff !important;
}

/* Inputs/dropdowns stay readable */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select,
html.dark-mode option,
html:not(.dark-mode) input,
html:not(.dark-mode) textarea,
html:not(.dark-mode) select,
html:not(.dark-mode) option {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: rgba(148, 163, 184, 0.85) !important;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder,
html:not(.dark-mode) input::placeholder,
html:not(.dark-mode) textarea::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}

/* Checkbox rows in dark mode */
html.dark-mode input[type="checkbox"] {
    accent-color: #2563eb !important;
    outline: 2px solid rgba(147, 197, 253, 0.95) !important;
    outline-offset: 1px !important;
}

html.dark-mode label:has(input[type="checkbox"]),
html.dark-mode .checkbox-row,
html.dark-mode .checkbox-row *,
html.dark-mode .walk-dog-option,
html.dark-mode .walk-dog-option *,
html.dark-mode .daily-dog-option,
html.dark-mode .daily-dog-option * {
    color: #ffffff !important;
}

/* Links in dark mode */
html.dark-mode a,
html.dark-mode a:visited {
    color: #bfdbfe !important;
}



/* YARA Beta 3.4.9 light mode button text contrast fix
   Dark mode from Beta 3.4.8 is working, so these rules target light mode only.
*/

/* Light mode: default/neutral buttons and action links should use dark text */
html:not(.dark-mode) button,
html:not(.dark-mode) .button-link,
html:not(.dark-mode) .manage-button,
html:not(.dark-mode) .planned-walk-small-button,
html:not(.dark-mode) .profile-open-button,
html:not(.dark-mode) .profile-link-button,
html:not(.dark-mode) .open-button,
html:not(.dark-mode) .small-button,
html:not(.dark-mode) a.button-link,
html:not(.dark-mode) a.manage-button,
html:not(.dark-mode) a.planned-walk-small-button,
html:not(.dark-mode) a.profile-open-button,
html:not(.dark-mode) a.profile-link-button,
html:not(.dark-mode) a.open-button,
html:not(.dark-mode) a.small-button {
    color: #0f172a !important;
    text-shadow: none !important;
}

/* Light mode: primary colored buttons should stay white */
html:not(.dark-mode) .top-action-button,
html:not(.dark-mode) .dashboard-top-button,
html:not(.dark-mode) .logout-top-button,
html:not(.dark-mode) .save-button-always,
html:not(.dark-mode) .danger-button,
html:not(.dark-mode) .warning-button,
html:not(.dark-mode) .delete-button,
html:not(.dark-mode) .dashboard-menu-button,
html:not(.dark-mode) .dashboard-main-hub-button,
html:not(.dark-mode) .dashboard-quick-button,
html:not(.dark-mode) .hub-link-button,
html:not(.dark-mode) .animals-hard-button,
html:not(.dark-mode) .submit-button,
html:not(.dark-mode) .primary-button,
html:not(.dark-mode) a.top-action-button,
html:not(.dark-mode) a.dashboard-top-button,
html:not(.dark-mode) a.logout-top-button,
html:not(.dark-mode) a.save-button-always,
html:not(.dark-mode) a.danger-button,
html:not(.dark-mode) a.warning-button,
html:not(.dark-mode) a.delete-button,
html:not(.dark-mode) a.dashboard-menu-button,
html:not(.dark-mode) a.dashboard-main-hub-button,
html:not(.dark-mode) a.dashboard-quick-button,
html:not(.dark-mode) a.hub-link-button,
html:not(.dark-mode) a.animals-hard-button,
html:not(.dark-mode) a.submit-button,
html:not(.dark-mode) a.primary-button {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Light mode: details/summary Open pills are usually light, so make them dark */
html:not(.dark-mode) summary button,
html:not(.dark-mode) summary .button-link,
html:not(.dark-mode) summary .manage-button,
html:not(.dark-mode) details summary button,
html:not(.dark-mode) details summary .button-link,
html:not(.dark-mode) details summary .manage-button {
    color: #0f172a !important;
}

/* Light mode: badge text should be readable on pale badges */
html:not(.dark-mode) .badge,
html:not(.dark-mode) .badge-info,
html:not(.dark-mode) .badge-success,
html:not(.dark-mode) .badge-warning,
html:not(.dark-mode) .adoption-website-badge,
html:not(.dark-mode) .employee-only-badge {
    color: #0f172a !important;
}

/* But red/urgent badges stay white */
html:not(.dark-mode) .badge-urgent,
html:not(.dark-mode) .danger-badge,
html:not(.dark-mode) .urgent-badge {
    color: #ffffff !important;
}



/* YARA Beta 3.4.10 light mode: all button text black
   Dark mode is working well, so this only targets html:not(.dark-mode).
   User decision: in light mode, every button/link-button text should be black.
*/

html:not(.dark-mode) button,
html:not(.dark-mode) input[type="button"],
html:not(.dark-mode) input[type="submit"],
html:not(.dark-mode) input[type="reset"],
html:not(.dark-mode) a[class*="button"],
html:not(.dark-mode) .button,
html:not(.dark-mode) .button-link,
html:not(.dark-mode) .manage-button,
html:not(.dark-mode) .save-button-always,
html:not(.dark-mode) .danger-button,
html:not(.dark-mode) .warning-button,
html:not(.dark-mode) .delete-button,
html:not(.dark-mode) .top-action-button,
html:not(.dark-mode) .dashboard-top-button,
html:not(.dark-mode) .logout-top-button,
html:not(.dark-mode) .dashboard-menu-button,
html:not(.dark-mode) .dashboard-main-hub-button,
html:not(.dark-mode) .dashboard-quick-button,
html:not(.dark-mode) .hub-link-button,
html:not(.dark-mode) .animals-hard-button,
html:not(.dark-mode) .planned-walk-small-button,
html:not(.dark-mode) .profile-open-button,
html:not(.dark-mode) .profile-link-button,
html:not(.dark-mode) .open-button,
html:not(.dark-mode) .small-button,
html:not(.dark-mode) .submit-button,
html:not(.dark-mode) .primary-button,
html:not(.dark-mode) summary button,
html:not(.dark-mode) details summary button,
html:not(.dark-mode) summary a[class*="button"],
html:not(.dark-mode) details summary a[class*="button"] {
    color: #0f172a !important;
    text-shadow: none !important;
}

/* Make nested text inside buttons black too */
html:not(.dark-mode) button *,
html:not(.dark-mode) a[class*="button"] *,
html:not(.dark-mode) .button *,
html:not(.dark-mode) .button-link *,
html:not(.dark-mode) .manage-button *,
html:not(.dark-mode) .save-button-always *,
html:not(.dark-mode) .danger-button *,
html:not(.dark-mode) .warning-button *,
html:not(.dark-mode) .delete-button *,
html:not(.dark-mode) .top-action-button *,
html:not(.dark-mode) .dashboard-menu-button *,
html:not(.dark-mode) .dashboard-main-hub-button *,
html:not(.dark-mode) .dashboard-quick-button *,
html:not(.dark-mode) .hub-link-button *,
html:not(.dark-mode) .animals-hard-button * {
    color: #0f172a !important;
    text-shadow: none !important;
}

/* Keep dark mode button text unchanged/readable */
html.dark-mode button,
html.dark-mode input[type="button"],
html.dark-mode input[type="submit"],
html.dark-mode input[type="reset"],
html.dark-mode a[class*="button"],
html.dark-mode .button,
html.dark-mode .button-link,
html.dark-mode .manage-button,
html.dark-mode .save-button-always,
html.dark-mode .danger-button,
html.dark-mode .warning-button,
html.dark-mode .delete-button,
html.dark-mode .top-action-button,
html.dark-mode .dashboard-menu-button,
html.dark-mode .dashboard-main-hub-button,
html.dark-mode .dashboard-quick-button,
html.dark-mode .hub-link-button,
html.dark-mode .animals-hard-button {
    color: #ffffff !important;
}



/* YARA Beta 3.5.1 dark mode nested text white fix
   Final dark-mode text override for nested summary/checkbox/person rows.
   It intentionally excludes form fields so inputs stay white with dark text.
*/

/* Dark mode: all normal nested text should be white */
html.dark-mode body :not(input):not(textarea):not(select):not(option) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
}

/* Dark mode: extra specific fixes for People / Team rows and checkbox labels */
html.dark-mode details,
html.dark-mode details *,
html.dark-mode summary,
html.dark-mode summary *,
html.dark-mode label,
html.dark-mode label *,
html.dark-mode .people-card,
html.dark-mode .people-card *,
html.dark-mode .people-person-card,
html.dark-mode .people-person-card *,
html.dark-mode .people-day-form,
html.dark-mode .people-day-form *,
html.dark-mode .people-check-option,
html.dark-mode .people-check-option *,
html.dark-mode .advanced-cleanup-section,
html.dark-mode .advanced-cleanup-section *,
html.dark-mode .checkbox-row,
html.dark-mode .checkbox-row *,
html.dark-mode .status,
html.dark-mode .status *,
html.dark-mode .status-warn,
html.dark-mode .status-warn *,
html.dark-mode .success,
html.dark-mode .success *,
html.dark-mode .small,
html.dark-mode small {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* Dark mode: keep form fields readable as fields, not white-on-white */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select,
html.dark-mode option {
    background: #ffffff !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    border-color: rgba(148, 163, 184, 0.95) !important;
}

/* Dark mode: placeholders stay grey/readable */
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    opacity: 1 !important;
}

/* Dark mode: checkboxes remain clearly visible */
html.dark-mode input[type="checkbox"] {
    accent-color: #2563eb !important;
    outline: 2px solid rgba(147, 197, 253, 0.95) !important;
    outline-offset: 1px !important;
}

/* Dark mode: button text should stay readable */
html.dark-mode button,
html.dark-mode button *,
html.dark-mode a[class*="button"],
html.dark-mode a[class*="button"] *,
html.dark-mode .button,
html.dark-mode .button *,
html.dark-mode .button-link,
html.dark-mode .button-link *,
html.dark-mode .manage-button,
html.dark-mode .manage-button *,
html.dark-mode .save-button-always,
html.dark-mode .save-button-always *,
html.dark-mode .dashboard-menu-button,
html.dark-mode .dashboard-menu-button * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Dark mode links stay blue enough to identify */
html.dark-mode a:not([class*="button"]),
html.dark-mode a:not([class*="button"]):visited {
    color: #bfdbfe !important;
    -webkit-text-fill-color: #bfdbfe !important;
}

/* Light mode safety: keep light mode text readable and button text black as approved */
html:not(.dark-mode) body :not(input):not(textarea):not(select):not(option) {
    color: #0f172a;
    text-shadow: none;
}
html:not(.dark-mode) button,
html:not(.dark-mode) button *,
html:not(.dark-mode) a[class*="button"],
html:not(.dark-mode) a[class*="button"] * {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}



/* YARA Beta 3.5.2 Open buttons green + Planning restored
   Open pills/buttons should not be pale grey/white in either mode.
*/

html.dark-mode .open-button,
html.dark-mode .open-pill,
html.dark-mode .details-open-button,
html.dark-mode .accordion-open-button,
html.dark-mode .summary-open-button,
html.dark-mode .section-open-button,
html.dark-mode .small-open-button,
html.dark-mode summary .open-button,
html.dark-mode summary .open-pill,
html.dark-mode details summary .open-button,
html.dark-mode details summary .open-pill,
html.dark-mode button.open-button,
html.dark-mode button.open-pill,
html.dark-mode a.open-button,
html.dark-mode a.open-pill,
html:not(.dark-mode) .open-button,
html:not(.dark-mode) .open-pill,
html:not(.dark-mode) .details-open-button,
html:not(.dark-mode) .accordion-open-button,
html:not(.dark-mode) .summary-open-button,
html:not(.dark-mode) .section-open-button,
html:not(.dark-mode) .small-open-button,
html:not(.dark-mode) summary .open-button,
html:not(.dark-mode) summary .open-pill,
html:not(.dark-mode) details summary .open-button,
html:not(.dark-mode) details summary .open-pill,
html:not(.dark-mode) button.open-button,
html:not(.dark-mode) button.open-pill,
html:not(.dark-mode) a.open-button,
html:not(.dark-mode) a.open-pill {
    background: #147f73 !important;
    background-color: #147f73 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #0f6f65 !important;
    box-shadow: 0 2px 6px rgba(20, 127, 115, 0.25) !important;
    text-shadow: none !important;
}

/* Some Open buttons are plain buttons inside summary rows without a unique class. */
html.dark-mode summary button,
html.dark-mode details summary button,
html:not(.dark-mode) summary button,
html:not(.dark-mode) details summary button {
    background: #147f73 !important;
    background-color: #147f73 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #0f6f65 !important;
    text-shadow: none !important;
}

/* Keep nested text inside those buttons white as well. */
html.dark-mode summary button *,
html.dark-mode details summary button *,
html.dark-mode .open-button *,
html.dark-mode .open-pill *,
html:not(.dark-mode) summary button *,
html:not(.dark-mode) details summary button *,
html:not(.dark-mode) .open-button *,
html:not(.dark-mode) .open-pill * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
}



/* YARA Beta 3.5.3 restore green buttons
   Keep text readable, but restore YARA green button backgrounds.
*/

:root {
    --yara-af-green: #147f73;
    --yara-af-green-dark: #0f6f65;
    --yara-af-green-light-border: #8cc7bb;
}

/* Dashboard hub buttons: green in both modes */
html.dark-mode .dashboard-menu-button,
html.dark-mode .dashboard-main-hub-button,
html.dark-mode .dashboard-quick-button,
html.dark-mode .hub-link-button,
html.dark-mode .animals-hard-button,
html.dark-mode a.dashboard-menu-button,
html.dark-mode a.dashboard-main-hub-button,
html.dark-mode a.dashboard-quick-button,
html.dark-mode a.hub-link-button,
html.dark-mode a.animals-hard-button,
html:not(.dark-mode) .dashboard-menu-button,
html:not(.dark-mode) .dashboard-main-hub-button,
html:not(.dark-mode) .dashboard-quick-button,
html:not(.dark-mode) .hub-link-button,
html:not(.dark-mode) .animals-hard-button,
html:not(.dark-mode) a.dashboard-menu-button,
html:not(.dark-mode) a.dashboard-main-hub-button,
html:not(.dark-mode) a.dashboard-quick-button,
html:not(.dark-mode) a.hub-link-button,
html:not(.dark-mode) a.animals-hard-button {
    background: var(--yara-af-green) !important;
    background-color: var(--yara-af-green) !important;
    border-color: var(--yara-af-green-dark) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(20, 127, 115, 0.22) !important;
    text-shadow: none !important;
}

/* Nested text inside dashboard buttons */
html.dark-mode .dashboard-menu-button *,
html.dark-mode .dashboard-main-hub-button *,
html.dark-mode .dashboard-quick-button *,
html.dark-mode .hub-link-button *,
html.dark-mode .animals-hard-button *,
html:not(.dark-mode) .dashboard-menu-button *,
html:not(.dark-mode) .dashboard-main-hub-button *,
html:not(.dark-mode) .dashboard-quick-button *,
html:not(.dark-mode) .hub-link-button *,
html:not(.dark-mode) .animals-hard-button * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Open/Close pills and summary row buttons: green in both modes */
html.dark-mode summary button,
html.dark-mode details summary button,
html.dark-mode .open-button,
html.dark-mode .open-pill,
html.dark-mode .close-button,
html.dark-mode .close-pill,
html.dark-mode .details-open-button,
html.dark-mode .accordion-open-button,
html.dark-mode .summary-open-button,
html.dark-mode .section-open-button,
html.dark-mode .small-open-button,
html.dark-mode button.open-button,
html.dark-mode button.open-pill,
html.dark-mode a.open-button,
html.dark-mode a.open-pill,
html:not(.dark-mode) summary button,
html:not(.dark-mode) details summary button,
html:not(.dark-mode) .open-button,
html:not(.dark-mode) .open-pill,
html:not(.dark-mode) .close-button,
html:not(.dark-mode) .close-pill,
html:not(.dark-mode) .details-open-button,
html:not(.dark-mode) .accordion-open-button,
html:not(.dark-mode) .summary-open-button,
html:not(.dark-mode) .section-open-button,
html:not(.dark-mode) .small-open-button,
html:not(.dark-mode) button.open-button,
html:not(.dark-mode) button.open-pill,
html:not(.dark-mode) a.open-button,
html:not(.dark-mode) a.open-pill {
    background: var(--yara-af-green) !important;
    background-color: var(--yara-af-green) !important;
    border-color: var(--yara-af-green-dark) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
}

/* Add/Save/manage action buttons: green unless explicitly danger/warning/delete */
html.dark-mode .manage-button:not(.danger-button):not(.warning-button):not(.delete-button),
html.dark-mode .save-button-always:not(.danger-button):not(.warning-button):not(.delete-button),
html.dark-mode .submit-button:not(.danger-button):not(.warning-button):not(.delete-button),
html.dark-mode .primary-button:not(.danger-button):not(.warning-button):not(.delete-button),
html.dark-mode button[type="submit"]:not(.danger-button):not(.warning-button):not(.delete-button),
html:not(.dark-mode) .manage-button:not(.danger-button):not(.warning-button):not(.delete-button),
html:not(.dark-mode) .save-button-always:not(.danger-button):not(.warning-button):not(.delete-button),
html:not(.dark-mode) .submit-button:not(.danger-button):not(.warning-button):not(.delete-button),
html:not(.dark-mode) .primary-button:not(.danger-button):not(.warning-button):not(.delete-button),
html:not(.dark-mode) button[type="submit"]:not(.danger-button):not(.warning-button):not(.delete-button) {
    background: var(--yara-af-green) !important;
    background-color: var(--yara-af-green) !important;
    border-color: var(--yara-af-green-dark) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
}

/* Keep danger buttons red and readable */
html.dark-mode .danger-button,
html.dark-mode .delete-button,
html:not(.dark-mode) .danger-button,
html:not(.dark-mode) .delete-button {
    background: #dc2626 !important;
    background-color: #dc2626 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #991b1b !important;
}

/* Disabled buttons should look disabled but text readable */
html.dark-mode button:disabled,
html.dark-mode .disabled,
html:not(.dark-mode) button:disabled,
html:not(.dark-mode) .disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}


/* YARA Core 1.0.8 - customer-neutral Red + Carbon theme.
   This final token layer intentionally overrides the historic green polish
   without changing page structure or semantic success/warning states. */
:root {
    --yara-carbon: #202124;
    --yara-carbon-dark: #111315;
    --yara-carbon-soft: #34373b;
    --yara-red: #c62828;
    --yara-red-dark: #8e1b1b;
    --yara-red-soft: #fbe9e9;
    --yara-surface: #ffffff;
    --yara-surface-muted: #f5f6f7;
    --yara-text: #15171a;
    --yara-border-neutral: #d6d9dd;

    /* Compatibility aliases used throughout the established interface. */
    --yara-green: var(--yara-carbon);
    --yara-green-dark: var(--yara-carbon-dark);
    --yara-green-soft: var(--yara-red-soft);
    --yara-green-soft-2: #faf7f7;
    --yara-green-light: var(--yara-red-soft);
    --yara-cream: var(--yara-surface-muted);
    --yara-border: rgba(32, 33, 36, 0.18);
    --yara-shadow: 0 8px 24px rgba(17, 19, 21, 0.10);
}

html:not(.dark-mode) body {
    background: var(--yara-surface-muted) !important;
    color: var(--yara-text) !important;
}

html:not(.dark-mode) .card,
html:not(.dark-mode) .animal,
html:not(.dark-mode) .mini-card,
html:not(.dark-mode) .boarding-card,
html:not(.dark-mode) .adoption-appointment-card,
html:not(.dark-mode) .weather-card {
    background: var(--yara-surface) !important;
    border-color: var(--yara-border-neutral) !important;
}

/* Carbon navigation and high-level destinations. */
.top-nav a,
.nav a,
.menu a,
header a,
.app-header a,
.topbar a,
.dashboard-nav-button,
.logout-nav-button,
.top-action-button,
.dashboard-top-button,
.logout-top-button,
.dashboard-menu-button,
.dashboard-main-hub-button,
.dashboard-quick-button,
.hub-link-button,
.animals-hard-button {
    background: var(--yara-carbon) !important;
    border-color: var(--yara-carbon-dark) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(17, 19, 21, 0.20) !important;
}

/* Red identifies primary save/create/generate actions. */
.save-button-always,
.pdf-button,
.owner-report-button,
.submit-button,
.primary-button,
button[type="submit"]:not(.danger-button):not(.small-danger-button):not(.warning-button) {
    background: var(--yara-red) !important;
    border-color: var(--yara-red-dark) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(198, 40, 40, 0.20) !important;
}

.save-button-always:hover,
.pdf-button:hover,
.owner-report-button:hover,
.submit-button:hover,
.primary-button:hover,
button[type="submit"]:not(.danger-button):not(.small-danger-button):not(.warning-button):hover {
    background: var(--yara-red-dark) !important;
}

/* Secondary actions stay neutral and readable. */
.manage-button,
.profile-link,
.profile-open-button,
.back-link {
    background: #ffffff !important;
    border: 1px solid #8b9199 !important;
    color: var(--yara-carbon-dark) !important;
    box-shadow: 0 2px 7px rgba(17, 19, 21, 0.10) !important;
}

/* Destructive controls use a deeper danger colour than the brand accent. */
.danger-button,
.small-danger-button,
.delete,
.delete-button {
    background: #991b1b !important;
    border-color: #7f1d1d !important;
    color: #ffffff !important;
}

/* Green is semantic only: completed/successful state. */
.success,
.round-card-done {
    background: #e8f5ec !important;
    border-color: #86b895 !important;
    color: #14532d !important;
}

.done-button {
    background: #166534 !important;
    border-color: #14532d !important;
    color: #ffffff !important;
}

.round-progress-fill,
.cat-progress-fill {
    background: #238144 !important;
}

/* Red focus ring is visible on both white and carbon surfaces. */
input:focus,
textarea:focus,
select:focus,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
    outline: 3px solid #e85d5d !important;
    outline-offset: 2px !important;
    border-color: var(--yara-red) !important;
}

.card,
.boarding-card,
.adoption-appointment-card {
    border-top-color: var(--yara-red) !important;
}

.access-denied-eyebrow {
    color: var(--yara-red) !important;
}

/* Consistent touch targets and labels. */
button,
a[class*="button"],
.button-link,
.manage-button,
.profile-link {
    min-height: 42px;
    padding: 9px 14px;
    border-radius: 12px !important;
    box-sizing: border-box;
    font-weight: 800 !important;
    line-height: 1.2;
    align-items: center;
    justify-content: center;
}

/* Medication controls wrap instead of overlapping their card or each other. */
.medication-button-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    max-width: 100%;
}

.medication-button-row form {
    display: inline-flex;
    margin: 0 !important;
    max-width: 100%;
}

.medication-button-row .profile-open-button,
.medication-button-row button {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100%;
    white-space: normal;
}

.daily-reset-action-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.daily-reset-button,
.warning-button {
    display: inline-flex;
    background: #f59e0b !important;
    border: 1px solid #92400e !important;
    color: #111315 !important;
    text-decoration: none;
}

.daily-reset-confirmation-card {
    max-width: 720px;
    margin-inline: auto;
}

.daily-reset-confirmation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

html.dark-mode body {
    background: #111315 !important;
}

html.dark-mode .card,
html.dark-mode .animal,
html.dark-mode .mini-card,
html.dark-mode .boarding-card,
html.dark-mode .adoption-appointment-card,
html.dark-mode .weather-card {
    background: #202328 !important;
    border-color: #4a4e55 !important;
}

html.dark-mode .manage-button,
html.dark-mode .profile-link,
html.dark-mode .profile-open-button,
html.dark-mode .back-link {
    background: #34373b !important;
    border-color: #8b9199 !important;
    color: #ffffff !important;
}

html.dark-mode .success,
html.dark-mode .round-card-done {
    background: #173c25 !important;
    border-color: #4e8b61 !important;
    color: #e7f7ec !important;
}

html.dark-mode .access-denied-eyebrow {
    color: #ff8a8a !important;
}

@media (max-width: 640px) {
    .medication-button-row,
    .daily-reset-confirmation-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .medication-button-row form,
    .medication-button-row .profile-open-button,
    .medication-button-row button,
    .daily-reset-confirmation-actions > * {
        width: 100% !important;
    }

    .daily-reset-action-row {
        justify-content: stretch;
    }

    .daily-reset-button {
        width: 100%;
    }
}

/* Dark mode normal text remains white after button corrections */
html.dark-mode body :not(input):not(textarea):not(select):not(option) {
    color: #ffffff !important;
}

/* Light mode normal text remains dark, but green button text remains white by the rules above */
html:not(.dark-mode) body :not(input):not(textarea):not(select):not(option):not(button):not(a[class*="button"]):not(.dashboard-menu-button):not(.dashboard-main-hub-button):not(.dashboard-quick-button):not(.hub-link-button):not(.animals-hard-button) {
    color: #0f172a;
}
/* Security baseline: POST-only navigation actions keep their link appearance. */
.top-action-form {
    display: inline-flex;
    margin: 0;
}

.top-action-form .top-action-button {
    font: inherit;
    cursor: pointer;
}

/* Role-aware presentation and compact persistent navigation. */
.role-readonly-hidden {
    display: none !important;
}

.role-readonly-banner {
    margin: 0 0 12px !important;
}

.top-action-nav {
    max-width: 100%;
}

.top-action-button,
.user-admin-add-form .save-button-always {
    min-height: 44px !important;
    padding: 8px 14px !important;
}

/* YARA Core 1.0.4: compact, role-aware navigation polish. */
.dashboard-menu-compact-card .dashboard-menu-single-action {
    grid-template-columns: minmax(260px, 420px) !important;
    justify-content: center !important;
}

.back-link {
    display: inline-flex !important;
    width: auto !important;
    min-height: 42px !important;
    padding: 8px 14px !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin: 8px 0 0 !important;
}

/* 1.0.6 branding and access presentation. No permission behaviour lives here. */
.role-readonly-banner {
    border: 1px solid rgba(180, 83, 9, 0.35) !important;
    border-left: 5px solid #d97706 !important;
    border-radius: 12px !important;
    padding: 11px 14px !important;
    background: #fffbeb !important;
    color: #713f12 !important;
    font-weight: 700 !important;
}

html.dark-mode .role-readonly-banner {
    background: rgba(120, 53, 15, 0.34) !important;
    border-color: rgba(251, 191, 36, 0.55) !important;
    color: #fde68a !important;
}

.profile-open-button,
a.manage-button.profile-open-button,
.back-link {
    min-height: 42px !important;
    padding: 8px 14px !important;
    box-sizing: border-box !important;
}

.access-denied-shell {
    display: flex;
    justify-content: center;
    padding: clamp(18px, 5vw, 52px) 16px;
}

.access-denied-card {
    display: grid;
    grid-template-columns: minmax(150px, 255px) minmax(0, 1fr);
    max-width: 760px;
    overflow: hidden;
    padding: 0 !important;
}

.access-denied-photo {
    width: 100%;
    height: 100%;
    min-height: 255px;
    object-fit: cover;
    object-position: center 30%;
}

.access-denied-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(22px, 4vw, 42px);
}

.access-denied-content h3 {
    margin: 0 0 10px;
    font-size: clamp(1.55rem, 4vw, 2.2rem);
}

.access-denied-content p {
    margin: 0;
    line-height: 1.55;
}

.access-denied-eyebrow {
    margin-bottom: 8px !important;
    color: var(--yara-green-dark) !important;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

html.dark-mode .access-denied-eyebrow {
    color: #86efac !important;
}

@media (max-width: 620px) {
    .access-denied-card {
        grid-template-columns: 1fr;
        max-width: 460px;
    }

    .access-denied-photo {
        height: 185px;
        min-height: 0;
        object-position: center 27%;
    }
}

@media (max-width: 640px) {
    .dashboard-menu-compact-card .dashboard-menu-single-action {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .back-link {
        width: 100% !important;
    }
}

/* YARA Core 1.0.8 final cascade guards. */
.access-denied-eyebrow {
    color: var(--yara-red) !important;
}

html.dark-mode .access-denied-eyebrow {
    color: #ff8a8a !important;
}

html:not(.dark-mode) .top-nav a,
html:not(.dark-mode) .nav a,
html:not(.dark-mode) .menu a,
html:not(.dark-mode) header a,
html:not(.dark-mode) .app-header a,
html:not(.dark-mode) .topbar a,
html:not(.dark-mode) .dashboard-nav-button,
html:not(.dark-mode) .logout-nav-button,
html:not(.dark-mode) .top-action-button,
html:not(.dark-mode) .dashboard-top-button,
html:not(.dark-mode) .logout-top-button,
html:not(.dark-mode) .dashboard-menu-button,
html:not(.dark-mode) .dashboard-main-hub-button,
html:not(.dark-mode) .dashboard-quick-button,
html:not(.dark-mode) .hub-link-button,
html:not(.dark-mode) .animals-hard-button,
html:not(.dark-mode) .save-button-always,
html:not(.dark-mode) .pdf-button,
html:not(.dark-mode) .owner-report-button,
html:not(.dark-mode) .submit-button,
html:not(.dark-mode) .primary-button {
    color: #ffffff !important;
}

/* 1.0.8 live-acceptance cascade locks.
   These selectors deliberately outrank the historic 1.0.7 theme rules. */
:root {
    --yara-af-green: var(--yara-carbon);
    --yara-af-green-dark: var(--yara-carbon-dark);
    --yara-af-green-light-border: #8b9199;
}

html.dark-mode .top-action-nav a.dashboard-top-button,
html.dark-mode .top-action-nav .top-action-form button.logout-top-button,
html:not(.dark-mode) .top-action-nav a.dashboard-top-button,
html:not(.dark-mode) .top-action-nav .top-action-form button.logout-top-button,
html.dark-mode .dashboard-menu-grid a.dashboard-menu-button,
html:not(.dark-mode) .dashboard-menu-grid a.dashboard-menu-button,
html.dark-mode a.dashboard-main-hub-button,
html:not(.dark-mode) a.dashboard-main-hub-button,
html.dark-mode a.dashboard-quick-button,
html:not(.dark-mode) a.dashboard-quick-button,
html.dark-mode a.hub-link-button,
html:not(.dark-mode) a.hub-link-button,
html.dark-mode a.animals-hard-button,
html:not(.dark-mode) a.animals-hard-button {
    background: var(--yara-carbon) !important;
    background-color: var(--yara-carbon) !important;
    border-color: var(--yara-carbon-dark) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(17, 19, 21, 0.20) !important;
}

html:not(.dark-mode) .dashboard-info-status {
    background: #f1f2f3 !important;
    border-color: #c8ccd1 !important;
    color: var(--yara-carbon-dark) !important;
}

html.dark-mode .dashboard-info-status {
    background: #2b2e32 !important;
    border-color: #555a61 !important;
    color: #ffffff !important;
}

html:not(.dark-mode) .status-bundle.is-clear > summary {
    background: #f1f2f3 !important;
    border-color: #d6d9dd !important;
}

html.dark-mode .status-bundle.is-clear > summary {
    background: #2b2e32 !important;
    border-color: #555a61 !important;
}

/* 1.0.8 acceptance fix: iOS Safari must show saved time values in dark mode. */
html.dark-mode input[type="time"] {
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    color-scheme: light;
}

/* YARA Core 1.0.9 Pilot Polish: compact header and consistent red secondary outline. */
.header-utility-actions {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}

.header-logout-button {
    min-height: 42px;
    padding: 8px 12px;
    border: 2px solid var(--yara-red) !important;
    border-radius: 12px;
    background: transparent !important;
    color: var(--yara-red) !important;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.header-logout-button:hover,
.header-logout-button:focus-visible {
    background: var(--yara-red-soft) !important;
    outline: 3px solid rgba(198, 40, 40, 0.22);
    outline-offset: 2px;
}

.top-action-nav {
    display: flex;
    justify-content: center;
    margin: 4px 0 14px;
}

.top-action-nav .dashboard-top-button,
.manage-button,
.profile-link,
.back-link {
    border: 2px solid var(--yara-red) !important;
}

.top-action-nav .dashboard-top-button {
    min-height: 42px !important;
    padding: 8px 16px !important;
    background: transparent !important;
    color: var(--yara-red) !important;
    box-shadow: none !important;
}

button:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(198, 40, 40, 0.36) !important;
    outline-offset: 2px;
}

html.dark-mode .header-logout-button,
html.dark-mode .top-action-nav .dashboard-top-button {
    color: #ffb4b4 !important;
    border-color: #ff7979 !important;
}

html.dark-mode .header-logout-button:hover,
html.dark-mode .header-logout-button:focus-visible,
html.dark-mode .top-action-nav .dashboard-top-button:hover {
    background: rgba(198, 40, 40, 0.22) !important;
}

@media (max-width: 640px) {
    .page-topbar.logo-only-header {
        margin-bottom: 10px !important;
    }

    .header-logout-button {
        min-height: 40px;
        padding: 7px 10px;
        font-size: 0.9rem;
    }

    .top-action-nav {
        margin-bottom: 10px;
    }
}

/* YARA Core 1.0.13: baseline control cascade.
   This deliberately has higher specificity than the historic acceptance-theme
   locks above. Every interactive control is carbon black with the same clearly
   visible red outline in both light and dark mode. Semantic status cards are
   not controls and therefore retain their status colours. */
html.dark-mode body button:not(#yara-button-cascade-sentinel),
html:not(.dark-mode) body button:not(#yara-button-cascade-sentinel),
html.dark-mode body input[type="button"]:not(#yara-button-cascade-sentinel),
html:not(.dark-mode) body input[type="button"]:not(#yara-button-cascade-sentinel),
html.dark-mode body input[type="submit"]:not(#yara-button-cascade-sentinel),
html:not(.dark-mode) body input[type="submit"]:not(#yara-button-cascade-sentinel),
html.dark-mode body input[type="reset"]:not(#yara-button-cascade-sentinel),
html:not(.dark-mode) body input[type="reset"]:not(#yara-button-cascade-sentinel),
html.dark-mode body a.button-link:not(#yara-button-cascade-sentinel),
html:not(.dark-mode) body a.button-link:not(#yara-button-cascade-sentinel),
html.dark-mode body a.manage-button:not(#yara-button-cascade-sentinel),
html:not(.dark-mode) body a.manage-button:not(#yara-button-cascade-sentinel),
html.dark-mode body a.profile-link:not(#yara-button-cascade-sentinel),
html:not(.dark-mode) body a.profile-link:not(#yara-button-cascade-sentinel),
html.dark-mode body a.profile-open-button:not(#yara-button-cascade-sentinel),
html:not(.dark-mode) body a.profile-open-button:not(#yara-button-cascade-sentinel),
html.dark-mode body a.back-link:not(#yara-button-cascade-sentinel),
html:not(.dark-mode) body a.back-link:not(#yara-button-cascade-sentinel),
html.dark-mode body a.top-action-button:not(#yara-button-cascade-sentinel),
html:not(.dark-mode) body a.top-action-button:not(#yara-button-cascade-sentinel),
html.dark-mode body a.dashboard-top-button:not(#yara-button-cascade-sentinel),
html:not(.dark-mode) body a.dashboard-top-button:not(#yara-button-cascade-sentinel),
html.dark-mode body a.dashboard-menu-button:not(#yara-button-cascade-sentinel),
html:not(.dark-mode) body a.dashboard-menu-button:not(#yara-button-cascade-sentinel),
html.dark-mode body a.dashboard-main-hub-button:not(#yara-button-cascade-sentinel),
html:not(.dark-mode) body a.dashboard-main-hub-button:not(#yara-button-cascade-sentinel),
html.dark-mode body a.dashboard-quick-button:not(#yara-button-cascade-sentinel),
html:not(.dark-mode) body a.dashboard-quick-button:not(#yara-button-cascade-sentinel),
html.dark-mode body a.hub-link-button:not(#yara-button-cascade-sentinel),
html:not(.dark-mode) body a.hub-link-button:not(#yara-button-cascade-sentinel),
html.dark-mode body a.animals-hard-button:not(#yara-button-cascade-sentinel),
html:not(.dark-mode) body a.animals-hard-button:not(#yara-button-cascade-sentinel),
html.dark-mode body a.open-button:not(#yara-button-cascade-sentinel),
html:not(.dark-mode) body a.open-button:not(#yara-button-cascade-sentinel),
html.dark-mode body a.open-pill:not(#yara-button-cascade-sentinel),
html:not(.dark-mode) body a.open-pill:not(#yara-button-cascade-sentinel),
html.dark-mode body a.pdf-button:not(#yara-button-cascade-sentinel),
html:not(.dark-mode) body a.pdf-button:not(#yara-button-cascade-sentinel),
html.dark-mode body a.owner-report-button:not(#yara-button-cascade-sentinel),
html:not(.dark-mode) body a.owner-report-button:not(#yara-button-cascade-sentinel),
html.dark-mode body a.planned-walk-small-button:not(#yara-button-cascade-sentinel),
html:not(.dark-mode) body a.planned-walk-small-button:not(#yara-button-cascade-sentinel) {
    background: #15171a !important;
    background-color: #15171a !important;
    border: 3px solid #f05252 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(240, 82, 82, 0.28) !important;
}

/* YARA Core 1.0.14: calm control finish and expanded brand header.
   The red edge stays consistently visible, while the permanent glow is removed
   so daily actions never compete with the YARA identity or page content. */
html.dark-mode body :is(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    a.button-link,
    a.manage-button,
    a.profile-link,
    a.profile-open-button,
    a.back-link,
    a.top-action-button,
    a.dashboard-top-button,
    a.dashboard-menu-button,
    a.dashboard-main-hub-button,
    a.dashboard-quick-button,
    a.hub-link-button,
    a.animals-hard-button,
    a.open-button,
    a.open-pill,
    a.pdf-button,
    a.owner-report-button,
    a.planned-walk-small-button
):not(#yara-button-cascade-sentinel),
html:not(.dark-mode) body :is(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    a.button-link,
    a.manage-button,
    a.profile-link,
    a.profile-open-button,
    a.back-link,
    a.top-action-button,
    a.dashboard-top-button,
    a.dashboard-menu-button,
    a.dashboard-main-hub-button,
    a.dashboard-quick-button,
    a.hub-link-button,
    a.animals-hard-button,
    a.open-button,
    a.open-pill,
    a.pdf-button,
    a.owner-report-button,
    a.planned-walk-small-button
):not(#yara-button-cascade-sentinel) {
    background: #15171a !important;
    background-color: #15171a !important;
    border: 2px solid #f05252 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(240, 82, 82, 0.12) !important;
}

/* The header is deliberately more prominent now that session controls live in
   Settings. It remains compact enough for fast phone-first daily work. */
.page-topbar.logo-only-header {
    justify-content: center !important;
    margin: 8px 0 16px !important;
    padding: 8px 12px 4px !important;
}

.page-topbar.logo-only-header .brand-block {
    width: 100% !important;
    justify-content: center !important;
    gap: 18px !important;
}

.page-topbar.logo-only-header .clean-header-logo,
.logo-only-header .clean-header-logo {
    width: 78px !important;
    height: 78px !important;
    flex: 0 0 78px !important;
}

.page-topbar.logo-only-header .brand-text.tagline-only h2 {
    font-size: clamp(1.12rem, 4.8vw, 1.55rem) !important;
    line-height: 1.08 !important;
    font-weight: 850 !important;
}

.page-topbar.logo-only-header .brand-employee-name {
    margin-top: 6px !important;
    font-size: clamp(0.86rem, 3.5vw, 1.04rem) !important;
    line-height: 1.15 !important;
}

@media (max-width: 430px) {
    .page-topbar.logo-only-header {
        margin: 6px 0 14px !important;
        padding: 8px 10px 4px !important;
    }

    .page-topbar.logo-only-header .brand-block {
        justify-content: flex-start !important;
        gap: 14px !important;
    }

    .page-topbar.logo-only-header .clean-header-logo,
    .logo-only-header .clean-header-logo {
        width: 68px !important;
        height: 68px !important;
        flex: 0 0 68px !important;
    }

    .page-topbar.logo-only-header .brand-text.tagline-only h2 {
        font-size: clamp(1rem, 4.5vw, 1.24rem) !important;
    }

    .page-topbar.logo-only-header .brand-employee-name {
        font-size: clamp(0.82rem, 3.4vw, 0.96rem) !important;
    }
}