/* --- Global Box Model Reset ---
   Without this, elements that combine width:100% with padding (used
   throughout the form/table/modal styles below) overflow their container
   by the padding amount -- the single biggest cause of horizontal overflow
   on narrow screens. Safe to add globally: a handful of rules already set
   box-sizing:border-box explicitly per-element, which this doesn't change. */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

/* --- CSS VARIABLES --- */
:root {
    --primary-color: #6366F1;
    --secondary-color: #10B981;
    --admin-color: #F43F5E;

    /* *** CHANGE MADE HERE: card-background opacity is now 0.8 (80% opaque) *** */
    --card-background: rgba(255, 255, 255, 0.8);

    --background-image-url: url('../images/tricyle.jpg');
}

/* --- Dark Mode ---
   The app's CSS (and many inline styles inside Vue pages) hard-codes light
   colors throughout, so re-theming every rule individually isn't practical.
   Instead, invert the whole rendered page and re-invert photographic content
   (images/video) so it still looks correct -- the same technique tools like
   Dark Reader use. Toggled via [data-theme] on <html>, set from AppLayout.vue. */
html[data-theme="dark"] {
    filter: invert(1) hue-rotate(180deg);
}

html[data-theme="dark"] img,
html[data-theme="dark"] svg,
html[data-theme="dark"] video,
html[data-theme="dark"] .main-wrapper {
    filter: invert(1) hue-rotate(180deg);
}

body {
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
}

/* Full-Screen Wrapper for Background Image */
.main-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    position: relative;
    padding: 20px;
    overflow: hidden;
}

/* Background image + dark overlay live on this pseudo-element (not on
   .main-wrapper itself) so it can be blurred without blurring the login
   card sitting on top of it. Oversized + overflow:hidden on the parent
   hides the blur's edge fringe. */
.main-wrapper::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), var(--background-image-url);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    filter: blur(8px);
    z-index: 0;
}

/* Login Card Styling (z-index ensures it sits above the overlay) */
.login-card {
    background: var(--card-background);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 44px 40px;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    width: 100%;
    max-width: 400px;
    text-align: center;
    animation: fadeInScale 0.5s ease-out;
    z-index: 1; /* Ensures the card is above the ::before overlay */
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.login-brand {
    margin-bottom: 30px;
}

.login-brand-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7em;
    background: linear-gradient(135deg, var(--primary-color), #4F46E5);
    color: white;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
}

.login-card h1 {
    color: #222;
    margin: 0;
    font-size: 1.25em;
    font-weight: 700;
    line-height: 1.4;
}

.login-subtitle {
    margin: 12px 0 0;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--primary-color);
}

.login-form {
    text-align: left;
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 1.6em;
    font-weight: 600;
    border-bottom: 3px solid var(--primary-color);
    padding-bottom: 10px;
}

h2 {
    color: #555;
    margin-top: 0;
    margin-bottom: 20px;
}

/* New: Input Group for the Dropdown Label */
.input-group {
    text-align: left;
    margin-bottom: 5px;
}

.login-form .input-group {
    margin-bottom: 18px;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9em;
    font-weight: bold;
    color: #555;
}

.login-card select,
.login-card input[type="text"],
.login-card input[type="password"] {
    margin: 0;
}

.login-card select:focus,
.login-card input[type="text"]:focus,
.login-card input[type="password"]:focus {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.login-submit-btn {
    margin-top: 10px !important;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

.register-org-link {
    display: block;
    margin-top: 20px;
    text-align: center;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

.register-org-link:hover {
    text-decoration: underline;
}

.password-input-wrapper {
    position: relative;
}

.password-input-wrapper input {
    padding-right: 44px !important;
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: inherit;
    border: none;
    border-radius: 6px;
    font-size: 1.1em;
    line-height: 1;
    cursor: pointer;
    box-shadow: none !important;
    transition: background-color 0.2s;
}

.password-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-50%);
}

.about-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 10;
    width: auto;
    padding: 10px 18px;
    margin: 0;
    background: rgba(255, 255, 255, 0.9);
    color: #222;
    font-size: 0.9em;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.about-btn:hover {
    background: #fff;
    transform: translateY(-1px);
}

.about-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 20;
}

.about-modal {
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    animation: fadeInScale 0.25s ease-out;
}

.about-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid #e9ecef;
}

.about-modal-header h3 {
    margin: 0;
    font-size: 1.15em;
    color: #222;
}

.about-modal-close {
    width: 32px;
    height: 32px;
    margin: 0 !important;
    padding: 0 !important;
    background: #f1f3f5 !important;
    color: #333;
    border: none;
    border-radius: 50%;
    font-size: 1em;
    line-height: 1;
    cursor: pointer;
    box-shadow: none !important;
    transition: background-color 0.2s;
}

.about-modal-close:hover {
    background: #e9ecef !important;
    transform: none;
}

.about-modal-body {
    padding: 20px 22px 24px;
    text-align: left;
    color: #444;
    line-height: 1.6;
    font-size: 0.95em;
}

.about-modal-body p {
    margin: 0 0 14px;
}

.about-modal-body ul {
    margin: 0 0 14px;
    padding-left: 20px;
}

.about-modal-body li {
    margin-bottom: 10px;
}

.login-card .error-message {
    text-align: center;
}


/* Styling for all form controls */
input[type="text"],
input[type="password"],
select {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    font-size: 1em;
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: border-color 0.3s;
}

/* Dropdown popup lists don't always inherit the page font in every browser --
   set it explicitly so options match the rest of the UI. */
select option {
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1em;
    padding: 8px;
}

input[type="text"]:focus,
input[type="password"]:focus,
select:focus { 
    border-color: var(--primary-color);
    outline: none;
}

/* Custom styling for the select arrow (cross-browser consistency) */
select {
    /* Removes default browser styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Adds a custom arrow icon */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23007bff" d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 35px;
}


/* Button Styling */
button {
    width: 100%;
    padding: 12px;
    margin-top: 20px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    letter-spacing: 0.5px;
    transition: background-color 0.3s, transform 0.1s;
}

button:hover {
    background-color: #4F46E5;
    transform: translateY(-1px);
}

.hidden {
    display: none;
}

.error-message {
    color: var(--admin-color);
    margin-top: 15px;
    font-weight: bold;
}

#dashboard {
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #ccc;
    margin-top: 20px;
}

#dashboard button {
    background-color: var(--admin-color);
}
#dashboard button:hover {
    background-color: #E11D48;
}
/* --- Dashboard Structure and Layout --- */

.dashboard-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f4f7f6; /* Light background for the dashboard */
}

/* --- Navigation Bar (Header) Styling --- */

