/* ========================================================================== PetCare App Theme — shared design system Migrated from the approved UI mockup (petcare_preview.html). Include this on every page's , replacing style.css / pets_list_theme.css / simple_datatable.css / MDB. Bootstrap 5 + Bootstrap Icons + Inter stay as-is. ========================================================================== */ :root{ --bg:#F5F7FA; --surface:#FFFFFF; --border:#E3E7EE; --ink:#1E2430; --ink-soft:#6B7482; --ink-faint:#9AA3B0; --primary:#2F6FE4; --primary-dark:#1F52B5; --primary-soft:#EAF1FE; --success:#2E9E62; --success-soft:#E7F6EE; --warning:#D89A2A; --warning-soft:#FBF2E1; --danger:#D14343; --danger-soft:#FCEAEA; --purple:#7C5CD6; --purple-soft:#F1ECFB; --teal:#0E9F91; --teal-dark:#0B7A70; --teal-soft:#E1F5F3; --pink:#D6568C; --pink-dark:#A83D68; --pink-soft:#FBEAF1; --info:#2FA8D8; --info-dark:#1D7FA8; --info-soft:#E6F4FA; --navy:#2C4A7C; --navy-dark:#1E3457; --navy-soft:#E7ECF4; --warning-dark:#96721C; --success-dark:#1F6E44; --purple-dark:#5B3FAE; --danger-dark:#A62E2E; --gray-soft:#EEF1F5; --radius:10px; } *{box-sizing:border-box;} body{ background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:14.5px; -webkit-font-smoothing:antialiased; } a{text-decoration:none;color:inherit;} /* ===== Top Navbar ===== */ .topbar{ background:var(--surface); border-bottom:1px solid var(--border); padding:0 28px; display:flex; align-items:center; justify-content:space-between; height:62px; position:sticky; top:0; z-index:1000; } .brand{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:18px; letter-spacing:-0.01em; color:var(--ink); } .brand .brand-mark{ width:30px;height:30px;border-radius:8px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; } .navlinks{ display:flex; gap:4px; height:100%; flex-wrap:wrap; } .navlinks .navlink{ display:flex; align-items:center; height:100%; padding:0 15px; font-weight:600; font-size:13.5px; color:var(--ink-soft); border-bottom:2.5px solid transparent; cursor:pointer; white-space:nowrap; } .navlinks .navlink:hover{ color:var(--ink); } .navlinks .navlink.active{ color:var(--primary); border-bottom-color:var(--primary); } .topbar-right{ display:flex; align-items:center; gap:18px; } /* ===== Mobile nav toggle ===== */ .navbar-toggle{ display:none; background:none; border:1px solid var(--border); border-radius:8px; width:38px; height:38px; align-items:center; justify-content:center; font-size:18px; color:var(--ink); cursor:pointer; } .navbar-toggle:hover{ background:var(--gray-soft); } @media (max-width:860px){ .navbar-toggle{ display:flex; } .navlinks{ display:none; position:absolute; top:62px; left:0; right:0; flex-direction:column; gap:0; height:auto; background:var(--surface); border-bottom:1px solid var(--border); box-shadow:0 12px 24px rgba(30,36,48,0.08); z-index:999; } .navlinks.open{ display:flex; } .navlinks .navlink{ height:auto; padding:13px 20px; width:100%; border-bottom:1px solid var(--border-soft, var(--border)); border-left:2.5px solid transparent; } .navlinks .navlink.active{ border-bottom-color:var(--border); border-left-color:var(--primary); background:var(--primary-soft); } .brand span, .brand{ font-size:16px; } .user-chip .uname{ display:none; } } @media (max-width:480px){ .topbar{ padding:0 14px; } main.app-main{ padding:18px 14px 50px; } } .icon-btn{ width:34px;height:34px;border-radius:8px; display:flex;align-items:center;justify-content:center; color:var(--ink-soft); font-size:16px; cursor:pointer; position:relative; } .icon-btn:hover{ background:var(--gray-soft); } .icon-btn .ping{ position:absolute; top:5px; right:6px; width:7px;height:7px; border-radius:50%; background:var(--danger); border:1.5px solid #fff; } /*.user-chip{ display:flex; align-items:center; gap:9px; cursor:pointer; } */ .icon-btn{ width:34px;height:34px;border-radius:8px; display:flex;align-items:center;justify-content:center; color:var(--ink-soft); font-size:16px; cursor:pointer; position:relative; } .icon-btn:hover{ background:var(--gray-soft); } .icon-btn .ping{ position:absolute; top:5px; right:6px; width:7px;height:7px; border-radius:50%; background:var(--danger); border:1.5px solid #fff; } /* ===== Toolbar mobile stacking (benefits pets_list, manage_users, pet_owner_list, medical) ===== */ @media (max-width:480px){ .toolbar{ flex-direction:column; align-items:stretch; } .toolbar > *{ width:100%; } .search-box{ width:100% !important; } .toolbar-actions{ width:100%; justify-content:space-between; } } .toolbar-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } /* ===== Login page ===== */ .login-body{ background:var(--bg); } .login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; } .login-card{ width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px 30px; box-shadow:0 12px 32px rgba(30,36,48,0.06); } .login-brand{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:16px; color:var(--ink); margin-bottom:26px; } .login-brand .brand-mark{ width:30px;height:30px;border-radius:8px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; } .login-title{ font-size:21px; font-weight:800; letter-spacing:-0.01em; margin:0 0 4px; color:var(--ink); } .login-subtitle{ font-size:13.5px; color:var(--ink-soft); margin:0 0 22px; } .login-error{ display:flex; align-items:center; gap:8px; background:var(--danger-soft); color:#A62E2E; border-radius:8px; padding:10px 14px; font-size:13px; font-weight:600; margin-bottom:18px; } .login-submit{ width:100%; justify-content:center; margin-top:22px; padding:10px 16px; font-size:14px; } .login-footnote{ display:flex; align-items:flex-start; gap:7px; margin-top:22px; padding-top:18px; border-top:1px solid var(--border); font-size:12.5px; color:var(--ink-faint); line-height:1.5; } .login-footnote i{ margin-top:1px; flex-shrink:0; } /* ===== Profile page ===== */ .user-profile-photo-wrap{ position:relative; width:110px; height:110px; flex-shrink:0; } .user-profile-photo{ width:110px; height:110px; border-radius:50%; overflow:hidden; background:var(--gray-soft); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:38px; color:var(--ink-faint); } .user-profile-photo img{ width:100%; height:100%; object-fit:cover; } .photo-upload-btn{ position:absolute; bottom:0; right:0; width:32px; height:32px; border-radius:50%; background:var(--primary); color:#fff; border:2px solid var(--surface); display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; } .photo-upload-btn:hover{ background:var(--primary-dark); } .profile-photo-remove{ background:none; border:none; padding:0; color:var(--danger); font-size:12.5px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:5px; } .profile-photo-remove:hover{ text-decoration:underline; } /* ===== User menu (chip + dropdown) ===== */ .user-menu{ position:relative; } .user-chip{ display:flex; align-items:center; gap:9px; cursor:pointer; background:none; border:none; padding:4px 6px; border-radius:8px; color:inherit; font-family:inherit; } .user-chip:hover{ background:var(--gray-soft); } .user-chip[aria-expanded="true"]{ background:var(--gray-soft); } .avatar{ width:32px;height:32px;border-radius:50%; background:var(--primary-dark); color:#fff; display:flex;align-items:center;justify-content:center; font-weight:700; font-size:12.5px; flex-shrink:0; } .user-chip .uname{ font-weight:600; font-size:13.5px; } .user-chip-caret{ font-size:10px; color:var(--ink-faint); transition:transform 0.15s ease; } .user-chip[aria-expanded="true"] .user-chip-caret{ transform:rotate(180deg); } .user-dropdown{ display:none; position:absolute; right:0; top:calc(100% + 8px); min-width:170px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 12px 24px rgba(30,36,48,0.12); overflow:hidden; z-index:1001; } .user-dropdown.open{ display:block; } .user-dropdown-item{ display:flex; align-items:center; gap:9px; padding:10px 14px; font-size:13.5px; font-weight:600; color:var(--ink); } .user-dropdown-item:hover{ background:var(--gray-soft); } .user-dropdown-item i{ color:var(--ink-soft); font-size:15px; } .avatar{ width:32px;height:32px;border-radius:50%; background:var(--primary-dark); color:#fff; display:flex;align-items:center;justify-content:center; font-weight:700; font-size:12.5px; } .user-chip .uname{ font-weight:600; font-size:13.5px; } main.app-main{ max-width:1320px; margin:0 auto; padding:28px 28px 70px; } .page-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:10px; } .page-head h1{ font-size:23px; font-weight:800; letter-spacing:-0.01em; margin:0 0 3px; } .page-head p{ margin:0; color:var(--ink-soft); font-size:13.5px; } .btn-app-primary{ background:var(--primary); border:1px solid var(--primary); color:#fff; font-weight:600; font-size:13.5px; padding:9px 16px; border-radius:8px; display:inline-flex; align-items:center; gap:6px; } .btn-app-primary:hover{ background:var(--primary-dark); color:#fff; } .btn-app-secondary{ background:#fff; border:1px solid var(--border); color:var(--ink); font-weight:600; font-size:13.5px; padding:9px 16px; border-radius:8px; display:inline-flex; align-items:center; gap:6px; } .btn-app-secondary:hover{ background:var(--gray-soft); } /* ===== Cards ===== */ .card-app{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; } .card-app h2.card-title, .card-app h3.card-title{ font-size:15px; font-weight:700; margin:0 0 14px; display:flex; align-items:center; gap:8px; } .card-app.h-100{ height:100%; } .card-title-caption{ font-size:12px; font-weight:500; color:var(--ink-faint); margin-left:6px; } .care-count-badge{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--ink-soft); color:#fff; font-size:12.5px; font-weight:700; } .care-title-divider{ color:var(--border); font-weight:400; margin:0 2px; } .care-title-caption{ font-size:13.5px; font-weight:500; color:var(--ink-soft); } /* ===== Grids ===== */ .stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; } .dash-grid{ display:grid; grid-template-columns:1.6fr 1fr 1.3fr; gap:16px; align-items:stretch; } .duo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; } .trio-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; align-items:stretch; } @media (max-width:900px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } .dash-grid, .duo-grid, .trio-grid{ grid-template-columns:1fr; } } .stat-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; } .stat-card .stat-icon{ width:34px;height:34px;border-radius:8px; display:flex;align-items:center;justify-content:center; font-size:16px; margin-bottom:12px; } .stat-card .stat-num{ font-size:26px; font-weight:800; letter-spacing:-0.02em; } .stat-card .stat-label{ font-size:12.5px; color:var(--ink-soft); font-weight:500; margin-top:2px;} .stat-icon.blue{ background:var(--primary-soft); color:var(--primary); } .stat-icon.amber{ background:var(--warning-soft); color:var(--warning); } .stat-icon.green{ background:var(--success-soft); color:var(--success); } .stat-icon.purple{ background:var(--purple-soft); color:var(--purple); } .stat-icon.red{ background:var(--danger-soft); color:var(--danger); } /* ===== Badges ===== */ .badge-app{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; letter-spacing:0.01em; padding:4px 10px; border-radius:20px; text-transform:capitalize; } .badge-foster{ background:var(--warning-soft); color:#96721C; } .badge-available{ background:var(--primary-soft); color:var(--primary-dark); } .badge-adopted{ background:var(--success-soft); color:#1F6E44; } .badge-personal{ background:var(--gray-soft); color:var(--ink-soft); } .badge-deceased{ background:var(--gray-soft); color:var(--ink-soft); } .badge-pending{ background:var(--purple-soft); color:#5B3FAE; } .badge-active{ background:var(--success-soft); color:#1F6E44; } .badge-overdue{ background:var(--danger-soft); color:#A62E2E; } .badge-complete{ background:var(--gray-soft); color:var(--ink-soft); } .badge-current{ background:var(--success-soft); color:#1F6E44; } .dot{ width:6px;height:6px;border-radius:50%; display:inline-block; } .dot.red{background:var(--danger);} .dot.amber{background:var(--warning);} .dot.green{background:var(--success);} .badge-primary{ background:var(--primary-soft); color:var(--primary-dark); } .badge-purple { background:var(--purple-soft); color:var(--purple-dark); } .badge-warning{ background:var(--warning-soft); color:var(--warning-dark); } .badge-success{ background:var(--success-soft); color:var(--success-dark); } .badge-teal { background:var(--teal-soft); color:var(--teal-dark); } .badge-pink { background:var(--pink-soft); color:var(--pink-dark); } .badge-info { background:var(--info-soft); color:var(--info-dark); } .badge-danger { background:var(--danger-soft); color:var(--danger-dark); } .badge-gray { background:var(--gray-soft); color:var(--ink-soft); } .badge-navy{ background:var(--navy-soft); color:var(--navy-dark); } .swatch-navy{ background:var(--navy); } .swatch-primary{ background:var(--primary); } .swatch-purple { background:var(--purple); } .swatch-warning{ background:var(--warning); } .swatch-success{ background:var(--success); } .swatch-teal { background:var(--teal); } .swatch-pink { background:var(--pink); } .swatch-info { background:var(--info); } .swatch-danger { background:var(--danger); } .swatch-gray { background:var(--ink-soft); } /* ===== Palette text-only + icon-circle variants (used by medical.php's filter labels and calendar day-view icons) ===== */ .text-primary{ color:var(--primary-dark); } .text-purple { color:var(--purple-dark); } .text-warning{ color:var(--warning-dark); } .text-success{ color:var(--success-dark); } .text-teal { color:var(--teal-dark); } .text-pink { color:var(--pink-dark); } .text-info { color:var(--info-dark); } .text-danger { color:var(--danger-dark); } .text-gray { color:var(--ink-soft); } .text-navy { color:var(--navy-soft); } .icon-bg-primary{ background:var(--primary-soft); color:var(--primary); } .icon-bg-purple { background:var(--purple-soft); color:var(--purple); } .icon-bg-warning{ background:var(--warning-soft); color:var(--warning); } .icon-bg-success{ background:var(--success-soft); color:var(--success); } .icon-bg-teal { background:var(--teal-soft); color:var(--teal); } .icon-bg-pink { background:var(--pink-soft); color:var(--pink); } .icon-bg-info { background:var(--info-soft); color:var(--info); } .icon-bg-danger { background:var(--danger-soft); color:var(--danger); } .icon-bg-gray { background:var(--gray-soft); color:var(--ink-soft); } .icon-bg-navy { background:var(--navy-soft); color:var(--navy-dark); } /* ===== Card header row (title + right-aligned meta, e.g. a date) ===== */ .card-head-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .card-head-row .card-title{ margin-bottom:0; } .card-date{ font-size:12.5px; color:var(--ink-soft); font-weight:600; } /* ===== Empty state (icon + message, centered) ===== */ .empty-state-block{ text-align:center; padding:34px 20px 30px; } .empty-state-icon{ width:44px; height:44px; border-radius:50%; background:var(--gray-soft); display:flex; align-items:center; justify-content:center; font-size:19px; color:var(--ink-faint); margin:0 auto 12px; } .empty-state-block .msg{ color:var(--ink-soft); font-size:13.5px; } /* ===== Attention rows (icon badge + text, divided) ===== */ .attn-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); font-size:13.5px; } .attn-row:last-child{ border-bottom:none; } .attn-icon{ width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; } .attn-icon.amber{ background:var(--warning-soft); color:var(--warning); } .attn-icon.red{ background:var(--danger-soft); color:var(--danger); } .attn-icon.blue{ background:var(--primary-soft); color:var(--primary); } .attn-icon.green{ background:var(--success-soft); color:var(--success); } /* ===== Forms (edit panels, e.g. pets_profile.php Edit Pet) ===== */ .form-app-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; margin-bottom:4px; } .form-app-full{ grid-column:1 / -1; } .form-app-group{ display:flex; flex-direction:column; gap:6px; } .form-app-label{ font-size:11.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; } .form-app-input, .form-app-select{ border:1px solid var(--border); border-radius:8px; padding:10px 12px; font-size:13.5px; font-family:inherit; color:var(--ink); background:#fff; width:100%; } .form-app-select{ appearance:auto; } .form-app-input:focus, .form-app-select:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); } .form-app-actions{ display:flex; gap:8px; margin-top:8px; padding-top:18px; border-top:1px solid var(--border); } @media (max-width:700px){ .form-app-grid{ grid-template-columns:1fr; } } /* Owner autocomplete suggestions dropdown (built by pets_profile_lightbox.js) */ #owner-suggestion-list{ border:1px solid var(--border); border-radius:8px; box-shadow:0 10px 24px rgba(30,36,48,0.10); overflow:hidden; margin-top:4px; background:#fff; } #owner-suggestion-list .list-group-item{ border:none; border-bottom:1px solid var(--border); font-size:13.5px; padding:9px 12px; color:var(--ink); } #owner-suggestion-list .list-group-item:last-child{ border-bottom:none; } #owner-suggestion-list .list-group-item:hover{ background:var(--gray-soft); } /* ===== Lists (dashboard panels) ===== */ .list-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--border); font-size:13.5px; } .list-row:last-child{ border-bottom:none; } .list-left{ display:flex; align-items:center; gap:11px; } .row-icon{ width:30px;height:30px;border-radius:8px; flex-shrink:0; display:flex;align-items:center;justify-content:center; font-size:14px; } .row-time{ font-size:11.5px; color:var(--ink-faint); font-weight:600; white-space:nowrap; } .attention-row{ display:flex; align-items:center; gap:10px; padding:9px 0; font-size:13.5px; } .pet-avatar{ width:38px;height:38px;border-radius:9px; flex-shrink:0; display:flex;align-items:center;justify-content:center; font-size:18px; overflow:hidden; background:var(--gray-soft); } .pet-avatar img{ width:100%; height:100%; object-fit:cover; } .empty-note{ text-align:center; color:var(--ink-faint); font-size:13px; padding:30px 20px; } /* ===== Toolbar / filters ===== */ .toolbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap; } .search-box{ display:flex; align-items:center; gap:8px; border:1px solid var(--border); background:#fff; border-radius:8px; padding:8px 14px; width:280px; color:var(--ink-faint); font-size:13px; } .filter-pills{ display:flex; gap:7px; flex-wrap:wrap; } .pill{ font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:20px; border:1px solid var(--border); background:#fff; color:var(--ink-soft); cursor:pointer; } .pill.on{ background:var(--ink); color:#fff; border-color:var(--ink); } /* ===== Tables ===== */ table.app-table{ width:100%; border-collapse:collapse; } table.app-table thead th{ text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-faint); padding:11px 14px; border-bottom:1px solid var(--border); } table.app-table tbody td{ padding:12px 14px; border-bottom:1px solid var(--border); font-size:13.5px; vertical-align:middle; } table.app-table tbody tr:last-child td{ border-bottom:none; } table.app-table tbody tr:hover{ background:#FAFBFC; } table.app-table thead th.sortable{ cursor:pointer; user-select:none; white-space:nowrap; } table.app-table thead th.sortable:hover{ color:var(--ink); } table.app-table thead th.sortable .sort-arrow{ display:inline-block; width:10px; font-size:13px; line-height:1; margin-left:3px; vertical-align:middle; } table.app-table thead th.sortable.sort-asc .sort-arrow::before{ content:"▲"; color:var(--primary); } table.app-table thead th.sortable.sort-desc .sort-arrow::before{ content:"▼"; color:var(--primary); } .pet-cell{ display:flex; align-items:center; gap:11px; } .pet-cell .pname{ font-weight:700; } .pet-cell .pid{ font-size:11.5px; color:var(--ink-faint); } .view-link{ color:var(--primary); font-weight:600; font-size:13px; cursor:pointer; } .view-link:hover{ text-decoration:underline; } /* ===== Pet Profile ===== */ .profile-header{ display:flex; align-items:center; justify-content:space-between; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px 24px; margin-bottom:18px; flex-wrap:wrap; gap:14px; } .profile-id{ display:flex; align-items:center; gap:16px; } .profile-photo{ width:74px;height:74px;border-radius:14px; background:var(--warning-soft); display:flex;align-items:center;justify-content:center; font-size:34px; flex-shrink:0; overflow:hidden; } .profile-photo img{ width:100%; height:100%; object-fit:cover; } .profile-id h1{ font-size:22px; font-weight:800; margin:0 0 2px; display:flex; align-items:center; gap:10px; } .profile-id .meta{ color:var(--ink-soft); font-size:13px; margin-bottom:7.2px; } .profile-meta-row{ display:flex; gap:22px; font-size:12.5px; color:var(--ink-soft); flex-wrap:wrap; } .profile-meta-row b{ color:var(--ink); font-weight:700; } .profile-meta-row.vertical{ flex-direction:column; gap:6px; flex-wrap:nowrap; } .profile-edit-toggle, #photoEditToggle{ min-width:110px; justify-content:center; } .subtabs{ display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:20px; flex-wrap:wrap; } .subtab{ padding:10px 16px; font-size:13.5px; font-weight:600; color:var(--ink-soft); border-bottom:2.5px solid transparent; cursor:pointer; } .subtab.active{ color:var(--primary); border-bottom-color:var(--primary); } .profile-cols{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } @media (max-width:800px){ .profile-cols{ grid-template-columns:1fr; } } .kv-row{ display:flex; justify-content:space-between; padding:8px 0; font-size:13px; border-bottom:1px solid var(--border); gap:12px; } .kv-row:last-child{ border-bottom:none; } .kv-row .k{ color:var(--ink-soft); } .kv-row .v{ font-weight:600; text-align:right; } .mini-record{ display:flex; align-items:center; gap:10px; padding:8px 0; font-size:13px; border-bottom:1px solid var(--border); } .mini-record:last-child{ border-bottom:none; } .mini-record .mdate{ font-size:11.5px; color:var(--ink-faint); width:52px; flex-shrink:0; font-weight:600; } /* ===== Pet Profile Overview (Identification / Identification Details / Medical Summary / Diagnostics / Surgery Procedure / Upcoming Care cards on the Overview tab of pets_profile.php) ===== */ .overview-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; } .overview-card{ min-width:0; min-height:210px; margin:0; } .overview-section{ margin-bottom:14px; } .overview-section:last-child{ margin-bottom:0; } .overview-section-title{ margin:0 0 7px; font-size:11.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; } .overview-list{ display:flex; flex-direction:column; gap:7px; } .overview-item{ display:grid; grid-template-columns:82px minmax(0, 1fr); gap:8px; align-items:start; font-size:12.5px; line-height:1.35; } .overview-date{ color:var(--ink-soft); white-space:nowrap; } .overview-main{ min-width:0; color:var(--ink); font-weight:600; overflow-wrap:anywhere; } .overview-detail{ display:block; margin-top:2px; color:var(--ink-soft); font-size:11.5px; font-weight:400; } .overview-empty{ color:var(--ink-soft); font-size:12.5px; padding:5px 0; } @media (max-width:767.98px){ .overview-grid{ grid-template-columns:1fr; } .overview-card{ min-height:0; } } /* ===== Medical page ===== */ .subnav-pills{ display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; } .subnav-pills .pill2{ font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:8px; border:1px solid var(--border); background:#fff; color:var(--ink-soft); cursor:pointer; } .subnav-pills .pill2.on{ background:var(--primary-soft); color:var(--primary-dark); border-color:var(--primary-soft); } /* ===== Medical day-view: pet avatar + category badge ===== */ .day-view-item{ align-items:center; } .day-view-pet-avatar{ width:28px; height:28px; border-radius:8px; overflow:hidden; flex-shrink:0; background:var(--gray-soft); color:var(--ink-faint); display:flex; align-items:center; justify-content:center; font-size:13px; } .day-view-pet-avatar img{ width:100%; height:100%; object-fit:cover; } .day-view-pet-info{ display:flex; flex-direction:column; gap:2px; min-width:90px; flex:0 0 auto; } .day-view-pet{ font-weight:700; font-size:13.5px; color:var(--ink); } .day-view-pet:hover{ text-decoration:underline; } .day-view-category-badge{ display:inline-flex; align-items:center; width:fit-content; font-size:10.5px; font-weight:700; letter-spacing:0.02em; padding:2px 7px; border-radius:20px; } /* ===== Day-view record rows on mobile (shared by medical.php and schedules.php) ===== */ @media (max-width:480px){ .day-view-item{ flex-wrap:wrap; row-gap:6px; padding:10px 16px; } .day-view-pet-info{ flex:1 1 auto; min-width:0; } .day-view-subject{ flex:1 1 100%; order:4; font-size:12.5px; } .day-view-link{ order:5; margin-left:auto; } } /* ===== Schedule / calendar ===== */ .schedule-flex{ display:flex; flex-direction:column; gap:16px; align-items:stretch; } .cal-wrap{ display:flex; width:100%; } .cal-wrap .card-app{ width:100%; display:flex; flex-direction:column; } .upcoming-wrap{ display:flex; width:100%; min-width:0; } .upcoming-wrap .card-app{ width:100%; display:flex; flex-direction:column; } .upcoming-wrap .empty-state-block{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; } .day-view-item.day-view-completed .day-view-pet, .day-view-item.day-view-completed .day-view-subject{ color:var(--ink-faint); text-decoration:line-through; } /* Schedule status — badge display + inline dropdown, toggled via row's Edit action */ .status-display{ display:inline-flex; align-items:center; } .schedule-status-select{ display:none; width:auto; min-width:130px; } /* Schedule type badges — medication/vaccination/vet_appointment/feeding/other */ .schedule-type-select{ display:none; width:auto; min-width:150px; } tr.type-editing .type-display{ display:none; } tr.type-editing .schedule-type-select{ display:inline-block; } tr.status-editing .status-display{ display:none; } tr.status-editing .schedule-status-select{ display:inline-block; } tr.schedule-row-cancelled td{ color:var(--ink-faint); } tr.schedule-row-cancelled .status-display .badge-app{ text-decoration:none; } /* Table-wide edit mode toggle — reveals the Actions column for every row */ .schedule-actions-cell, .schedule-actions-header{ display:none; white-space:nowrap; } #scheduleTable.schedules-editing .schedule-actions-cell, #scheduleTable.schedules-editing .schedule-actions-header{ display:table-cell; } .schedule-actions-cell{ display:none; } #scheduleTable.schedules-editing .schedule-actions-cell{ display:table-cell; } .schedule-row-edit-btn, .schedule-delete-btn{ width:26px; height:26px; border-radius:7px; border:none; background:none; color:var(--ink-faint); display:inline-flex; align-items:center; justify-content:center; font-size:12.5px; cursor:pointer; flex-shrink:0; } .schedule-row-edit-btn:hover{ background:var(--gray-soft); color:var(--ink-soft); } .schedule-delete-btn:hover{ background:var(--danger-soft); color:var(--danger); } .schedule-row-actions{ display:flex; gap:4px; } @media (min-width:861px){ .schedule-flex{ flex-direction:row; } .cal-wrap{ flex:0 0 380px; max-width:380px; } .upcoming-wrap{ flex:1 1 0; min-width:0; } } .cal-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; } .cal-nav-btn{ width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:#fff; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; } .cal-nav-btn:hover{ background:var(--gray-soft); } .cal-grid{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:clamp(3px,1vw,6px); margin-top:10px; width:100%; } .cal-dow{ text-align:center; font-size:clamp(9px,2.2vw,11px); font-weight:700; color:var(--ink-faint); text-transform:uppercase; padding-bottom:6px; overflow:hidden; } .cal-cell{ aspect-ratio:1/0.85; min-width:0; border:1px solid var(--border); border-radius:8px; padding:clamp(2px,1vw,6px) clamp(2px,1vw,8px); font-size:clamp(10px,2.4vw,12.5px); color:var(--ink-soft); position:relative; overflow:hidden; } .cal-cell.empty{ border:none; } .cal-cell:not(.empty){ transition:background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .cal-cell:not(.empty):hover{ background:var(--gray-soft); border-color:var(--gray-soft); } .cal-cell.has-event{ background:var(--primary-soft); border-color:var(--primary-soft); color:var(--primary-dark); font-weight:700; cursor:pointer; } .cal-cell.has-event:hover, .cal-cell.has-event:focus-visible{ background:var(--primary); border-color:var(--primary); color:#fff; outline:none; } .cal-cell.has-event:hover .cal-dot, .cal-cell.has-event:focus-visible .cal-dot{ background:#fff; } .cal-cell.today{ outline:2px solid var(--primary); outline-offset:-2px; } .cal-dot{ width:5px;height:5px; border-radius:50%; position:absolute; bottom:4px; left:6px; background:var(--primary-dark); } /* ===== Day events inline view (schedules.php) ===== */ .day-view{ padding-bottom:8px; } .day-view-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px 14px; border-bottom:1px solid var(--border); margin-bottom:4px; } .day-view-close{ width:30px;height:30px;border-radius:8px; border:none; background:none; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; } .day-view-close:hover{ background:var(--gray-soft); color:var(--ink); } .day-view-item{ display:flex; align-items:center; gap:12px; padding:8px 22px; border-bottom:1px solid var(--border); } .day-view-item:last-child{ border-bottom:none; } .day-view-icon{ width:28px;height:28px;border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; } .day-view-pet{ font-weight:700; font-size:13.5px; color:var(--ink); flex:0 0 auto; min-width:90px; } .day-view-subject{ font-size:13px; color:var(--ink-faint); flex:1; min-width:0; } .day-view-link{ font-size:12.5px; font-weight:600; color:var(--primary); white-space:nowrap; display:flex; align-items:center; gap:3px; flex-shrink:0; } .day-view-link:hover{ text-decoration:underline; } .day-view-date-heading{ padding:12px 22px 4px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-faint); } .day-view-date-heading:first-child{ padding-top:16px; } /* ===== Owner & Adoption ===== */ .contact-row{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-soft); padding:5px 0; } .workflow-step{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--ink-faint); } .workflow-step .wdot{ width:9px;height:9px; border-radius:50%; border:2px solid var(--border); background:#fff; } .workflow-step.done .wdot{ background:var(--success); border-color:var(--success); } .workflow-step.current .wdot{ background:var(--primary); border-color:var(--primary); } .workflow-step.done, .workflow-step.current{ color:var(--ink); } .workflow-line{ flex:1; height:2px; background:var(--border); } .workflow-line.done{ background:var(--success); } /* ===== Ownership/Foster History timeline (templates/foster_history.php) ===== */ .placement-timeline{ display:flex; flex-direction:column; } .placement-item{ display:grid; grid-template-columns:84px 170px 1fr auto; gap:14px; align-items:start; padding:12px 0; border-bottom:1px solid var(--border); } .placement-item:last-child{ border-bottom:none; } .placement-item.placement-current .placement-dates{ color:var(--primary-dark); } .placement-type-col{ display:flex; align-items:center; } .placement-type-badge{ display:inline-flex; align-items:center; justify-content:center; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; } .placement-type-badge.badge-owner{ background:var(--primary-soft, #e0edff); color:var(--primary-dark, #1d4ed8); } .placement-type-badge.badge-foster{ background:var(--accent-soft, #fef3c7); color:var(--accent-dark, #b45309); } .placement-dates{ font-size:12.5px; color:var(--ink-soft); font-weight:600; white-space:nowrap; } .placement-owner{ font-size:13.5px; font-weight:700; color:var(--ink); } .placement-owner a:hover{ text-decoration:underline; } .placement-notes{ margin-top:3px; font-size:12.5px; color:var(--ink-soft); } .placement-actions{ display:none; gap:6px; flex-shrink:0; } #placement-history-wrap.placements-editing .placement-actions{ display:flex; } .placement-actions button{ width:28px; height:28px; border-radius:8px; border:1px solid var(--border); background:#fff; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:13px; } .placement-actions button:hover{ background:var(--gray-soft); color:var(--ink); } .placement-actions .placement-delete-btn:hover{ background:var(--danger-soft); color:var(--danger); border-color:var(--danger-soft); } @media (max-width:480px){ .placement-item{ grid-template-columns:1fr; gap:6px; } .placement-type-col{ order:0; } .placement-actions{ order:3; } } /* ===== Ownership/Foster type badge (Ownership / Foster History table) ===== */ .placement-type-badge{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; letter-spacing:0.01em; padding:4px 10px; border-radius:20px; text-transform:capitalize; } .placement-type-owner{ background:var(--primary-soft); color:var(--primary-dark); } .placement-type-foster{ background:var(--warning-soft); color:#96721C; } /* ===== Pets list pagination ===== */ .per-page-select{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); } .per-page-select label{ font-weight:600; } .per-page-select select{ border:1px solid var(--border); border-radius:8px; padding:7px 10px; font-size:13px; font-family:inherit; color:var(--ink); background:#fff; cursor:pointer; } .per-page-select select:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); } .pagination-bar{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-top:1px solid var(--border); flex-wrap:wrap; gap:10px; } .pagination-info{ font-size:12.5px; color:var(--ink-soft); } .pagination-controls{ display:flex; align-items:center; gap:10px; } .page-nav-btn{ width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:#fff; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; } .page-nav-btn:hover:not(:disabled){ background:var(--gray-soft); color:var(--ink); } .page-nav-btn:disabled{ opacity:0.4; cursor:not-allowed; } .page-current{ font-size:13px; font-weight:700; color:var(--ink); min-width:24px; text-align:center; } /* ===== Manage Users — role edit toggle ===== */ .role-text{ display:inline-block; } .role-edit{ display:none; align-items:center; gap:16px; } #userTable .delete-column-header, #userTable .delete-column, #userTable .reset-column-header, #userTable .reset-column{ display:none; } .role-edit label{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ink-soft); cursor:pointer; } .role-edit input[type="radio"]{ accent-color:var(--primary); width:15px; height:15px; cursor:pointer; margin:0; } .role-edit label:has(input:checked){ color:var(--ink); } .delete-column a{ color:var(--danger); font-weight:600; font-size:12.5px; display:inline-flex; align-items:center; gap:5px; } .delete-column a:hover{ text-decoration:underline; } .delete-column .text-muted.disabled{ color:var(--ink-faint); font-size:13px; } /* Reset password action — matches the Delete link's styling, primary-colored */ .reset-column .btn-link-action{ background:none; border:none; padding:0; color:var(--primary); font-weight:600; font-size:12.5px; display:inline-flex; align-items:center; gap:5px; cursor:pointer; font-family:inherit; } .reset-column .btn-link-action:hover{ color:var(--primary-dark); text-decoration:underline; } #bottomButtons{ display:flex; gap:8px; align-items:center; padding:14px 22px !important; border-top:1px solid var(--border); background:var(--bg); } /* ===== Manage Users — avatar + username cell ===== */ .user-cell{ display:flex; align-items:center; gap:10px; } .user-cell-avatar{ width:30px; height:30px; border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--gray-soft); color:var(--ink-faint); display:flex; align-items:center; justify-content:center; font-size:14px; } .user-cell-avatar img{ width:100%; height:100%; object-fit:cover; } /* ===== Profile photo lightbox ===== */ .user-profile-photo.clickable{ cursor:pointer; transition:opacity 0.15s ease; } .user-profile-photo.clickable:hover{ opacity:0.85; } .photo-lightbox-overlay{ display:none; position:fixed; inset:0; background:rgba(20,24,32,0.85); align-items:center; justify-content:center; z-index:3000; padding:30px; } .photo-lightbox-overlay.open{ display:flex; } .photo-lightbox-img{ max-width:min(90vw, 560px); max-height:80vh; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,0.4); object-fit:contain; } .photo-lightbox-close{ position:absolute; top:20px; right:24px; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.12); border:none; color:#fff; font-size:16px; display:flex; align-items:center; justify-content:center; cursor:pointer; } .photo-lightbox-close:hover{ background:rgba(255,255,255,0.22); } /* ===== Medical page — category filter + colored dots ===== */ .category-select-card{ height:100%; } .category-check-list{ display:flex; flex-direction:column; gap:14px; margin-top:4px; } .category-check-row{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:13.5px; font-weight:600; } .category-check-row input[type="checkbox"]{ width:17px; height:17px; cursor:pointer; margin:0; flex-shrink:0; } .category-swatch{ width:11px; height:11px; border-radius:3px; flex-shrink:0; } .category-check-all{ margin-top:6px; padding-top:14px; border-top:1px solid var(--border); color:var(--ink); font-weight:700; } /* Icon chip in front of each category label (replaces the plain color swatch). Reuses the existing .icon-bg-{palette} color classes above so colors stay centralized in one place. */ .category-icon{ width:26px; height:26px; border-radius:7px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12.5px; } /* Record-count chip at the end of each label. Reuses the existing plain .badge-{palette} background/color pairs above; this class only adds the compact sizing so it reads as a small count pill rather than a full .badge-app pill. */ .category-count-badge{ margin-left:auto; flex-shrink:0; font-size:11px; font-weight:700; line-height:1; padding:3px 8px; border-radius:7px; } .cal-dot-row{ display:flex; gap:2px; justify-content:center; position:absolute; bottom:4px; left:0; right:0; } .cat-dot{ width:5px; height:5px; border-radius:50%; } .day-view-date-heading{ padding:12px 22px 4px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-faint); } .day-view-date-heading:first-child{ padding-top:16px; } /* ===== Generic error page ===== */ .error-page-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bg); } .error-page-card{ width:100%; max-width:400px; text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:40px 32px; box-shadow:0 12px 32px rgba(30,36,48,0.06); } .error-page-icon{ width:56px; height:56px; border-radius:50%; margin:0 auto 18px; background:var(--danger-soft); color:var(--danger); display:flex; align-items:center; justify-content:center; font-size:24px; } .error-page-card h1{ font-size:19px; font-weight:800; margin:0 0 8px; color:var(--ink); } .error-page-card p{ font-size:13.5px; color:var(--ink-soft); margin:0 0 22px; line-height:1.5; } /* ===== Medical Records — combined table (pets_profile.php Medical tab) ===== */ .medical-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; } .medical-type-filters{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .medical-filter-row{ display:flex; align-items:center; gap:7px; cursor:pointer; font-size:13px; font-weight:600; color:var(--ink-soft); user-select:none; } .medical-filter-row input[type="checkbox"]{ width:15px; height:15px; cursor:pointer; margin:0; accent-color:var(--ink); } .medical-filter-swatch{ width:9px; height:9px; border-radius:3px; flex-shrink:0; } .medical-filter-row.filter-all{ padding-left:14px; border-left:1px solid var(--border); color:var(--ink); } .medical-type-badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; letter-spacing:0.01em; padding:3px 9px; border-radius:20px; white-space:nowrap; } /* .medical-type-badge .dot needs no rule of its own — sizing/shape already comes from the global .dot above; only its color is set inline per record type. */ .card-head-row .btn-group{ display:inline-flex; gap:8px; } /* Add Record / Edit Mode button spacing — these use .btn-app-*, not Bootstrap's .btn, so .btn-group's own join styling doesn't apply */ .btn-app-danger{ background:var(--danger); border:1px solid var(--danger); color:#fff; font-weight:600; font-size:13.5px; padding:9px 16px; border-radius:8px; display:inline-flex; align-items:center; gap:6px; } .btn-app-danger:hover{ background:#B23A3A; border-color:#B23A3A; color:#fff; } th.sortable-date{ cursor:pointer; user-select:none; white-space:nowrap; } th.sortable-date:hover{ color:var(--ink); } th.sortable-date .sort-caret{ margin-left:4px; font-size:10px; opacity:0.6; } #medicalCombinedTable tbody td{ font-size:13.5px; vertical-align:middle; } .medical-notes-cell{ color:var(--ink-soft); max-width:280px; } .medical-actions-cell{ display:none; white-space:nowrap; } .medical-actions-cell.show{ display:table-cell; } .medical-actions-header{ display:none; } .medical-actions-header.show{ display:table-cell; } .medical-actions-cell .btn{ padding:3px 7px; font-size:12px; line-height:1.4; } #medicalCombinedTable td.editing input, #medicalCombinedTable td.editing textarea{ font-size:13px; padding:5px 7px; min-width:100px; } #medicalCombinedTable td.editing textarea{ min-width:180px; } #medicalPaginationBar{ margin-top:4px; } @media (max-width:700px){ .medical-toolbar{ flex-direction:column; align-items:stretch; } .medical-type-filters{ gap:12px; } } /* Report attachment (image/PDF) — clickable Title link + attach/replace/remove controls */ .title-file-link{ color:var(--ink); text-decoration:none; font-weight:inherit; display:inline-flex; align-items:center; gap:5px; border-bottom:1px dashed var(--ink-soft); } .title-file-link:hover{ color:var(--primary); border-bottom-color:var(--primary); } .title-file-link .bi-paperclip{ font-size:12px; color:var(--primary); flex-shrink:0; } .attach-file-btn.has-file{ color:var(--primary); border-color:var(--primary); } .file-input-hidden{ display:none; } /* ===== Medical Timeline: moved from inline styles ===== */ .card-actions-row { display: flex; gap: 8px; } #timelineNoResultsMsg, #timelinePaginationBar, .add-record-form-card, #arRecordCurrentFile { display: none; } .add-record-form-card { margin-top: 16px; } #arTypeGroup, .ar-record-type-group { margin-bottom: 16px; } #arRecordCurrentFile { margin-bottom: 6px; } /* All ar-fields sub-panels start hidden except the default "Record" panel */ .ar-fields:not([data-ar-type="medical_record"]) { display: none; } /* ===== Schedules: table layout + pagination (mirrors Medical Timeline) ===== */ .schedule-toolbar { display: flex; justify-content: flex-end; margin-bottom: 16px; } .schedule-form-card { display: none; margin-top: 16px; } #schedulePaginationBar {display: none; } #schedulesHeading.schedule-heading-ok { color: var(--primary); } #schedulesHeading.schedule-heading-warn { color: var(--danger); } /* ===== Family Information (pets_profile_family.php) ===== */ .family-group-title { font-size: 15px; font-weight: 700; margin: 18px 0 10px; } .family-group-title:first-of-type { margin-top: 4px; } .family-edit-form { margin-top: 16px; } .empty-note-inline { color: var(--ink-faint); } /* Admin action buttons wrap on narrow screens (3 buttons here vs. 2 elsewhere) */ .card-actions-row { flex-wrap: wrap; } /* ===== Filter toggle styles (DeepSeek) ===== */ .filter-toggle-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--border); background: #fff; font-weight: 600; font-size: 13px; color: var(--ink); cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .filter-toggle-btn:hover { background: var(--gray-soft); } .filter-toggle-btn .badge-count { background: var(--primary); color: #fff; border-radius: 50%; padding: 0 6px; font-size: 10px; min-width: 18px; text-align: center; line-height: 18px; display: inline-flex; align-items: center; justify-content: center; } .filter-toggle-btn .chevron-icon { transition: transform 0.3s ease; font-size: 10px; margin-left: 2px; } .filter-toggle-btn.active .chevron-icon { transform: rotate(180deg); } /* ===== Filter dropdown panel ===== */ .filter-panel { display: none; width: 100%; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-top: 12px; margin-bottom: 16px; /* Added space below filter panel */ animation: slideDown 0.25s ease; } .filter-panel.open { display: block; } @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .filter-panel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 20px; } .filter-check-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 400; color: var(--ink); transition: background 0.15s ease; user-select: none; } .filter-check-item:hover { background: var(--gray-soft); } /* Custom styled checkboxes - using palette colors */ .filter-check-item input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; margin: 0; flex-shrink: 0; -webkit-appearance: none; appearance: none; border: 2px solid var(--border); border-radius: 4px; position: relative; transition: all 0.15s ease; background: #fff; } .filter-check-item input[type="checkbox"]:checked { border-color: var(--checkbox-color); background-color: var(--checkbox-color); } .filter-check-item input[type="checkbox"]:checked::after { content: "✓"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 12px; font-weight: 700; } .filter-check-item input[type="checkbox"]:hover { transform: scale(1.05); } /* Each palette gets its own checkbox color */ .filter-check-primary { --checkbox-color: var(--primary); } .filter-check-purple { --checkbox-color: var(--purple); } .filter-check-warning { --checkbox-color: var(--warning); } .filter-check-success { --checkbox-color: var(--success); } .filter-check-navy { --checkbox-color: var(--navy); } .filter-check-pink { --checkbox-color: var(--pink); } .filter-check-info { --checkbox-color: var(--info); } .filter-check-danger { --checkbox-color: var(--danger); } .filter-check-teal { --checkbox-color: var(--teal); } .filter-check-gray { --checkbox-color: var(--ink-soft); } .filter-check-item .icon-wrap { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .filter-check-item .filter-label { flex: 1; } .filter-check-all { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); cursor: pointer; user-select: none; } .filter-check-all input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; margin: 0; accent-color: var(--primary); } /* ===== Add spacing between filter panel and table ===== */ #medicalTimelineSection .table-responsive { margin-top: 4px; } /* ===== Responsive ===== */ @media (max-width: 768px) { .card-actions-row { flex-wrap: wrap; gap: 6px !important; } .card-actions-row .btn-app-primary, .card-actions-row .btn-app-secondary, .card-actions-row .filter-toggle-btn { font-size: 12px; padding: 5px 10px; } .card-actions-row .per-page-select { font-size: 12px; } .card-actions-row .per-page-select select { padding: 4px 8px; font-size: 12px; } } @media (max-width: 480px) { .filter-panel-grid { grid-template-columns: 1fr; } .card-actions-row { flex-direction: column; align-items: stretch; width: 100%; } .card-actions-row .btn-app-primary, .card-actions-row .btn-app-secondary, .card-actions-row .filter-toggle-btn, .card-actions-row .per-page-select { width: 100%; justify-content: center; } .card-actions-row .per-page-select { justify-content: center; } } /* ===== SIMPLE FILTER TOGGLE - FIXED ===== */ /* ===== SIMPLE FILTER TOGGLE - FIXED ===== Scoped to .schedule-filter-wrapper so it only affects the Schedules section's dropdown filter, and no longer overrides the generic .filter-toggle-btn / .filter-panel styling used by the Timeline section's checkbox filter (see the "DeepSeek" block above). */ /* Filter wrapper */ .schedule-filter-wrapper { position: relative; display: inline-block; } /* Filter toggle button */ .schedule-filter-wrapper .filter-toggle-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px; border: 1px solid #d1d5db; background: #fff; font-weight: 600; font-size: 13px; color: #1f2937; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .schedule-filter-wrapper .filter-toggle-btn:hover { background: #f3f4f6; } .schedule-filter-wrapper .filter-toggle-btn .badge-count { background: #3b82f6; color: #fff; border-radius: 50%; padding: 0 6px; font-size: 10px; min-width: 18px; text-align: center; line-height: 18px; display: inline-flex; align-items: center; justify-content: center; } .schedule-filter-wrapper .filter-toggle-btn .chevron-icon { transition: transform 0.3s ease; font-size: 10px; margin-left: 2px; display: inline-block; } .schedule-filter-wrapper .filter-toggle-btn.active .chevron-icon { transform: rotate(180deg); } /* FILTER PANEL - SIMPLE FIX */ .schedule-filter-wrapper .filter-panel { display: none !important; position: absolute; top: 100%; right: 0; margin-top: 8px; min-width: 480px; padding: 20px 24px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); z-index: 9999; } .schedule-filter-wrapper .filter-panel.open { display: block !important; } /* Filter panel grid */ .schedule-filter-wrapper .filter-panel-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px 16px; align-items: end; } .schedule-filter-wrapper .filter-panel-grid .form-app-group { margin-bottom: 0; } .schedule-filter-wrapper .filter-panel-grid .form-app-group label { display: block; font-size: 12px; font-weight: 600; color: #6b7280; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; } .schedule-filter-wrapper .filter-panel-grid .form-app-input { width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; background: #fff; } .schedule-filter-wrapper .filter-panel-grid .form-app-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .schedule-filter-wrapper .filter-actions-inline { display: flex; gap: 8px; align-items: center; padding-bottom: 1px; } .schedule-filter-wrapper .filter-actions-inline .btn-app-primary, .schedule-filter-wrapper .filter-actions-inline .btn-app-secondary { padding: 8px 16px; height: 38px; font-size: 13px; border-radius: 6px; cursor: pointer; border: none; transition: all 0.2s ease; } .schedule-filter-wrapper .filter-actions-inline .btn-app-primary { background: #3b82f6; color: #fff; } .schedule-filter-wrapper .filter-actions-inline .btn-app-primary:hover { background: #2563eb; } .schedule-filter-wrapper .filter-actions-inline .btn-app-secondary { background: #f3f4f6; color: #4b5563; } .schedule-filter-wrapper .filter-actions-inline .btn-app-secondary:hover { background: #e5e7eb; } /* Responsive */ @media (max-width: 768px) { .schedule-filter-wrapper .filter-panel { min-width: 300px; right: -20px; padding: 16px; } .schedule-filter-wrapper .filter-panel-grid { grid-template-columns: 1fr; gap: 10px; } .schedule-filter-wrapper .filter-actions-inline { justify-content: flex-end; margin-top: 4px; } } @media (max-width: 480px) { .schedule-filter-wrapper .filter-panel { min-width: 280px; right: -10px; padding: 14px; } } /* ============================================================ PRINT / DOWNLOAD — shared across pets_list.php, schedules.php, and pet_timeline.php. Each page prints only its own table + a title/date header; everything else on the page is hidden. ============================================================ */ /* Print-only header blocks — hidden on screen, shown only when printing */ .print-only-header{ display:none; } @media print { /* 1. Hide everything by default */ body * { visibility: hidden !important; } .no-print { display: none !important; } /* 2. Pets List table */ #petsTable, #petsTable *, #printHeader, #printHeader * { visibility: visible !important; } #printHeader{ display:block; position:absolute; top:0; left:0; width:100%; text-align:center; margin-bottom:16px; } #printHeader h2{ margin:0 0 4px; font-size:20px; } #printHeader p{ margin:0; font-size:12px; color:#555; } #petsTable{ position:absolute; top:70px; left:50%; transform:translateX(-50%); width:90%; margin:0 auto; font-size:12px; } #petsTable thead th, #petsTable tbody td{ border:none; padding:6px 8px; } /* ==================== 3. Schedules table ==================== */ /* ==================== =================== ==================== */ #scheduleTable, #scheduleTable *, #schedulePrintHeader, #schedulePrintHeader * { visibility: visible !important; } #schedulePrintHeader{ display:block; position:absolute; top:0; left:0; width:100%; text-align:center; margin-bottom:16px; } #schedulePrintHeader h2{ margin:0 0 4px; font-size:20px; } #schedulePrintHeader p{ margin:0; font-size:12px; color:#555; } #scheduleTable{ position:absolute; top:70px; left:50%; transform:translateX(-50%); width:90%; margin:0 auto; font-size:12px; } #scheduleTable thead th, #scheduleTable tbody td{ border:none; padding:6px 8px; } #scheduleTable tr.schedule-hidden{ display:none !important; } /* ============================================================ SMALL/MEDIUM SCREEN FIXES — Schedules toolbar ============================================================ */ @media (max-width: 700px) { #schedulesSection .card-actions-row{ flex-direction: column; align-items: stretch; } #schedulesSection .card-actions-row > *{ width: 100%; justify-content: center; } #schedulesSection .per-page-select{ justify-content: space-between; } .schedule-filter-wrapper{ width: 100%; } .schedule-filter-wrapper .filter-panel{ left: 0; right: 0; min-width: 0; width: 100%; } } /* ===== Schedules toolbar — flat, borderless buttons ===== */ #schedulesSection .card-actions-row .btn-app-primary, #schedulesSection .card-actions-row .btn-app-secondary{ background: none; border: none; color: var(--ink-soft); padding: 6px 4px; } #schedulesSection .card-actions-row .btn-app-primary:hover, #schedulesSection .card-actions-row .btn-app-secondary:hover{ background: var(--gray-soft); border-radius: 6px; } /* Overrides the hardcoded colors in the "SIMPLE FILTER TOGGLE - FIXED" block further down the file, which is more specific than a plain .filter-toggle-btn rule would be. */ .schedule-filter-wrapper .filter-toggle-btn{ background: none; border: none; color: var(--ink-soft); padding: 6px 4px; } .schedule-filter-wrapper .filter-toggle-btn:hover{ background: var(--gray-soft); border-radius: 6px; } /* ==================== 4. Pet Timeline table ==================== */ /* ==================== =================== ==================== */ #petTimelineTable, #petTimelineTable *, #petTimelinePrintHeader, #petTimelinePrintHeader * { visibility: visible !important; } #petTimelinePrintHeader{ display:block; position:absolute; top:0; left:0; width:100%; text-align:center; margin-bottom:16px; } #petTimelinePrintHeader h2{ margin:0 0 4px; font-size:20px; } #petTimelinePrintHeader p{ margin:0; font-size:12px; color:#555; } #petTimelineTable{ position:absolute; top:70px; left:50%; transform:translateX(-50%); width:90%; margin:0 auto; font-size:12px; } #petTimelineTable thead th, #petTimelineTable tbody td{ border:none; padding:6px 8px; } } /* ============================================================ SMALL/MEDIUM SCREEN FIXES — Pet Timeline toolbar (overrides inline styles in pet_timeline.php) ============================================================ */ @media (max-width: 700px) { #petTimelineSection .card-actions-row{ flex-direction: column; align-items: stretch; } #petTimelineSection .card-actions-row > *{ width: 100%; justify-content: center; } #petTimelineSection .per-page-select{ justify-content: space-between; } #petTimelineFilterPanel .filter-panel-grid{ grid-template-columns: 1fr; } } /* ===== Pet Timeline toolbar — flat, borderless buttons ===== */ /* ===== Remove this to add border in toolbar ===== */ #petTimelineSection .card-actions-row .btn-app-primary, #petTimelineSection .card-actions-row .btn-app-secondary, #petTimelineSection .card-actions-row .filter-toggle-btn{ background: none; border: none; color: var(--ink-soft); padding: 6px 4px; } #petTimelineSection .card-actions-row .btn-app-primary:hover, #petTimelineSection .card-actions-row .btn-app-secondary:hover, #petTimelineSection .card-actions-row .filter-toggle-btn:hover{ background: var(--gray-soft); border-radius: 6px; } /* ===== Medical page layout - improved ===== */ .medical-layout { display: grid; grid-template-columns: 1.8fr 1fr; gap: 18px; margin-bottom: 20px; align-items: stretch; } .medical-cal-wrap { width: 100% !important; max-width: 100% !important; flex: none !important; } .medical-cal-wrap .card-app { height: 100%; } .category-filter-wrap { width: 100% !important; max-width: 100% !important; flex: none !important; } .category-filter-wrap .card-app { height: 100%; } /* Shrunk-and-centered calendar — instead of distorting cell shape to save height, the grid itself is capped narrower than the card and centered, so cells stay naturally proportioned and the card still reads as polished/balanced next to the filter panel beside it */ .medical-cal-wrap .cal-grid { max-width: 620px; margin: 10px auto 0; gap: 8px; } .medical-cal-wrap .cal-cell { aspect-ratio: 1/0.75; padding: 6px 8px; font-size: 13px; min-height: 40px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; cursor: default; } .medical-cal-wrap .cal-cell.has-event { cursor: pointer; } .medical-cal-wrap .cal-cell .cal-dot-row { position: static; margin-top: auto; display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-start; } .medical-cal-wrap .cal-cell .cat-dot { width: 6px; height: 6px; border-radius: 50%; } /* Better category list spacing */ .category-check-list { gap: 12px; padding: 4px 0; } .category-check-row { padding: 6px 10px; border-radius: 8px; transition: background 0.15s ease; } .category-check-row:hover { background: var(--gray-soft); } .category-check-row .category-count-badge { font-size: 11px; padding: 2px 10px; border-radius: 12px; min-width: 24px; text-align: center; } .category-check-all { margin-top: 8px; padding-top: 12px; } /* Table improvements */ #medicalDayView .table-responsive { padding: 0 22px 12px !important; } #medicalDayViewTable th, #medicalDayViewTable td { padding: 12px 16px !important; } #medicalDayViewTable .day-view-pet-avatar { width: 32px; height: 32px; } /* Responsive */ @media (max-width: 992px) { .medical-layout { grid-template-columns: 1fr; } .medical-cal-wrap .cal-cell { min-height: 38px; padding: 5px 6px; font-size: 12px; } } @media (max-width: 480px) { .medical-cal-wrap .cal-cell { min-height: 32px; padding: 4px 5px; font-size: 11px; } #medicalDayViewTable th, #medicalDayViewTable td { padding: 8px 10px !important; font-size: 12px; } } /* ===== Medical page (medical.php) — classes for what were previously inline style="" attributes in the PHP template, so all layout/spacing for this page lives here instead of being split across files. ===== */ /* Calendar header: "Today" badge + prev/next/today nav button group */ .today-badge{ font-size:10px; margin-left:8px; } .cal-nav-actions{ display:flex; gap:8px; } /* Day-view results card (the calendar's Records/table panel below it) */ .day-view-card{ margin-top:16px; padding:0; } /* Compact toolbar variant used above the day-view table */ .medical-toolbar{ padding:12px 22px; gap:12px; flex-wrap:wrap; } .search-box-compact{ position:relative; flex:1; min-width:200px; max-width:320px; } .search-box-input{ border:none; outline:none; width:100%; font-size:13px; background:transparent; } .btn-app-compact{ padding:6px 12px; font-size:12px; } .per-page-select-compact{ font-size:12px; } .per-page-select-compact select{ padding:4px 8px; font-size:12px; } /* Table wrapper spacing + generic column-width utilities (reusable on any .app-table, not just the medical day-view table) */ .medical-table-wrap{ padding:14px 22px 0; } .col-w-12{ width:12%; } .col-w-15{ width:15%; } .col-w-25{ width:25%; } .col-w-33{ width:33%; } /* Empty-state row for the day-view table; JS toggles this via noResultsMsg.style.display, which overrides this default fine */ .day-view-empty-note{ display:none; padding:14px 22px; } /* Pet avatar+name cell used inside JS-rendered day-view table rows */ .day-view-pet-cell{ display:flex; align-items:center; gap:8px; } /* ===== Medical Records print export (#medicalPrintArea) — built by JS from the Print button and printed via window.print(). Hidden on screen; only shown (and only thing shown) inside @media print. ===== */ #medicalPrintArea{ display:none; } @media print { body * { visibility: hidden !important; } #medicalPrintArea, #medicalPrintArea * { visibility: visible !important; } #medicalPrintArea { display: block !important; position: absolute; top: 0; left: 0; width: 100%; padding: 24px; } #medicalPrintArea table { border-collapse: collapse; width: 100%; font-family: Arial, sans-serif; font-size: 12px; } #medicalPrintArea th, #medicalPrintArea td { border: none; padding: 6px 8px; text-align: left; } #medicalPrintArea h2 { font-family: Arial, sans-serif; margin-bottom: 12px; } }