* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f4f7f5;
    color: #1f2933;
}

.login-wrapper {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-card {
    width: 380px;
    background: white;
    padding: 36px;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

.logo {
    width: 160px;
    height: auto;
    display: block;
    margin: 0 auto 24px auto;
}

.dashboard-logo {
    width: 150px;
    height: auto;
}

h1 {
    text-align: center;
    margin-bottom: 8px;
}

.subtitle {
    text-align: center;
    color: #6b7280;
    margin-bottom: 28px;
}

label {
    display: block;
    margin-top: 16px;
    margin-bottom: 6px;
    font-weight: bold;
}

input,
select,
textarea {
    width: 100%;
    padding: 13px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 15px;
    background: #ffffff;
}

textarea {
    min-height: 92px;
    resize: vertical;
    font-family: inherit;
}

button {
    width: 100%;
    margin-top: 24px;
    padding: 13px;
    border: none;
    border-radius: 10px;
    background: #22c55e;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

button:hover {
    background: #16a34a;
}

.message {
    margin-top: 16px;
    color: #dc2626;
    text-align: center;
}

.dashboard {
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px;
}

.dashboard header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard header h1 {
    text-align: left;
}

.dashboard header button {
    width: auto;
    padding: 10px 18px;
    background: #ef4444;
}

.welcome {
    margin-top: 30px;
    background: white;
    padding: 24px;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.family-section {
    margin-top: 24px;
    padding: 24px;
    border-radius: 16px;
    background: white;
    box-shadow: 0 12px 30px rgba(0,0,0,0.04);
}

.family-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.family-section-header h2 {
    margin: 0;
    font-size: 20px;
}

.family-section-header p {
    margin: 6px 0 0 0;
    color: #6b7280;
}

.family-message {
    min-height: 20px;
    margin: 14px 0 0 0;
    color: #dc2626;
    font-size: 14px;
}

.family-message.success {
    color: #15803d;
}

.family-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px auto;
    align-items: end;
    gap: 12px;
    margin-top: 14px;
}

.family-form label {
    margin-top: 0;
}

.family-form button {
    width: auto;
    margin-top: 0;
    white-space: nowrap;
}

.family-members-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.family-member {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #dcfce7;
    border-radius: 12px;
    background: #f7fef9;
}

.family-member div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.family-member strong,
.family-member span {
    overflow-wrap: anywhere;
}

.family-member div span,
.family-empty,
.family-loading {
    color: #6b7280;
    font-size: 13px;
}

.family-role {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 12px;
    font-weight: 700;
}

.family-member-controls {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.family-action-btn {
    width: auto;
    margin-top: 0;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
}

.family-delete-btn {
    background: #dc2626;
}

.family-delete-btn:hover {
    background: #b91c1c;
}

.family-empty,
.family-loading {
    margin: 0;
    padding: 12px;
    border-radius: 12px;
    background: #f7fef9;
}

.pets-list {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.pet-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}

.pet-card h3 {
    margin-top: 0;
}

.pet-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.pet-card-header h3 {
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

.pet-card-badges {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.pet-species {
    flex: 0 0 auto;
    padding: 5px 10px;
    border-radius: 999px;
    background: #e8f5ee;
    color: #166534;
    font-size: 13px;
    font-weight: 700;
}

.pet-shared-badge {
    flex: 0 0 auto;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 13px;
    font-weight: 700;
}

.pet-details {
    display: grid;
    gap: 12px;
    margin: 18px 0 0 0;
}

.pet-details div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef2f7;
}

.pet-details dt {
    color: #6b7280;
    font-weight: 700;
}

.pet-details dd {
    margin: 0;
    text-align: right;
}

.empty-state {
    grid-column: 1 / -1;
    margin: 0;
    padding: 24px;
    background: white;
    border-radius: 16px;
    color: #6b7280;
}

.auth-page {
  min-height: 100vh;
  margin: 0;
  background: linear-gradient(135deg, #f8fafc, #eef6f1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1f2937;
}

.auth-container {
  width: 100%;
  max-width: 420px;
  padding: 24px;
}

.auth-card {
  background: #ffffff;
  border-radius: 28px;
  padding: 32px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}

.auth-brand {
  text-align: center;
  margin-bottom: 28px;
}

.auth-logo {
  height: 64px;
  margin-bottom: 16px;
}

.auth-brand h1 {
  margin: 0;
  font-size: 28px;
}

.auth-brand p {
  color: #6b7280;
  margin-top: 8px;
}

.auth-form {
  display: grid;
  gap: 18px;
}

.form-group {
  display: grid;
  gap: 8px;
}

.form-group label {
  font-weight: 600;
  font-size: 14px;
}

.form-group input {
  border: 1px solid #d1d5db;
  border-radius: 14px;
  padding: 13px 14px;
  font-size: 16px;
  outline: none;
}

.form-group input:focus {
  border-color: #4f9f72;
  box-shadow: 0 0 0 4px rgba(79, 159, 114, 0.12);
}

.btn {
  border: none;
  border-radius: 16px;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.btn-primary {
  background: #4f9f72;
  color: white;
}

.btn-primary:hover {
  background: #438c63;
}

.btn-full {
  width: 100%;
}

.form-message {
  min-height: 22px;
  text-align: center;
  font-size: 14px;
}

.form-message.error {
  color: #dc2626;
}

.form-message.success {
  color: #15803d;
}

.dashboard-message,
.modal-message {
    min-height: 20px;
    margin: 10px 0 0 0;
    font-size: 14px;
    font-weight: 700;
}

.dashboard-message.error,
.modal-message.error {
    color: #dc2626;
}

.dashboard-message.success,
.modal-message.success {
    color: #15803d;
}

.auth-footer {
  margin-top: 24px;
  text-align: center;
  font-size: 14px;
  color: #6b7280;
}

.auth-footer a {
  color: #4f9f72;
  font-weight: 700;
  text-decoration: none;
}

.add-pet-btn {

    width:auto;
    margin-top:20px;
    flex: 0 0 auto;

}

.pet-actions {

    display:flex;

    gap:10px;

    margin-top:18px;

}

.pet-actions button {
    flex: 1 1 0;
    margin-top: 0;
}

.weight-section {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #eef2f7;
}

.water-section {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #eef2f7;
}

.food-section {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #eef2f7;
}

.treat-section {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #eef2f7;
}

.media-section {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #eef2f7;
}

.journal-section {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #eef2f7;
}

.medical-section {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #eef2f7;
}

.weight-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.water-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.food-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.treat-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.media-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.journal-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.medical-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.weight-section-header h4 {
    margin: 0;
    font-size: 16px;
}

.water-section-header h4 {
    margin: 0;
    font-size: 16px;
}

.food-section-header h4 {
    margin: 0;
    font-size: 16px;
}

.treat-section-header h4 {
    margin: 0;
    font-size: 16px;
}

.media-section-header h4 {
    margin: 0;
    font-size: 16px;
}

.journal-section-header h4 {
    margin: 0;
    font-size: 16px;
}

.medical-section-header h4 {
    margin: 0;
    font-size: 16px;
}

.weight-add-btn {
    width: auto;
    margin-top: 0;
    padding: 9px 12px;
    border-radius: 999px;
    background: #0f766e;
    font-size: 13px;
    white-space: nowrap;
}

.weight-add-btn:hover {
    background: #0d5f59;
}

.water-add-btn {
    width: auto;
    margin-top: 0;
    padding: 9px 12px;
    border-radius: 999px;
    background: #0284c7;
    font-size: 13px;
    white-space: nowrap;
}

.water-add-btn:hover {
    background: #0369a1;
}

.food-add-btn {
    width: auto;
    margin-top: 0;
    padding: 9px 12px;
    border-radius: 999px;
    background: #c2410c;
    font-size: 13px;
    white-space: nowrap;
}

.food-add-btn:hover {
    background: #9a3412;
}

.treat-add-btn {
    width: auto;
    margin-top: 0;
    padding: 9px 12px;
    border-radius: 999px;
    background: #a16207;
    font-size: 13px;
    white-space: nowrap;
}

.treat-add-btn:hover {
    background: #854d0e;
}

.media-add-btn {
    width: auto;
    margin-top: 0;
    padding: 9px 12px;
    border-radius: 999px;
    background: #7c3aed;
    font-size: 13px;
    white-space: nowrap;
}

.media-add-btn:hover {
    background: #6d28d9;
}

.journal-add-btn {
    width: auto;
    margin-top: 0;
    padding: 9px 12px;
    border-radius: 999px;
    background: #4f46e5;
    font-size: 13px;
    white-space: nowrap;
}

.journal-add-btn:hover {
    background: #4338ca;
}

.medical-add-btn {
    width: auto;
    margin-top: 0;
    padding: 9px 12px;
    border-radius: 999px;
    background: #be123c;
    font-size: 13px;
    white-space: nowrap;
}

.medical-add-btn:hover {
    background: #9f1239;
}

.weight-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.water-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.food-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.treat-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.journal-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.medical-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.weight-entry {
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f9fafb;
}

.water-entry {
    padding: 12px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #f8fbff;
}

.food-entry {
    padding: 12px;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    background: #fffaf5;
}

.treat-entry {
    padding: 12px;
    border: 1px solid #fde68a;
    border-radius: 12px;
    background: #fffbeb;
}

.weight-entry div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.water-entry div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.food-entry div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.treat-entry div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.weight-entry strong {
    color: #111827;
}

.water-entry strong {
    color: #0f172a;
}

.food-entry strong {
    color: #111827;
    overflow-wrap: anywhere;
}

.treat-entry strong {
    color: #111827;
    overflow-wrap: anywhere;
}

.weight-entry span,
.weight-empty,
.weight-loading {
    color: #6b7280;
    font-size: 13px;
}

.water-entry span,
.water-empty,
.water-loading {
    color: #64748b;
    font-size: 13px;
}

.food-entry span,
.food-empty,
.food-loading {
    color: #78716c;
    font-size: 13px;
}

.treat-entry span,
.treat-empty,
.treat-loading {
    color: #78716c;
    font-size: 13px;
}

.weight-entry p {
    margin: 8px 0 0 0;
    color: #374151;
    overflow-wrap: anywhere;
}

.water-entry p {
    margin: 8px 0 0 0;
    color: #334155;
    overflow-wrap: anywhere;
}

.food-entry p {
    margin: 8px 0 0 0;
    color: #44403c;
    overflow-wrap: anywhere;
}

.treat-entry p {
    margin: 8px 0 0 0;
    color: #44403c;
    overflow-wrap: anywhere;
}

.food-entry .food-amount {
    color: #9a3412;
    font-weight: 700;
}

.treat-entry .treat-amount {
    color: #854d0e;
    font-weight: 700;
}

.weight-empty,
.weight-loading {
    margin: 0;
    padding: 12px;
    border-radius: 12px;
    background: #f9fafb;
}

.water-empty,
.water-loading {
    margin: 0;
    padding: 12px;
    border-radius: 12px;
    background: #f8fbff;
}

.food-empty,
.food-loading {
    margin: 0;
    padding: 12px;
    border-radius: 12px;
    background: #fffaf5;
}

.treat-empty,
.treat-loading {
    margin: 0;
    padding: 12px;
    border-radius: 12px;
    background: #fffbeb;
}

.media-item {
    margin: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #f5f3ff;
    aspect-ratio: 1;
}

.media-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-empty,
.media-loading {
    grid-column: 1 / -1;
    margin: 0;
    padding: 12px;
    border-radius: 12px;
    background: #f5f3ff;
    color: #6b7280;
    font-size: 13px;
}

.journal-entry {
    padding: 12px;
    border: 1px solid #e0e7ff;
    border-radius: 12px;
    background: #f8f7ff;
}

.journal-entry-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.journal-entry-header strong {
    color: #111827;
    overflow-wrap: anywhere;
}

.journal-entry-header span,
.journal-empty,
.journal-loading {
    color: #6b7280;
    font-size: 13px;
}

.journal-mood {
    display: inline-flex;
    width: auto;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 12px;
    font-weight: 700;
}

.journal-entry p {
    margin: 8px 0 0 0;
    color: #374151;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.journal-empty,
.journal-loading {
    margin: 0;
    padding: 12px;
    border-radius: 12px;
    background: #f8f7ff;
}

.medical-entry {
    padding: 12px;
    border: 1px solid #fecdd3;
    border-radius: 12px;
    background: #fff7f8;
}

.medical-entry-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.medical-entry-header strong {
    color: #111827;
    overflow-wrap: anywhere;
}

.medical-entry-header span,
.medical-empty,
.medical-loading {
    color: #6b7280;
    font-size: 13px;
}

.medical-type {
    display: inline-flex;
    width: auto;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #ffe4e6;
    color: #9f1239;
    font-size: 12px;
    font-weight: 700;
}

.medical-entry p {
    margin: 8px 0 0 0;
    color: #374151;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.medical-next {
    font-weight: 700;
}

.medical-empty,
.medical-loading {
    margin: 0;
    padding: 12px;
    border-radius: 12px;
    background: #fff7f8;
}

.edit-btn {

    background:#3b82f6;

}

.edit-btn:hover {

    background:#2563eb;

}

.delete-btn {

    background:#ef4444;

}

.delete-btn:hover {

    background:#dc2626;

}

.modal {

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    display:flex;

    justify-content:center;

    align-items:center;
    padding: 20px;

}

.hidden {

    display:none;

}

.modal-content {

    width:min(450px, 100%);

    background:white;

    padding:30px;

    border-radius:18px;

    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);

}

.modal-content h2 {
    margin: 0 0 8px 0;
}

.pet-details-modal-content {
    width: min(980px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    max-width: 100%;
    box-sizing: border-box;
}

.pet-details-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}

.pet-details-subtitle {
    margin: 0;
    color: #6b7280;
    overflow-wrap: anywhere;
}

.pet-details-close-btn {
    width: auto;
    margin-top: 0;
    flex: 0 0 auto;
}

.pet-details-tabs {
    display: flex;
    gap: 8px;
    margin: 22px 0 0 0;
    overflow-x: auto;
    padding-bottom: 4px;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.pet-details-tab {
    width: auto;
    flex: 0 0 auto;
    margin-top: 0;
    padding: 9px 12px;
    border-radius: 999px;
    background: #e5e7eb;
    color: #374151;
    font-size: 13px;
    white-space: nowrap;
}

.pet-details-tab.active {
    background: #4f9f72;
    color: white;
}

.pet-details-content {
    margin-top: 18px;
    max-width: 100%;
    overflow-x: hidden;
}

.details-overview-grid {
    margin-top: 0;
}

.details-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.details-section-header h3 {
    margin: 0;
    font-size: 17px;
}

.details-section-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.timeline-section {
    display: grid;
    gap: 14px;
}

.timeline-list {
    display: grid;
    gap: 18px;
}

.timeline-group {
    display: grid;
    gap: 10px;
}

.timeline-date {
    margin: 0;
    color: #475569;
    font-size: 14px;
}

.timeline-items {
    display: grid;
    gap: 10px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}

.timeline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #eef6f1;
    color: #166534;
    font-size: 13px;
    font-weight: 800;
}

.timeline-content {
    min-width: 0;
}

.timeline-item-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #64748b;
    font-size: 13px;
}

.timeline-type {
    font-weight: 800;
}

.timeline-item h4 {
    margin: 5px 0 0 0;
    color: #111827;
    font-size: 16px;
    overflow-wrap: anywhere;
}

.timeline-item p {
    margin: 6px 0 0 0;
    color: #374151;
    overflow-wrap: anywhere;
}

.timeline-empty,
.timeline-loading,
.timeline-warning {
    margin: 0;
    padding: 12px;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    font-size: 14px;
}

.timeline-warning {
    background: #fff7ed;
    color: #9a3412;
}

.modal-buttons {

    display:flex;

    gap:10px;
    margin-top: 8px;

}

.modal-buttons button {
    flex: 1 1 0;
}

.secondary-btn {

    background:#9ca3af;

}

.secondary-btn:hover {

    background:#6b7280;

}

button:disabled {
    opacity: .65;
    cursor: not-allowed;
}

.admin-page {
    min-height: 100vh;
    padding: 28px;
    background: #f5f7fb;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 16px;
    background: white;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.admin-eyebrow {
    margin: 0 0 6px 0;
    color: #4f9f72;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.admin-header h1 {
    margin: 0;
}

.admin-header-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.admin-header-actions button {
    width: auto;
    margin-top: 0;
    white-space: nowrap;
}

.admin-panel {
    max-width: 1180px;
    margin: 22px auto 0 auto;
    padding: 24px;
    border-radius: 16px;
    background: white;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.admin-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.admin-panel-header h2 {
    margin: 0;
    font-size: 20px;
}

.admin-panel-header p {
    margin: 6px 0 0 0;
    color: #6b7280;
}

.admin-message {
    min-height: 20px;
    color: #dc2626;
    font-size: 14px;
    text-align: right;
}

.admin-message.success {
    color: #15803d;
}

.admin-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}

.admin-users-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    background: white;
}

.admin-users-table th,
.admin-users-table td {
    padding: 13px 14px;
    border-bottom: 1px solid #eef2f7;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.admin-users-table th {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-users-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-role-badge,
.admin-active-badge {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.admin-role-badge {
    background: #eef2ff;
    color: #3730a3;
}

.admin-active-badge.active {
    background: #dcfce7;
    color: #166534;
}

.admin-active-badge.inactive {
    background: #fee2e2;
    color: #991b1b;
}

@media (max-width: 640px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .dashboard {
        padding: 18px;
    }

    .dashboard header,
    .admin-header,
    .admin-panel-header,
    .welcome,
    .family-section-header,
    .family-member,
    .pet-card-header,
    .weight-section-header,
    .water-section-header,
    .food-section-header,
    .treat-section-header,
    .media-section-header,
    .journal-section-header,
    .medical-section-header,
    .pet-actions,
    .modal-buttons {
        flex-direction: column;
    }

    .dashboard header {
        align-items: stretch;
        gap: 12px;
    }

    .admin-page {
        padding: 14px;
    }

    .admin-header,
    .admin-panel {
        padding: 18px;
        border-radius: 12px;
    }

    .admin-header-actions {
        flex-direction: column;
        width: 100%;
    }

    .admin-header-actions button {
        width: 100%;
    }

    .admin-panel-header {
        align-items: stretch;
    }

    .admin-message {
        text-align: left;
    }

    .dashboard header button,
    .add-pet-btn {
        width: 100%;
    }

    .welcome {
        align-items: stretch;
    }

    .family-section-header,
    .family-member {
        align-items: stretch;
    }

    .family-form {
        grid-template-columns: 1fr;
    }

    .family-form button {
        width: 100%;
    }

    .family-role {
        align-self: flex-start;
    }

    .family-member-controls {
        justify-content: flex-start;
    }

    .pet-species {
        align-self: flex-start;
    }

    .weight-section-header {
        align-items: stretch;
    }

    .water-section-header {
        align-items: stretch;
    }

    .food-section-header {
        align-items: stretch;
    }

    .treat-section-header {
        align-items: stretch;
    }

    .media-section-header {
        align-items: stretch;
    }

    .journal-section-header {
        align-items: stretch;
    }

    .medical-section-header {
        align-items: stretch;
    }

    .weight-add-btn {
        width: 100%;
    }

    .water-add-btn {
        width: 100%;
    }

    .food-add-btn {
        width: 100%;
    }

    .treat-add-btn {
        width: 100%;
    }

    .media-add-btn {
        width: 100%;
    }

    .journal-add-btn {
        width: 100%;
    }

    .medical-add-btn {
        width: 100%;
    }

    .pet-actions button,
    .modal-buttons button {
        width: 100%;
    }

    .modal {
        align-items: flex-start;
        overflow-y: auto;
    }

    .modal-content {
        padding: 24px;
        max-width: 100%;
        box-sizing: border-box;
    }

    .pet-details-modal-content {
        width: 100%;
        min-height: 100dvh;
        max-height: none;
        border-radius: 0;
        padding: 18px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .pet-details-modal-header {
        flex-direction: column;
        align-items: stretch;
    }

    .pet-details-modal-header h2,
    .pet-details-subtitle {
        overflow-wrap: anywhere;
    }

    .pet-details-close-btn {
        width: 100%;
        min-height: 44px;
    }

    .pet-details-tabs {
        gap: 8px;
        margin-top: 18px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }

    .pet-details-tab {
        min-height: 44px;
        padding: 10px 14px;
        scroll-snap-align: start;
    }

    .pet-details-content {
        overflow-x: hidden;
    }

    .details-overview-grid div,
    .weight-entry div,
    .water-entry div,
    .food-entry div,
    .treat-entry div,
    .journal-entry-header,
    .medical-entry-header,
    .details-section-header {
        flex-direction: column;
        align-items: stretch;
    }

    .details-section-header {
        gap: 10px;
    }

    .details-section-actions {
        justify-content: stretch;
        width: 100%;
    }

    .details-section-actions button {
        width: 100%;
        min-height: 44px;
    }

    .weight-entry,
    .water-entry,
    .food-entry,
    .treat-entry,
    .journal-entry,
    .medical-entry,
    .timeline-item {
        width: 100%;
        box-sizing: border-box;
    }

    .timeline-item {
        grid-template-columns: 1fr;
    }

    .timeline-icon {
        width: 38px;
        height: 38px;
    }

    .timeline-item-header {
        flex-direction: column;
        gap: 3px;
    }

    .weight-entry strong,
    .water-entry strong,
    .food-entry strong,
    .treat-entry strong,
    .journal-entry-header strong,
    .medical-entry-header strong,
    .weight-entry span,
    .water-entry span,
    .food-entry span,
    .treat-entry span,
    .journal-entry-header span,
    .medical-entry-header span,
    .timeline-item-header,
    .timeline-item h4,
    .timeline-item p,
    .weight-entry p,
    .water-entry p,
    .food-entry p,
    .treat-entry p,
    .journal-entry p,
    .medical-entry p {
        text-align: left;
        overflow-wrap: anywhere;
    }

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

@media (max-width: 360px) {
    .media-grid {
        grid-template-columns: 1fr;
    }
}