.navbar {
    background-color: var(--primary-color); /* Use the primary blue color */
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.logo {
    font-size: 1.5em;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.navbar nav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.navbar nav ul li {
    margin: 0 10px;
}

.navbar nav ul li a {
    color: white;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background-color 0.3s;
    font-size: 0.95em;
}

.navbar nav ul li a:hover,
.navbar nav ul li a.active {
    background-color: #4F46E5; /* Darker blue on hover/active */
}

.notif-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 8px;
    border-radius: 999px;
    background: #F43F5E;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}

.user-info {
    display: flex;
    align-items: center;
}

#admin-username {
    margin-right: 20px;
    font-size: 1em;
}

.logout-btn {
    /* Overrides the form button styling */
    width: auto !important; 
    padding: 8px 15px !important;
    margin: 0 !important; 
    background-color: var(--admin-color) !important;
    font-size: 0.9em !important;
    border-radius: 5px !important;
}

.logout-btn:hover {
    background-color: #E11D48 !important;
}

/* --- Main Content Styling --- */

.main-content {
    flex-grow: 1;
    padding: 70px 30px 30px;
    min-width: 0;
    max-width: 100%;
    transition: filter 0.2s ease;
}

.main-content h2 {
    color: #333;
    margin-bottom: 20px;
}

/* --- Sidebar Layout (Organization Admin) --- */

.sidebar-layout {
    flex-direction: row;
    align-items: stretch;
}

/* The sidebar is always an overlay drawer, at every screen size -- it never
   pushes or resizes .main-content. Opening it slides it in over the page
   (via transform, so layout never reflows) and blurs the page behind it
   through .sidebar-backdrop; closing it removes both. */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(300px, 85vw);
    min-width: 0;
    height: 100vh;
    min-height: 100vh;
    flex-shrink: 0;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 80;
}

.sidebar:not(.closed) {
    transform: translateX(0);
}

.sidebar.closed {
    box-shadow: none;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 1.4em;
    font-weight: bold;
    letter-spacing: 0.5px;
    padding: 22px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}

.sidebar-toggle-btn,
.sidebar-open-btn {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 0;
    border-radius: 6px;
    width: 36px;
    height: 36px;
    font-size: 1.1em;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s;
}

.sidebar-toggle-btn:hover,
.sidebar-open-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.sidebar-open-btn {
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 60;
    background: var(--primary-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
}

.sidebar-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-nav ul li {
    margin: 2px 10px;
}

.sidebar-nav ul li a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.9em;
    transition: background-color 0.2s;
}

.sidebar-nav ul li a:hover,
.sidebar-nav ul li a.active {
    background-color: #4F46E5;
}

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.sidebar-footer .logout-btn {
    width: 100% !important;
}

/* Full-screen notice shown to Admin/Member accounts while Maintenance Mode
   is on (Super Admin is exempt and never sees this). */
.maintenance-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #f1f2f6;
}

.maintenance-card {
    max-width: 420px;
    width: 100%;
    text-align: center;
    background: #fff;
    border-radius: 14px;
    padding: 36px 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.maintenance-icon {
    font-size: 2.6rem;
    margin-bottom: 10px;
}

.maintenance-card h2 {
    margin: 0 0 10px;
    color: var(--primary-color);
}

.maintenance-card p {
    margin: 0 0 20px;
    opacity: 0.8;
    line-height: 1.5;
}

.maintenance-card .btn-secondary {
    width: auto;
    padding: 10px 24px;
}

/* Day/Night toggle switch -- a pill track that slides its icon thumb from
   right (day) to left (night), swapping track color, instead of a plain
   text button. */
.theme-toggle-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 10px;
    width: auto !important;
    min-width: 150px;
    padding: 4px !important;
    margin: 0 !important;
    background-color: #e9ecef !important;
    color: #495057 !important;
    font-size: 0.8em !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border: 1px solid #dee2e6;
    border-radius: 999px !important;
    box-shadow: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.theme-toggle-btn:hover {
    background-color: #e9ecef !important;
    transform: none;
    opacity: 0.85;
}

.theme-toggle-label {
    padding-left: 6px;
}

.theme-toggle-thumb {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.theme-toggle-btn.dark {
    flex-direction: row;
    background-color: #16181c !important;
    border-color: #16181c;
    color: #fff !important;
}

.theme-toggle-btn.dark:hover {
    background-color: #16181c !important;
}

.theme-toggle-btn.dark .theme-toggle-label {
    padding-left: 0;
    padding-right: 6px;
}

.theme-toggle-btn.dark .theme-toggle-thumb {
    background: #212529;
}

@media (max-width: 900px) {
    .sidebar-nav ul li {
        margin: 2px 10px;
    }

    .sidebar-nav ul li a {
        padding: 10px 14px;
        min-height: 40px;
        display: flex;
        align-items: center;
    }

    /* Narrower side padding once the page is tight on width -- the top
       clearance for the hamburger button is already set in .main-content's
       base rule, since the sidebar overlays at every screen size now. */
    .main-content {
        padding: 70px 16px 20px;
    }
}

/* Dims the page behind the open sidebar -- the blur itself is applied
   directly to .main-content (see .main-content.blurred below). Clicking
   this closes the sidebar. Only mounted in the DOM while the sidebar is
   open (v-if in AppLayout.vue), so there's nothing to hide/show here.
   !important is required: this is a <button>, and since it covers the
   whole viewport the cursor is immediately hovering it, so the generic
   `button:hover { background-color: #4F46E5 }` rule (element+pseudo-class,
   which outranks this single class selector) would otherwise paint a
   fully opaque color over the entire page instead of the translucent dim. */
.sidebar-backdrop,
.sidebar-backdrop:hover {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25) !important;
    z-index: 70;
    border: 0;
    padding: 0;
    cursor: pointer;
    transform: none !important;
}

.main-content.blurred {
    filter: blur(3px);
    pointer-events: none;
    user-select: none;
}

@media (max-width: 480px) {
    .main-content {
        padding: 64px 12px 16px;
    }
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 14px;
    margin-top: 20px;
}

.stat-card {
    background: white;
    padding: 14px 16px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    font-size: 0.95em;
    font-weight: 600;
    color: #333;
    border-left: 5px solid var(--primary-color); /* Highlight with primary color */
}

.stat-card h3 {
    font-size: 0.85rem;
    margin: 0;
}
/* --- New Visibility Classes for Tabs --- */

/* Tab Content Visibility */
.tab-content {
    /* Base style for all content areas */
    padding: 20px 0;
    display: none;
}

.tab-content.active-tab {
    display: block;
}

.tab-content.hidden-tab {
    display: none !important;
}

/* Also ensure the active state is managed in the navbar CSS (already done in a previous step, 
   but confirming the selectors: ) 
*/
.navbar nav ul li a.active {
    background-color: #4F46E5; 
}

/* Basic styles for monitoring, evaluation, and reports */
.monitoring-grid, .evaluation-grid, .reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.monitoring-card, .evaluation-card, .report-card {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 1rem;
}

.monitoring-card h3, .evaluation-card h3, .report-card h3 {
  margin: 0 0 1rem 0;
  color: #2c3e50;
  font-size: 1.1rem;
}

/* Vertical bar chart used inside report cards -- bars rise from a shared
   baseline (the classic bar-graph look), with the value floating above
   each bar and the category name below the axis. Direct value labels are
   required since several palette colors WARN on contrast against a light
   surface per the dataviz palette validator. */
.mini-chart {
  margin-top: 1.5rem;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  height: 130px;
  padding: 24px 4px 0;
  border-bottom: 2px solid #dee2e6;
}

.mini-chart-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.mini-chart-bar {
  width: 100%;
  max-width: 52px;
  min-height: 4px;
  border-radius: 6px 6px 0 0;
  position: relative;
  transition: height 0.4s ease;
}

.mini-chart-bar-value {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  font-weight: 800;
  color: #212529;
  white-space: nowrap;
}

.mini-chart-axis-label {
  margin-top: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #6c757d;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.mini-chart-empty {
  font-size: 0.8rem;
  opacity: 0.6;
  margin-top: 0.5rem;
}

.metric, .summary-item, .report-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
}

