/* ============================================================
   VARIABLES
   ============================================================ */
:root {
    --color-primary: #2e7d32;
    --color-primary-dark: #1b5e20;
    --color-primary-light: #e8f5e9;
    --color-accent: #ed6c02;
    --color-danger: #d32f2f;
    --color-text: #333333;
    --color-muted: #666666;
    --color-border: #e0e0e0;
    --color-bg: #f0f2f5;
    --color-white: #ffffff;
    --color-header-bg: #ffffff;
    --header-height: 60px;
    --sidebar-collapsed-width: 56px;
    --sidebar-expanded-width: 240px;
    --border-radius: 8px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    color: var(--color-text);
    background-color: var(--color-bg);
    height: 100%;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   HEADER
   ============================================================ */
.app-header {
    position: sticky;
    top: 0;
    width: 100%;
    height: var(--header-height);
    background: var(--color-header-bg);
    border-bottom: 1px solid var(--color-border);
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 16px;
}

.header-logo { display: flex; align-items: center; }
.header-logo a { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.logo-img { height: 36px; width: auto; }
.logo-text { font-size: 1.4rem; font-weight: 800; color: var(--color-primary); }

/* Primary nav: sits just right of the logo, pushes avatar to far right. */
.header-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-left: 40px;
    margin-right: auto;
    height: 100%;
}

.header-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 2px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Animated underline that grows from the center on hover/focus. */
.header-nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 14px;
    width: 100%;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.2s ease;
}

.header-nav-link:hover,
.header-nav-link:focus-visible {
    color: var(--color-primary);
    text-decoration: none;
}

.header-nav-link:hover::after,
.header-nav-link:focus-visible::after {
    transform: scaleX(1);
}

.header-user { display: flex; justify-content: flex-end; align-items: center; }

/* Avatar badge */
.avatar-wrapper { position: relative; cursor: pointer; }

/* Invisible bridge that fills the gap between badge and dropdown so :hover isn't lost */
.avatar-wrapper::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
}

.avatar-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    user-select: none;
}

/* Avatar dropdown — hidden by default, revealed on hover */
.avatar-dropdown { display: none; }
.avatar-wrapper:hover .avatar-dropdown { display: block; }

.avatar-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 210px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    z-index: 200;
    overflow: hidden;
}

.dropdown-header { padding: 12px 16px; }
.dropdown-name { font-weight: 600; font-size: 0.95rem; }
.dropdown-email { font-size: 0.8rem; color: var(--color-muted); margin-top: 2px; }
.dropdown-divider { border: none; border-top: 1px solid var(--color-border); margin: 0; }

.dropdown-item {
    display: block;
    padding: 10px 16px;
    font-size: 0.9rem;
    color: var(--color-text);
    text-decoration: none;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}

.dropdown-item:hover { background: var(--color-primary-light); color: var(--color-primary); }
.dropdown-signout { color: var(--color-danger); }
.dropdown-signout:hover { background: #ffebee; color: var(--color-danger); }

.dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 150;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.app-main {
    min-height: calc(100vh - var(--header-height));
}

/* Public, header-less pages (PublicLayout) — full viewport, no header offset. */
.public-main {
    min-height: 100vh;
}

.login-layout { margin-top: 0; }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: 24px;
}

.login-card {
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    padding: 40px 36px;
    width: 100%;
    max-width: 400px;
}

.login-logo {
    text-align: center;
    margin-bottom: 28px;
}

.login-logo img { height: 60px; width: auto; }
.login-brand { font-size: 1.8rem; font-weight: 800; color: var(--color-primary); margin: 8px 0 0; }
.login-title { font-size: 1.2rem; font-weight: 600; margin: 0 0 20px; color: var(--color-text); }

.login-form { display: flex; flex-direction: column; gap: 4px; }

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.form-group label { font-size: 0.85rem; font-weight: 600; color: var(--color-text); }

.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.95rem;
    color: var(--color-text);
    background: var(--color-white);
    transition: border-color 0.15s;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(46,125,50,0.15);
}

/* Remember Me toggle */
.remember-me-row { flex-direction: row; align-items: center; }

.toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.toggle-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-track {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    background: #ccc;
    border-radius: 22px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.toggle-track::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
}

.toggle-label input:checked + .toggle-track { background: var(--color-primary); }
.toggle-label input:checked + .toggle-track::before { transform: translateX(18px); }
.toggle-text { font-size: 0.9rem; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    text-decoration: none;
}

.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-primary {
    background: var(--color-primary);
    color: white;
}
.btn-primary:hover:not(:disabled) { background: var(--color-primary-dark); }

