/* Background (light blue like in image) */
body {
    margin: 0;
}
/*ROLE SELECTION*/
.role-page {
    margin: 0;
    min-height: 100vh;
    font-family: 'Inter', Arial, sans-serif;
    background: linear-gradient(135deg, #f8fbff 0%, #eef7ff 45%, #ecfeff 100%);
    color: #111827;
}

.role-selection-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 60px;
}

.role-brand {
    display: flex;
    align-items: center;
    gap: 24px;
}

.role-logo-circle {
    width: 98px;
    height: 98px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
}

.role-logo-img {
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.role-brand-text h1 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 500;
}

.role-brand-text p {
    margin: 0 0 6px;
    font-size: 18px;
    color: #374151;
}

.role-brand-text span {
    font-size: 18px;
    color: #4b5563;
}

.role-card {
    width: 480px;
    background: #ffffff;
    border-radius: 18px;
    padding: 44px 40px 40px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.12);
    text-align: center;
}

.role-card h2 {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 500;
}

.role-card > p {
    margin: 0 0 40px;
    font-size: 17px;
    color: #4b5563;
}

.role-buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.role-btn {
    height: 70px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #ffffff;
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.role-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
}

.role-btn span {
    font-size: 24px;
}

.role-btn.administrator {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
}

.role-btn.midwife {
    background: linear-gradient(90deg, #06b6d4, #0891b2);
}

.role-btn.hrh {
    background: linear-gradient(90deg, #0ea5e9, #0284c7);
}

.role-btn.bhw {
    background: linear-gradient(90deg, #10b981, #059669);
}

/*Admin-dashboard*/
.admin-body {
    margin: 0;
    background: #f8fafc;
    font-family: 'Inter', Arial, sans-serif;
}

.admin-layout {
    display: flex;
    min-height: 100vh;
}

.admin-main-content {
    flex: 1;
    padding: 40px;
    background: #f8fafc;
}

.welcome-banner {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.welcome-banner h1 {
    margin: 0 0 8px;
    font-size: 30px;
    color: #111827;
}

.welcome-banner p {
    margin: 0;
    font-size: 18px;
    color: #475569;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.admin-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 26px;
    min-height: 145px;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.admin-card span {
    font-size: 15px;
    color: #475569;
    font-weight: 600;
}

.admin-card h2 {
    margin: 18px 0 6px;
    font-size: 36px;
    color: #0f172a;
}

.admin-card p {
    margin: 0;
    color: #64748b;
}

.admin-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.admin-card-icon.blue { background: #eff6ff; }
.admin-card-icon.green { background: #f0fdf4; }
.admin-card-icon.gray { background: #f1f5f9; }
.admin-card-icon.purple { background: #f5f3ff; }
.admin-card-icon.orange { background: #fff7ed; }
.admin-card-icon.indigo { background: #eef2ff; }

/* Background setup */
.login-page {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
    background: radial-gradient(circle at center, #1e3a8a 0%, #0f172a 100%);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.login-wrapper {
    width: 100%;
    max-width: 480px;
    text-align: center;
}

/* Header Styling */
.login-header {
    margin-bottom: 30px;
}

.main-logo {
    width: 70px;
    background: white;
    border-radius: 50%;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.login-header h1 { font-size: 2rem; margin: 0; letter-spacing: 2px; }
.login-header p { margin: 5px 0; opacity: 0.9; }
.login-header span { font-size: 0.9rem; opacity: 0.7; }

/* The Card */
.login-card {
    background: #f8fafc;
    border-radius: 16px;
    padding: 0; 
    color: #1e293b;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.card-title-section {
    display: flex;
    align-items: center;
    padding: 25px;
    background: #f1f5f9;
    text-align: left;
    gap: 15px;
    border-bottom: 1px solid #e2e8f0;
}

.shield-icon {
    font-size: 24px;
    background: #3b82f6;
    padding: 10px;
    border-radius: 12px;
}

.title-text h2 { margin: 0; font-size: 1.2rem; }
.title-text p { margin: 0; font-size: 0.85rem; color: #64748b; }

/* Form Elements */
.login-form { padding: 30px; text-align: left; }

.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.9rem; color: #475569; }

.form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: white;
    font-size: 0.95rem;
}

.password-wrapper { position: relative; }
.toggle-password { position: absolute; right: 15px; top: 12px; cursor: pointer; color: #94a3b8; }

/* Buttons row */
.button-group {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.btn-signin {
    flex: 2;
    background: #2563eb;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.btn-back {
    flex: 1;
    background: white;
    color: #475569;
    border: 1px solid #cbd5e1;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    font-size: 0.9rem;
}

.help-link { padding-bottom: 20px; font-size: 0.85rem; }
.help-link a { color: #64748b; text-decoration: none; }

/* Dashboard Layout */
.dashboard-container {
    display: flex;
    min-height: 100vh;
    background-color: #f8fafc;
}

.main-content {
    flex: 1;
    padding: 40px;
}

/* Welcome Box */
.welcome-banner {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}

.welcome-banner h1 { font-size: 24px; color: #1e293b; margin-bottom: 8px; }
.welcome-banner p { color: #64748b; font-size: 14px; }

/* 3-Column Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px;
}

.card {
    background: white;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.card-label { font-size: 13px; color: #64748b; font-weight: 600; }
.card-value { font-size: 28px; color: #1e293b; margin: 10px 0; }
.card-sub { font-size: 11px; color: #94a3b8; }

/* Icon Styling */
.card-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.blue { background: #eff6ff; color: #3b82f6; }
.green { background: #f0fdf4; color: #22c55e; }
.orange { background: #fff7ed; color: #f97316; }

.sidebar {
    width: 250px;
    height: 100vh;
    box-sizing: border-box;
    background: white;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px;
    position: sticky;
    top: 0;
    flex: 0 0 250px;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.logo-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
    overflow: hidden;
    flex-shrink: 0;
}

.sidebar-logo-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.logo-text .brand { display: block; font-weight: 800; color: #1e293b; font-size: 18px; }
.logo-text .sub-brand { font-size: 12px; color: #64748b; }

.sidebar-label {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

/* Nav Item Styling */
.nav-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    text-decoration: none;
    border-radius: 10px;
    margin-bottom: 5px;
    transition: 0.2s;
    gap: 12px;
}

.nav-item.active {
    background: #eff6ff;
    color: #2563eb; 
    border: 1px solid #dbeafe; 
}
.nav-item.active .nav-title { 
    color: #2563eb; 
}

.nav-title { display: block; font-size: 14px; font-weight: 600; color: #475569; }
.nav-sub { font-size: 11px; color: #94a3b8; }

/* Profile Section at Bottom */
.sidebar-footer {
    border-top: 1px solid #f1f5f9;
    padding-top: 14px;
    flex-shrink: 0;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    background: #2563eb;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.user-name { display: block; font-size: 14px; font-weight: 600; color: #1e293b; }
.user-email { font-size: 12px; color: #64748b; }

.logout-btn {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: white;
    cursor: pointer;
    font-size: 14px;
    color: #475569;
}

/* Container Spacing */
.content-area {
    flex: 1;
    overflow-y: auto; /* Only the right side scrolls */
    padding: 30px;
    background-color: #f1f5f9;
}

/* Blue Top Card */
.page-header-card {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #e2e8f0;
    margin-bottom: 20px;
}

.header-left { display: flex; align-items: center; gap: 15px; }
.header-icon { font-size: 24px; background: #eff6ff; padding: 10px; border-radius: 12px; }

.add-user-btn {
    background: #2563eb;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

/* Table Card */
.table-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.data-table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 15px; 
}
.data-table th {
    text-align: left; 
    color: #64748b; 
    font-size: 13px; 
    padding: 15px; 
    border-bottom: 1px solid #f1f5f9; 
}
.data-table td { 
    padding: 15px; 
    border-bottom: 1px solid #f1f5f9; 
    vertical-align: middle; 
}

/* Badges and Text */
.user-cell { 
    display: flex; 
    flex-direction: column; 
}
.user-cell-name { 
    font-weight: 600; 
    color: #1e293b; 
}
.user-cell-sub { 
    font-size: 12px; 
    color: #94a3b8; 
}

.status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.status-badge.active { 
    background: #dcfce7; 
    color: #166534; 
}
.status-badge.inactive { 
    background: #f1f5f9; 
    color: #475569; 
}

.role-badge {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
}

/* Centered Card fix */
.modal-content.card-styled {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 550px; 
    max-height: 90vh; 
    background: #ffffff;
    border-radius: 12px;
    padding: 24px 32px; 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
    overflow-y: auto; 
}

/* Header Close Button Positioning */
.modal-header {
    position: relative;
    margin-bottom: 20px;
}

.close-modal-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    background: none;
    border: none;
    font-size: 20px;
    color: #94a3b8;
    cursor: pointer;
}


.barangay-checkbox-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 15px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    max-height: 180px; 
    overflow-y: auto;
}

.modal-overlay, 
#userModal, 
#editUserModal {
    display: none; 
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    z-index: 1000;
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(3px);
}
.info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 10px;
}

.info-icon {
    font-size: 18px;
    background: #f8fafc;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.info-content label {
    display: block;
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 600;
}

.info-content p {
    margin: 2px 0 0;
    font-size: 14px;
    color: #1e293b;
    font-weight: 500;
}

.barangay-badge-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.barangay-view-badge {
    background: #eff6ff;
    color: #2563eb;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    border: 1px solid #dbeafe;
}

/* Top Header Card */
.brgy-header-card {
    background: #faf5ff; /* Light purple tint */
    border: 1px solid #f3e8ff;
    padding: 24px 32px;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.brgy-icon-badge {
    background: #f3e8ff;
    color: #a855f7; 
    padding: 12px;
    border-radius: 12px;
    font-size: 24px;
    margin-right: 16px;
}

.btn-add-brgy {
    background: #9333ea;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

/* Search Bar Styling */
.search-card {
    background: white;
    padding: 14px 24px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    margin-bottom: 24px;
}

.search-card input {
    font-size: 15px;
    color: #64748b;
}

.brgy-table-wrapper {
    background: white;
    padding: 32px;
    border-radius: 20px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.05);
}

.brgy-table th {
    text-transform: none; 
    color: #64748b;
    font-weight: 600;
    padding: 16px;
    border-bottom: 2px solid #f8fafc;
}

.brgy-table td {
    padding: 20px 16px;
    border-bottom: 1px solid #f8fafc;
}

/* Status Pill */
.status-pill-active {
    background: #dcfce7;
    color: #166534;
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #bbf7d0;
}

/* Action Buttons (Edit/Deactivate) */
.btn-action-outline {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 500;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-action-deactivate {
    color: #ef4444;
    border-color: #fee2e2;
    background: #fffafb;
}

/* Modal Background Overlay */
.modal-overlay {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.5); 
    backdrop-filter: blur(4px);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

/* Card Styling for Modal */
.modal-content.card-styled {
    background: white;
    width: 100%;
    max-width: 500px;
    padding: 32px;
    border-radius: 20px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.header-title h2 { margin: 0; font-size: 20px; color: #1e293b; }
.header-title p { margin: 4px 0 0; font-size: 14px; color: #64748b; }

.close-modal-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #94a3b8;
    cursor: pointer;
}

/* Container and Background for the Staff-login page */
.bg-light-blue {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    margin: 0;
}

.login-container {
    width: 100%;
    max-width: 450px;
    padding: 20px;
    text-align: center;
}

/* Header Section */
.staff-header {
    margin-bottom: 30px;
}

.staff-top-header {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background: transparent; /* Hayaan ang body background ang lumabas */
}

.mini-logo {
    width: 60px;
    height: auto;
    margin-bottom: 10px;
}

.staff-header h1 {
    font-size: 24px;
    color: #1e293b;
    margin: 0;
    font-weight: 700;
}

.staff-header p {
    color: #64748b;
    font-size: 14px;
    margin: 5px 0;
}

.staff-header span {
    font-size: 12px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* The Login Card */
.staff-login-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.staff-login-card h2 {
    font-size: 28px;
    color: #0f172a;
    margin-bottom: 10px;
}

.subtitle {
    color: #64748b;
    font-size: 14px;
    margin-bottom: 30px;
}

/* Form Inputs */
.input-group {
    text-align: left;
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
}

.input-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.3s ease;
    box-sizing: border-box; /* Mahalaga para sa width padding */
}

.input-group input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

/* Options (Remember me & Forgot pass) */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 13px;
}

.form-options label {
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.form-options a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

/* Buttons */
.btn-login-blue {
    width: 100%;
    padding: 14px;
    background-color: #2563eb;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-bottom: 15px;
}

.btn-login-blue:hover {
    background-color: #1d4ed8;
}

.btn-back-selection {
    display: block;
    text-decoration: none;
    color: #64748b;
    font-size: 14px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.btn-back-selection:hover {
    background-color: #f8fafc;
    color: #1e293b;
}

/* Staff-dashboard Global Styles */
.body-staff {
    background-color: #eef2f8;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

/* ── Header ─────────────────────────────────────── */
.staff-top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 40px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    height: 72px;
}

.brand-section {
    display: flex;
    align-items: center;
    min-width: 260px;
    gap: 14px;
}

.logo-circle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 22px;
}

.brand-text h3 {
    font-size: 17px;
    font-weight: 800;
    color: #1e3a5f;
    line-height: 1.1;
    margin: 0;
}

.brand-text p {
    font-size: 11.5px;
    color: #374151;
    line-height: 1.3;
    margin: 0;
}

.brand-text .location-tag {
    font-size: 10.5px;
    color: #94a3b8;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.action-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: #64748b;
    padding: 7px 12px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    transition: background 0.15s, color 0.15s;
}

.action-item:hover { background: #f1f5f9; color: #374151; }

.logout-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: #64748b;
    padding: 7px 12px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.logout-btn:hover { background: #fef2f2; color: #dc2626; }

/* ── Navigation ──────────────────────────────────── */
.main-nav {
    display: flex;
    justify-content: center;
    padding: 0 40px;
    margin-bottom: 20px;
}

.nav-wrapper {
    background: white;
    display: inline-flex;
    padding: 5px;
    border-radius: 100px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border: 1px solid #e2e8f0;
    margin-top: 0;
}

.nav-link {
    text-decoration: none;
    color: #64748b;
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    transition: 0.15s;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.nav-link:hover { background: #f8fafc; color: #374151; }

.nav-link.active {
    background: #ffffff;
    color: #2563eb;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,0.09);
}

/* ── Dashboard container ─────────────────────────── */
.dashboard-container {
    padding: 18px 40px 40px;
    max-width: 1400px;
    margin: 0 auto;
    display: block;
}

/* ── Primary grid: 3 large cards ─────────────────── */
.metrics-grid-primary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 25px;
    width: 100%;
}

/* ── Secondary grid: 4 small cards ──────────────── */
.metrics-grid-secondary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
    clear: both;
}

/* ── Large metric card ───────────────────────────── */
.metric-card {
    background: white;
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    border: 1px solid #e8edf5;
    display: flex;
    flex-direction: column;      /* stack vertically */
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    min-height: 180px;
    height: auto;
    transition: box-shadow 0.18s, transform 0.15s;
}

.metric-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

/* Top row: label on left, icon on right */
.metric-card .card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

/* Big number */
.metric-card .value {
    font-size: 38px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
    margin: 0 0 6px 0;
}

/* Sublabel under the number */
.metric-card .sub-label {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
}

/* ── Small mini card ─────────────────────────────── */
.mini-card {
    background: white;
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    border: 1px solid #e8edf5;
    display: flex;
    flex-direction: column;      /* stack vertically like large cards */
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.18s, transform 0.15s;
    min-height: 140px;
    height: auto;
}

.mini-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

/* Top row: label on left, icon on right */
.card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 15px;
}

/* Number */
.mini-card h4 {
    font-size: 30px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
    margin: 0 0 5px 0;
}

/* Sublabel */
.mini-card p {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
}

/* ── Shared label style ──────────────────────────── */
.label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    line-height: 1.3;
}

/* Icon Styles */
.metric-icon, .mini-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* ── Progress bar ────────────────────────────────── */
.progress-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3.5px;
    background: #f1f5f9; /* Gray background for inactive part */
}

.progress-line::after {
    content: '';
    position: absolute;
    left: 0;
    height: 100%;
    width: 80%; /* Adjust based on data */
}

.progress-line.blue::after { background: #2563eb; }
.progress-line.green::after { background: #10b981; }
.progress-line.red::after { background: #ef4444; }

/* ── Color variants ──────────────────────────────── */
.blue-bg { background: #eff6ff; color: #2563eb; }
.green-bg { background: #f0fdf4; color: #16a34a; }
.red-bg { background: #fef2f2; color: #dc2626; }
.purple-bg { background: #f5f3ff; color: #7c3aed; }
.orange-bg { background: #fff7ed; color: #ea580c; }
.cyan-bg { background: #ecfeff; color: #0891b2; }
.amber-bg { background: #fffbeb; color: #d97706; }

.dashboard-visual-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 24px;
}

.admin-profile-link {
    padding: 8px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
}

.admin-profile-link:hover,
.admin-profile-link.active {
    background: #eff6ff;
}

.admin-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.admin-profile-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-profile-card {
    padding: 24px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
}

.admin-profile-card-head {
    margin-bottom: 20px;
}

.admin-profile-card-head h2 {
    margin: 0 0 6px;
    font-size: 20px;
}

.admin-profile-card-head p {
    margin: 0;
    color: #64748b;
}

.admin-profile-form {
    display: grid;
    gap: 16px;
}

.admin-profile-form .user-form-field {
    display: grid;
    gap: 7px;
}

.admin-profile-form .user-form-label {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.admin-profile-form .form-control {
    display: block;
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.admin-profile-form .form-control:focus {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.admin-profile-form .user-form-hint {
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}

.admin-profile-form .btn-system-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 150px;
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 9px;
    background: #2563eb;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.admin-profile-form .btn-system-primary:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

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

.recycle-bin-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.recycle-count,
.recycle-type-badge,
.recycle-days {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
}

.recycle-bin-card {
    margin-top: 20px;
}

.recycle-filter-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.recycle-filter-form label {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.recycle-filter-form select {
    min-width: 230px;
    min-height: 40px;
    padding: 8px 36px 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    color: #0f172a;
}

.recycle-bin-table td {
    vertical-align: middle;
}

.recycle-days {
    background: #fff7ed;
    color: #c2410c;
}

.recycle-empty {
    padding: 44px !important;
    color: #64748b;
    text-align: center;
}

.insight-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
    padding: 24px;
    min-height: 320px;
}

.insight-card-feature {
    min-height: 360px;
}

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

.insight-kicker {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2563eb;
}

.insight-header h3 {
    margin: 0 0 8px;
    font-size: 24px;
    color: #0f172a;
}

.insight-header p {
    margin: 0;
    font-size: 15px;
    color: #64748b;
    line-height: 1.6;
}

.insight-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.insight-badge.success {
    background: #ecfdf5;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.insight-badge.info {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.insight-badge.neutral {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.nutrition-visual-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 28px;
    align-items: center;
}

.donut-chart-shell {
    display: flex;
    justify-content: center;
}

.donut-chart {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.donut-chart::after {
    content: "";
    position: absolute;
    inset: 18px;
    background: #ffffff;
    border-radius: 50%;
}

.donut-chart-center {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.donut-chart-center strong {
    font-size: 36px;
    color: #0f172a;
    line-height: 1;
}

.donut-chart-center span {
    margin-top: 6px;
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

.legend-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.legend-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
}

.legend-row-main {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1e293b;
    font-weight: 600;
}

.legend-row-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.legend-row-meta strong {
    font-size: 18px;
    color: #0f172a;
}

.legend-row-meta small {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 999px;
}

.legend-dot.green { background: #22c55e; }
.legend-dot.amber { background: #f59e0b; }
.legend-dot.red { background: #ef4444; }
.legend-dot.slate { background: #94a3b8; }

.bar-chart-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 6px;
}

.bar-chart-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bar-chart-labels {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.bar-chart-labels strong {
    font-size: 15px;
    color: #0f172a;
}

.bar-chart-labels span {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

.bar-track,
.barangay-track {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.bar-fill,
.barangay-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.bar-fill.green { background: linear-gradient(90deg, #22c55e, #16a34a); }
.bar-fill.blue { background: linear-gradient(90deg, #60a5fa, #2563eb); }
.bar-fill.amber { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.bar-fill.red { background: linear-gradient(90deg, #f87171, #ef4444); }

.column-chart {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    align-items: end;
    min-height: 220px;
    padding-top: 10px;
}

.column-chart-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.column-chart-value {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.admin-body .sidebar .logout-btn {
    width: 100%;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid #fecaca;
    border-radius: 9px;
    background: #fffafa;
    color: #dc2626;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.admin-body .sidebar .logout-btn:hover {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #b91c1c;
}

.admin-body .sidebar .logout-btn:focus-visible {
    outline: 3px solid rgba(239, 68, 68, 0.18);
    outline-offset: 2px;
}

.column-chart-track {
    width: 100%;
    height: 150px;
    border-radius: 18px;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 8px;
}

.column-chart-fill {
    width: 100%;
    border-radius: 12px 12px 8px 8px;
    background: linear-gradient(180deg, #38bdf8 0%, #2563eb 100%);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
}

.column-chart-label {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.barangay-row + .barangay-row {
    margin-top: 18px;
}

.barangay-row-top {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
    align-items: center;
}

.barangay-row-top strong {
    font-size: 15px;
    color: #0f172a;
}

.barangay-row-top span {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

.barangay-fill {
    background: linear-gradient(90deg, #60a5fa, #2563eb);
}

.barangay-row p {
    margin: 10px 0 0;
    font-size: 13px;
    color: #64748b;
}

.graph-empty-state {
    min-height: 180px;
    border: 1px dashed #cbd5e1;
    border-radius: 18px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    color: #64748b;
    font-size: 15px;
    line-height: 1.6;
}

@media (max-width: 1200px) {
    .metrics-grid-primary,
    .dashboard-visual-grid {
        grid-template-columns: 1fr;
    }

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

    .nutrition-visual-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-container {
        padding: 18px 16px 32px;
    }

    .metrics-grid-secondary {
        grid-template-columns: 1fr;
    }

    .column-chart {
        gap: 10px;
    }

    .column-chart-track {
        height: 120px;
    }

    .insight-header,
    .barangay-row-top,
    .bar-chart-labels {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* RECORD SECTION*/
.records-container {
    padding: 40px;
    max-width: 1540px;
    margin: 0 auto;
}

.records-hero,
.filters-card,
.records-list-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.records-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 34px 30px;
    margin-bottom: 40px;
}

.records-hero h1 {
    margin: 0 0 6px;
    font-size: 30px;
    font-weight: 500;
    color: #111827;
}

.records-hero p {
    margin: 0;
    font-size: 19px;
    color: #475569;
}

.records-actions {
    display: flex;
    gap: 14px;
}
.archive-btn,
.exit-archive-btn {
    height: 46px;
    padding: 0 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.archive-btn {
    background: #ffffff;
    color: #ea580c;
    border: 1px solid #fb923c;
}

.exit-archive-btn {
    background: #f45113;
    color: #ffffff;
    border: 1px solid #f45113;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.18);
}

.archive-banner {
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 16px;
    padding: 32px 40px;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.archive-banner-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.archive-icon {
    width: 60px;
    height: 60px;
    border-radius: 999px;
    background: #ffedd5;
    color: #ea580c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.archive-banner h2 {
    margin: 0 0 10px;
    color: #7c2d12;
}

.archive-banner p {
    margin: 0;
    color: #c2410c;
}

.archive-count {
    text-align: center;
    color: #7c2d12;
}

.archive-count h2 {
    margin: 0 0 6px;
    font-size: 32px;
}

.archive-note {
    display: block;
    margin-top: 12px;
    color: #f45113;
}

.records-list-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.archive-mode-pill {
    padding: 7px 12px;
    border: 1px solid #fdba74;
    border-radius: 8px;
    color: #ea580c;
    background: #fff7ed;
    font-weight: 600;
}

.archive-trigger-btn {
    cursor: pointer;
    font-family: inherit;
}

.back-active-btn {
    height: 44px;
    padding: 0 20px;
    border: 1px solid #93c5fd;
    color: #2563eb;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    margin-top: 4px;
}

.archive-helper {
    display: block;
    margin-top: 42px;
    color: #64748b;
}

.add-record-btn {
    height: 46px;
    padding: 0 20px;
    border-radius: 8px;
    background: #2563eb;
    color: #ffffff;
    border: 1px solid #2563eb;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.archive-btn,
.add-record-btn,
.reset-btn,
.small-refresh-btn {
    height: 46px;
    padding: 0 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.archive-btn {
    background: #ffffff;
    color: #ea580c;
    border: 1px solid #fb923c;
}

.add-record-btn {
    background: #2563eb;
    color: #ffffff;
    border: 1px solid #2563eb;
}

.filters-card {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 30px;
    align-items: end;
    padding: 38px 40px 30px;
    margin-bottom: 40px;
}

.filter-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #334155;
}

.input-wrap,
.filter-group select {
    width: 100%;
    height: 46px;
    background: #f3f4f6;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    color: #374151;
}

.input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    box-sizing: border-box;
}

.input-wrap input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 16px;
}

.filter-group select {
    padding: 0 16px;
}

.reset-btn {
    background: #ffffff;
    color: #333333;
    border: 1px solid #d9dde5;
}

.records-list-card {
    padding: 30px;
    min-height: 560px;
}

.records-list-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.records-list-header h3 {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 500;
    color: #111827;
}

.records-list-header p {
    margin: 0;
    font-size: 19px;
    color: #475569;
}

.guardian-edit-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.guardian-edit-header h3 {
    margin: 0 0 8px;
    font-size: 22px;
    color: #1e293b;
}

.guardian-edit-header p {
    margin: 0;
    color: #64748b;
    font-size: 15px;
}

.guardian-edit-banner {
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
    font-size: 13px;
    font-weight: 600;
}

.guardian-section-title {
    min-height: 68px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #334155;
}

.guardian-edit-card {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    padding: 20px 18px 18px;
}

.guardian-card-heading {
    text-align: center;
    font-size: 15px;
    color: #475569;
    margin-bottom: 18px;
}

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

.guardian-form-grid-top {
    grid-template-columns: 110px minmax(240px, 1.2fr) minmax(300px, 1fr);
    margin-bottom: 18px;
}

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

.guardian-id-field input {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
}

.guardian-address-input {
    display: grid;
    grid-template-columns: 1fr 42px;
    gap: 8px;
}

.guardian-address-input input {
    background: #f8fafc;
}

.guardian-refresh-btn {
    width: 42px;
    height: 46px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    font-size: 18px;
    cursor: pointer;
}

.guardian-edit-card .field small {
    display: block;
    margin-top: 6px;
    color: #94a3b8;
    font-size: 11px;
}

.guardian-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 26px;
}

.guardian-update-btn {
    min-width: 180px;
    height: 42px;
    padding: 0 18px;
    border: none;
    border-radius: 9px;
    background: #2563eb;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
}

.immunization-editor-shell {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.immunization-editor-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    padding: 20px 18px 18px;
}

.immunization-editor-toolbar {
    display: block;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #e5e7eb;
}

.immunization-selector-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.immunization-selector-field .form-select {
    min-height: 44px;
    border-radius: 12px;
    border-color: #d7dfeb;
    font-size: 13px;
    color: #475569;
    box-shadow: none;
}

.immunization-selector-field select[multiple] {
    min-height: 190px;
    padding: 8px;
}

.immunization-selector-field select[multiple] option {
    padding: 10px 12px;
    border-radius: 8px;
}

.immunization-selector-help {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-size: 12px;
}

.immunization-selection-empty {
    padding: 24px;
    border: 1px dashed #bfdbfe;
    border-radius: 14px;
    background: #f8fbff;
    color: #475569;
    text-align: center;
}

.immunization-dose-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.immunization-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}

.immunization-status-badge.done { background: #dcfce7; color: #15803d; }
.immunization-status-badge.pending { background: #fef3c7; color: #b45309; }
.immunization-status-badge.missed { background: #fee2e2; color: #b91c1c; }
.immunization-view-chip.missed { background: #fee2e2; color: #b91c1c; }

.immunization-vaccine-card + .immunization-vaccine-card {
    margin-top: 16px;
}

.immunization-vaccine-card {
    scroll-margin-top: 120px;
    border-top: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 16px 0 0;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.immunization-vaccine-card.is-active {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    box-shadow: inset 0 0 0 1px #dbeafe;
    padding: 16px 14px 14px;
}

.immunization-vaccine-head {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.immunization-vaccine-head h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #334155;
}

.immunization-vaccine-head span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 700;
}

.immunization-dose-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 12px;
}

.immunization-dose-field label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 8px;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

.immunization-dose-field small {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
}

.immunization-date-input {
    min-height: 42px;
    border-radius: 10px;
    border-color: #d7dfeb;
    box-shadow: none;
}

.immunization-editor-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
}

.immunization-editor-actions .guardian-update-btn {
    min-width: 190px;
    border-radius: 10px;
    background: linear-gradient(90deg, #2563eb 0%, #4f46e5 100%);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2);
}

.immunization-advanced-card {
    padding: 0;
    overflow: hidden;
}

.immunization-advanced-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    cursor: pointer;
}

.immunization-advanced-summary::-webkit-details-marker {
    display: none;
}

.immunization-advanced-summary h3 {
    margin: 0;
    font-size: 16px;
    color: #1e293b;
}

.immunization-advanced-summary p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
}

.immunization-advanced-summary span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 118px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid #dbe3ef;
    background: #f8fafc;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
}

.immunization-advanced-card[open] .immunization-advanced-summary {
    border-bottom: 1px solid #e5e7eb;
}

.immunization-advanced-card[open] .immunization-advanced-summary span::before {
    content: "Hide Details";
    font-size: 12px;
    font-weight: 700;
}

.immunization-advanced-card:not([open]) .immunization-advanced-summary span::before {
    content: "Show Details";
    font-size: 12px;
    font-weight: 700;
}

.immunization-advanced-summary span {
    font-size: 0;
}

.immunization-advanced-body {
    padding: 0 22px 22px;
}

.small-refresh-btn {
    height: 42px;
    background: #ffffff;
    color: #2563eb;
    border: 1px solid #d9dde5;
}

@media (max-width: 991px) {
    .immunization-dose-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

    .immunization-advanced-summary {
        flex-direction: column;
        align-items: flex-start;
    }
}

.empty-records {
    min-height: 390px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.empty-icon {
    font-size: 58px;
    opacity: 0.5;
    margin-bottom: 22px;
}

.empty-records h3 {
    margin: 0 0 18px;
    font-size: 23px;
    color: #111827;
}

.empty-records p {
    margin: 0 0 30px;
    max-width: 560px;
    font-size: 20px;
    line-height: 1.5;
    color: #64748b;
}

.archive-confirm-card {
    width: 100%;
    max-width: 560px;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.25);
    padding: 24px 24px 20px;
    animation: slideUp 0.25s ease-out;
}

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

.archive-confirm-title {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.archive-confirm-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #fff7ed;
    color: #ea580c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.archive-confirm-title h2 {
    margin: 0 0 4px;
    font-size: 24px;
    color: #1f2937;
}

.archive-confirm-title p {
    margin: 0;
    font-size: 14px;
    color: #64748b;
}

.archive-confirm-close {
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}

.archive-confirm-message {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.7;
    color: #4b5563;
}

.archive-confirm-notes {
    border: 1px solid #fed7aa;
    background: #fff7ed;
    border-radius: 12px;
    padding: 14px 16px;
    color: #c2410c;
}

.archive-confirm-notes strong {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
}

.archive-confirm-notes ul {
    margin: 0;
    padding-left: 18px;
}

.archive-confirm-notes li {
    margin: 7px 0;
    font-size: 14px;
    line-height: 1.5;
}

.archive-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.archive-cancel-btn,
.archive-submit-btn {
    min-width: 130px;
    height: 42px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.archive-cancel-btn {
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #4b5563;
}

.archive-submit-btn {
    border: 1px solid #f97316;
    background: #f97316;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(249, 115, 22, 0.24);
}

@media (max-width: 768px) {
    .archive-confirm-card {
        margin: 0 16px;
        padding: 20px 18px 18px;
    }

    .archive-confirm-actions {
        flex-direction: column-reverse;
    }

    .archive-cancel-btn,
    .archive-submit-btn {
        width: 100%;
    }

    .immunization-editor-actions {
        justify-content: stretch;
    }

    .immunization-editor-actions .guardian-update-btn {
        width: 100%;
    }
}
/*ADD CHILD RECORD*/
.add-child-container {
    padding: 40px;
    max-width: 1540px;
    margin: 0 auto;
}

.add-child-header-card,
.form-panel,
.instructions-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.add-child-header-card {
    padding: 34px 30px;
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
}

.back-records-btn {
    height: 40px;
    padding: 0 16px;
    border: 1px solid #d9dde5;
    border-radius: 8px;
    color: #334155;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
}

.add-child-header-card h1 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 500;
}

.add-child-header-card p {
    margin: 0;
    font-size: 20px;
    color: #475569;
}

.section-counter {
    padding: 6px 12px;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    font-weight: 700;
}

.add-child-form {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.form-tabs {
    height: 46px;
    background: #e7e7ec;
    border-radius: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 4px;
    margin-bottom: 70px;
}

.form-tabs div {
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #888;
}

.form-tabs .active {
    background: #ffffff;
    color: #222;
}

.form-panel {
    padding: 24px 20px 30px;
    box-shadow: none;
}

.form-panel h2 {
    margin: 0 0 24px;
    font-size: 24px;
}

.form-inner-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.form-inner-card h3 {
    margin: 0 0 28px;
    font-size: 20px;
    font-weight: 500;
}

.child-form-grid {
    display: grid;
    gap: 26px 20px;
}

.child-form-grid.three {
    grid-template-columns: repeat(3, 1fr);
}

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

.field label {
    display: block;
    margin-bottom: 8px;
    font-size: 17px;
    font-weight: 700;
    color: #111827;
}

.field input,
.field select {
    width: 100%;
    height: 46px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 16px;
    color: #111827;
    background: #ffffff;
    box-sizing: border-box;
}

.field input:disabled {
    background: #f8fafc;
    color: #9ca3af;
}

.add-child-actions {
    min-height: 170px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 58px;
    padding-top: 30px;
}

.save-info-btn,
.next-section-btn {
    height: 46px;
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    padding: 0 24px;
}

.save-info-btn {
    background: #16a34a;
}

.next-section-btn {
    background: #2563eb;
}

.instructions-box {
    margin: 0 0 30px;
    padding: 26px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    background: #eff6ff;
    border-color: #93c5fd;
}

.instructions-box span {
    color: #2563eb;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    padding: 4px 10px;
    background: #dbeafe;
}

.instructions-box p {
    margin: 0;
    color: #0f52ff;
    font-size: 17px;
}

/*IMMUNIZATION */
.immunization-container {
    padding: 40px;
    max-width: 1540px;
    margin: 0 auto;
}

.duplicate-child-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid #fbbf24;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
    line-height: 1.45;
}

.duplicate-child-warning span {
    flex: 0 0 auto;
    color: #d97706;
}

.immunization-container .records-list-card {
    min-height: 0;
}

.immunization-summary-card,
.immunization-chart-card,
.immunization-metric {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

.monitoring-hero-card,
.monitoring-toolbar,
.monitoring-chart-card,
.monitoring-bottom-metrics .immunization-metric {
    min-height: 0;
}

.monitoring-hero-card {
    padding: 26px 28px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.monitoring-hero-copy h1 {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
}

.monitoring-hero-copy p {
    margin: 0 0 16px;
    font-size: 15px;
    color: #64748b;
}

.status-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.monitoring-pill {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid transparent;
}

.monitoring-pill-blue {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.monitoring-pill-green {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #15803d;
}

.monitoring-pill-violet {
    background: #f5f3ff;
    border-color: #ddd6fe;
    color: #6d28d9;
}

.monitoring-pill-amber {
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
}

.monitoring-pill-teal {
    background: #ecfeff;
    border-color: #a5f3fc;
    color: #0f766e;
}

.monitoring-pill-slate {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #475569;
}

.monitoring-pill-mint {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #16a34a;
}

.monitoring-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.monitoring-state-btn,
.monitoring-refresh-icon,
.toolbar-btn {
    height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid #dbe3ef;
    background: #ffffff;
    color: #1d4ed8;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.monitoring-state-btn {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.monitoring-refresh-icon {
    width: 42px;
    padding: 0;
    font-size: 18px;
}

.monitoring-toolbar {
    padding: 18px 24px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.monitoring-toolbar-left,
.monitoring-toolbar-right {
    display: flex;
    gap: 12px;
    align-items: end;
    flex-wrap: wrap;
}

.monitoring-year-form {
    display: flex;
    gap: 10px;
    align-items: end;
    flex-wrap: wrap;
}

.monitoring-year-form .form-label {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.monitoring-year-select {
    min-width: 140px;
    min-height: 42px;
    border-radius: 10px;
    border-color: #d6deea;
    font-size: 14px;
    box-shadow: none;
}

.toolbar-btn {
    box-shadow: none;
}

.edit-mode-btn {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

.edit-mode-btn.is-active {
    background: #0f172a;
    border-color: #0f172a;
}

.save-changes-btn {
    background: #16a34a;
    color: #ffffff;
    border-color: #16a34a;
}

.print-report-btn {
    color: #334155;
    border-color: #cbd5e1;
}

.export-data-btn {
    color: #15803d;
    border-color: #86efac;
    background: #f0fdf4;
}

.edit-mode-notice {
    margin: 18px 22px 0;
    min-height: 50px;
    border: 1px solid #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 700;
}

.hidden {
    display: none !important;
}

.editable-field {
    border-color: #2563eb !important;
    background: #ffffff !important;
}

@media print {
    .staff-top-header,
    .main-nav,
    .immunization-summary-card,
    .chart-toolbar {
        display: none !important;
    }

    body {
        background: #ffffff !important;
    }

    .immunization-container {
        padding: 0;
        max-width: none;
    }

    .immunization-chart-card {
        box-shadow: none;
        border: none;
    }
}

.monitoring-chart-card {
    overflow: hidden;
    margin-bottom: 28px;
}

.monitoring-chart-title {
    text-align: center;
    background: linear-gradient(180deg, #ecfdf5 0%, #f0fdf4 100%);
    padding: 30px 24px;
    border-bottom: 1px solid #d1fae5;
}

.monitoring-chart-title h2 {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
}

.monitoring-chart-title p {
    margin: 0;
    font-size: 15px;
    color: #64748b;
}

.monitoring-chart-content {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 18px;
    padding: 22px;
}

.monitoring-basic-info,
.monitoring-target-panel,
.monitoring-progress-panel,
.dropout-panel {
    border-radius: 14px;
    border: 1px solid #d7e2ef;
    padding: 18px;
}

.monitoring-basic-info {
    background: linear-gradient(180deg, #eef4ff 0%, #f8fbff 100%);
}

.monitoring-basic-info h3,
.monitoring-target-panel h3,
.monitoring-progress-panel h3,
.dropout-panel h3 {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 700;
    color: #334155;
}

.monitoring-basic-info label {
    display: block;
    margin: 12px 0 6px;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
}

.monitoring-basic-info input {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #d7e2ef;
    border-radius: 10px;
    background: #ffffff;
    color: #334155;
    font-size: 14px;
    box-sizing: border-box;
}

.monitoring-basic-info hr {
    margin: 20px 0 18px;
    border: none;
    border-top: 1px solid #d7e2ef;
}

.performance-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed #d7e2ef;
    font-size: 13px;
    color: #475569;
}

.performance-row:last-child {
    border-bottom: none;
}

.performance-row strong {
    color: #0f172a;
    font-size: 14px;
}

.monitoring-chart-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.monitoring-target-panel {
    background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
}

.monitoring-reference-panel {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.monitoring-target-panel .records-list-header p,
.monitoring-reference-panel .records-list-header p,
.monitoring-progress-panel .records-list-header p,
.dropout-panel p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #64748b;
}

.monitoring-reference-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.monitoring-reference-summary div {
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.monitoring-reference-summary span {
    display: block;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.monitoring-reference-summary strong {
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
}

.month-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 8px;
}

.month-grid label,
.six-month-grid label {
    display: block;
    text-align: center;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.month-grid input {
    width: 100%;
    min-height: 32px;
    text-align: center;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #b45309;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    box-sizing: border-box;
}

.month-grid input:read-only {
    cursor: default;
}

.month-grid input.editable-field {
    background: #ffffff !important;
    border-color: #2563eb !important;
    color: #111827;
}

.monitoring-progress-panel {
    background: linear-gradient(180deg, #ecfdf5 0%, #f3fff8 100%);
}

.monitoring-bar-chart {
    min-height: 310px;
    background: #ffffff;
    border: 1px solid #d6e1ee;
    border-radius: 12px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 8px;
    padding: 18px 12px 14px;
    align-items: end;
}

.monitoring-bar-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 100%;
}

.monitoring-bar-label {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.monitoring-bar-stage {
    height: 170px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    padding: 0 6px;
}

.monitoring-bar {
    display: inline-flex;
    width: 12px;
    min-height: 0;
    border-radius: 999px 999px 4px 4px;
}

.monitoring-bar.target {
    background: linear-gradient(180deg, #fcd34d 0%, #f59e0b 100%);
}

.monitoring-bar.actual {
    background: linear-gradient(180deg, #6ee7b7 0%, #10b981 100%);
}

.monitoring-bar-coverage {
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.monitoring-bar-meta {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
}

.chart-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 16px;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
}

.chart-legend i {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    margin-right: 8px;
}

.target-dot {
    background: #f59e0b;
}

.actual-dot {
    background: #10b981;
}

.monitoring-dropout-grid,
.dropout-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.dropout-panel.penta {
    background: #ecfeff;
    border-color: #99f6e4;
}

.dropout-panel.mcv {
    background: #f5f3ff;
    border-color: #ddd6fe;
}

.six-month-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.six-month-grid span {
    display: block;
    text-align: center;
    padding: 8px 0;
    border-radius: 8px;
    background: #ccfbf1;
    border: 1px solid #5eead4;
    color: #0f766e;
    font-size: 12px;
    font-weight: 700;
}

.mcv .six-month-grid span {
    background: #ede9fe;
    border-color: #ddd6fe;
    color: #6d28d9;
}

.monitoring-bottom-metrics,
.immunization-bottom-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}

.immunization-metric {
    padding: 24px;
    min-height: 0;
}

.immunization-metric p {
    margin: 0 0 28px;
    font-size: 14px;
    font-weight: 700;
    color: #475569;
}

.immunization-metric h2 {
    margin: 0 0 6px;
    font-size: 32px;
    color: #0f172a;
}

.immunization-metric span {
    color: #64748b;
    font-size: 13px;
}

.immunization-metric em {
    display: inline-block;
    padding: 4px 12px;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
}

.reference-total-row td {
    font-weight: 800;
    background: #f8fafc;
}

@media (max-width: 1200px) {
    .monitoring-hero-card,
    .monitoring-toolbar,
    .monitoring-toolbar-left,
    .monitoring-toolbar-right {
        flex-direction: column;
        align-items: stretch;
    }

    .monitoring-chart-content {
        grid-template-columns: 1fr;
    }

    .monitoring-dropout-grid,
    .dropout-grid,
    .monitoring-bottom-metrics,
    .immunization-bottom-metrics {
        grid-template-columns: 1fr;
    }

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

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

@media (max-width: 768px) {
    .immunization-container {
        padding: 18px;
    }

    .monitoring-hero-card,
    .monitoring-toolbar,
    .monitoring-chart-content,
    .immunization-metric {
        padding: 18px;
    }

    .monitoring-year-form {
        width: 100%;
    }

    .monitoring-year-form > div,
    .monitoring-year-form .toolbar-btn,
    .monitoring-toolbar-left .toolbar-btn,
    .monitoring-toolbar-right .toolbar-btn,
    .monitoring-state-btn {
        width: 100%;
    }

    .monitoring-actions {
        width: 100%;
    }

    .monitoring-refresh-icon {
        width: 42px;
    }

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

    .monitoring-bar-chart {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        min-height: 420px;
    }

    .monitoring-reference-summary {
        grid-template-columns: 1fr;
    }

    .six-month-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* GROWTH TRACKING*/
.growth-container {
    padding: 40px;
    max-width: 1540px;
    margin: 0 auto;
}

.growth-header-card,
.growth-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.growth-header-card {
    padding: 32px 30px;
    margin-bottom: 30px;
}

.growth-header-card h1 {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 500;
    color: #111827;
}

.growth-header-card p {
    margin: 0 0 30px;
    font-size: 20px;
    color: #475569;
}

.growth-filters {
    display: grid;
    grid-template-columns: 480px 240px 240px;
    gap: 20px;
}

.growth-search,
.growth-filters select {
    height: 46px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    font-size: 16px;
}

.growth-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    box-sizing: border-box;
}

.growth-search input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 16px;
    background: transparent;
}

.growth-filters select {
    padding: 0 16px;
    color: #111827;
}

.growth-tabs {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    padding: 4px;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
    border: 1px solid #e2e8f0;
    margin-bottom: 40px;
}

.growth-tabs button {
    height: 36px;
    padding: 0 16px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 600;
    color: #222;
    cursor: pointer;
}

.growth-tabs button.active {
    color: #6366f1;
    background: #ffffff;
}

.overview-dashboard-card {
    padding: 24px;
}

.overview-dashboard-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.overview-dashboard-top h3 {
    margin: 0;
    font-size: 24px;
    color: #0f172a;
}

.overview-dashboard-top p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
}

.overview-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid #c7d2fe;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.overview-shortcut-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.overview-shortcut-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.overview-shortcut-tabs button span {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dbe4f0;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
}

.overview-shortcut-tabs button.active {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.08);
}

.overview-shortcut-tabs button.active span {
    border-color: #bfdbfe;
    color: #2563eb;
}

.overview-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.overview-stat-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    min-height: 116px;
    padding: 18px 16px;
    border-radius: 16px;
    border: 1px solid transparent;
}

.overview-stat-card p {
    margin: 0 0 6px;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
}

.overview-stat-card h4 {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    font-weight: 800;
}

.overview-stat-card small {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

.overview-stat-icon,
.overview-summary-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    flex: 0 0 auto;
}

.overview-stat-age {
    background: linear-gradient(135deg, #dbeafe 0%, #eef6ff 100%);
    border-color: #bfdbfe;
}

.overview-stat-age .overview-stat-icon {
    background: #2563eb;
    color: #ffffff;
}

.overview-stat-vaccination {
    background: linear-gradient(135deg, #dcfce7 0%, #edfdf5 100%);
    border-color: #bbf7d0;
}

.overview-stat-vaccination .overview-stat-icon {
    background: #16a34a;
    color: #ffffff;
}

.overview-stat-nutrition {
    background: linear-gradient(135deg, #f3e8ff 0%, #fbf5ff 100%);
    border-color: #e9d5ff;
}

.overview-stat-nutrition .overview-stat-icon {
    background: #a855f7;
    color: #ffffff;
}

.overview-stat-status {
    background: linear-gradient(135deg, #ffedd5 0%, #fff7ed 100%);
    border-color: #fed7aa;
}

.overview-stat-status .overview-stat-icon {
    background: #f97316;
    color: #ffffff;
}

.overview-tone-healthy h4,
.overview-tone-healthy small {
    color: #15803d;
}

.overview-tone-warning h4,
.overview-tone-warning small {
    color: #b45309;
}

.overview-tone-danger h4,
.overview-tone-danger small {
    color: #b91c1c;
}

.overview-tone-neutral h4,
.overview-tone-neutral small {
    color: #475569;
}

.overview-summary-card,
.overview-detail-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.overview-summary-card {
    padding: 20px;
    margin-bottom: 18px;
}

.overview-summary-head,
.overview-detail-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.overview-summary-icon {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.overview-summary-head h4,
.overview-detail-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 16px;
}

.overview-summary-head p,
.overview-detail-head p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
}

.overview-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.overview-summary-item {
    padding: 14px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.overview-summary-item span {
    display: block;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.overview-summary-item strong {
    color: #0f172a;
    font-size: 15px;
    line-height: 1.5;
}

.overview-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.overview-detail-card {
    padding: 20px;
}

.overview-detail-list {
    display: flex;
    flex-direction: column;
}

.overview-detail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
}

.overview-detail-item + .overview-detail-item {
    border-top: 1px solid #edf2f7;
}

.overview-detail-item h5 {
    margin: 0;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
}

.overview-detail-item p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 13px;
}

.overview-growth-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.overview-empty-state {
    min-height: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    font-size: 13px;
    text-align: center;
}

.record-view-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.record-view-shell .overview-shortcut-tabs {
    margin-bottom: 0;
}

.record-view-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.record-view-card-child {
    border-top: 3px solid #bfdbfe;
}

.record-view-card-guardian {
    border-top: 3px solid #bbf7d0;
}

.record-view-card-immunization {
    border-top: 3px solid #bfdbfe;
}

.record-view-card-nutrition {
    border-top: 3px solid #e9d5ff;
}

.record-view-card-meta {
    margin-top: 16px;
}

.record-info-list {
    display: flex;
    flex-direction: column;
}

.record-info-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
}

.record-info-row + .record-info-row {
    border-top: 1px solid #edf2f7;
}

.record-info-row span {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.record-info-row strong {
    max-width: 58%;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    text-align: right;
    line-height: 1.6;
}

.record-manage-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.record-manage-summary {
    list-style: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    cursor: pointer;
}

.record-manage-summary::-webkit-details-marker {
    display: none;
}

.record-manage-summary h4 {
    margin: 0;
    color: #0f172a;
    font-size: 16px;
}

.record-manage-summary p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
}

.record-manage-summary span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid #dbe3ef;
    background: #f8fafc;
    color: #2563eb;
    font-size: 0;
    font-weight: 700;
}

.record-manage-card[open] .record-manage-summary {
    border-bottom: 1px solid #e5e7eb;
}

.record-manage-card[open] .record-manage-summary span::before {
    content: "Hide Tools";
    font-size: 12px;
    font-weight: 700;
}

.record-manage-card:not([open]) .record-manage-summary span::before {
    content: "Show Tools";
    font-size: 12px;
    font-weight: 700;
}

.record-manage-body {
    padding: 22px;
}

.guardian-edit-card-compact {
    border: none;
    box-shadow: none;
    padding: 0;
    background: transparent;
}

.immunization-view-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.immunization-view-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    padding: 18px;
}

.immunization-view-card-complete {
    border-top: 3px solid #86efac;
}

.immunization-view-card-partial {
    border-top: 3px solid #bfdbfe;
}

.immunization-view-card-pending {
    border-top: 3px solid #e2e8f0;
}

.immunization-view-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.immunization-view-card-head h4 {
    margin: 0;
    color: #334155;
    font-size: 15px;
    font-weight: 700;
}

.immunization-view-card-head span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
}

.immunization-view-dose-list {
    display: flex;
    flex-direction: column;
}

.immunization-view-dose-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
}

.immunization-view-dose-row + .immunization-view-dose-row {
    border-top: 1px solid #edf2f7;
}

.immunization-view-dose-row p {
    margin: 0;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
}

.immunization-view-dose-row small {
    display: block;
    margin-top: 4px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
}

.immunization-view-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.immunization-view-chip.success {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.immunization-view-chip.pending {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.nutrition-view-copy {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

.record-view-card-nutrition {
    background: linear-gradient(180deg, #fcfbff 0%, #ffffff 100%);
}

.nutrition-view-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    background: rgba(168, 85, 247, 0.05);
    border-bottom: 1px solid #efe6ff;
}

.nutrition-view-banner span {
    color: #9333ea;
    font-size: 14px;
    font-weight: 700;
}

.nutrition-view-banner strong {
    color: #6b21a8;
    font-size: 15px;
    font-weight: 800;
}

.nutrition-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.nutrition-status-pill.overview-tone-healthy {
    background: #dcfce7;
    color: #15803d;
    border-color: #bbf7d0;
}

.nutrition-status-pill.overview-tone-warning {
    background: #fef3c7;
    color: #b45309;
    border-color: #fcd34d;
}

.nutrition-status-pill.overview-tone-danger {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}

.nutrition-status-pill.overview-tone-neutral {
    background: #f8fafc;
    color: #475569;
    border-color: #e2e8f0;
}

@media (max-width: 1200px) {
    .guardian-form-grid-top,
    .guardian-form-grid-bottom {
        grid-template-columns: 1fr;
    }

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

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

    .overview-detail-grid {
        grid-template-columns: 1fr;
    }

    .record-info-row strong {
        max-width: 60%;
    }
}

.growth-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.growth-card {
    min-height: 132px;
    padding: 30px;
}

.growth-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 44px;
}

.growth-card h3 {
    margin: 0;
    font-size: 18px;
    color: #111827;
}

.growth-card h2 {
    margin: 0 0 4px;
    font-size: 32px;
    color: #0f172a;
}

.growth-card p {
    margin: 0;
    font-size: 15px;
    color: #475569;
}

.green-text {
    color: #16a34a;
}

.orange-text {
    color: #f97316;
}

.red-text {
    color: #dc2626;
}
.hidden {
    display: none !important;
}

.individual-tracking-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
    padding: 30px;
}

.individual-tracking-panel h2 {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 500;
    color: #111827;
}

.individual-tracking-panel > p {
    margin: 0 0 32px;
    font-size: 20px;
    color: #475569;
}

.individual-empty-card {
    min-height: 220px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.baby-icon {
    font-size: 56px;
    opacity: 0.5;
    margin-bottom: 22px;
}

.individual-empty-card p {
    margin: 0;
    font-size: 20px;
    color: #64748b;
}

/* Growth tracking detailed overview refresh */
.growth-container {
    padding: 32px 40px 48px;
    max-width: 1260px;
}

.growth-header-card {
    padding: 28px 30px 24px;
    margin-bottom: 18px;
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.growth-header-copy {
    margin-bottom: 22px;
}

.growth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: #f8fbff;
    border: 1px solid #dbe7f5;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.growth-eyebrow-icon {
    color: #2563eb;
}

.growth-header-card h1 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
}

.growth-header-card p {
    margin: 0;
    font-size: 15px;
    color: #64748b;
}

.growth-filters {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.growth-filter-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1.8fr) repeat(2, minmax(170px, 1fr)) auto;
    gap: 14px;
    align-items: center;
}

.growth-search,
.growth-select-field select,
.growth-filter-submit {
    height: 48px;
    border-radius: 14px;
    font-size: 14px;
}

.growth-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border: 1px solid #d8e1ee;
    background: #fbfdff;
    box-sizing: border-box;
}

.growth-search span {
    color: #94a3b8;
}

.growth-search input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: #0f172a;
    font-size: 14px;
}

.growth-select-field {
    margin: 0;
}

.growth-select-field select {
    width: 100%;
    padding: 0 16px;
    border: 1px solid #d8e1ee;
    background: #fbfdff;
    color: #0f172a;
}

.growth-filter-submit {
    min-width: 170px;
    padding: 0 22px;
    border: none;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.24);
    cursor: pointer;
}

.growth-scope-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.growth-scope-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.growth-scope-pill-primary {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.growth-tabs {
    margin-bottom: 22px;
    border-radius: 18px;
    padding: 5px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.growth-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: 13px;
    color: #475569;
    font-size: 14px;
    font-weight: 700;
}

.growth-tabs button.active {
    color: #2563eb;
    background: #eef4ff;
}

.growth-overview-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.growth-overview-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.growth-overview-intro h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}

.growth-overview-intro p {
    max-width: 760px;
    margin: 6px 0 0;
    font-size: 14px;
    color: #64748b;
}

.growth-overview-badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dbe7f5;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.growth-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.growth-card {
    min-height: 168px;
    padding: 22px 24px;
    border-radius: 20px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
}

.growth-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 28px;
}

.growth-card h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.growth-card h2 {
    margin: 0 0 6px;
    font-size: 34px;
    font-weight: 700;
    color: #0f172a;
}

.growth-card p {
    margin: 0;
    font-size: 13px;
    color: #64748b;
}

.growth-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.growth-card-icon-sky {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #2563eb;
}

.growth-card-icon-emerald {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
}

.growth-card-icon-amber {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #ea580c;
}

.growth-card-icon-rose {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.growth-detail-panel {
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.growth-individual-layout {
    display: grid;
    grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
    gap: 20px;
    align-items: flex-start;
}

.growth-child-sidebar {
    position: sticky;
    top: 20px;
    padding: 22px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
}

.growth-child-directory {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.growth-individual-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.growth-child-summary-card,
.growth-chart-card,
.growth-history-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
}

.growth-child-summary-card {
    padding: 22px;
    background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
}

.growth-child-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.growth-child-summary-head h3 {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
}

.growth-child-summary-head p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

.growth-record-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.growth-child-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.growth-summary-stat {
    padding: 16px 16px 14px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.growth-summary-stat span,
.growth-measurement-pill span {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.growth-summary-stat strong,
.growth-measurement-pill strong {
    color: #0f172a;
    font-size: 18px;
    font-weight: 700;
}

.growth-summary-stat small {
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

.growth-summary-stat-healthy {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.growth-summary-stat-healthy strong {
    color: #15803d;
}

.growth-summary-stat-warning {
    background: #fffbeb;
    border-color: #fde68a;
}

.growth-summary-stat-warning strong {
    color: #b45309;
}

.growth-summary-stat-danger {
    background: #fef2f2;
    border-color: #fecaca;
}

.growth-summary-stat-danger strong {
    color: #b91c1c;
}

.growth-summary-stat-neutral {
    background: #f8fafc;
}

.growth-measurement-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.growth-measurement-pill {
    padding: 14px 16px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.growth-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.growth-chart-card {
    padding: 18px 18px 16px;
}

.growth-chart-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.growth-chart-card-head h4 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
}

.growth-chart-card-head p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

.growth-chart-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.growth-chart-canvas-wrap {
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border: 1px solid #edf2f7;
    padding: 12px;
}

.growth-chart-svg {
    width: 100%;
    height: auto;
    display: block;
}

.growth-chart-grid-line {
    stroke: #e5edf6;
    stroke-width: 1;
}

.growth-chart-axis-line {
    stroke: #94a3b8;
    stroke-width: 1.2;
}

.growth-chart-axis-text {
    fill: #64748b;
    font-size: 11px;
    font-family: inherit;
}

.growth-chart-axis-label {
    fill: #475569;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
}

.growth-chart-reference-path {
    opacity: 0.9;
}

.growth-chart-child-path {
    filter: drop-shadow(0 4px 10px rgba(37, 99, 235, 0.18));
}

.growth-chart-point {
    stroke: #ffffff;
    stroke-width: 2;
}

.growth-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: 12px;
}

.growth-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.growth-legend-item i {
    display: inline-block;
    width: 18px;
    height: 3px;
    border-radius: 999px;
    background: var(--legend-color);
}

.growth-legend-item-child i {
    height: 4px;
}

.growth-chart-empty-state {
    min-height: 260px;
    border-radius: 16px;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    font-size: 14px;
    line-height: 1.6;
}

.growth-history-card {
    padding: 22px;
}

@media (max-width: 1100px) {
    .growth-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .growth-filter-submit {
        grid-column: span 2;
    }

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

    .growth-individual-layout,
    .growth-chart-grid,
    .growth-child-summary-grid {
        grid-template-columns: 1fr;
    }

    .growth-measurement-strip {
        grid-template-columns: 1fr;
    }

    .growth-child-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .growth-container {
        padding: 20px 16px 32px;
    }

    .growth-header-card,
    .growth-detail-panel {
        padding: 20px;
    }

    .growth-filter-grid {
        grid-template-columns: 1fr;
    }

    .growth-filter-submit {
        width: 100%;
        min-width: 0;
        grid-column: auto;
    }

    .growth-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .growth-tabs button {
        justify-content: center;
    }

    .growth-overview-intro {
        flex-direction: column;
    }

    .growth-metrics-grid {
        grid-template-columns: 1fr;
    }

    .growth-card {
        min-height: 0;
    }

    .growth-child-summary-head,
    .growth-chart-card-head {
        flex-direction: column;
    }

    .growth-record-chip,
    .growth-chart-chip {
        white-space: normal;
    }
}

/*SMS*/
.sms-container {
    padding: 28px 32px 48px;
    max-width: 1520px;
    margin: 0 auto;
}

.sms-dashboard-panel {
    background: linear-gradient(180deg, #ecf5ff 0%, #f5f9ff 100%);
    border: 1px solid #d7e6fb;
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 22px 56px rgba(15, 23, 42, 0.09);
}

.sms-dashboard-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 24px;
}

.sms-dashboard-hero-copy {
    max-width: 840px;
}

.sms-dashboard-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dbeafe;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.sms-dashboard-hero h1 {
    margin: 0 0 10px;
    font-size: 32px;
    line-height: 1.15;
    color: #0f172a;
}

.sms-dashboard-hero p {
    margin: 0;
    color: #475569;
    font-size: 15px;
    line-height: 1.7;
}

.sms-dashboard-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.history-btn,
.sms-container .small-refresh-btn {
    height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1px solid;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.history-btn {
    color: #1d4ed8;
    border-color: #bfdbfe;
    background: #ffffff;
}

.sms-container .small-refresh-btn {
    color: #ffffff;
    border-color: #2563eb;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.history-btn:hover,
.sms-container .small-refresh-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

.sms-dashboard-status-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.sms-status-chip {
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid #dbeafe;
    background: rgba(255, 255, 255, 0.86);
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
}

.sms-status-chip-live {
    background: linear-gradient(135deg, #eff6ff 0%, #ecfdf5 100%);
    border-color: #bfdbfe;
}

.sms-status-chip-label {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sms-status-chip strong {
    color: #0f172a;
    font-size: 18px;
    line-height: 1.35;
}

.sms-status-chip small {
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

.sms-dashboard-card {
    background: #ffffff;
    border: 1px solid #dbe6f3;
    border-radius: 26px;
    padding: 26px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.sms-dashboard-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 18px;
}

.sms-dashboard-card-head h2 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
}

.sms-dashboard-card-head p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
}

.sms-dashboard-live-callout {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    min-width: 240px;
    border-radius: 18px;
    border: 1px solid #dbeafe;
    background: #f8fbff;
}

.sms-dashboard-live-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.18);
    flex-shrink: 0;
}

.sms-dashboard-live-callout strong {
    display: block;
    margin-bottom: 4px;
    color: #0f172a;
    font-size: 14px;
}

.sms-dashboard-live-callout small {
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

.sms-dashboard-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.sms-dashboard-meta-card {
    padding: 16px 18px;
    border-radius: 18px;
    background: #f8fbff;
    border: 1px solid #e2e8f0;
}

.sms-dashboard-meta-card span {
    display: block;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sms-dashboard-meta-card strong {
    display: block;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.6;
}

.sms-dashboard-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.sms-dashboard-stat {
    min-height: 110px;
    border-radius: 16px;
    padding: 18px;
    border: 1px solid;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sms-dashboard-stat span {
    font-size: 13px;
    font-weight: 700;
    color: inherit;
}

.sms-dashboard-stat strong {
    font-size: 30px;
    line-height: 1;
    font-weight: 700;
}

.sms-dashboard-stat small {
    margin-top: auto;
    color: #526275;
    font-size: 12px;
    line-height: 1.55;
}

.sms-dashboard-stat-total {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.sms-dashboard-stat-reminder {
    background: #faf5ff;
    border-color: #e9d5ff;
    color: #9333ea;
}

.sms-dashboard-stat-overdue {
    background: #fef2f2;
    border-color: #fecaca;
    color: #ef4444;
}

.sms-dashboard-stat-due {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #f97316;
}

.sms-dashboard-stat-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #ca8a04;
}

.sms-dashboard-stat-pending {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #16a34a;
}

.sms-automation-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 18px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    margin-bottom: 24px;
}

.sms-automation-note-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid #bfdbfe;
    background: #ffffff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.sms-automation-note h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: #1e3a8a;
}

.sms-automation-note p {
    margin: 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.65;
}

.sms-dashboard-table-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 16px;
}

.sms-dashboard-table-head h3 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.sms-dashboard-table-head p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

.sms-status-legend {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sms-dashboard-table-wrap {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
}

.sms-dashboard-table {
    margin-top: 0;
}

.sms-dashboard-table th {
    padding: 16px 18px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fbff;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.sms-dashboard-table td {
    padding: 16px 18px;
    border-bottom: 1px solid #edf2f7;
    vertical-align: top;
}

.sms-dashboard-table tbody tr:last-child td {
    border-bottom: none;
}

.sms-table-primary {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

.sms-table-primary::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    flex-shrink: 0;
}

.sms-table-primary-child::before {
    background: #2563eb;
    box-shadow: 0 0 0 4px #dbeafe;
}

.sms-table-primary-vaccine::before {
    background: #9333ea;
    box-shadow: 0 0 0 4px #f3e8ff;
}

.sms-table-primary-date::before {
    background: #f97316;
    box-shadow: 0 0 0 4px #ffedd5;
}

.sms-table-primary-contact::before {
    background: #16a34a;
    box-shadow: 0 0 0 4px #dcfce7;
}

.sms-table-primary-location::before {
    background: #0f766e;
    box-shadow: 0 0 0 4px #ccfbf1;
}

.sms-table-secondary {
    margin-top: 6px;
    padding-left: 18px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.55;
}

.sms-queue-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 700;
}

.sms-queue-status-overdue {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.sms-queue-status-due {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #c2410c;
}

.sms-queue-status-pending {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #15803d;
}

.sms-empty-state {
    text-align: center;
    color: #64748b;
}

.sms-dashboard-empty {
    padding: 42px 20px;
    border-radius: 18px;
    border: 1px dashed #cbd5e1;
    background: #f8fbff;
}

.sms-empty-state div {
    font-size: 54px;
    opacity: 0.45;
    margin-bottom: 16px;
}

.sms-empty-state h3 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    color: #334155;
}

.sms-empty-state p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

.sms-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.46);
    backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 48px 20px;
    overflow-y: auto;
}

.sms-history-modal {
    width: min(760px, 100%);
    max-height: calc(100vh - 96px);
    background: #f7faff;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.74);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
    overflow: hidden;
    position: relative;
}

.sms-modal-header {
    padding: 24px 28px;
    border-bottom: 1px solid #dbeafe;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.sms-modal-header h2 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
}

.sms-modal-header p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

.sms-modal-close {
    border: none;
    background: transparent;
    font-size: 30px;
    cursor: pointer;
    color: #64748b;
}

.sms-modal-body {
    padding: 24px;
    overflow-y: auto;
    max-height: calc(100vh - 220px);
}

.sms-records-card,
.sms-record-list-card {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.sms-records-card {
    padding: 22px 24px;
    margin-bottom: 22px;
}

.sms-history-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.sms-history-summary-card {
    padding: 18px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.sms-history-summary-card span,
.sms-history-field-item span {
    display: block;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sms-history-summary-card strong,
.sms-history-field-item strong {
    display: block;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.6;
}

.sms-history-summary-card small {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}

.sms-records-header,
.sms-record-list-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.sms-records-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sms-records-title > span {
    font-size: 22px;
    color: #2563eb;
}

.sms-records-title h3 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
}

.sms-records-title p,
.sms-record-list-header p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}

.sms-record-refresh {
    height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #2563eb;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.sms-record-tabs {
    margin-bottom: 22px;
    padding: 4px;
    border-radius: 16px;
    background: #e9eef7;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.sms-record-tabs button {
    min-height: 44px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.sms-record-tabs button.active {
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.sms-record-tabs span {
    display: inline-flex;
    min-width: 28px;
    height: 28px;
    margin-left: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.sms-record-list-card {
    min-height: 390px;
    padding: 22px 24px;
}

.sms-record-list-header {
    margin-bottom: 16px;
}

.sms-record-list-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}

.sms-history-field-guide {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.sms-history-field-item {
    padding: 14px 16px;
    border-radius: 16px;
    background: #f8fbff;
    border: 1px solid #dbeafe;
}

.sms-record-list-card .table-responsive {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow-x: auto;
    background: #ffffff;
}

.sms-record-list-card .data-table {
    min-width: 1040px;
    margin-top: 0;
}

.sms-record-list-card .data-table th {
    background: #f8fbff;
    border-bottom: 1px solid #e2e8f0;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.sms-record-list-card .data-table td {
    padding: 16px 15px;
    border-bottom: 1px solid #edf2f7;
    vertical-align: top;
}

.sms-record-list-card .data-table tbody tr:last-child td {
    border-bottom: none;
}

.sms-history-recipient-cell strong {
    display: block;
    margin-bottom: 4px;
    color: #0f172a;
}

.sms-history-cell-primary {
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

.sms-history-cell-note {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.55;
}

.sms-history-message-cell {
    min-width: 240px;
    color: #475569;
    font-size: 13px;
    line-height: 1.65;
}

.sms-history-inline-btn {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid #dbeafe;
    background: #ffffff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.sms-history-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.sms-history-status-sent {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #15803d;
}

.sms-history-status-queued {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.sms-history-status-failed {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.sms-history-content-overlay {
    position: absolute;
    inset: 82px 16px 16px;
    background: rgba(247, 250, 255, 0.94);
    backdrop-filter: blur(6px);
    border-radius: 22px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 14px;
    z-index: 5;
    overflow-y: auto;
}

.sms-history-content-card {
    width: min(620px, 100%);
    background: #ffffff;
    border: 1px solid #dbeafe;
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
    overflow: hidden;
}

.sms-history-content-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid #e2e8f0;
}

.sms-history-content-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #2563eb;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.sms-history-content-head h3 {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 22px;
    font-weight: 700;
}

.sms-history-content-head p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.65;
}

.sms-history-content-close {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    font-size: 28px;
    cursor: pointer;
    flex-shrink: 0;
}

.sms-history-content-body {
    padding: 20px 24px 24px;
}

.sms-history-content-frame {
    border-left: 4px solid #22c55e;
    padding-left: 16px;
}

.sms-history-content-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.sms-history-content-meta-card {
    padding: 14px;
    border-radius: 16px;
    background: #f8fbff;
    border: 1px solid #dbeafe;
}

.sms-history-content-meta-card span,
.sms-history-section-label {
    display: block;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sms-history-content-meta-card strong,
.sms-history-detail-item strong {
    display: block;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
}

.sms-history-content-meta-card small,
.sms-history-detail-item small {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}

.sms-history-content-main {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
    gap: 16px;
    align-items: flex-start;
}

.sms-history-message-panel,
.sms-history-detail-panel {
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

.sms-history-message-panel {
    padding: 18px;
}

.sms-history-message-box {
    min-height: 184px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 16px;
    color: #475569;
    font-size: 13px;
    line-height: 1.75;
    white-space: pre-wrap;
}

.sms-history-detail-panel {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sms-history-detail-item {
    padding: 14px;
    border-radius: 14px;
    background: #f8fbff;
    border: 1px solid #dbeafe;
}

.sms-history-detail-item form {
    margin-top: 10px;
}

.sms-history-detail-item .small-refresh-btn {
    width: 100%;
}

.sms-history-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 700;
}

.sms-history-type-badge-overdue {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.sms-history-type-badge-due {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #c2410c;
}

.sms-history-type-badge-upcoming {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.sms-history-type-badge-manual {
    background: #faf5ff;
    border-color: #ddd6fe;
    color: #7c3aed;
}

.sms-record-empty {
    min-height: 290px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #6b7280;
}

.sms-record-empty div {
    font-size: 58px;
    opacity: 0.45;
    margin-bottom: 18px;
}

.sms-record-empty h3 {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    color: #334155;
}

.sms-record-empty p {
    margin: 0;
    font-size: 14px;
    color: #9ca3af;
    line-height: 1.6;
}

.modal-open {
    overflow: hidden;
}

.hidden {
    display: none !important;
}

@media (max-width: 1200px) {
    .sms-dashboard-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .sms-container {
        padding: 22px 18px 36px;
    }

    .sms-dashboard-panel,
    .sms-dashboard-card {
        padding: 20px;
    }

    .sms-dashboard-hero,
    .sms-dashboard-card-head,
    .sms-dashboard-table-head,
    .sms-records-header,
    .sms-record-list-header {
        flex-direction: column;
        align-items: stretch;
    }

    .sms-dashboard-status-strip,
    .sms-dashboard-meta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .sms-dashboard-hero h1 {
        font-size: 26px;
    }

    .sms-dashboard-actions,
    .sms-dashboard-actions form {
        width: 100%;
    }

    .history-btn,
    .sms-container .small-refresh-btn {
        width: 100%;
    }

    .sms-dashboard-live-callout {
        min-width: 0;
    }

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

    .sms-record-tabs {
        grid-template-columns: 1fr;
    }

    .sms-history-summary-grid,
    .sms-history-field-guide {
        grid-template-columns: 1fr;
    }

    .sms-history-content-meta-grid,
    .sms-history-content-main {
        grid-template-columns: 1fr;
    }

    .sms-modal-header,
    .sms-modal-body,
    .sms-records-card,
    .sms-record-list-card {
        padding-left: 18px;
        padding-right: 18px;
    }

    .sms-history-content-overlay {
        inset: 72px 12px 12px;
        padding: 10px;
    }

    .sms-history-content-head,
    .sms-history-content-body {
        padding-left: 18px;
        padding-right: 18px;
    }
}

@media (max-width: 576px) {
    .sms-dashboard-panel {
        border-radius: 22px;
    }

    .sms-dashboard-card {
        border-radius: 22px;
        padding: 18px;
    }

    .sms-dashboard-stat-grid {
        grid-template-columns: 1fr;
    }

    .sms-dashboard-table th,
    .sms-dashboard-table td {
        padding: 14px;
    }

    .sms-table-primary {
        font-size: 13px;
    }
}

/*Reports*/
.reports-container {
    padding: 28px 32px 48px;
    max-width: 1520px;
    margin: 0 auto;
}

.reports-dashboard-shell {
    background: linear-gradient(180deg, #eef5ff 0%, #f7faff 100%);
    border: 1px solid #d9e6f7;
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 22px 56px rgba(15, 23, 42, 0.08);
    margin-bottom: 28px;
}

.reports-header-card,
.report-tab-card,
.report-filter-card,
.report-detail-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.reports-header-card {
    padding: 24px 26px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}

.reports-header-copy {
    max-width: 820px;
}

.reports-header-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 14px;
}

.reports-header-card h1 {
    margin: 0 0 10px;
    font-size: 30px;
    font-weight: 700;
    color: #0f172a;
}

.reports-header-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #475569;
}

.reports-header-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.reports-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #15803d;
    font-size: 12px;
    font-weight: 700;
}

.reports-status-badge i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    display: inline-block;
}

.reports-header-status small {
    color: #64748b;
    font-size: 12px;
}

.report-tab-card {
    min-height: 48px;
    margin-bottom: 18px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.report-tab-card span {
    color: #16a34a;
    font-size: 14px;
    font-weight: 700;
}

.report-filter-card {
    padding: 24px 26px;
}

.report-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 18px;
}

.report-title-row h2 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
}

.report-title-row p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
}

.report-title-row span {
    padding: 6px 12px;
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #15803d;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.report-form-section + .report-form-section {
    margin-top: 20px;
}

.report-form-section-head {
    margin-bottom: 14px;
}

.report-form-section-head h3 {
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 16px;
    font-weight: 700;
}

.report-form-section-head p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.65;
}

.report-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
    align-items: end;
    margin-bottom: 18px;
}

.report-form-grid-wide {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.report-form-grid-scope {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.report-form-grid-triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.report-field-wide {
    grid-column: span 2;
}

.report-field label {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

.report-field select,
.report-field input,
.report-refresh-btn {
    width: 100%;
    height: 46px;
    border-radius: 12px;
    font-size: 14px;
    background: #ffffff;
}

.report-field select,
.report-field input {
    border: 1px solid #dbe2ea;
    padding: 0 16px;
    color: #0f172a;
}

.report-field input::placeholder {
    color: #94a3b8;
}

.report-field input[type="date"] {
    padding-right: 12px;
}

.report-refresh-btn {
    border: 1px solid #d9dde5;
    font-weight: 700;
    cursor: pointer;
    color: #334155;
}

.report-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.report-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 116px;
    height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.report-field-hint {
    margin: -6px 0 18px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

.report-period-group.is-hidden {
    display: none;
}

.report-scope-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.report-scope-chip {
    padding: 16px;
    border-radius: 18px;
    background: #f8fbff;
    border: 1px solid #dbeafe;
}

.report-scope-chip span {
    display: block;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.report-scope-chip strong {
    display: block;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.6;
}

.report-scope-chip small {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}

.reports-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.reports-overview-grid-secondary {
    margin-bottom: 0;
}

.reports-overview-block {
    margin-bottom: 18px;
}

.report-metric-card {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    border-width: 1px;
}

.report-metric-card-sky {
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.report-metric-card-green {
    background: linear-gradient(180deg, #f3fff7 0%, #ffffff 100%);
}

.report-metric-card-amber {
    background: linear-gradient(180deg, #fffaf2 0%, #ffffff 100%);
}

.report-metric-card-rose {
    background: linear-gradient(180deg, #fff5f5 0%, #ffffff 100%);
}

.report-metric-card-cyan {
    background: linear-gradient(180deg, #f3fcff 0%, #ffffff 100%);
}

.report-metric-card-violet {
    background: linear-gradient(180deg, #faf7ff 0%, #ffffff 100%);
}

.report-metric-card-mint {
    background: linear-gradient(180deg, #f2fffb 0%, #ffffff 100%);
}

.report-metric-card-indigo {
    background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 100%);
}

.report-detail-card {
    border-radius: 20px;
}

.report-official-card {
    padding: 18px;
}

.report-official-banner {
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, #eefaf6 0%, #eff7ff 100%);
    border: 1px solid #d8e8f7;
    margin-bottom: 14px;
}

.report-official-heading {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.report-official-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.report-official-title-row h3 {
    margin: 0;
    color: #0f172a;
    font-size: 21px;
    font-weight: 700;
}

.report-official-title-row span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.report-official-meta-grid,
.report-official-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.report-official-meta-item,
.report-official-summary-card {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid #dbeafe;
}

.report-official-meta-item span,
.report-official-summary-card span {
    display: block;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.report-official-meta-item strong,
.report-official-summary-card strong {
    display: block;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
}

.report-official-summary-card strong {
    font-size: 28px;
    line-height: 1;
}

.report-official-summary-card small {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}

.report-inline-note {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.7;
}

.report-official-table-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    overflow: hidden;
}

.report-official-table-head {
    padding: 18px 18px 12px;
}

.report-pdf-btn {
    height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid #d9dde5;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

@media print {
    body.reports-printing {
        background: #ffffff !important;
    }

    body.reports-printing .staff-top-header,
    body.reports-printing .main-nav,
    body.reports-printing .reports-dashboard-shell,
    body.reports-printing .reports-overview-grid,
    body.reports-printing .report-pdf-btn {
        display: none !important;
    }

    body.reports-printing .reports-container {
        padding: 0;
        background: #ffffff;
    }

    body.reports-printing .report-detail-card[data-report-printable] {
        margin: 0 0 18px !important;
        border: none;
        border-radius: 0;
        box-shadow: none;
        page-break-inside: avoid;
    }

    body.reports-printing.reports-printing-single .report-detail-card[data-report-printable] {
        display: none !important;
    }

    body.reports-printing.reports-printing-single .report-detail-card.report-print-target[data-report-printable] {
        display: block !important;
    }
}

.report-official-table {
    margin-top: 0;
}

.report-official-table th,
.report-official-table td {
    border-bottom: 1px solid #e5edf6;
}

.report-official-table td {
    font-size: 13px;
}

.report-official-section-bar th {
    padding: 14px 16px;
    background: #1663ea;
    color: #ffffff;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.report-official-column-bar th {
    padding: 14px 16px;
    background: #09a74d;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.report-official-group-row td {
    padding: 12px 16px;
    background: #ecfdf5;
    color: #15803d;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.report-official-highlight-row td {
    background: #f8fbff;
    font-weight: 700;
}

.report-fhsis-card {
    padding: 18px;
}

.report-fhsis-paper {
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    background: #ffffff;
    padding: 22px;
}

.report-fhsis-document-head {
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.report-fhsis-seal {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #dbe5f1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06);
}

.report-fhsis-seal img {
    width: 76px;
    height: 76px;
    object-fit: contain;
}

.report-fhsis-heading {
    text-align: center;
}

.report-fhsis-heading h4 {
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.report-fhsis-heading p {
    margin: 0 0 4px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
}

.report-fhsis-heading span {
    display: inline-block;
    margin-top: 4px;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.report-fhsis-summary-box {
    padding: 16px 18px;
    border-radius: 14px;
    background: #eef6ff;
    border: 1px solid #dbeafe;
    margin-bottom: 16px;
}

.report-fhsis-summary-box h5 {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.report-fhsis-summary-box p {
    margin: 0 0 4px;
    color: #334155;
    font-size: 13px;
    line-height: 1.6;
}

.report-fhsis-summary-box p:last-child {
    margin-bottom: 0;
}

.report-fhsis-table td {
    font-size: 12px;
}

@media (max-width: 1200px) {
    .report-scope-grid,
    .reports-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-official-meta-grid,
    .report-official-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .reports-container {
        padding: 22px 18px 36px;
    }

    .reports-dashboard-shell,
    .reports-header-card,
    .report-filter-card {
        padding: 20px;
    }

    .reports-header-card,
    .report-title-row {
        flex-direction: column;
        align-items: stretch;
    }

    .reports-header-status {
        align-items: flex-start;
    }

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

    .report-form-grid-wide,
    .report-form-grid-scope,
    .report-form-grid-triple {
        grid-template-columns: 1fr 1fr;
    }

    .report-field-wide {
        grid-column: auto;
    }

    .report-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .report-official-title-row,
    .report-official-table-head {
        flex-direction: column;
        align-items: stretch;
    }

    .report-fhsis-document-head {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .reports-header-card h1 {
        font-size: 25px;
    }

    .report-form-grid,
    .report-form-grid-wide,
    .report-form-grid-scope,
    .report-form-grid-triple,
    .report-scope-grid,
    .reports-overview-grid {
        grid-template-columns: 1fr;
    }

    .report-official-meta-grid,
    .report-official-summary-grid {
        grid-template-columns: 1fr;
    }

    .report-fhsis-paper {
        padding: 18px;
    }

    .report-fhsis-seal {
        width: 82px;
        height: 82px;
    }

    .report-fhsis-seal img {
        width: 66px;
        height: 66px;
    }
}

@media (max-width: 768px) {
    .overview-dashboard-card {
        padding: 18px;
    }

    .overview-dashboard-top,
    .overview-summary-head,
    .record-manage-summary,
    .nutrition-view-banner {
        flex-direction: column;
    }

    .overview-edit-btn {
        width: 100%;
    }

    .overview-shortcut-tabs,
    .overview-stat-grid,
    .overview-summary-grid {
        grid-template-columns: 1fr;
    }

    .overview-detail-item,
    .record-info-row,
    .immunization-view-dose-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .record-info-row strong {
        max-width: 100%;
        text-align: left;
    }

    .record-manage-body {
        padding: 18px;
    }

    .immunization-view-grid {
        grid-template-columns: 1fr;
    }
}

/* Print record preview modal */
body.print-record-open {
    overflow: hidden;
}

.print-record-modal-shell {
    position: fixed;
    inset: 0;
    z-index: 2400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.print-record-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(4px);
}

.print-record-modal-card {
    position: relative;
    width: min(1120px, 100%);
    max-height: calc(100vh - 56px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid #dbe3f0;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24);
}

.print-record-modal-header,
.print-record-modal-footer {
    padding: 24px 28px;
}

.print-record-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.print-record-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    color: #4f46e5;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.print-record-modal-header h2 {
    margin: 0;
    font-size: 24px;
    color: #0f172a;
}

.print-record-modal-header p {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}

.print-record-close-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.print-record-close-btn:hover {
    background: #eef2ff;
    color: #1e293b;
}

.print-record-modal-body {
    padding: 24px 28px;
    overflow: auto;
    display: grid;
    gap: 20px;
    background: #f8fafc;
}

.print-record-summary-card,
.print-record-table-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 22px;
}

.print-record-summary-head,
.print-record-table-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.print-record-summary-head h3,
.print-record-table-head h3 {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
}

.print-record-summary-head span {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
}

.print-record-table-head p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
}

.print-record-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.print-record-summary-grid article {
    padding: 16px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.print-record-summary-grid article span {
    display: block;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.print-record-summary-grid article strong {
    color: #0f172a;
    font-size: 15px;
    line-height: 1.5;
}

.print-record-summary-wide {
    grid-column: span 4;
}

.print-record-table-wrap {
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
}

.print-record-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

.print-record-table thead th {
    padding: 14px 16px;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid #dbeafe;
}

.print-record-table tbody td {
    padding: 14px 16px;
    color: #1e293b;
    font-size: 14px;
    border-bottom: 1px solid #edf2f7;
    vertical-align: middle;
}

.print-record-empty {
    text-align: center;
    color: #64748b !important;
    padding: 26px 18px !important;
}

.print-record-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.print-record-status-done {
    background: #dcfce7;
    color: #15803d;
}

.print-record-status-pending {
    background: #fef3c7;
    color: #b45309;
}

.print-record-status-missed {
    background: #fee2e2;
    color: #b91c1c;
}

.print-record-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
}

.print-record-modal-footer p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
    max-width: 620px;
}

.print-record-modal-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.print-record-cancel-btn,
.print-record-submit-btn {
    border: none;
    border-radius: 14px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.print-record-cancel-btn {
    background: #f8fafc;
    color: #334155;
    border: 1px solid #d7e0eb;
}

.print-record-submit-btn {
    background: linear-gradient(135deg, #4f46e5, #4338ca);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(79, 70, 229, 0.2);
}

.print-record-cancel-btn:hover {
    background: #eef2f7;
}

.print-record-submit-btn:hover {
    transform: translateY(-1px);
}

@media (max-width: 900px) {
    .print-record-modal-shell {
        padding: 18px;
    }

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

    .print-record-summary-wide {
        grid-column: span 2;
    }

    .print-record-modal-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .print-record-modal-card {
        max-height: calc(100vh - 24px);
    }

    .print-record-modal-header,
    .print-record-modal-body,
    .print-record-modal-footer {
        padding: 18px;
    }

    .print-record-summary-grid {
        grid-template-columns: 1fr;
    }

    .print-record-summary-wide {
        grid-column: span 1;
    }

    .print-record-modal-actions {
        width: 100%;
        flex-direction: column;
    }

    .print-record-cancel-btn,
    .print-record-submit-btn {
        width: 100%;
    }
}

@media print {
    body.print-record-printing {
        background: #ffffff !important;
    }

    body.print-record-printing .staff-top-header,
    body.print-record-printing .main-nav,
    body.print-record-printing .records-container,
    body.print-record-printing .print-record-modal-backdrop,
    body.print-record-printing .print-record-close-btn,
    body.print-record-printing .print-record-modal-footer {
        display: none !important;
    }

    body.print-record-printing .print-record-modal-shell {
        position: static;
        inset: auto;
        padding: 0;
        display: block;
        background: #ffffff;
    }

    body.print-record-printing .print-record-modal-card {
        width: 100%;
        max-height: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    body.print-record-printing .print-record-modal-header,
    body.print-record-printing .print-record-modal-body {
        padding: 0;
        background: #ffffff;
    }

    body.print-record-printing .print-record-modal-header {
        margin-bottom: 18px;
        border-bottom: none;
    }

    body.print-record-printing .print-record-summary-card,
    body.print-record-printing .print-record-table-card {
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    body.print-record-printing .print-record-summary-grid article,
    body.print-record-printing .print-record-table-wrap {
        border-color: #cbd5e1;
    }
}

/* Switch Assigned Barangay Interface */
.action-item {
    text-decoration: none;
}

.barangay-switch-shell {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 22px;
    margin-bottom: 28px;
}

.barangay-switch-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.07);
}

.barangay-switch-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.barangay-switch-heading.compact {
    margin-bottom: 18px;
}

.barangay-switch-heading h2,
.barangay-switch-heading h3 {
    margin: 4px 0 0;
    color: #0f172a;
}

.barangay-switch-heading h2 {
    font-size: 24px;
}

.barangay-switch-heading h3 {
    font-size: 20px;
}

.barangay-switch-heading p {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}

.barangay-switch-status,
.scope-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    display: inline-block;
}

.status-dot.is-online {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
}

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

.profile-meta-list,
.system-meta-list {
    margin: 0;
    display: grid;
    gap: 14px;
}

.profile-meta-list div,
.system-meta-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.profile-meta-list dt,
.system-meta-list dt {
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.profile-meta-list dd,
.system-meta-list dd {
    margin: 0;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    text-align: right;
}

.assigned-barangays-block,
.quick-actions {
    margin-top: 20px;
}

.assigned-label {
    display: block;
    margin-bottom: 10px;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.assigned-badges,
.scope-chip-row,
.quick-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.assigned-badge,
.scope-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 700;
}

.assigned-badge.is-active {
    background: #dbeafe;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.15);
}

.assigned-badge.is-empty {
    background: #f8fafc;
    color: #64748b;
}

.scope-chip {
    background: #f8fafc;
    color: #334155;
}

.scope-chip.scope-chip-primary {
    background: #dbeafe;
    color: #1d4ed8;
}

.barangay-filter-form label {
    display: block;
    margin-bottom: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.barangay-filter-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.barangay-filter-row select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    font-weight: 600;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.barangay-filter-row select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.filter-submit-btn,
.quick-action-btn {
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.quick-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
}

.quick-action-link {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.filter-submit-btn:hover,
.quick-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
}

.scope-summary {
    margin-top: 16px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #eff6ff, #f8fafc);
    border: 1px solid #dbeafe;
}

.scope-summary strong {
    display: block;
    color: #0f172a;
    font-size: 16px;
}

.scope-summary span {
    display: block;
    margin-top: 6px;
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 1200px) {
    .barangay-switch-shell {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .barangay-switch-profile {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .barangay-switch-shell {
        grid-template-columns: 1fr;
    }

    .barangay-switch-profile {
        grid-column: auto;
    }

    .barangay-switch-heading,
    .profile-meta-list div,
    .system-meta-list div,
    .barangay-filter-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-meta-list dd,
    .system-meta-list dd {
        text-align: left;
    }

    .quick-action-row {
        flex-direction: column;
    }

    .quick-action-btn {
        width: 100%;
    }
}

body.modal-open {
    overflow: hidden;
}

/* Consistent rounded single-select controls and option panels */
.custom-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.custom-select-shell {
    position: relative;
    width: 100%;
    min-width: 0;
    font-family: inherit;
}

.custom-select-trigger {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px;
    border: 1px solid #d8e1ee;
    border-radius: 12px;
    background: #ffffff;
    color: #1e293b;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}

.custom-select-trigger:focus-visible,
.custom-select-shell.is-open .custom-select-trigger {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    outline: none;
}

.custom-select-trigger:disabled { background: #f8fafc; color: #94a3b8; cursor: not-allowed; }
.custom-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select-arrow { color: #475569; font-size: 16px; line-height: 1; transition: transform .15s ease; }
.custom-select-shell.is-open .custom-select-arrow { transform: rotate(180deg); }

.custom-select-menu {
    position: absolute;
    z-index: 1200;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    display: none;
    max-height: 260px;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid #d8e1ee;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .16);
}

.custom-select-shell.is-open .custom-select-menu { display: grid; gap: 2px; }

.custom-select-option {
    width: 100%;
    min-height: 38px;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #334155;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}

.custom-select-option:hover,
.custom-select-option:focus-visible { background: #eff6ff; color: #1d4ed8; outline: none; }
.custom-select-option.is-selected { background: #2563eb; color: #ffffff; font-weight: 700; }
.custom-select-option:disabled { color: #94a3b8; cursor: not-allowed; }

.nav-barangay-filter .custom-select-shell { min-width: 180px; }
.nav-barangay-filter .custom-select-trigger {
    min-height: 36px;
    padding: 7px 12px 7px 14px;
    border: 0;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 700;
}
.nav-barangay-filter .custom-select-menu { min-width: 210px; }

/* Wider growth tracking workspace and compact table pagination */
.growth-container {
    width: 100%;
    max-width: 1640px;
    margin-inline: auto;
}

.growth-child-directory .list-group {
    max-height: 520px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #f1f5f9;
}

.growth-history-card .table-responsive {
    max-height: 430px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #f1f5f9;
}

.growth-child-directory .list-group::-webkit-scrollbar,
.growth-history-card .table-responsive::-webkit-scrollbar { width: 9px; height: 9px; }
.growth-child-directory .list-group::-webkit-scrollbar-track,
.growth-history-card .table-responsive::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 999px; }
.growth-child-directory .list-group::-webkit-scrollbar-thumb,
.growth-history-card .table-responsive::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 999px; border: 2px solid #f1f5f9; }

.growth-history-card .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #ffffff;
}

.records-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 18px 4px;
    border-top: 1px solid #e2e8f0;
}

.records-pagination-summary {
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}

.records-pagination-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.records-page-btn {
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #fff;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    text-decoration: none;
}

.records-page-btn:hover { background: #eff6ff; border-color: #93c5fd; }
.records-page-btn.is-current { background: #2563eb; border-color: #2563eb; color: #fff; }
.records-page-btn.is-disabled { background: #f8fafc; color: #94a3b8; cursor: not-allowed; }

.growth-filter-submit,
.small-refresh-btn,
.archive-mode-pill,
.records-page-btn {
    font-family: inherit;
}

.growth-filter-submit {
    min-height: 48px;
    padding-inline: 22px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.2;
}

.growth-child-directory .list-group-item {
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.45;
}

.growth-child-directory .list-group-item strong { font-size: 14px; }
.growth-child-directory .list-group-item small { font-size: 12px; }

@media (max-width: 640px) {
    .records-pagination { flex-direction: column; align-items: stretch; }
    .records-pagination-controls { justify-content: center; }
    .records-pagination-summary { text-align: center; }
}

/* Dashboard layout refinements */
.dashboard-first-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 20px;
    align-items: stretch;
    margin-bottom: 25px;
}

.dashboard-first-row .metrics-grid-primary {
    order: 1;
    margin-bottom: 0;
}

.dashboard-first-row .barangay-switch-shell {
    order: 2;
    margin-bottom: 0;
}

.header-sync-status {
    display: grid;
    gap: 1px;
    padding: 4px 12px;
    border-right: 1px solid #e2e8f0;
    color: #94a3b8;
    font-size: 10px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.header-sync-status strong {
    color: #475569;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}

.dashboard-nav-row {
    width: min(100%, 1320px);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.nav-barangay-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 5px 6px 5px 16px;
    border: 1px solid #dbe3ef;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,.06);
}

.nav-barangay-filter label {
    color: #64748b;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}

.nav-barangay-filter select {
    min-width: 180px;
    min-height: 36px;
    padding: 7px 34px 7px 14px;
    border: 0;
    border-radius: 999px;
    background-color: #eff6ff;
    color: #1d4ed8;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    outline: none;
}

.nav-barangay-filter select option {
    padding: 8px 12px;
    background: #ffffff;
    color: #334155;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
}

.records-list-card .data-table td:last-child > div {
    align-items: center;
    gap: 10px !important;
}

.records-list-card .data-table td:last-child .small-refresh-btn,
.records-list-card .data-table td:last-child .archive-trigger-btn {
    width: 104px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 16px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.barangay-switch-shell {
    display: flex;
    justify-content: flex-end;
}

.barangay-switch-profile {
    width: 100%;
    padding: 16px;
    border-radius: 18px;
}

.barangay-switch-profile .barangay-switch-heading { margin-bottom: 14px; }
.barangay-switch-profile .barangay-switch-heading h2 { font-size: 19px; }
.barangay-switch-profile .profile-meta-list { gap: 9px; }
.barangay-switch-profile .profile-meta-list div { padding-bottom: 8px; }
.barangay-switch-profile .assigned-barangays-block { margin-top: 13px; }

.nutrition-visual-layout {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 24px;
}
.donut-chart {
    width: 320px;
    height: 320px;
    background: none;
}
.donut-chart::after { display: none; }
.donut-chart-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-track,
.donut-segment {
    fill: none;
    stroke-width: 28;
}
.donut-track { stroke: #e2e8f0; }
.donut-segment {
    cursor: pointer;
    transition: stroke-width .16s ease, filter .16s ease, opacity .16s ease;
}
.donut-chart-svg:hover .donut-segment { opacity: .72; }
.donut-chart-svg .donut-segment:hover,
.donut-chart-svg .donut-segment:focus,
.donut-chart-svg .donut-segment.is-active {
    opacity: 1;
    stroke-width: 34;
    filter: drop-shadow(0 3px 4px rgba(15, 23, 42, .22));
    outline: none;
}
.donut-chart-center {
    position: absolute;
    inset: 0;
    justify-content: center;
    pointer-events: none;
}

.legend-row {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: default;
}

.legend-row { justify-content: flex-start; }

.nutrition-visual-layout .legend-stack {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
}

.nutrition-visual-layout .legend-row {
    width: auto;
    padding: 7px 10px;
    border: 0;
    background: transparent;
}

.barangay-track { display: flex; }
.barangay-fill.healthy { background: linear-gradient(90deg, #4ade80, #16a34a); }
.barangay-fill.attention { background: linear-gradient(90deg, #fb7185, #dc2626); }
.barangay-fill.unassessed { background: #94a3b8; }

.coverage-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 11px;
    color: #64748b;
    font-size: 13px;
}

.coverage-legend span { display: inline-flex; align-items: center; gap: 7px; }
.coverage-legend i { width: 9px; height: 9px; border-radius: 50%; }
.coverage-legend i.healthy { background: #22c55e; }
.coverage-legend i.attention { background: #ef4444; }

@media (max-width: 1200px) {
    .dashboard-nav-row { flex-wrap: wrap; }
    .dashboard-first-row { grid-template-columns: 1fr; }
    .dashboard-first-row .barangay-switch-shell { order: 2; }
    .dashboard-first-row .barangay-switch-profile { max-width: 390px; margin-left: auto; }
}

@media (max-width: 768px) {
    .barangay-switch-shell { justify-content: stretch; }
    .barangay-switch-profile { width: 100%; }
    .dashboard-first-row .barangay-switch-profile { max-width: none; }
    .staff-top-header { height: auto; padding: 12px 16px; flex-wrap: wrap; }
    .header-actions { flex-wrap: wrap; }
    .main-nav { padding: 0 16px; }
    .nav-wrapper { max-width: 100%; overflow-x: auto; }
    .nav-barangay-filter { width: 100%; justify-content: space-between; }
    .nutrition-visual-layout { grid-template-columns: 1fr; }
}

.user-management-page {
    display: grid;
    gap: 20px;
}

.user-management-page .page-header-card.user-page-header {
    padding: 22px 24px;
    border-color: #d9e7fb;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
    box-shadow: 0 14px 34px rgba(37, 99, 235, 0.08);
}

.user-management-page .header-text h2 {
    margin: 0 0 4px;
    color: #0f172a;
    font-size: 24px;
}

.user-management-page .header-text p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

.user-management-page .header-icon.user-page-header-icon {
    color: #2563eb;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.user-management-page .user-page-add-btn,
.user-management-page .user-action-btn-primary,
.user-management-page .user-form-submit-btn {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.18);
}

.user-management-page .user-password-notice {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid #bfdbfe;
    background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
    color: #1d4ed8;
}

.user-management-page .user-password-notice-code {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px dashed #93c5fd;
    font-family: Consolas, monospace;
    font-size: 16px;
    color: #0f172a;
}

.user-management-page .user-password-notice-copy {
    margin-top: 8px;
    font-size: 13px;
    color: #475569;
}

.user-management-page .user-toolbar-card,
.user-management-page .user-list-card {
    padding: 20px;
    border-radius: 20px;
    border-color: #dbe4f0;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.user-management-page .user-toolbar-grid {
    display: grid;
    grid-template-columns: minmax(240px, 2fr) minmax(150px, 0.8fr) minmax(150px, 0.8fr) auto;
    gap: 14px;
    align-items: end;
}

.user-management-page .user-filter-label,
.user-management-page .user-form-label {
    display: block;
    margin-bottom: 8px;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.user-management-page .user-search-control {
    position: relative;
}

.user-management-page .user-search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
    pointer-events: none;
}

.user-management-page .form-control,
.user-management-page .form-select {
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid #d4deea;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    box-sizing: border-box;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.user-management-page .user-search-control .form-control {
    padding-left: 40px;
}

.user-management-page .form-control:focus,
.user-management-page .form-select:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.16);
}

.user-management-page .user-filter-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.user-management-page .user-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-sizing: border-box;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.user-management-page .user-action-btn:hover,
.user-management-page .user-page-add-btn:hover,
.user-management-page .user-form-submit-btn:hover {
    transform: translateY(-1px);
}

.user-management-page .user-action-btn-secondary {
    border-color: #d7e0eb;
    background: #ffffff;
    color: #475569;
    box-shadow: none;
}

.user-management-page .user-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.user-management-page .user-table-header h3 {
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 18px;
}

.user-management-page .user-table-header p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
}

.user-management-page .user-table-wrap {
    overflow-x: auto;
}

.user-management-page .user-data-table {
    margin-top: 0;
}

.user-management-page .user-data-table thead th {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.user-management-page .user-data-table tbody tr:hover {
    background: #f8fbff;
}

.user-management-page .user-barangay-summary {
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

.user-management-page .user-date-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 104px;
}

.user-management-page .user-date-cell strong {
    color: #0f172a;
    font-size: 13px;
}

.user-management-page .user-date-cell span {
    color: #94a3b8;
    font-size: 12px;
}

.user-management-page .user-table-actions {
    display: flex;
    gap: 8px;
}

.user-management-page .user-icon-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #d7e0eb;
    border-radius: 10px;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.user-management-page .user-icon-btn:hover {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.user-management-page .user-icon-btn-danger {
    color: #dc2626;
}

.user-management-page .user-icon-btn-danger:hover {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.user-management-page .user-table-empty {
    color: #64748b;
    text-align: center;
    padding: 28px 16px;
}

.user-management-page .modal-content.card-styled.user-form-modal {
    max-width: 470px;
    padding: 22px 24px 24px;
    border-radius: 20px;
    border: 1px solid #dbe4f0;
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.22);
}

.user-management-page .modal-content.card-styled.user-view-modal {
    max-width: 560px;
    padding: 24px 26px 26px;
    border-radius: 22px;
    border: 1px solid #dbe4f0;
}

.user-management-page .modal-content.card-styled.user-delete-modal {
    max-width: 400px;
    text-align: center;
}

.user-management-page .modal-header.user-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.user-management-page .modal-header.user-modal-header h2 {
    margin: 0;
    color: #0f172a;
    font-size: 21px;
}

.user-management-page .modal-header.user-modal-header p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

.user-management-page .close-modal-btn {
    position: static;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #f8fafc;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-management-page .close-modal-btn:hover {
    background: #eef2ff;
    color: #1e293b;
}

.user-management-page .user-modal-form {
    margin: 0;
}

.user-management-page .user-form-layout {
    display: grid;
    gap: 16px;
}

.user-management-page .user-form-grid {
    display: grid;
    gap: 14px;
}

.user-management-page .user-form-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.user-management-page .user-form-field {
    display: grid;
    gap: 8px;
}

.user-management-page .user-form-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.user-management-page .user-form-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.user-management-page .user-form-helper-copy,
.user-management-page .user-form-hint {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

.user-management-page .user-form-empty-state {
    color: #64748b;
    font-size: 13px;
}

.user-management-page .user-barangay-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    max-height: 176px;
    border-radius: 14px;
    background: #f8fafc;
}

.user-management-page .user-barangay-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    box-sizing: border-box;
}

.user-management-page .user-barangay-list input[type="checkbox"] {
    margin: 0;
    accent-color: #2563eb;
}

.user-management-page .user-password-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #dbe4f0;
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.user-management-page .user-password-fields {
    display: block;
}

.user-management-page .user-form-actions {
    padding-top: 4px;
}

.user-management-page .user-form-submit-btn {
    width: 100%;
    min-height: 44px;
    border: none;
    border-radius: 14px;
}

.user-management-page .user-view-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.user-management-page .user-view-title-row h3 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
}

.user-management-page .user-view-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 24px 0 12px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
}

.user-management-page .user-delete-icon {
    font-size: 50px;
    color: #ef4444;
    margin-bottom: 14px;
}

.user-management-page .user-delete-modal h2 {
    margin: 0 0 10px;
    color: #0f172a;
}

.user-management-page .user-delete-copy {
    margin: 0 0 24px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}

.user-management-page .user-delete-actions {
    display: flex;
    gap: 12px;
}

.user-management-page .user-delete-actions .user-action-btn {
    flex: 1;
}

.user-management-page .user-delete-btn {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
}

.user-management-page .user-delete-btn:hover {
    background: #dc2626;
}

@media (max-width: 1100px) {
    .user-management-page .user-toolbar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .user-management-page .user-filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 768px) {
    .user-management-page .page-header-card.user-page-header,
    .user-management-page .user-table-header,
    .user-management-page .user-view-title-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .user-management-page .user-toolbar-grid,
    .user-management-page .user-form-grid-two,
    .user-management-page .user-barangay-list {
        grid-template-columns: 1fr;
    }

    .user-management-page .user-filter-actions,
    .user-management-page .user-delete-actions {
        width: 100%;
        flex-direction: column;
    }

    .user-management-page .user-filter-actions .user-action-btn,
    .user-management-page .user-delete-actions .user-action-btn {
        width: 100%;
    }

    .user-management-page .modal-content.card-styled.user-form-modal,
    .user-management-page .modal-content.card-styled.user-view-modal,
    .user-management-page .modal-content.card-styled.user-delete-modal {
        width: calc(100% - 24px);
        max-width: none;
        padding: 18px;
    }
}

.assignment-history-page {
    display: grid;
    gap: 20px;
}

.assignment-history-page .page-header-card.assignment-page-header {
    padding: 18px 22px;
    border-color: #d7e7fb;
    background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.08);
}

.assignment-history-page .assignment-page-header-icon {
    color: #2563eb;
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.12);
}

.assignment-history-page .header-text h2 {
    margin: 0 0 4px;
    color: #0f172a;
    font-size: 24px;
}

.assignment-history-page .header-text p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

.assignment-history-page .assignment-filter-card,
.assignment-history-page .assignment-record-card {
    padding: 16px 18px;
    border-radius: 18px;
    border-color: #dbe4f0;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.assignment-history-page .assignment-filter-grid {
    display: grid;
    grid-template-columns: minmax(260px, 2fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.assignment-history-page .assignment-search-control,
.assignment-history-page .assignment-filter-select-wrap {
    position: relative;
}

.assignment-history-page .assignment-search-icon,
.assignment-history-page .assignment-select-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
}

.assignment-history-page .form-control,
.assignment-history-page .form-select {
    width: 100%;
    min-height: 40px;
    padding: 10px 14px;
    border: 1px solid #d5deea;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    box-sizing: border-box;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.assignment-history-page .assignment-search-control .form-control,
.assignment-history-page .assignment-filter-select-wrap .form-select {
    padding-left: 38px;
}

.assignment-history-page .form-control:focus,
.assignment-history-page .form-select:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15);
}

.assignment-history-page .user-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-sizing: border-box;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.assignment-history-page .user-action-btn:hover {
    transform: translateY(-1px);
}

.assignment-history-page .user-action-btn-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.18);
}

.assignment-history-page .user-action-btn-secondary {
    background: #ffffff;
    color: #475569;
    border-color: #d7e0eb;
}

.assignment-history-page .assignment-filter-submit {
    min-width: 88px;
}

.assignment-history-page .assignment-record-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.assignment-history-page .assignment-record-head h3 {
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 17px;
}

.assignment-history-page .assignment-record-head p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
}

.assignment-history-page .assignment-record-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.assignment-history-page .assignment-table-wrap {
    overflow-x: auto;
}

.assignment-history-page .assignment-data-table {
    margin-top: 0;
    min-width: 980px;
}

.assignment-history-page .assignment-data-table thead th {
    padding: 12px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.assignment-history-page .assignment-data-table tbody td {
    padding: 14px 12px;
}

.assignment-history-page .assignment-data-table tbody tr:hover {
    background: #f8fbff;
}

.assignment-history-page .assignment-user-cell {
    display: grid;
    gap: 6px;
}

.assignment-history-page .assignment-user-cell strong {
    color: #0f172a;
    font-size: 14px;
}

.assignment-history-page .assignment-role-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.assignment-history-page .assignment-role-midwife {
    background: #eff6ff;
    color: #2563eb;
}

.assignment-history-page .assignment-role-hrh {
    background: #ede9fe;
    color: #7c3aed;
}

.assignment-history-page .assignment-role-bhw {
    background: #ecfdf5;
    color: #059669;
}

.assignment-history-page .assignment-date-cell {
    display: grid;
    gap: 4px;
}

.assignment-history-page .assignment-date-cell strong {
    color: #334155;
    font-size: 13px;
}

.assignment-history-page .assignment-date-cell span {
    color: #94a3b8;
    font-size: 12px;
}

.assignment-history-page .assignment-location-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
}

.assignment-history-page .assignment-location-icon {
    color: #94a3b8;
}

.assignment-history-page .assignment-duration-text {
    color: #475569;
    font-size: 13px;
    font-weight: 700;
}

.assignment-history-page .assignment-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid transparent;
}

.assignment-history-page .assignment-status-badge.ongoing {
    background: #ecfdf5;
    color: #10b981;
    border-color: #bbf7d0;
}

.assignment-history-page .assignment-status-badge.completed {
    background: #f8fafc;
    color: #64748b;
    border-color: #e2e8f0;
}

.assignment-history-page .assignment-status-badge.scheduled {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

/* Barangay address modal */
.modal-content.card-styled.barangay-modal-card {
    width: min(760px, calc(100vw - 32px));
    max-width: 760px;
    padding: 28px 32px;
}

.barangay-modal-form.login-form {
    padding: 0;
}

.barangay-address-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 14px;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: #eff6ff;
    color: #475569;
}

.barangay-address-note p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
}

.barangay-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.barangay-form-grid .form-group {
    min-width: 0;
    margin: 0;
}

.barangay-form-grid .form-control,
.barangay-form-grid .form-select {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    font-size: 14px;
}

.barangay-form-grid .form-control:focus,
.barangay-form-grid .form-select:focus {
    border-color: #6366f1;
    outline: 3px solid rgba(99, 102, 241, 0.14);
}

.barangay-form-grid .form-select:disabled {
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

.barangay-form-grid small {
    display: block;
    margin-top: 6px;
    color: #94a3b8;
    font-size: 12px;
}

.barangay-population-field {
    grid-column: 1 / -1;
}

.field-required { color: #dc2626; }
.field-optional {
    margin-left: 6px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 500;
}

.readonly-field-wrap { position: relative; }
.readonly-field-wrap input { padding-right: 86px; background: #f8fafc !important; }
.readonly-field-wrap span {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    padding: 4px 8px;
    border-radius: 999px;
    background: #e0e7ff;
    color: #4338ca;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.barangay-modal-actions {
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f0;
}

.barangay-modal-actions .btn-back,
.barangay-modal-actions .btn-signin {
    flex: none;
    min-width: 124px;
    padding: 11px 18px;
}

.barangay-modal-actions .btn-back {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
}

.barangay-modal-actions .btn-signin {
    min-width: 150px;
    background: #7c3aed;
}

@media (max-width: 680px) {
    .modal-content.card-styled.barangay-modal-card { padding: 22px 18px; }
    .barangay-form-grid { grid-template-columns: 1fr; gap: 15px; }
    .barangay-population-field { grid-column: auto; }
    .barangay-modal-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .barangay-modal-actions .btn-back,
    .barangay-modal-actions .btn-signin { width: 100%; min-width: 0; }
}

.assignment-history-page .assignment-table-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.assignment-history-page .user-icon-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #d7e0eb;
    border-radius: 10px;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.assignment-history-page .user-icon-btn:hover {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.assignment-history-page .assignment-end-btn {
    color: #16a34a;
}

.assignment-history-page .assignment-end-btn:hover {
    background: #ecfdf5;
    color: #15803d;
    border-color: #bbf7d0;
}

.assignment-history-page .user-icon-btn-danger {
    color: #dc2626;
}

.assignment-history-page .user-icon-btn-danger:hover {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.assignment-history-page .assignment-empty-cell {
    text-align: center;
    color: #64748b;
    padding: 28px 16px;
}

.assignment-history-page .modal-content.card-styled.assignment-modal-card,
.assignment-history-page .modal-content.card-styled.assignment-delete-modal-card {
    border-radius: 20px;
    border: 1px solid #dbe4f0;
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.22);
}

.assignment-history-page .modal-content.card-styled.assignment-modal-card {
    max-width: 520px;
    padding: 22px 24px 24px;
}

.assignment-history-page .modal-content.card-styled.assignment-delete-modal-card {
    max-width: 400px;
    text-align: center;
}

.assignment-history-page .assignment-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.assignment-history-page .assignment-modal-header h2 {
    margin: 0;
    color: #0f172a;
    font-size: 21px;
}

.assignment-history-page .assignment-modal-header p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

.assignment-history-page .close-modal-btn {
    position: static;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #f8fafc;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.assignment-history-page .close-modal-btn:hover {
    background: #eef2ff;
    color: #1e293b;
}

.assignment-history-page .assignment-modal-form {
    margin: 0;
}

.assignment-history-page .assignment-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.assignment-history-page .assignment-form-field {
    display: grid;
    gap: 8px;
}

.assignment-history-page .assignment-form-field-full {
    grid-column: 1 / -1;
}

.assignment-history-page .assignment-form-field label {
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.assignment-history-page .assignment-form-hint {
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

.assignment-history-page .assignment-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.assignment-history-page .assignment-delete-icon {
    font-size: 50px;
    color: #ef4444;
    margin-bottom: 12px;
}

.assignment-history-page .assignment-delete-modal-card h2 {
    margin: 0 0 10px;
    color: #0f172a;
}

.assignment-history-page .assignment-delete-copy,
.assignment-history-page .assignment-delete-subcopy {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}

.assignment-history-page .assignment-delete-subcopy {
    margin-top: 8px;
}

.assignment-history-page .assignment-delete-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.assignment-history-page .assignment-delete-actions .user-action-btn {
    flex: 1;
}

.assignment-history-page .assignment-delete-submit {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
}

.assignment-history-page .assignment-delete-submit:hover {
    background: #dc2626;
}

@media (max-width: 1100px) {
    .assignment-history-page .assignment-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .assignment-history-page .assignment-filter-submit {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .assignment-history-page .assignment-record-head,
    .assignment-history-page .assignment-record-actions,
    .assignment-history-page .assignment-modal-actions,
    .assignment-history-page .assignment-delete-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .assignment-history-page .assignment-filter-grid,
    .assignment-history-page .assignment-form-grid {
        grid-template-columns: 1fr;
    }

    .assignment-history-page .assignment-form-field-full {
        grid-column: auto;
    }

    .assignment-history-page .modal-content.card-styled.assignment-modal-card,
    .assignment-history-page .modal-content.card-styled.assignment-delete-modal-card {
        width: calc(100% - 24px);
        max-width: none;
        padding: 18px;
    }
}

/* System-wide compact action button standard */
.add-user-btn,
.btn-add-brgy,
.btn-action-outline,
.btn-signin,
.btn-back,
.add-record-btn,
.archive-btn,
.reset-btn,
.small-refresh-btn,
.guardian-refresh-btn,
.guardian-update-btn,
.back-records-btn,
.save-info-btn,
.next-section-btn,
.monitoring-state-btn,
.toolbar-btn,
.history-btn,
.report-refresh-btn,
.report-reset-btn,
.report-pdf-btn,
.report-output-cancel-btn,
.report-output-download-btn,
.report-output-print-btn,
.filter-submit-btn,
.user-management-page .user-action-btn,
.assignment-history-page .user-action-btn {
    box-sizing: border-box;
    min-height: 40px;
    height: 40px !important;
    padding: 0 15px !important;
    border-radius: 10px !important;
    font-family: inherit;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1.15;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
}

.records-page-btn {
    min-width: 36px;
    min-height: 36px;
    padding: 7px 11px;
    border-radius: 9px;
    font-size: 13px;
}

.user-icon-btn,
.assignment-history-page .user-icon-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: 9px;
}

/* Links presented as buttons should never use regular link underlines. */
a[class*="btn"],
a[class*="button"],
a[class*="btn"]:hover,
a[class*="button"]:hover,
a[class*="btn"]:focus,
a[class*="button"]:focus,
a[class*="btn"]:visited,
a[class*="button"]:visited {
    text-decoration: none !important;
}