.metric:last-child, .summary-item:last-child, .report-item:last-child {
  border-bottom: none;
}

.metric .label, .summary-item .label, .report-item .label {
  font-weight: 500;
  color: #666;
}

.metric .value, .summary-item .value, .report-item .value {
  font-weight: bold;
  color: #2c3e50;
}

.member-activity-item, .performance-item {
  background: #f8f9fa;
  border-radius: 4px;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
}

.member-info, .member-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.status-badge, .grade-badge {
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: bold;
}

.status-badge.active, .grade-badge.a+ {
  background: #d4edda;
  color: #155724;
}

.status-badge.inactive, .grade-badge.d {
  background: #f8d7da;
  color: #721c24;
}

.grade-badge.a {
  background: #d1ecf1;
  color: #0c5460;
}

.grade-badge.b {
  background: #fff3cd;
  color: #856404;
}

.grade-badge.c {
  background: #f8d7da;
  color: #721c24;
}

.activity-stats {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: #666;
}

.alert {
  padding: 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.alert.success {
  background: #d4edda;
  color: #155724;
}

.alert.warning {
  background: #fff3cd;
  color: #856404;
}

.alert.error {
  background: #f8d7da;
  color: #721c24;
}

.score-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.score-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.score-bar {
  display: flex;
  align-items: center;
  width: 60%;
  background: #e9ecef;
  border-radius: 10px;
  height: 16px;
  position: relative;
}

.score-fill {
  background: linear-gradient(90deg, #10B981, #34D399);
  border-radius: 10px;
  height: 100%;
  transition: width 0.3s ease;
}

.score-bar span {
  position: absolute;
  right: 5px;
  font-size: 0.7rem;
  font-weight: bold;
  color: #495057;
}

.overall-score {
  text-align: center;
  padding-top: 0.5rem;
  border-top: 1px solid #dee2e6;
  color: #2c3e50;
  font-weight: bold;
}

.evaluation-actions, .report-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.action-btn {
  background: #6366F1;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.3s ease;
}

.action-btn:hover {
  background: #4F46E5;
}

.payment-methods, .status-distribution {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.method-tag, .status-tag {
  background: #e9ecef;
  color: #495057;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: 500;
}

.recent-activity {
  max-height: 150px;
  overflow-y: auto;
}

.activity-item {
  background: #f8f9fa;
  padding: 0.5rem;
  border-radius: 3px;
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
  color: #666;
}

/* Overview Stats */
.stat-number {
  font-size: 1.4rem;
  font-weight: bold;
  color: #2c3e50;
  margin: 0.35rem 0;
}

.stat-subtext {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6c757d;
  margin: 0;
}

/* Super Admin Platform Overview -- a more "catchy" KPI/chart treatment
   than the plain .stat-card used elsewhere, scoped under .sa-dashboard so
   it doesn't change .stat-card/.report-card on any other page. */
.sa-dashboard-header {
  margin-top: 0.25rem;
}

.sa-dashboard-header h2 {
  margin-bottom: 2px;
}

.sa-dashboard-subtitle {
  margin: 0;
  color: #6c757d;
  font-size: 0.9rem;
}

.sa-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
  margin-top: 20px;
}

.sa-stat-card {
  background: white;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07);
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 4px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sa-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.sa-stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}

.sa-stat-body {
  min-width: 0;
}

.sa-stat-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sa-stat-number {
  margin: 2px 0;
  font-size: 2rem;
  font-weight: 800;
  color: #1e1b4b;
  line-height: 1.1;
}

.sa-stat-subtext {
  margin: 0;
  font-size: 0.78rem;
  color: #94a3b8;
}

.sa-accent-indigo { border-top-color: #6366F1; }
.sa-accent-indigo .sa-stat-icon { background: rgba(99, 102, 241, 0.12); }

.sa-accent-cyan { border-top-color: #06B6D4; }
.sa-accent-cyan .sa-stat-icon { background: rgba(6, 182, 212, 0.12); }

.sa-accent-emerald { border-top-color: #10B981; }
.sa-accent-emerald .sa-stat-icon { background: rgba(16, 185, 129, 0.12); }

.sa-dashboard .reports-grid {
  margin-top: 1.5rem;
}

.sa-dashboard .report-card {
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sa-dashboard .report-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.stat-detail {
  color: #7f8c8d;
  font-size: 0.9rem;
}

/* Member Records Enhanced Styles */
.member-records-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e9ecef;
}

.member-records-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.5rem;
}

.member-stats {
  display: flex;
  gap: 1rem;
}

.stat-badge {
  background: #f8f9fa;
  color: #495057;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 500;
  font-size: 0.9rem;
}

.stat-badge.active {
  background: #d4edda;
  color: #155724;
}

.stat-badge.online {
  background: #d1ecf1;
  color: #0c5460;
}

/* Compact table/list layout (replaces the old card-grid tiles to cut down
   on wasted space) -- .member-grid is the bordered list container and each
   .member-card renders as one dense row inside it. */
.member-grid {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  background: white;
}

.member-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  background: white;
  border-radius: 0;
  padding: 10px 16px;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid #eef0f2;
  transition: background-color 0.15s ease;
}

.member-grid .member-card:last-child {
  border-bottom: none;
}

/* Member Records as Forms (replaces card tiles) */
.member-form-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.member-form {
  background: transparent;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 14px;
  box-shadow: none;
}

.member-form:hover {
  transform: none;
  box-shadow: none;
  border-color: #dbeafe;
}

.member-form-identity {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.member-form-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.member-name-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.member-name-toggle:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.25);
  outline-offset: 3px;
  border-radius: 6px;
}

.member-name-text {
  color: #2c3e50;
  font-size: 1.05rem;
  font-weight: 700;
}

.member-form-details {
  margin-top: 10px;
}

.member-form-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  row-gap: 6px;
}

.member-form-fields {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.member-form-field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #374151;
  font-size: 0.85rem;
}

.member-form-field input[readonly] {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  color: #374151;
}

.member-form-static {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  color: #374151;
  border-radius: 6px;
  padding: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.2;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.member-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

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

@media (max-width: 600px) {
  .member-form-fields {
    grid-template-columns: 1fr;
  }

  .member-form-actions {
    flex-direction: column;
  }
}

.member-card:hover {
  background-color: #f8fafc;
}

.member-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  flex: 0 0 auto;
  min-width: 160px;
}

.member-info h4 {
  margin: 0;
  color: #2c3e50;
  font-size: 0.92rem;
}

.member-plate {
  margin: 0;
  color: #6c757d;
  font-size: 0.9rem;
}

.status-indicators {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}

.status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.active {
  background: #d4edda;
  color: #155724;
}

.status-badge.inactive {
  background: #f8d7da;
  color: #721c24;
}

.status-badge.suspended {
  background: #fff3cd;
  color: #856404;
}

.status-badge.pending {
  background: #d1ecf1;
  color: #0c5460;
}

.status-badge.paid {
  background: #d4edda;
  color: #155724;
}