.btn-danger { background: var(--color-danger); color: white; }
.btn-danger:hover:not(:disabled) { background: #b71c1c; }

.btn-secondary { background: #e0e0e0; color: var(--color-text); }
.btn-secondary:hover:not(:disabled) { background: #bdbdbd; }

.btn-link {
    background: none;
    color: var(--color-primary);
    padding: 6px 0;
    font-weight: 400;
}
.btn-link:hover { text-decoration: underline; }

.btn-block { width: 100%; }

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.alert-error { background: #ffebee; color: var(--color-danger); border: 1px solid #ffcdd2; }
.alert-info { background: #e3f2fd; color: #1565c0; border: 1px solid #bbdefb; }
.alert-success { background: var(--color-primary-light); color: var(--color-primary-dark); border: 1px solid #c8e6c9; }
.alert-warning { background: #fff8e1; color: #8a6d00; border: 1px solid #ffe082; }
.required-mark { color: var(--color-danger, #e50000); font-weight: 700; }

/* CR-031 schedule / volunteer date ranges on the Pet Profile shift card */
.sched-date-range { color: var(--color-text-muted, #6b7280); font-size: 0.8rem; margin-top: 2px; }
.vp-status-range { color: var(--color-text-muted, #6b7280); font-size: 0.78rem; margin-top: 2px; }

/* CR-027 / defect_002 SMS consent popup */
.sms-consent-title { text-align: center; margin: 0 0 12px; }
.sms-consent-phone {
    background: #f1f3f5;
    color: #333;
    text-align: center;
    font-weight: 600;
    padding: 10px 12px;
    border-radius: 6px;
    margin: 0 0 16px;
}
.sms-consent-actions { position: relative; display: flex; align-items: center; justify-content: center; margin-top: 22px; min-height: 48px; }
.sms-consent-cancel { position: absolute; left: 0; }
.sms-consent-agree { padding: 14px 44px; font-size: 1.05rem; font-weight: 700; }
.sms-consent-agree:disabled { opacity: 0.5; cursor: not-allowed; }

/* CR-035 SMS welcome popup */
.sms-welcome { position: relative; }
.sms-welcome-close { position: absolute; top: 8px; right: 10px; width: 28px; height: 28px; border: none;
    background: none; cursor: pointer; font-size: 1.5rem; line-height: 1; color: #6b7280; }
.sms-welcome-close:hover { color: #111827; }

/* ============================================================
   SPINNER
   ============================================================ */
.spinner-sm {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

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

/* ============================================================
   HOME PAGE (desktop) — full-viewport three-section layout:
   header (in layout) + hero image (flex-grow) + action buttons
   ============================================================ */
.home-page {
    height: calc(100vh - var(--header-height));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Hero image: fills remaining vertical space; anchored to the BOTTOM edge so the
   bottom of the image stays visible and any cropping happens from the top. */
.home-hero {
    flex: 1 1 auto;
    min-height: 0;
    background-image: url('/images/app/hero-16.png');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

/* Action button area: ~15-20% of viewport height, always visible. */
.home-actions {
    flex: 0 0 auto;
    height: 18vh;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
}

.home-btn-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    width: 100%;
    max-width: 1400px;
    box-sizing: border-box;
}

.home-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 22%;
    min-width: 240px;
    padding: 22px 24px;
    background: var(--color-white);
    border: 1.5px solid var(--color-border);
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    color: var(--color-text);
    box-shadow: 8px 8px 24px rgba(0, 0, 0, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.home-btn:hover {
    background-color: #fafbfc;
    border-color: #94a3b8;
    box-shadow: 10px 10px 28px rgba(0, 0, 0, 0.07);
    text-decoration: none;
    color: var(--color-text);
}

.home-btn:active {
    transform: translateY(1px);
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.04);
}

.home-btn-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.home-btn-icon,
.home-btn-chevron {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--color-primary);
}

.home-btn-title {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.2px;
}

/* ============================================================
   MISC UTILITIES
   ============================================================ */
.auth-loading, .error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 16px;
    text-align: center;
}

.btn-sm { padding: 6px 12px; font-size: 0.82rem; }

.required { color: var(--color-danger); margin-left: 2px; }

/* ============================================================
   ADMIN LAYOUT – Custom sidebar (plain HTML, white theme)
   ============================================================ */
.admin-shell {
    display: flex;
    height: calc(100vh - var(--header-height));
    overflow: hidden;
}

/* Sidebar */
.admin-nav {
    width: 56px;
    background: #fff;
    border-right: 1px solid #e0e0e0;
    box-shadow: 2px 0 4px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.22s ease;
    flex-shrink: 0;
    z-index: 90;
}
/* Sidebar expands only when toggled via the toggle button */
.admin-nav.nav-expanded { width: 240px; }

/* Sidebar toggle button — fixed, transitions left with the sidebar width */
.sidebar-toggle-btn {
    position: fixed;
    top: calc(var(--header-height) + 4px);
    left: 56px;                     /* collapsed: right at the left edge of main content */
    width: 28px;
    height: 28px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 3px;
    cursor: pointer;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    transition: left 0.22s ease;
}
.sidebar-toggle-btn:hover { background: #f0f0f0; color: #111; }
.sidebar-toggle-btn.expanded {
    left: calc(240px - 28px - 4px); /* expanded: inside sidebar, flush to the right edge */
}

/* Nav links */
.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 500;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: background 0.12s;
}
.nav-link:hover { background: #f5f5f5; color: #000; text-decoration: none; }
.nav-link-active { color: var(--color-primary) !important; font-weight: 600; border-left: 3px solid var(--color-primary); background: #eef3fd; }
.nav-link-active:hover { background: #e4edfc; }

/* Icon + label */
.nav-icon { flex-shrink: 0; width: 24px; display: inline-flex; align-items: center; justify-content: center; color: #2563eb; }
.nav-icon svg { width: 20px; height: 20px; }
.nav-label { flex: 1; }

/* When collapsed (icons only), fully hide labels, arrows and submenus so text
   does not peek past the 56px icon strip. */
.admin-nav:not(.nav-expanded) .nav-label,
.admin-nav:not(.nav-expanded) .nav-arrow,
.admin-nav:not(.nav-expanded) .nav-sub { display: none; }

/* Arrow for groups */
.nav-arrow { font-size: 1rem; transition: transform 0.18s; margin-left: auto; }
.nav-arrow-open { transform: rotate(90deg); }

/* Group */
.nav-group { position: relative; }
.nav-group-row { cursor: pointer; user-select: none; }

/* Sub-menu items */
.nav-sub { background: #f9f9f9; border-left: 2px solid #e0e0e0; }
.nav-sub-item {
    display: block;
    padding: 9px 20px 9px 52px;
    font-size: 0.84rem;
    color: #444;
    text-decoration: none;
    white-space: nowrap;
}
.nav-sub-item:hover { background: #f0f0f0; color: #000; text-decoration: none; }
.nav-sub-item.nav-link-active { color: var(--color-primary); font-weight: 600; }

/* Search box – magnifier/clear inside the input border */
.search-input-wrapper { position: relative; display: block; width: 100%; }
.search-input-wrapper .form-control { width: 100%; padding-right: 60px; box-sizing: border-box; }
.search-clear-btn {
    position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: var(--color-muted);
    font-size: 0.85rem; padding: 2px 4px; z-index: 2;
}
.search-clear-btn:hover { color: var(--color-text); }
.search-btn {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; font-size: 1rem; padding: 2px 4px; z-index: 2;
}

/* Admin content area */
.admin-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    min-width: 0;
}

/* ============================================================
   STANDARD PAGE LAYOUT (Selection Panel + Detail)
   ============================================================ */
.page-container {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 260px 1fr;
    height: calc(100vh - var(--header-height) - 32px);
    background: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Selection Panel */
.selection-panel {
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 0.9rem;
    background: #f8f9fa;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.panel-list {
    flex: 1;
    overflow-y: auto;
}

.panel-item {
    padding: 10px 16px;
    font-size: 0.9rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    color: var(--color-text);
    transition: background 0.1s;
}
.panel-item:hover { background: var(--color-primary-light); }
.panel-item.selected {
    /* CR-082: light-blue (same family as the #2563eb sidebar icons) so the selected
       row no longer matches the green action buttons. */
    background: #dbeafe;
    color: var(--color-text);
    font-weight: 600;
    box-shadow: inset 3px 0 0 #2563eb;   /* accent echoing the active sidebar item */
}

.panel-loading { padding: 16px; color: var(--color-muted); font-size: 0.9rem; }

/* Edit-mode MudBlazor input size constraints */
.mud-field-sm  { max-width: 240px; }
.mud-field-md  { max-width: 400px; }
.mud-field-lg  { max-width: 600px; }

/* Two-column selection panel – grid with separator and header */
.panel-col-header {
    display: grid;
    grid-template-columns: 1fr 80px;
    padding: 4px 16px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-muted);
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.panel-col-header span:last-child {
    border-left: 1px solid #ddd;
    padding-left: 8px;
}
.panel-item-2col {
    display: grid;
    grid-template-columns: 1fr 80px;
    align-items: center;
}
.panel-col-primary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
}
.panel-col-secondary {
    font-size: 0.8rem;
    color: var(--color-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-left: 1px solid #e0e0e0;
    padding-left: 8px;
}
.panel-item.selected .panel-col-secondary {
    /* CR-082: readable on the light-blue selected row */
    color: var(--color-muted);
    border-left-color: rgba(37, 99, 235, 0.25);
}

/* Filter section */
.filter-section {
    grid-column: 1 / -1;
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-controls { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; width: 100%; }
.filter-field { display: flex; flex-direction: column; gap: 4px; }
.filter-field label { font-size: 0.8rem; font-weight: 600; color: var(--color-muted); }
.filter-actions { display: flex; gap: 8px; align-items: flex-end; }
.filter-radio-group { justify-content: flex-end; }

/* Radio / Checkbox groups */
.radio-group { display: flex; gap: 16px; align-items: center; padding: 7px 0; }
.radio-label { display: flex; gap: 6px; align-items: center; font-size: 0.9rem; cursor: pointer; }
.radio-label input[type="radio"] { cursor: pointer; }
.checkbox-group { display: flex; gap: 16px; align-items: center; padding: 7px 0; }
.checkbox-label { display: flex; gap: 6px; align-items: center; font-size: 0.9rem; cursor: pointer; }
.checkbox-label input[type="checkbox"] { cursor: pointer; }

/* Pet images */
.pet-profile-img { max-width: 200px; max-height: 200px; border-radius: var(--border-radius); object-fit: cover; display: block; margin-bottom: 6px; }
.pet-badge-img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; display: block; margin-bottom: 6px; }
.field-url { font-size: 0.78rem; color: var(--color-muted); word-break: break-all; }

/* Field variants */
.field-value.field-multiline { white-space: pre-wrap; line-height: 1.5; }
.field-value.field-monospace { font-family: monospace; font-size: 0.85rem; word-break: break-all; }
.field-row.field-row-top label { padding-top: 12px; }

/* Sub-list (e.g. Pets in Seniors detail) */
.sub-list { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.sub-list-item { font-size: 0.9rem; padding: 4px 0; color: var(--color-text); border-bottom: 1px solid #f0f0f0; }
.sub-list-item:last-child { border-bottom: none; }

/* Availability grid */
.availability-grid { display: flex; flex-direction: column; width: 100%; max-width: 420px; }
.availability-header {
    display: grid;
    grid-template-columns: 64px 56px 100px 100px;
    gap: 8px;
    padding: 4px 0 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    border-bottom: 2px solid var(--color-border);
}
.availability-row {
    display: grid;
    grid-template-columns: 64px 56px 100px 100px;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.9rem;
    border-bottom: 1px solid #f5f5f5;
    align-items: center;
}
.availability-row:last-child { border-bottom: none; }

/* Detail Section */
.detail-section {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.detail-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    font-size: 0.95rem;
    gap: 10px;
    text-align: center;
}

.detail-empty-icon { font-size: 2.2rem; opacity: 0.4; }

.detail-toolbar {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.detail-fields {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.field-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 12px;
    align-items: start;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
}

.field-row label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-muted);
    padding-top: 9px;
}

/* CR-091: small audience note under a view-mode field caption */
.field-row label .field-hint {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--color-muted);
    opacity: 0.8;
    margin-top: 2px;
}

.field-value {
    font-size: 0.92rem;
    color: var(--color-text);
    padding: 8px 0;
    min-height: 36px;
}

/* Modal */
/* More dropdown */
.more-dropdown { position: relative; }

.more-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 210px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    z-index: 300;
    overflow: hidden;
}

.more-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--color-text);
    transition: background 0.1s;
    white-space: nowrap;
}

.more-item:hover { background: var(--color-primary-light); color: var(--color-primary); }

/* CR-048 */
.more-item-danger { color: var(--color-danger); }
.more-item-danger:hover { background: var(--color-danger); color: var(--color-white); }
.more-divider { height: 1px; background: var(--color-border); margin: 4px 0; }

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-box {
    background: var(--color-white);
    border-radius: var(--border-radius);
    padding: 28px 32px;
    min-width: 320px;
    max-width: 480px;
    box-shadow: var(--shadow-md);
}

.modal-box h3 { margin: 0 0 12px; }
.modal-box p { color: var(--color-muted); margin: 0 0 20px; }

.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Blazor form validation */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; font-size: 0.8rem; }

/* ============================================================
   ADMIN MAINTENANCE TABLE (Addendum 7)
   ============================================================ */
.admin-table-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    max-width: 1400px;
}

.admin-table-head {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--color-border);
}
.admin-table-head .admin-table-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text);
}
/* Divider retired now that the Add button is pushed to the far right. */
.admin-head-divider { display: none; }

.btn-add-inline {
    margin-left: 24px; /* sufficient gap from the title; kept adjacent so it stays visible */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-primary);
    border: none;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    padding: 9px 18px;
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    transition: background 0.2s, opacity 0.15s;
}
.btn-add-inline:hover:not(:disabled) { background: var(--color-primary-dark); }
.btn-add-inline:disabled { opacity: 0.6; cursor: not-allowed; }

.admin-tbl-wrap { width: 100%; overflow-x: auto; }

.admin-tbl {
    width: max-content;
    min-width: 360px;
    max-width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.admin-tbl th {
    background: #f8fafc;
    color: var(--color-muted);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 24px;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.admin-tbl td {
    padding: 12px 24px;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem;
    vertical-align: middle;
    white-space: nowrap;
}
.admin-tbl tbody tr:hover td { background: #f8fafc; }

/* Used By count column */
.admin-tbl .col-usedby { text-align: center; width: 1%; white-space: nowrap; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.admin-tbl th.col-usedby { text-align: center; }

/* Action column hugs the data (not pinned far-right) and reveals on hover. */
.admin-tbl .col-actions { padding-left: 8px; width: 1%; }
.admin-tbl .action-group {
    display: inline-flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}
.admin-tbl tbody tr:hover .action-group,
.admin-tbl tbody tr:focus-within .action-group { opacity: 1; }

.btn-action {
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
}
.btn-action.btn-edit   { background: #f1f5f9; color: #3b82f6; border-color: #cbd5e1; }
.btn-action.btn-edit:hover   { background: #e2e8f0; }
.btn-action.btn-delete { background: #fef2f2; color: #ef4444; border-color: #fca5a5; }
.btn-action.btn-delete:hover { background: #fee2e2; }

/* Boolean badge */
.bool-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}
.bool-badge.badge-yes { background: #dcfce7; color: #166534; }
.bool-badge.badge-no  { background: #f1f5f9; color: #64748b; }
.bool-badge.badge-no-danger { background: #fef2f2; color: #dc2626; }
/* CR-053: Pet status badges */
.bool-badge.pet-status-active   { background: #dcfce7; color: #166534; }
.bool-badge.pet-status-draft    { background: #fef9c3; color: #854d0e; }
.bool-badge.pet-status-inactive { background: #fef2f2; color: #dc2626; }
/* CR-057: temporarily-unavailable badge (amber warning tone) */
.bool-badge.badge-temp-off { background: #fef3c7; color: #92400e; }

/* Prominent pet name in the Recurring Schedule page title */
.schedule-pet-name { font-size: 1.7rem; font-weight: 800; color: var(--color-primary); margin-left: 6px; }

/* ============================================================
   SCHEDULE DASHBOARD (Addendum 9)
   ============================================================ */
.sched-dash { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; padding: 8px; }
.sched-dash-title { font-size: 1.5rem; font-weight: 700; margin: 4px 0; }

.sched-filter {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 12px 16px;
}
.sched-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.sched-search { flex: 0 0 200px; min-width: 180px; }
.sched-filter-field { flex: 0 0 150px; }
.sched-filter-narrow { flex: 0 0 230px; }
.sched-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 0.9rem; font-weight: 600; }

/* Cards */
.sched-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: 140px 110px 170px 1fr;
    align-items: stretch;
    padding: 8px 16px;
}
.sched-cell { padding: 12px; display: flex; flex-direction: column; justify-content: center; }
.col-pet { align-items: center; text-align: center; border-right: 1px solid var(--color-border); }
.col-calendar { align-items: center; border-right: 1px solid var(--color-border); }
.col-service { border-right: 1px solid var(--color-border); justify-content: center; }

.sched-pet-avatar { width: 55px; height: 55px; border-radius: 50%; object-fit: cover; background: #eaeaea; margin-bottom: 6px; }
.sched-pet-avatar-empty { background: #eaeaea; display: inline-block; }
.sched-pet-name { font-weight: 700; font-size: 1.05rem; }

.cal-tile { width: 75px; height: 65px; display: flex; flex-direction: column; border: 3px solid #2e7d32; border-radius: 6px; overflow: hidden; }
.cal-top { background: #2e7d32; color: #fff; height: 20px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; }
.cal-day { background: #fff; flex: 1; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; letter-spacing: 0.5px; }

.sched-service-name { font-weight: 700; font-size: 1.1rem; margin-bottom: 4px; }
.sched-service-hours { font-size: 0.9rem; color: var(--color-muted); }

.sched-vol-wrap { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 4px 0 4px 12px; }
.sched-vol-row {
    display: grid;
    grid-template-columns: 1fr 180px;
    align-items: center;
    width: 100%;
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    transition: all 0.15s ease;
}
.sched-vol-row:hover { background: #f1f5f9; border-color: var(--color-border); }
.sched-vol-wrap .sched-vol-row:not(:last-child) { border-bottom: 1px dashed var(--color-border); border-radius: 8px 8px 0 0; }
.sched-vol-wrap .sched-vol-row:not(:first-child) { border-radius: 0 0 8px 8px; }

.v-profile { display: flex; flex-direction: column; }
.v-name { font-weight: 600; font-size: 1.05rem; margin-bottom: 2px; }
.v-arrival { font-size: 0.85rem; color: var(--color-muted); }
.v-timeline { display: flex; flex-direction: column; }
.timeline-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-muted); margin-bottom: 2px; }
.timeline-date { font-weight: 600; font-size: 0.95rem; }
.status-text-pending { color: #1e40af; }
.status-text-open { color: #e65100; }

.status-badge { display: inline-flex; align-items: center; align-self: flex-start; padding: 4px 12px; border-radius: 20px; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; }
.status-badge.open-slot { background: #fff3e0; color: #e65100; border: 1px solid #ffb74d; }
.status-badge.pending-start { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* Edit dialog */
.sched-edit { max-width: 540px; }
.sched-edit-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.sched-edit-identity { display: flex; align-items: center; gap: 12px; }
.sched-edit-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1px solid var(--color-border); background: #f3f4f6; }
.sched-edit-petname { font-size: 1.3rem; font-weight: 700; }
.sched-edit-day { background: #e0e7ff; color: var(--color-primary); font-size: 0.85rem; font-weight: 800; padding: 6px 14px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.05em; }

.sched-tabs { display: flex; background: #f3f4f6; padding: 4px; border-radius: 8px; border: 1px solid var(--color-border); margin-bottom: 16px; }
.sched-tab { flex: 1; text-align: center; cursor: pointer; padding: 8px 12px; font-size: 0.9rem; font-weight: 600; color: var(--color-muted); border: none; background: none; border-radius: 6px; }
.sched-tab.active { background: #1e293b; color: #fff; }

.sched-edit-body { display: flex; flex-direction: column; gap: 14px; }
.time-range { display: flex; align-items: center; gap: 8px; }
.time-sep { color: var(--color-muted); font-weight: 600; }

.sched-edit-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.sched-edit-actions { display: flex; gap: 12px; }
.btn-link-danger { background: none; border: none; color: #dc2626; font-weight: 600; font-size: 0.95rem; cursor: pointer; padding: 8px 0; }
.btn-link-danger:hover { color: #b91c1c; text-decoration: underline; }

/* CR-015 shift confirmation dialog */
.confirm-check { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0; cursor: pointer; }
.confirm-check input { margin-top: 3px; flex: 0 0 auto; }
.confirm-note { color: var(--color-text-muted, #6b7280); font-size: 0.88rem; margin-top: 4px; }
.confirm-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.btn-subtle { background: none; border: none; color: var(--color-text-muted, #6b7280); font-size: 0.85rem; cursor: pointer; padding: 6px 4px; }
.btn-subtle:hover:not(:disabled) { color: var(--color-text, #111827); text-decoration: underline; }

/* CR-016 shift withdrawal dialog */
.withdraw-help { color: var(--color-text-muted, #6b7280); font-size: 0.88rem; margin-top: 6px; }
.withdraw-bar { height: 8px; background: var(--color-border, #e5e7eb); border-radius: 4px; margin: 18px 0; }
.withdraw-confirm-text { font-weight: 700; margin: 0 0 4px; }
.withdraw-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }

/* CR-017 recurring shift limit indicator */
.recurring-limit { margin-left: auto; font-weight: 700; font-size: 0.95rem; color: #1976d2; }
.recurring-limit.full { color: #d32f2f; }

/* ============================================================
   VOLUNTEER PET PROFILE & SHIFT (Addendum 10)
   ============================================================ */
.vp-container {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 24px;
    height: calc(100vh - var(--header-height));
    padding: 16px 20px;
    box-sizing: border-box;
}

.vp-master { display: flex; flex-direction: column; border-right: 1px solid var(--color-border); padding-right: 18px; min-height: 0; }
.vp-search { margin-bottom: 0; }

/* CR-034 pet-list filters: row 1 = search box (+ clear-filter next to it on desktop),
   row 2 = filters (checkbox+icon, region) */
.vp-filter { margin-bottom: 14px; }
.vp-search-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.vp-searchbox { width: 100%; max-width: 200px; }   /* narrower so the clear button fits beside it */

.vp-filter-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vp-species { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.vp-species input { width: 16px; height: 16px; accent-color: #2563eb; cursor: pointer; margin: 0; }
.vp-species-icon { display: inline-flex; align-items: center; color: #2563eb; }   /* same blue as sidebar .nav-icon */
.vp-species-icon svg { width: 24px; height: 20px; }
.vp-species-icon img { height: 26px; width: auto; }
.vp-region { flex: 0 0 auto; min-width: 130px; }

/* clear-FILTER (funnel) button — same medium blue as the sidebar icons */
.vp-filter-clear { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; border: none; background: none; cursor: pointer; color: #2563eb; }
.vp-filter-clear svg { width: 22px; height: 22px; }
.vp-filter-clear:hover { color: #1d4ed8; }

/* mobile filter bar: full-width search row, then filter row (clear-filter far right, with room) */
.mpet-filter { padding: 10px 18px; display: flex; flex-direction: column; gap: 10px; }
.mpet-filter .vp-searchbox { width: 100%; max-width: none; }
.mpet-filter .vp-filter-row { flex-wrap: nowrap; }
.mpet-filter .vp-filter-clear { margin-left: auto; margin-right: 2px; }
.vp-pet-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }

.vp-pet-card { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; }
.vp-pet-card:hover { background: #f1f5f9; }
.vp-pet-card.selected { background: #eef2ff; border-color: #c7d2fe; }
.vp-avatar-wrap { position: relative; flex-shrink: 0; }
.vp-pet-badge { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #eaeaea; display: block; }
.vp-heart { position: absolute; bottom: -2px; right: -2px; color: #dc2626; font-size: 0.95rem; background: #fff; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.vp-pet-info { min-width: 0; }
.vp-pet-name { font-weight: 700; font-size: 1rem; }
.vp-pet-loc { font-size: 0.82rem; color: var(--color-muted); }

.vp-detail { min-height: 0; display: flex; flex-direction: column; }
.vp-tabbar { display: flex; gap: 8px; border-bottom: 1px solid var(--color-border); margin-bottom: 16px; }
.vp-tab { background: none; border: none; padding: 10px 18px; font-size: 1rem; font-weight: 600; color: var(--color-muted); cursor: pointer; border-bottom: 2px solid transparent; }
.vp-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* Coverage Volunteers tab: count badge + card list */
.vp-cov-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 8px; border-radius: 999px; background: #2563eb; color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 1; vertical-align: middle; }
.vp-coverage { padding: 4px 0; }
.vp-coverage-toolbar { margin-bottom: 14px; }
.vp-coverage-list { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.vp-coverage-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 8px; }
.vp-coverage-name { font-weight: 600; color: var(--color-text); }
.vp-coverage-del { background: none; border: none; cursor: pointer; font-size: 1.05rem; color: var(--color-danger); padding: 4px 8px; border-radius: 6px; }
.vp-coverage-del:hover { background: #fdecec; }

.vp-profile { display: grid; grid-template-columns: 280px 1fr; gap: 32px; overflow-y: auto; padding-right: 8px; }
.vp-profile-col1 { text-align: center; }
.vp-face { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; background: #eaeaea; margin: 0 auto 12px; display: block; }
.vp-detail-name { font-size: 1.6rem; font-weight: 800; margin-bottom: 16px; }
.vp-profile-col1 .vp-meta-label { text-align: left; }
.vp-profile-col1 .vp-meta-value { text-align: left; }
.vp-meta-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--color-muted); margin: 16px 0 4px; }
.vp-meta-value { font-size: 0.95rem; line-height: 1.5; }
.vp-full { width: 100%; max-width: 260px; height: auto; object-fit: contain; border-radius: 12px; margin-bottom: 8px; }
.vp-bio { font-size: 0.92rem; line-height: 1.6; color: var(--color-text); white-space: pre-wrap; }

.vp-shifts-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.vp-shift-list { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 8px; }
.vp-shift-card { grid-template-columns: 130px 100px 1fr 150px 120px; }
.vp-status-cell { border-right: 1px solid var(--color-border); justify-content: center; }
.vp-action-cell { justify-content: center; align-items: flex-start; }
.vp-status { font-weight: 700; font-size: 0.95rem; }
.vp-status-taken { color: #166534; }
.vp-status-mine { color: #c53030; }
.vp-status-avail { color: #dd6b20; }

/* ---- Mobile Pet List / Profile (Addendum 11) ---- */
.mpet-main { max-width: 520px; margin: 0 auto; }
.mpet-header {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    height: var(--header-height);
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    padding: 0 12px;
}
.mpet-title { font-weight: 800; font-size: 1.1rem; }
.icon-btn-spacer { width: 40px; }

.mpet-list { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.mpet-card {
    display: grid;
    grid-template-columns: 64px 1fr auto 20px;
    align-items: center; gap: 12px;
    padding: 14px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    cursor: pointer;
}
.mpet-card:active { background: #f8fafc; }
.mpet-avatar-wrap { position: relative; width: 64px; height: 64px; }
.mpet-badge { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #eaeaea; display: block; }
.mpet-info { min-width: 0; }
.mpet-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpet-loc { font-size: 0.85rem; color: var(--color-muted); }
.mpet-meta { display: flex; flex-direction: column; align-items: flex-end; }
.mpet-breed { font-size: 0.85rem; font-weight: 600; color: #475569; }
.mpet-age { font-size: 0.75rem; color: var(--color-muted); }
.mpet-chevron { color: #cbd5e1; font-weight: bold; justify-self: end; }

.mpet-card-panel { margin: 16px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 16px; padding: 18px; }
.mpet-tabbar { display: flex; border-bottom: 2px solid #f1f5f9; margin-bottom: 18px; }
.mpet-tab { flex: 1; padding: 12px; border: none; background: none; font-weight: 700; color: var(--color-muted); cursor: pointer; border-bottom: 2px solid transparent; }
.mpet-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.mpet-full { width: 100%; border-radius: 12px; margin-bottom: 14px; object-fit: cover; max-height: 300px; }
.mpet-detail-name { font-size: 1.5rem; font-weight: 800; margin-bottom: 6px; }

.mpet-shift-card { display: flex; align-items: center; gap: 14px; border: 1px solid var(--color-border); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.mpet-shift-mid { flex: 1; min-width: 0; }
.mpet-status { margin-top: 6px; font-weight: 700; font-size: 0.9rem; }
.mpet-shift-action { flex-shrink: 0; }

/* ============================================================
   SENIOR KUPUNA CALENDAR (Addendum 12) — large, senior-friendly
   ============================================================ */
.sencal { max-width: 480px; margin: 0 auto; padding: 20px 16px 48px; }
.sencal-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; }
.sencal-logo-img { height: 36px; width: auto; }   /* CR-043: match the Shift Calendar header logo (.logo-img) */
.sencal-logo-text { font-size: 1.25rem; font-weight: 800; color: var(--color-primary); }

/* CR-026: public legal pages (Privacy Policy, Terms) */
.public-doc { max-width: 760px; margin: 0 auto; padding: 28px 20px 64px; color: #333; line-height: 1.6; font-size: 15px; }
.public-doc-logo { text-align: center; margin-bottom: 24px; }
.public-doc-logo-img { height: 56px; width: auto; }
.public-doc h1 { font-size: 1.7rem; font-weight: 800; color: var(--color-primary); margin: 0 0 4px; }
.public-doc h2 { font-size: 1.15rem; font-weight: 700; color: #1a202c; margin: 28px 0 8px; }
.public-doc .public-doc-eff { color: #6b7280; margin: 0 0 20px; }
.public-doc p { margin: 0 0 12px; }
.public-doc ul { margin: 0 0 12px; padding-left: 22px; }
.public-doc li { margin: 4px 0; }
.public-doc a { color: var(--color-primary); }

.date-range-container {
    display: flex; flex-direction: column; gap: 12px;
    width: 100%; max-width: 440px; margin: 8px auto 16px; padding: 0 16px; box-sizing: border-box;
}
/* CR-043: compact mint gradient date-range badge (docs/markup/date-range.html).
   Reusable pill; replaces the previous white dual-calendar-card design (CR-040/defects_013/015/017)
   which was too visually heavy for the main content area. */
.drb-pill {
    align-self: center;
    /* CR-043: wider padding + gap so the pill widens to fit the larger (senior-friendly) text. */
    display: inline-flex; align-items: center; gap: 16px;
    padding: 9px 16px; border-radius: 12px;
    background: #e5fcef;   /* CR-044 §3.1: solid mint replaces the gradient */
    border: 1px solid rgba(187, 247, 208, 0.7);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.drb-icon {
    flex-shrink: 0; display: grid; place-items: center;
    height: 24px; width: 24px; border-radius: 8px;
    background: rgba(5, 150, 105, 0.15); color: #047857;
}
.drb-icon svg { height: 14px; width: 14px; }
.drb-date { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
/* CR-043: +2pt over the base sizes for readability by seniors. */
.drb-wd { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: rgba(4, 120, 87, 0.75); }
.drb-md { font-size: 17px; font-weight: 600; color: #0b1220; }
.drb-arrow { height: 12px; width: 14px; fill: rgba(4, 120, 87, 0.70); }
.refresh-row {
    /* CR-042 §3.1: timestamp sits to the right, 12px before the Refresh button. */
    display: flex; align-items: center; justify-content: flex-end; gap: 12px;
    color: #444444; font-family: Inter, sans-serif; font-size: 14px;
}
.refresh-timestamp { opacity: 0.85; }
.refresh-time-value { font-weight: 800; }   /* CR-043: bold the date/time value only, not "Refreshed" */
.refresh-button {
    width: 42px; height: 42px; background-color: #007BFF; border-radius: 50%; border: none;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.refresh-button:hover { background-color: #0069d9; }
.refresh-button:disabled { opacity: 0.6; }
.refresh-icon { color: #FFFFFF; }

/* CR-041: on the auto-reload calendars, never show Blazor's reconnect modal
   ("Attempting to connect…" / "Reload the page…") — the JS reloads silently instead. */
html.cal-autoreload #components-reconnect-modal { display: none !important; }

.sencal-badge { display: inline-block; padding: 12px 28px; border-radius: 999px; font-size: 1.3rem; font-weight: 800; color: #fff; margin-bottom: 14px; }
.sencal-badge.badge-covered { background: #2e9e4f; }
.sencal-badge.badge-none { background: #94a3b8; }

.sencal-counts { display: flex; gap: 40px; margin-bottom: 22px; }
.sencal-count { text-align: center; }
.count-num { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.count-label { font-size: 1.1rem; font-weight: 700; margin-top: 4px; }
.count-open { color: #e2660a; }
.count-covered { color: #2e9e4f; }
.count-canceled { color: var(--color-danger); }   /* CR-042 */

.sencal-cards { display: flex; flex-direction: column; gap: 16px; }
.sencal-card {
    display: flex; gap: 16px; align-items: flex-start;
    background: #fff; border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 18px;
}
/* CR-044 §3.4: badge tinted by shift status via --color-status (set per-card inline). */
.sencal-cal {
    flex-shrink: 0; width: 88px;
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    display: flex; flex-direction: column; text-align: center;
}
.sencal-cal-top { background: var(--color-status); color: #fff; font-weight: 800; font-size: 0.95rem; padding: 4px 0; letter-spacing: 1px; }
.sencal-cal-day { font-size: 2.4rem; font-weight: 800; color: var(--color-status); line-height: 1.1; padding: 6px 0 0; }
.sencal-cal-dow { font-size: 0.95rem; font-weight: 700; color: var(--color-status); padding-bottom: 6px; letter-spacing: 1px; }

.sencal-body { flex: 1; min-width: 0; }
.sencal-petrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* CR-040 3.1: Pet Name + Service Window use the smaller font; Volunteer + Arrival use the larger. */
.sencal-petname { font-size: 1.25rem; font-weight: 700; color: #1a1a1a; }
.sencal-service-badge { background: #dbeafe; color: #1d4ed8; font-weight: 800; font-size: 0.85rem; padding: 4px 10px; border-radius: 6px; letter-spacing: 0.5px; }
.sencal-time { font-size: 1.25rem; font-weight: 700; color: #1a1a1a; margin-top: 4px; }
.sencal-divider { height: 2px; background: #9ca3af; opacity: 0.5; margin: 10px 0; max-width: 280px; }
.sencal-status { font-size: 1.4rem; font-weight: 800; }
.sencal-status.open { color: #e2660a; }
.sencal-status.covered { color: #2e9e4f; }
.sencal-status.canceled { color: var(--color-danger); }   /* CR-042 */
.sencal-volunteer { font-size: 1.4rem; font-weight: 800; color: #1a1a1a; margin-top: 4px; }
.sencal-arrival { font-size: 1.5rem; font-weight: 800; color: #1a1a1a; margin-top: 2px; }
/* CR-045: "Arrival" label — Pet-Name-sized (1.25rem), gray, gap before the window. */
.sencal-arrival-label { font-size: 1.25rem; color: #6b7280; margin-right: 12px; }
.sencal-phone { font-size: 1.4rem; font-weight: 800; color: #3730a3; text-decoration: none; display: inline-block; margin-top: 4px; }

.sencal-empty, .sencal-loading { padding: 40px 16px; text-align: center; font-size: 1.2rem; color: var(--color-muted); }

/* ============================================================
   MOBILE HEADER + MENU PAGE (Addendum 6)
   ============================================================ */
.mobile-only { display: none; }

.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
}
.icon-btn:hover { background: rgba(0,0,0,0.05); text-decoration: none; }

.mobile-side { align-items: center; flex: 1; }
.mobile-side-left { justify-content: flex-start; }
.mobile-side-right { justify-content: flex-end; }
.mobile-logo { flex: 0 0 auto; }

/* Menu (Tools) page */
.menu-page { max-width: 500px; margin: 0 auto; padding: 8px 16px 40px; }

.menu-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-muted);
    margin: 22px 0 12px 4px;
}

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

.menu-tile {
    display: flex;
    align-items: center;
    min-height: 85px;
    padding: 20px 16px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--color-text);
    transition: transform 0.1s ease, background-color 0.1s ease;
}
.menu-tile:hover { text-decoration: none; color: var(--color-text); }
.menu-tile:active { transform: scale(0.98); background: #fafafa; }

.menu-tile-icon {
    width: 24px;
    height: 24px;
    margin-right: 14px;
    flex-shrink: 0;
    stroke: var(--color-primary);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.menu-tile-label { font-size: 15px; font-weight: 600; line-height: 1.3; }

.menu-signout-form { margin-top: 28px; }
.menu-signout-btn {
    width: 100%;
    padding: 16px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    color: var(--color-primary);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}
.menu-signout-btn:hover { background: #fafafa; }

/* ============================================================
   RESPONSIVE – MOBILE
   ============================================================ */
@media (max-width: 768px) {
    .header-inner { justify-content: space-between; }
    .header-logo { justify-content: center; }
    .desktop-only { display: none !important; }
    .mobile-only { display: flex; }

    /* Home page is desktop-focused; on small screens let it stack and
       size to content rather than locking to the viewport. */
    .home-page { height: auto; overflow: visible; }
    .home-hero { min-height: 40vh; }
    .home-actions { height: auto; padding: 20px 16px; }
    .home-btn-container { flex-direction: column; align-items: center; gap: 16px; }
    .home-btn { width: 100%; max-width: 450px; min-width: 0; }

    .login-card { padding: 28px 20px; }
}

/* Blazor error UI */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after { content: "An error has occurred."; }

/* ============================================================
   DETAIL PAGE (My Profile, My Preferences – standalone pages)
   ============================================================ */
.detail-page {
    max-width: 900px;
    margin: 24px auto;
    background: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Override toolbar layout for standalone detail pages */
.detail-page .detail-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid var(--color-border);
}

.toolbar-left { display: flex; gap: 8px; align-items: center; }
.toolbar-right { display: flex; gap: 8px; align-items: center; }

.detail-form { padding: 24px; }

/* Narrow single-column detail pages (My Profile, Settings) — also mobile-friendly. */
.detail-page-narrow { max-width: 520px; }

/* Single-column stacked form layout. */
.form-stack { display: flex; flex-direction: column; gap: 4px; max-width: 440px; }
.form-stack .form-group { width: 100%; }

.field-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-muted);
    margin-bottom: 4px;
}

.inline-fields { display: flex; gap: 16px; align-items: flex-start; }

/* Prominent, caption-less name shown at the top of My Profile. */
.profile-name-hero {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-full-row { grid-column: 1 / -1; }
.form-value { font-size: 0.92rem; color: var(--color-text); padding: 9px 0; display: block; }

.section-title {
    font-weight: 700;
    font-size: 0.95rem;
    padding: 16px 24px 8px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    margin-bottom: 0;
}

.form-control-sm {
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.85rem;
    background: var(--color-white);
    color: var(--color-text);
}

/* Input width categories — based on DB column width */
.input-sm { max-width: 160px; }
.input-md { max-width: 280px; }

/* ============================================================
   ADMIN SUBPAGE (Recurring Schedule, single-column admin pages)
   ============================================================ */
.admin-subpage {
    background: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.page-header-bar {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-border);
    background: #f8f9fa;
    gap: 12px;
}

.page-header-left { flex: 0 0 auto; }
.page-header-title { flex: 1; text-align: center; font-weight: 700; font-size: 1rem; }
.page-header-right { flex: 0 0 auto; display: flex; gap: 8px; }

/* Data table */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
    padding: 10px 12px;
    text-align: left;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    border-bottom: 2px solid var(--color-border);
    background: #f8f9fa;
}
.data-table td { padding: 10px 12px; font-size: 0.9rem; border-bottom: 1px solid #f0f0f0; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr.row-selected td { background: var(--color-primary-light); }
.data-table .col-check { width: 36px; }

.loading { padding: 24px; text-align: center; color: var(--color-muted); }
.empty-state { padding: 48px 24px; text-align: center; color: var(--color-muted); font-size: 0.95rem; }

/* ============================================================
   MODAL OVERLAY (Shift Calendar style – centers dialog)
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modal-dialog {
    background: var(--color-white);
    border-radius: var(--border-radius);
    padding: 28px 32px;
    min-width: 320px;
    max-width: 480px;
    width: 100%;
    box-shadow: var(--shadow-md);
}

.modal-dialog h3 { margin: 0 0 12px; font-size: 1.05rem; }
.modal-dialog p { color: var(--color-muted); margin: 0 0 20px; font-size: 0.9rem; }
.modal-dialog .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
.modal-dialog.modal-lg { max-width: 600px; }

/* defect_032: a centered picker dialog holding a long list (e.g. Add Coverage
   Volunteer) must stay inside the viewport and scroll its own list instead of
   growing past the top and bottom of the screen, where it can't be reached. */
.modal-dialog.modal-picker {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
    overflow: hidden;
}
.modal-dialog.modal-picker > .drawer-header { flex-shrink: 0; }
.modal-dialog.modal-picker > .form-control { flex-shrink: 0; margin-top: 12px; }
.modal-dialog.modal-picker > .drawer-list { min-height: 0; }

/* ============================================================
   SHIFT CALENDAR PAGE
   ============================================================ */
.shift-calendar-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 16px;
}

.sc-header-panel {
    background: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sc-timestamp { font-size: 0.78rem; color: var(--color-muted); display: inline-flex; align-items: center; gap: 6px; }
.sc-refresh-btn { background: none; border: none; color: #2563eb; cursor: pointer; padding: 2px; display: inline-flex; align-items: center; }
.sc-refresh-btn svg { width: 18px; height: 18px; }
.sc-refresh-btn:hover { color: #1d4ed8; }
.sc-filter-row { display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.sc-filter-left { display: flex; gap: 12px; align-items: center; }
.sc-filter-right { display: flex; align-items: center; }
.sc-open-badge { background: #dc2626; color: #fff; font-weight: 700; font-size: 0.8rem; min-width: 22px; height: 22px; border-radius: 999px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; }
.sc-pet-filter { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.9rem; background: #fff; max-width: 220px; }

/* Toggle switch for Open Only / Favorites Only */
.toggle-control {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
}

.toggle-control input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-track {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    background: #ccc;
    border-radius: 22px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.switch-track::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
}

.toggle-control input:checked + .switch-track { background: var(--color-primary); }
.toggle-control input:checked + .switch-track::before { transform: translateX(18px); }
.toggle-control.toggle-disabled { opacity: 0.5; cursor: not-allowed; }

.sc-loading { padding: 40px; text-align: center; color: var(--color-muted); display: flex; align-items: center; justify-content: center; gap: 8px; }
.sc-empty { padding: 48px 24px; text-align: center; color: var(--color-muted); font-size: 0.95rem; }

.sc-loading .spinner-sm {
    border-color: rgba(0,0,0,0.15);
    border-top-color: var(--color-primary);
}

.sc-cards { display: flex; flex-direction: column; gap: 12px; }

/* Schedule card */
.schedule-card {
    background: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    display: flex;
    overflow: hidden;
}

.col-pet {
    width: 120px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: #f8f9fa;
    border-right: 1px solid var(--color-border);
}

.pet-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.pet-avatar-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.pet-name {
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
    margin-top: 8px;
    color: var(--color-text);
}

.pet-divider {
    width: 80%;
    height: 1px;
    background: var(--color-border);
    margin: 8px 0;
}

.service-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    background: #e3f2fd;
    color: #1565c0;
    border-radius: 12px;
    padding: 2px 8px;
    text-align: center;
    white-space: nowrap;
}


.col-schedule {
    flex: 1;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Calendar date tile — CR-047: exact markup from docs/markup/change_request_047.css.
   var(--color-status) is set per-card inline from the shift status. */
.calendar-tile {
  width: 120px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  font-family: sans-serif;
  display: inline-block;
}

.calendar-upper {
  background-color: var(--color-status);
  color: white;
  text-align: center;
  padding: 3px 0;
  font-weight: bold;
  font-size: 0.7rem;
}

.calendar-lower {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 4px;
  gap: 8px;
}

.calendar-date {
  font-weight: bold;
  color: var(--color-status);
  font-size: 1.4rem;
}

.calendar-dow {
  color: var(--color-status);
  font-weight: bold;
  font-size: 0.7rem;
  white-space: nowrap;
}

.time-range { font-size: 0.88rem; color: var(--color-muted); }

.status-row { display: flex; align-items: center; gap: 8px; }

.status-text {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-icon { font-size: 0.85rem; }

.status-text.open { color: var(--color-accent); }
.status-text.volunteering { color: var(--color-danger); }
.status-text.myshift { color: #2563eb; }
/* "My Shift" keeps its blue label but shows the same green checkmark as Covered. */
.status-text.myshift .status-icon { color: var(--color-primary); }
.status-text.covered { color: var(--color-primary); }
/* CR-019: canceled shift — red "✕ Canceled". */
.status-text.canceled { color: var(--color-danger); }
/* CR-021: cancellation reason shown under the canceled badge. */
.cancel-reason { font-size: 0.82rem; color: var(--color-text-muted, #6b7280); font-style: italic; margin-top: 2px; }

.volunteer-name { font-size: 0.8rem; color: var(--color-muted); }

.dropdown-arrow {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-muted);
    font-size: 1.1rem;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
    transition: background 0.1s;
}
.dropdown-arrow:hover { background: #f0f0f0; color: var(--color-text); }

.card-dropdown {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #f8f9fa;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 4px;
}

.card-dropdown .dropdown-item {
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    transition: background 0.1s;
}
.card-dropdown .dropdown-item:hover { background: var(--color-primary-light); color: var(--color-primary); }
.card-dropdown .dropdown-item.text-danger { color: var(--color-danger); }
.card-dropdown .dropdown-item.text-danger:hover { background: #ffebee; }

.text-danger { color: var(--color-danger) !important; }

.action-btn {
    align-self: flex-start;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-volunteer { background: #FFC107; color: #fff; }
.btn-volunteer:hover { background: #e0a800; }

/* Admin: arrival window shown under the volunteer name */
.arrival-window { font-size: 0.78rem; color: var(--color-muted); }

/* Arrival-time popup (iOS-style card) */
.arrival-popup { background: #fff; border-radius: 16px; width: 340px; max-width: 92vw; overflow: hidden; box-shadow: 0 12px 44px rgba(0,0,0,0.28); }
.arrival-popup-bar { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; border-bottom: 1px solid #ececec; }
.arrival-cancel { background: none; border: none; color: #2563eb; font-size: 1rem; cursor: pointer; padding: 0; }
.arrival-done { background: none; border: none; color: #e8740c; font-weight: 700; font-size: 1rem; cursor: pointer; padding: 0; }
.arrival-done:disabled { opacity: 0.5; cursor: default; }
.arrival-title { text-align: center; font-weight: 700; font-size: 1rem; color: #1a1a1a; padding: 16px 16px 2px; }
.arrival-fields { display: grid; grid-template-columns: auto 1fr; gap: 16px 14px; align-items: center; padding: 14px 26px 22px; }
.arrival-fields label { font-weight: 600; color: #555; }
.arrival-error { margin: 0 22px 18px; }

/* Owner-info training banner */
.sc-training-banner {
    background: #eaf2fd;
    border: 1px solid #cfe0f7;
    border-radius: 12px;
    padding: 14px 18px 10px;
    margin: 0 0 14px;
}
.sc-training-top { display: flex; align-items: center; gap: 10px; }
.sc-training-icon { font-size: 1.25rem; line-height: 1; }
.sc-training-text { font-weight: 700; color: #1d4ed8; font-size: 1rem; }
.sc-training-divider { border-top: 1px solid #cfe0f7; margin: 10px 0 8px; }
.sc-training-dismiss {
    display: flex; align-items: center; gap: 8px;
    margin-left: auto;
    background: none; border: none; cursor: pointer;
    color: #334155; font-size: 0.95rem; padding: 0;
}
.sc-training-x { font-size: 0.95rem; color: #334155; }
.sc-training-dismiss:hover { color: #0f172a; }

/* Pet badge is clickable (opens owner-info popup) */
.pet-avatar-clickable { cursor: pointer; transition: transform 0.08s ease, box-shadow 0.08s ease; }
.pet-avatar-clickable:hover { transform: scale(1.04); box-shadow: 0 0 0 3px rgba(37,99,235,0.35); }

/* Owner Info ("Kupuna Info") popup */
.owner-info-popup {
    background: #fff;
    border-radius: 16px;
    width: 430px;
    max-width: 94vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 14px 48px rgba(0,0,0,0.30);
}
.oi-header {
    display: flex; align-items: center; justify-content: center; position: relative;
    padding: 14px 18px; border-bottom: 1px solid #ececec;
}
.oi-title { font-weight: 700; font-size: 1.1rem; color: #1a1a1a; }
.oi-close {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; font-size: 1.1rem; color: #6b7280;
}
.oi-identity { display: flex; align-items: center; gap: 18px; padding: 18px; border-bottom: 1px solid #f0f0f0; }
.oi-pet { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.oi-pet-badge { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.oi-pet-badge-empty { display: flex; align-items: center; justify-content: center; background: #e8e8e8; font-size: 1.8rem; }
.oi-pet-name { font-size: 0.85rem; font-weight: 600; color: #333; }
.oi-owner { flex: 1; }
.oi-owner-name { font-size: 1.2rem; font-weight: 700; color: #1a1a1a; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0; margin-bottom: 10px; }
.oi-owner-tel { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; color: #333; }
.oi-tel-icon { color: #16a34a; }
.oi-actions { display: flex; gap: 14px; padding: 16px 18px; }
.oi-action-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 10px; font-weight: 700; font-size: 1rem; text-decoration: none;
    padding: 12px 16px; color: #fff;
}
.oi-action-btn svg { width: 18px; height: 18px; flex-shrink: 0; color: #fff; }
.oi-call { flex: 1; background: #16a34a; }
.oi-call:hover { background: #138a3e; }
.oi-text { flex: 1; background: #2563eb; }
.oi-text:hover { background: #1d4ed8; }
.oi-section { padding: 14px 18px; border-top: 1px solid #f0f0f0; }
.oi-section-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; }
.oi-pin { color: #374151; }
.oi-address { color: #4b5563; font-size: 1.1rem; line-height: 1.6; padding-left: 26px; }
.oi-maps-row { display: flex; justify-content: flex-end; margin-top: 12px; }
/* Same width as the Text button (flex:1 of the 2-button row with a 14px gap → 50% - 7px). */
.oi-maps { background: #2563eb; width: calc(50% - 7px); }
.oi-maps:hover { background: #1d4ed8; }
.oi-note { color: #4b5563; line-height: 1.5; padding-left: 26px; white-space: pre-wrap; }

/* Pagination */
.sc-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px;
    font-size: 0.9rem;
    color: var(--color-muted);
}

/* Bottom drawer (Assign Volunteer) */
.bottom-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 500;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.bottom-drawer {
    background: var(--color-white);
    width: 100%;
    max-width: 600px;
    border-radius: 12px 12px 0 0;
    box-shadow: var(--shadow-md);
    padding-bottom: 24px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    font-weight: 700;
    font-size: 1rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.drawer-header .form-control {
    margin: 12px 20px;
}

.drawer-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--color-muted);
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.1s;
}
.drawer-close:hover { background: #f0f0f0; color: var(--color-text); }

.bottom-drawer > .form-control { margin: 12px 20px 0; flex-shrink: 0; }

.drawer-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.drawer-item {
    padding: 12px 20px;
    font-size: 0.9rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.1s;
}
.drawer-item:last-child { border-bottom: none; }
.drawer-item:hover { background: var(--color-primary-light); color: var(--color-primary); }

/* Toast notification */
.toast-msg {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #323232;
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 0.9rem;
    z-index: 1000;
    box-shadow: var(--shadow-md);
    white-space: nowrap;
    pointer-events: none;
}

/* ── Report pages ─────────────────────────────────────── */
.report-filter-bar {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
    padding: 16px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.report-count {
    padding: 8px 16px;
    font-size: 0.85rem;
    color: var(--color-muted);
    text-align: right;
}

/* ── Data table action column ─────────────────────────── */
.data-table .col-actions { width: 120px; text-align: right; white-space: nowrap; }
.data-table .col-actions .btn { margin-left: 4px; }