.status-badge.for_verification {
  background: #ffe5b4;
  color: #8a5300;
}

.status-badge.unpaid {
  background: #e2e3e5;
  color: #41464b;
}

.status-badge.rejected {
  background: #f8d7da;
  color: #721c24;
}

.status-badge.verified {
  background: #d4edda;
  color: #155724;
}

.status-badge.payment_verification {
  background: #e2d9f3;
  color: #4b2e83;
}

.status-badge.expiring_soon {
  background: #ffe5b4;
  color: #8a5300;
}

.status-badge.grace_period {
  background: #ffdab9;
  color: #8a3b00;
}

.subscription-banner {
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-weight: 600;
  font-size: 0.9rem;
}

.subscription-banner.warning {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffe69c;
}

.subscription-banner.danger {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c2c7;
}

.online-indicator {
  font-size: 1.2rem;
  cursor: help;
}

.online-indicator.online {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.member-details {
  margin-bottom: 1.5rem;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f8f9fa;
}

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

.detail-row .label {
  font-weight: 500;
  color: #6c757d;
}

.detail-row .value {
  color: #2c3e50;
  font-weight: 500;
}

/* Inside a compact list row (.member-card), the same .member-details /
   .detail-row markup renders as inline field chips instead of a stacked
   block -- this is what actually makes the row compact. Modal/detail-panel
   usage of these classes outside .member-card is untouched above. */
.member-card > .member-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  margin-bottom: 0;
  flex: 1 1 240px;
  min-width: 0;
}

.member-card > .member-details .detail-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  padding: 0;
  border-bottom: none;
  font-size: 0.8rem;
  white-space: nowrap;
}

.member-card > .member-details .detail-row .label {
  color: #8a94a6;
}

.member-card > .member-details .detail-row .value {
  font-weight: 600;
}

.status-select {
  padding: 0.25rem 0.5rem;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background: white;
  color: #495057;
  font-size: 0.9rem;
}

.status-select:focus {
  outline: none;
  border-color: #6366F1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

/* Color the dropdown itself by the status it currently holds, matching the
   .status-badge palette, so the value reads at a glance instead of every
   row looking identical. */
.status-select.active {
  background: #d4edda;
  border-color: #a3d9b1;
  color: #155724;
}

.status-select.inactive {
  background: #f8d7da;
  border-color: #eeb3bb;
  color: #721c24;
}

.status-select.suspended {
  background: #fff3cd;
  border-color: #ffe49c;
  color: #856404;
}

.member-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  flex: 0 0 auto;
  margin-left: auto;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

/* Buttons inherit width:100% from the global `button` rule, which fights
   over space when several sit in this row and squishes them down to
   slivers. Size them to their own content instead so the row can scroll
   (swipe) horizontally to reveal every action instead of crushing them. */
.member-actions button,
.member-actions a {
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

.btn-primary, .btn-secondary {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.btn-primary {
  background: #6366F1;
  color: white;
}

.btn-primary:hover {
  background: #4F46E5;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background: #545b62;
}

/* Contribution Form Styles */
.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #2c3e50;
}

.form-group select,
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #6366F1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

/* Contribution Records Styles */
.contributions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e9ecef;
}

.contributions-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.5rem;
}

.contribution-stats {
  display: flex;
  gap: 1rem;
}

.contributions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
  gap: 1.5rem;
}

.contribution-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contribution-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.contribution-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.contribution-title-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #2c3e50;
  font-size: 1.05rem;
  font-weight: 600;
}

.contribution-title-toggle:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.25);
  outline-offset: 3px;
  border-radius: 6px;
}

.contribution-title-text {
  text-transform: none;
}

.scope-badge {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.scope-badge.all-members {
  color: #0c5460;
}

.scope-badge.specific-member {
  color: #721c24;
}

.contribution-details .detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f8f9fa;
}

.contribution-details .detail-row:last-child {
  border-bottom: none;
}

.contribution-details .label {
  font-weight: 500;
  color: #6c757d;
}

.contribution-details .value {
  color: #2c3e50;
  font-weight: 500;
}

.contribution-details .value.amount {
  color: #10B981;
  font-weight: 600;
  font-size: 1.1rem;
}

.contribution-details .value.description {
  font-style: italic;
  color: #6c757d;
  font-size: 0.9rem;
}

/* Member Dashboard Contribution Styles */
.scope-indicator {
  font-size: 1.2rem;
  margin-right: 0.5rem;
  cursor: help;
}

.contribution-desc {
  color: #6c757d;
  font-style: italic;
  margin-top: 0.25rem;
  display: block;
}

.btn-delete {
  background: #F43F5E;
  color: white;
  border: none;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  margin-right: 0.5rem;
}

.btn-delete:hover {
  background: #E11D48;
}

.btn-pay {
  background: #10B981;
  color: white;
  border: none;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
}

.btn-pay:hover:not(:disabled) {
  background: #059669;
}

.btn-pay:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

/* Notification System Styles */
.notifications-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e9ecef;
}

.notifications-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.5rem;
}

.notification-stats {
  display: flex;
  gap: 1rem;
}

.notifications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
  gap: 1.5rem;
}

.notification-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.notification-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.notification-header h4 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.2rem;
}

.notification-title-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #2c3e50;
  font-size: 1.05rem;
  font-weight: 600;
}

.notification-title-toggle:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.25);
  outline-offset: 3px;
  border-radius: 6px;
}

.notification-title-text {
  text-transform: uppercase;
}

.notification-badges {
  display: none; /* replaced by inline badges on title button */
}

.priority-badge {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.priority-badge.normal {
  color: #495057;
}

.priority-badge.high {
  color: #856404;
}

.priority-badge.urgent {
  color: #721c24;
}

.notification-details .detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f8f9fa;
}

.notification-details .detail-row:last-child {
  border-bottom: none;
}

.notification-details .label {
  font-weight: 500;
  color: #6c757d;
  min-width: 80px;
}

.notification-details .value {
  color: #2c3e50;
  font-weight: 500;
  flex: 1;
  text-align: right;
}

/* Member Notification Styles */
.member-notifications-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e9ecef;
}

.member-notifications-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.3rem;
}

.notification-count {
  display: flex;
  gap: 1rem;
}

.stat-badge.unread {
  background: #f8d7da;
  color: #721c24;
}

.member-notifications-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.member-notification-card {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
  transition: all 0.2s ease;
  cursor: pointer;
}

.member-notification-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.member-notification-card.unread {
  border-left: 4px solid #6366F1;
  background: #f8f9ff;
}

.member-notification-card.urgent {
  border-left: 4px solid #F43F5E;
  background: #fff5f5;
}

.member-notification-card.high {
  border-left: 4px solid #F59E0B;
  background: #fffdf5;
}

.member-notification-card.read {
  opacity: 0.7;
  background: #f8f9fa;
}

.member-notification-card .notification-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.member-notification-card .notification-header h4 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.notification-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.unread-indicator {
  color: #6366F1;
  font-size: 1.2rem;
  animation: pulse 2s infinite;
}

.notification-content p {
  margin: 0 0 0.75rem 0;
  color: #495057;
  line-height: 1.5;
}

.notification-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: #6c757d;
}

.click-hint {
  color: #6366F1;
  font-style: italic;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* Real-time Features */
.online-member {
  border-left: 4px solid #10B981 !important;
  background: linear-gradient(135deg, #f8fff8 0%, #ffffff 100%) !important;
}

.btn-activity {
  background: #06B6D4;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.btn-activity:hover {
  background: #0891B2;
}

.stat-badge.real-time {
  background: #d1ecf1;
  color: #0c5460;
  animation: pulse 2s infinite;
}

/* Alert Styles for Real-time Notifications */
.alert-content {
  position: relative;
}

.alert-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 600;
}

.alert-icon {
  font-size: 1.2rem;
}

.alert-close {
  position: absolute;
  top: -5px;
  right: -5px;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-close:hover {
  background: rgba(255, 255, 255, 0.5);
}

.alert-body {
  line-height: 1.4;
}

/* Real-time Status Indicators */
.realtime-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.realtime-dot {
  width: 8px;
  height: 8px;
  background: #10B981;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.realtime-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: #10B981;
}

/* Enhanced Member Card for Online Status */
.member-card.online-member .member-header {
  position: relative;
}

.member-card.online-member::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #10B981, #34D399);
  border-radius: 12px 12px 0 0;
}

/* Activity Feed Styles */
.activity-feed {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 1rem;
  background: #f8f9fa;
}

.activity-item {
  background: white;
  border-radius: 6px;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border-left: 3px solid #6366F1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.activity-item:last-child {
  margin-bottom: 0;
}

.activity-item .activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.activity-item .activity-action {
  font-weight: 600;
  color: #2c3e50;
}

.activity-item .activity-time {
  font-size: 0.8rem;
  color: #6c757d;
}

.activity-item .activity-details {
  font-size: 0.9rem;
  color: #495057;
  line-height: 1.4;
}

/* Notification Priority Indicators */
.priority-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.priority-indicator.urgent {
  background: #F43F5E;
  animation: pulse 1s infinite;
}

.priority-indicator.high {
  background: #F59E0B;
}

.priority-indicator.normal {
  background: #6c757d;
}

/* Real-time Connection Status - Hidden but functionality remains */
.connection-status {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #10B981;
  color: white;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  z-index: 1000;
  display: none !important; /* Hide visual but keep functionality */
  align-items: center;
  gap: 6px;
}

.connection-status.disconnected {
  background: #F43F5E;
  display: none !important; /* Hide visual but keep functionality */
}

.connection-status .status-dot {
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

/* Activity Feed Headers */
.audit-trail-header, .member-activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e9ecef;
}

.audit-stats, .activity-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.no-activity {
  text-align: center;
  padding: 3rem 1rem;
  color: #6c757d;
}

.no-activity p {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.no-activity small {
  font-size: 0.9rem;
  color: #adb5bd;
}

/* Activity Item Enhancements */
.activity-actor {
  display: flex;
  align-items: center;
  gap: 8px;
}

.actor-icon {
  font-size: 1.2rem;
}

.activity-timestamp {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #f8f9fa;
  color: #6c757d;
}

/* Enhanced Member Management Styles */
.admin-only {
  background: #f8f9fa;
  border-left: 3px solid #6366F1;
  padding-left: 10px;
}

.admin-control {
  border: 2px solid #6366F1 !important;
  background: #e3f2fd !important;
  font-weight: 600;
}

.admin-control:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

.btn-warning {
  background: #F59E0B;
  color: #212529;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.btn-warning:hover {
  background: #D97706;
  transform: translateY(-1px);
}

/* Member Status Classes */
.active-member {
  border-left: 4px solid #10B981 !important;
}

.inactive-member {
  border-left: 4px solid #6c757d !important;
}

.suspended-member {
  border-left: 4px solid #F43F5E !important;
}

/* Login Status Classes */
.recent-login {
  color: #10B981;
  font-weight: 600;
}

.today-login {
  color: #06B6D4;
  font-weight: 500;
}

.week-login {
  color: #F59E0B;
  font-weight: 500;
}

.old-login {
  color: #6c757d;
}

.never-logged-in {
  color: #F43F5E;
  font-style: italic;
}

/* Activity Level Classes */
.very-active {
  color: #10B981;
  font-weight: 600;
}

.active {
  color: #06B6D4;
  font-weight: 500;
}

.moderate {
  color: #F59E0B;
  font-weight: 500;
}

.low {
  color: #fd7e14;
  font-weight: 500;
}

.inactive {
  color: #6c757d;
}

/* Time Indicators */
.time-indicator {
  font-size: 0.8rem;
  color: #6c757d;
  font-style: italic;
  margin-left: 8px;
}

.connection-status {
  display: flex;
  align-items: center;
  gap: 4px;
}

.connection-status.online {
  color: #10B981;
  font-weight: 600;
}

.connection-status.offline {
  color: #6c757d;
}

/* Enhanced Status Badges */
.stat-badge.inactive {
  background: #f8d7da;
  color: #721c24;
}

.stat-badge.suspended {
  background: #fff3cd;
  color: #856404;
}

.stat-badge.recent {
  background: #d1ecf1;
  color: #0c5460;
}

/* Member Profile Status Display */
.status-display {
  position: relative;
}

.readonly-status {
  background: #f8f9fa !important;
  border: 1px solid #dee2e6 !important;
  color: #6c757d !important;
  cursor: not-allowed !important;
}

.status-note {
  display: block;
  color: #6c757d;
  font-size: 0.8rem;
  margin-top: 4px;
  font-style: italic;
}

/* Status Change Notifications */
.status-change {
  font-weight: 600;
  color: #06B6D4;
}

.notification-body .status-change {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  margin: 4px 0;
  display: inline-block;
}

/* Compact list row hover (flat -- no lift, matches .member-card above) */
.member-card.online-member:hover {
  background-color: #f0fdf4;
}

.member-card.suspended-member:hover {
  background-color: #fef2f2;
}

/* Real-time Status Indicators */
.realtime-indicator {
  position: relative;
}

.realtime-indicator::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 6px;
  height: 6px;
  background: #10B981;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

/* Enhanced Activity Level Display */
.activity-level {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.activity-level.very-active {
  background: #d4edda;
  color: #155724;
}

.activity-level.active {
  background: #d1ecf1;
  color: #0c5460;
}

.activity-level.moderate {
  background: #fff3cd;
  color: #856404;
}

.activity-level.low {
  background: #ffeaa7;
  color: #856404;
}

.activity-level.inactive {
  background: #f8d7da;
  color: #721c24;
}

/* ===================== MEMBER DASHBOARD STYLES ===================== */

/* Profile Header Styles */
.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e9ecef;
}

.profile-header h3 {
  margin: 0;
  color: #333;
  font-size: 1.5rem;
  font-weight: 600;
}

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

.profile-actions button {
  width: auto;
  padding: 4px 10px;
  margin: 0;
  font-size: 0.7em;
  font-weight: 600;
  border-radius: 4px;
}


/* Dashboard Welcome Section */
.dashboard-welcome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 2rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.welcome-info h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.8rem;
  font-weight: 600;
}

.welcome-info p {
  margin: 0;
  opacity: 0.9;
  font-size: 1rem;
}

.member-status-display {
  display: flex;
  gap: 1rem;
}

.status-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 1rem;
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

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

.status-info {
  display: flex;
  flex-direction: column;
}

.status-label {
  font-size: 0.8rem;
  opacity: 0.8;
  margin-bottom: 0.25rem;
}

.status-value {
  font-size: 1rem;
  font-weight: 600;
}

.status-value.active {
  color: #4ade80;
}

.status-value.inactive {
  color: #fbbf24;
}

.status-value.suspended {
  color: #f87171;
}

/* Dashboard Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.dashboard-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.dashboard-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.dashboard-card h3 {
  margin: 0 0 1rem 0;
  color: #374151;
  font-size: 1.2rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.stat-item {
  text-align: center;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.stat-number {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1e40af;
  margin-bottom: 0.35rem;
}

.stat-label {
  font-size: 0.9rem;
  color: #64748b;
  font-weight: 500;
}

/* Activity List */
.activity-list {
  max-height: 300px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.2s ease;
}

.activity-item:hover {
  background-color: #f8fafc;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  font-size: 1.2rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e0e7ff;
  border-radius: 50%;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.25rem;
}

.activity-time {
  font-size: 0.8rem;
  color: #6b7280;
}

/* Quick Actions */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  color: #374151;
}

.quick-action-btn:hover {
  background: #e0e7ff;
  border-color: #c7d2fe;
  transform: translateY(-1px);
}

.action-icon {
  font-size: 1.5rem;
}

.action-text {
  font-size: 0.9rem;
  font-weight: 500;
}

/* Notifications Preview */
.notifications-preview {
  max-height: 200px;
  overflow-y: auto;
}

.notification-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.2s ease;
}

.notification-item:hover {
  background-color: #f8fafc;
}

.notification-item.unread {
  background-color: #fef3c7;
  border-left: 3px solid #f59e0b;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-icon {
  font-size: 1.2rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dbeafe;
  border-radius: 50%;
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.25rem;
}

.notification-time {
  font-size: 0.8rem;
  color: #6b7280;
}

/* Contributions Summary */
.contributions-summary {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.summary-label {
  font-weight: 500;
  color: #374151;
}

.summary-value {
  font-weight: 600;
  color: #1e40af;
}

/* System Status */
.system-status {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  animation: pulse 2s infinite;
}

.status-indicator.offline {
  background: #ef4444;
  animation: none;
}

.status-text {
  font-size: 0.9rem;
  color: #374151;
}

/* View All Button */
.view-all {
  margin-top: 1rem;
  text-align: center;
}

.view-all-btn {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.view-all-btn:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

/* Responsive Design */
@media (max-width: 768px) {
  .dashboard-welcome {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .member-status-display {
    justify-content: center;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  /* Compact list rows are too cramped on narrow screens -- stack each
     row's header/fields/actions back into a small readable block. */
  .member-card {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .member-card > .member-details {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    /* .member-details' base rule sets flex: 1 1 240px for the desktop row
       layout -- that 240px flex-basis becomes a HEIGHT once the parent
       switches to flex-direction: column here, forcing a large empty gap
       before the action buttons. Reset it back to content-driven sizing. */
    flex: 1 1 auto;
  }

  .member-actions {
    margin-left: 0;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .quick-actions {
    grid-template-columns: 1fr;
  }
}

/* Dashboard Card Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dashboard-card {
  animation: fadeInUp 0.6s ease-out;
}

.dashboard-card:nth-child(1) { animation-delay: 0.1s; }
.dashboard-card:nth-child(2) { animation-delay: 0.2s; }
.dashboard-card:nth-child(3) { animation-delay: 0.3s; }
.dashboard-card:nth-child(4) { animation-delay: 0.4s; }
.dashboard-card:nth-child(5) { animation-delay: 0.5s; }
.dashboard-card:nth-child(6) { animation-delay: 0.6s; }

/* ===================== ENHANCED PROFILE FORM STYLES ===================== */

/* Profile Container */
.profile-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  margin-top: 1.5rem;
}

.profile-form {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  border: 1px solid #e5e7eb;
}

.form-section {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.form-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.form-section h3 {
  margin: 0 0 1.5rem 0;
  color: #374151;
  font-size: 1.2rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-section h3::before {
  content: '';
  width: 4px;
  height: 20px;
  background: #3b82f6;
  border-radius: 2px;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #374151;
  font-size: 0.9rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  background: white;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.btn-primary {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
}

.btn-primary:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

.btn-secondary {
  background: #6b7280;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
}

.btn-secondary:hover {
  background: #4b5563;
  transform: translateY(-1px);
}

/* Profile Preview */
.profile-preview {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  border: 1px solid #e5e7eb;
  height: fit-content;
  position: sticky;
  top: 2rem;
}

.profile-preview h3 {
  margin: 0 0 1rem 0;
  color: #374151;
  font-size: 1.1rem;
  font-weight: 600;
}

.profile-preview-content {
  font-size: 0.9rem;
  color: #6b7280;
}

.preview-card {
  background: #f8fafc;
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid #e2e8f0;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
}

.preview-header h4 {
  margin: 0;
  color: #1f2937;
  font-size: 1.1rem;
  font-weight: 600;
}

.preview-plate {
  background: #3b82f6;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}

.preview-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.preview-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.preview-item strong {
  color: #374151;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.preview-item span {
  color: #6b7280;
  font-size: 0.9rem;
}

/* Enhanced Monitoring Tools Styles */
.monitoring-card .value.active {
  color: #10B981;
  font-weight: 600;
}

.monitoring-card .value.inactive {
  color: #6c757d;
  font-weight: 600;
}

.monitoring-card .value.suspended {
  color: #F43F5E;
  font-weight: 600;
}

.monitoring-card .value.online {
  color: #10B981;
  font-weight: 600;
  animation: pulse 2s infinite;
}

.monitoring-card .value.recent {
  color: #06B6D4;
  font-weight: 600;
}

.monitoring-card .value.paid {
  color: #10B981;
  font-weight: 600;
}

.monitoring-card .value.pending {
  color: #F59E0B;
  font-weight: 600;
}

.monitoring-card .value.revenue {
  color: #06B6D4;
  font-weight: 600;
}

/* Responsive Design for Profile */
@media (max-width: 768px) {
  .profile-container {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .profile-preview {
    position: static;
    order: -1;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .btn-primary,
  .btn-secondary {
    flex: none;
  }
}

/* Profile Update Success Animation */
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

.profile-update-success {
  font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.success-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.success-icon {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
}

.success-content strong {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.success-content p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

/* ===================== MEMBER CREATION FORM STYLES ===================== */
.member-creation-section {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
}

.member-creation-section h3 {
    margin: 0 0 20px 0;
    color: #333;
    font-size: 1.2rem;
    border-bottom: 2px solid #6366F1;
    padding-bottom: 10px;
}

.member-creation-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #6366F1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 60px;
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px solid #dee2e6;
}

.btn-primary {
    background: #6366F1;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.btn-primary:hover {
    background: #4F46E5;
}

.btn-secondary {
    background: #6c757d;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.btn-secondary:hover {
    background: #545b62;
}

/* Account Creation Success Modal Styles */
.account-creation-success-modal {
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.account-creation-success-modal code {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

/* Password Change Modal Styles */
.password-change-modal {
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Enhanced Member Cards with Account Info */
.member-card {
    position: relative;
}

.member-card.account-created {
    border-left: 4px solid #10B981;
}

.member-card.account-created::before {
    content: "✅";
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.2rem;
}

.member-account-info {
    background: #e8f5e8;
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: 8px;
    font-size: 0.8rem;
    color: #155724;
}

.member-account-info.temporary {
    background: #fff3cd;
    color: #856404;
}

.member-account-info.temporary::before {
    content: "⚠️ ";
}

.member-account-info.permanent {
    background: #d4edda;
    color: #155724;
}

.member-account-info.permanent::before {
    content: "✅ ";
}

/* Password Status Display */
.password-status-display {
    display: flex;
    align-items: center;
    gap: 10px;
}

.password-status-display input {
    flex: 1;
}

.btn-change-password {
    background: #6366F1;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.btn-change-password:hover {
    background: #4F46E5;
}

.readonly-status.temporary-password {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffeaa7;
}

.readonly-status.secure-password {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

/* ===================== MEMBER SEARCH STYLES ===================== */
.member-search-section {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.member-search-section h3 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 1.1rem;
    border-bottom: 2px solid #6366F1;
    padding-bottom: 8px;
}

.search-container {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

/* Search container in header position (top right) */
#member-records > div:first-child .search-container {
    margin-bottom: 0;
    gap: 0;
}

/* Member search input styling */
#memberSearchInput {
    width: 100% !important;
    padding: 12px 16px !important;
    background-color: #e5e7eb !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    text-align: center !important;
    color: #374151 !important;
    transition: background-color 0.2s ease !important;
    box-shadow: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

#memberSearchInput:focus {
    outline: none !important;
    background-color: #d1d5db !important;
    border: none !important;
    box-shadow: none !important;
}

#memberSearchInput::placeholder {
    color: #4b5563 !important;
    font-style: normal !important;
    text-align: center !important;
}

.member-search-section .search-container input[type="text"],
.search-container input[type="text"] {
    width: 100%;
    padding: 12px 16px;
    background-color: #e5e7eb !important;
    border: none !important;
    border-radius: 8px;
    font-size: 1rem;
    text-align: center;
    color: #374151;
    transition: background-color 0.2s ease;
    box-shadow: none !important;
    margin: 0 !important;
    box-sizing: border-box;
}

.member-search-section .search-container input[type="text"]:focus,
.search-container input[type="text"]:focus {
    outline: none;
    background-color: #d1d5db !important;
    border: none !important;
    box-shadow: none !important;
}

.member-search-section .search-container input[type="text"]::placeholder,
.search-container input[type="text"]::placeholder {
    color: #4b5563;
    font-style: normal;
    text-align: center;
}

.btn-clear-search {
    background: #6c757d;
    color: white;
    border: none;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.btn-clear-search:hover {
    background: #545b62;
}

.search-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #6b7280;
}

.search-result-count {
    font-weight: 600;
    color: #333;
}

.search-term {
    background: #e3f2fd;
    color: #1976d2;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
}

/* No Results Styles */
.no-results,
.no-members {
    text-align: center;
    padding: 40px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px dashed #dee2e6;
}

.no-results-icon,
.no-members-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    opacity: 0.6;
}

.no-results h3,
.no-members h3 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 1.3rem;
}

.no-results p,
.no-members p {
    margin: 0 0 20px 0;
    color: #6b7280;
    font-size: 1rem;
}

.no-results .btn-primary {
    background: #6366F1;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.no-results .btn-primary:hover {
    background: #4F46E5;
}

/* Search Highlight Effect */
.member-card.search-highlight {
    border: 2px solid #6366F1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    transform: scale(1.02);
}

/* Search term highlighting */
.search-highlight {
    background-color: #fff3cd;
    color: #856404;
    padding: 1px 3px;
    border-radius: 3px;
    font-weight: 600;
}

/* ===================== ROLE SEPARATION STYLES ===================== */
.role-clarification {
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 20px;
}

.role-clarification p {
    margin: 0;
    color: #1976d2;
    font-size: 0.9rem;
}

.admin-note {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 15px;
    margin: 15px 0;
}

.admin-note h4 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 1rem;
}

.admin-note p {
    margin: 0 0 10px 0;
    color: #666;
    font-size: 0.9rem;
}

.admin-note ul {
    margin: 0;
    padding-left: 20px;
    color: #666;
    font-size: 0.9rem;
}

.admin-note li {
    margin-bottom: 5px;
}

.form-help {
    display: block;
    color: #6b7280;
    font-size: 0.8rem;
    margin-top: 4px;
    font-style: italic;
}

.member-role-info {
    background: #e8f5e8;
    border: 1px solid #c3e6cb;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 20px;
}

.member-role-info p {
    margin: 0;
    color: #155724;
    font-size: 0.9rem;
}

.status-display {
    font-weight: 600;
    color: #333;
}

.status-note {
    display: block;
    color: #6b7280;
    font-size: 0.8rem;
    margin-top: 4px;
    font-style: italic;
}

/* Profile Completion Status Styles */
.profile-not-started {
    color: #F43F5E;
    font-weight: 600;
}

.profile-in-progress {
    color: #F59E0B;
    font-weight: 600;
}

.profile-almost-complete {
    color: #fd7e14;
    font-weight: 600;
}

.profile-complete {
    color: #10B981;
    font-weight: 600;
}

/* ===================== EVALUATION SYSTEM STYLES ===================== */
.evaluation-section {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.evaluation-section h3 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 1.1rem;
    border-bottom: 2px solid #6366F1;
    padding-bottom: 8px;
}

.evaluation-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-success {
    background: #10B981;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.btn-success:hover {
    background: #059669;
}

.action-btn.primary {
    background: #6366F1;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s ease;
    font-size: 1rem;
}

.action-btn.primary:hover {
    background: #4F46E5;
}

.evaluation-info {
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 20px;
}

.evaluation-info p {
    margin: 0;
    color: #1976d2;
    font-size: 0.9rem;
}

/* Evaluation Cards */
.evaluation-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.2s ease;
}

.evaluation-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.evaluation-card.pending {
    border-left: 4px solid #F59E0B;
}

.evaluation-card.completed {
    border-left: 4px solid #10B981;
}

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

.evaluation-info h4 {
    margin: 0 0 5px 0;
    color: #333;
    font-size: 1.1rem;
}

.evaluation-date {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
}

.evaluation-status {
    text-align: right;
}

.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.pending_response {
    background: #fff3cd;
    color: #856404;
}

.status-badge.responded {
    background: #d1ecf1;
    color: #0c5460;
}

.status-badge.completed {
    background: #d4edda;
    color: #155724;
}

.evaluation-details {
    margin-top: 15px;
}

.evaluation-rating {
    margin-bottom: 10px;
    color: #333;
}

.evaluation-comments {
    margin-bottom: 15px;
}

.evaluation-comments p {
    margin: 5px 0 0 0;
    color: #666;
    line-height: 1.5;
}

.member-response {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    margin-top: 15px;
    border-left: 3px solid #06B6D4;
}

.member-response p {
    margin: 5px 0 0 0;
    color: #333;
    line-height: 1.5;
}

.member-response small {
    color: #666;
    font-size: 0.8rem;
}

.response-section {
    margin-top: 15px;
    text-align: right;
}

/* 1-5 rating question rows on the member evaluation form */
.rating-question-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.rating-question-sub {
    font-weight: 400;
    opacity: 0.75;
}

.rating-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 14px;
}

.rating-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}

.rating-option input[type="radio"] {
    width: auto;
    margin: 0;
}

/* Evaluation Preview */
.evaluations-preview {
    margin-bottom: 15px;
}

.evaluation-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

.evaluation-icon {
    font-size: 1.5rem;
    color: #6366F1;
}

.evaluation-content {
    flex: 1;
}

.evaluation-title {
    font-weight: 600;
    color: #333;
    margin: 0 0 2px 0;
}

.evaluation-time {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

/* No Evaluations */
.no-evaluations {
    text-align: center;
    padding: 40px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px dashed #dee2e6;
}

.no-evaluations-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    opacity: 0.6;
}

.no-evaluations h3 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 1.3rem;
}

.no-evaluations p {
    margin: 0;
    color: #6b7280;
    font-size: 1rem;
}

/* Responsive Design for Member Creation */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .btn-primary,
    .btn-secondary {
        width: 100%;
    }
    
    .password-status-display {
        flex-direction: column;
        align-items: stretch;
    }
    
    .btn-change-password {
        width: 100%;
    }
    
    .search-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .member-search-section .search-container input[type="text"],
    .search-container input[type="text"] {
        width: 100%;
    }
    
    .btn-clear-search {
        width: 100%;
    }
    
    .search-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

/* ===================== EXTRACTED INLINE STYLES ===================== */

/* Dashboard Header Styles */
.navbar-user-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Member Records Header */
.member-records-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.member-records-header-wrapper h2 {
    margin: 0;
}

.member-search-wrapper {
    max-width: 300px;
    flex: 0 0 auto;
}

/* Row of filter dropdowns (role/organization/status, etc.) -- the generic
   `select { width: 100% }` rule makes each one claim a full row on its own,
   so cap and let them sit side by side instead of stacking tall. */
.filter-bar select {
    width: auto;
    min-width: 160px;
    max-width: 240px;
    flex: 1 1 180px;
    margin: 0;
}

@media (max-width: 600px) {
    .filter-bar select {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Attendance Overview Section */
.attendance-overview-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #e9ecef;
}

.attendance-overview-section h3 {
    color: #333;
    margin-bottom: 15px;
}

.attendance-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 15px;
}

.attendance-stat-card {
    background: white;
    padding: 15px;
    border-radius: 6px;
    text-align: center;
    border: 1px solid #e9ecef;
}

.attendance-stat-number {
    font-size: 24px;
    font-weight: bold;
}

.attendance-stat-number.total {
    color: #6366F1;
}

.attendance-stat-number.active {
    color: #10B981;
}

.attendance-stat-number.rate {
    color: #F59E0B;
}

.attendance-stat-number.events {
    color: #06B6D4;
}

.attendance-stat-label {
    color: #666;
    font-size: 14px;
}

/* Attendance Actions Section */
.attendance-actions-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #e9ecef;
}

.attendance-actions-section h3 {
    color: #333;
    margin-bottom: 15px;
}

.attendance-actions-wrapper {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-attendance-add {
    background: #6366F1;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

.btn-attendance-add:hover {
    background: #4F46E5;
}

.btn-attendance-manage {
    background: #6f42c1;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

.btn-attendance-manage:hover {
    background: #5a32a3;
}

.btn-attendance-report {
    background: #06B6D4;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

.btn-attendance-report:hover {
    background: #0891B2;
}

/* Attendance Records Section */
.attendance-records-section h3 {
    color: #333;
    margin-bottom: 15px;
}

.attendance-search-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 0 12px 0;
    flex-wrap: wrap;
}

.attendance-quick-search {
    flex: 1;
    min-width: 220px;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
}

.attendance-sort-label {
    font-size: 13px;
    color: #555;
}

.attendance-sort-select {
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
}

/* Table Styles */
.table-container {
    background: white;
    border-radius: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e9ecef;
}

.attendance-table,
.member-table {
    width: 100%;
    border-collapse: collapse;
}

/* Below this width, columns get too cramped to read -- scroll the table
   horizontally inside .table-container instead of crushing text/wrapping
   the whole page. */
@media (max-width: 768px) {
    .attendance-table,
    .member-table {
        min-width: 640px;
    }
}

.attendance-table thead,
.member-table thead {
    background: #f8f9fa;
}

.attendance-table th,
.member-table th {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
}

.attendance-table th.center,
.member-table th.center {
    text-align: center;
}

.attendance-table td,
.member-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f3f5;
    vertical-align: middle;
}

.attendance-table td.center,
.member-table td.center {
    text-align: center;
}

.attendance-table tbody tr:last-child td,
.member-table tbody tr:last-child td {
    border-bottom: none;
}

.table-loading-message {
    padding: 20px;
    text-align: center;
    color: #666;
}

/* Evaluation Table */
.evaluation-table-container {
    margin-top: 16px;
}

/* Notification Form */
.notification-member-selection-group,
.member-selection-group,
.event-fields-group {
    display: none;
}

.event-field-label {
    margin-top: 10px;
}

/* Member Dashboard Attendance Styles */
.member-attendance-info {
    background: #e3f2fd;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid #2196f3;
}

.member-attendance-info h4 {
    margin: 0 0 10px 0;
    color: #1976d2;
}

.member-attendance-info p {
    margin: 0;
    color: #333;
    font-size: 14px;
}

.member-attendance-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.member-stat-card {
    background: white;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.member-stat-number {
    font-size: 24px;
    font-weight: bold;
}

.member-stat-number.total {
    color: #6366F1;
}

.member-stat-number.present {
    color: #10B981;
}

.member-stat-number.absent {
    color: #F43F5E;
}

.member-stat-number.rate {
    color: #F59E0B;
}

.member-attendance-table-container {
    background: white;
    border-radius: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ===================== GLOBAL RESPONSIVE FIXES =====================
   Consolidated overrides so every page's header/toolbar rows and stat
   badge groups reflow instead of overflowing on narrow screens, instead
   of duplicating per-page rules. Targets the existing shared classes used
   across every role's pages rather than introducing new ones. */
@media (max-width: 900px) {
  .member-records-header,
  .member-records-header-wrapper,
  .contributions-header,
  .notifications-header,
  .member-notifications-header,
  .audit-trail-header,
  .member-activity-header,
  .profile-header {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  .member-search-wrapper {
    max-width: 100%;
    width: 100%;
    flex: 1 1 100%;
  }

  .member-stats,
  .contribution-stats,
  .notification-stats,
  .notification-count,
  .audit-stats {
    flex-wrap: wrap;
  }

  .contribution-header,
  .notification-header,
  .evaluation-header {
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  h1 {
    font-size: 1.35em;
  }

  .login-card h1 {
    font-size: 1.1em;
  }

  .member-records-header h3,
  .contributions-header h3,
  .notifications-header h3,
  .member-notifications-header h3,
  .profile-header h3 {
    font-size: 1.2rem;
  }

  .about-btn {
    top: 10px;
    left: 10px;
    padding: 8px 12px;
    font-size: 0.8em;
  }
}