/* Global Colors (CSS Variables) */
:root {
    /* Enzed Healthcare Brand Colors (from logo) */
    --enzed-dark-blue-grey: #205261;
    --enzed-green: #7BC6A7;

    /* Primary UI Colors */
    --primary-blue: #007bff;
    --primary-blue-dark: #0056b3;
    --primary-blue-light: #d0e8ff;
    /* Lighter version for hover */

    /* Action Colors */
    --success-green: #28a745;
    --success-green-dark: #218838;
    --warning-yellow: #ffc107;
    --warning-yellow-dark: #e0a800;
    --danger-red: #dc3545;
    --danger-red-dark: #c82333;
    --neutral-grey: #6c757d;
    --neutral-grey-dark: #5a6268;

    /* Backgrounds & Text */
    --bg-light-grey: #f4f4f4;
    --bg-white: #fff;
    --text-dark: #333;
    /* Very dark grey */
    --text-light: white;
    /* White */
    --border-light: #ddd;

    /* Specific element backgrounds */
    --table-header-bg: #f2f2f2;
    --table-row-even-bg: #f9f9f9;
    --table-row-hover-bg: #e9e9e9;
    --detail-card-bg: #f9f9f9;
    --detail-card-border: #eee;

    /* Error & Message Colors */
    --error-text: var(--danger-red);
    --error-bg: #f8d7da;
    --error-border: #f5c6cb;
    --confirm-delete-bg: #ffe0e0;
    --confirm-delete-border: #ffb3b3;

    /* Spacing & Sizes (using rem for scalability) */
    --spacing-xs: 0.3125rem;
    /* 5px */
    --spacing-sm: 0.625rem;
    /* 10px */
    --spacing-md: 0.75rem;
    /* 12px */
    --spacing-lg: 0.9375rem;
    /* 15px */
    --spacing-xl: 1.25rem;
    /* 20px */
    --spacing-xxl: 1.875rem;
    /* 30px */

    /* Font Sizes (using rem for base, em for relative) */
    --font-size-base: 1rem;
    /* 16px */
    --font-size-sm: 0.9em;
    --font-size-xs: 0.85em;

    /* Border Radii */
    --border-radius-sm: 0.25rem;
    /* 4px */
    --border-radius-md: 0.3125rem;
    /* 5px */
    --border-radius-lg: 0.5rem;
    /* 8px */
}

/* Base HTML and Body Styles */
html {
    font-size: 100%;
    /* Ensures 1rem = browser's default font size (usually 16px) */
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--bg-light-grey);
    color: var(--text-dark);
    font-size: var(--font-size-base);
    /* Explicitly set base font size */
}

/* Main Content Area */
main {
    padding: var(--spacing-xl);
    max-width: 75rem;
    /* 1200px / 16 = 75rem */
    margin: var(--spacing-xl) auto;
    background-color: var(--bg-white);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 var(--spacing-xs) var(--spacing-md) rgba(0, 0, 0, 0.1);
}

/* Headings */
h1,
h2,
h3 {
    color: var(--enzed-dark-blue-grey);
    /* Use brand color for headings */
    margin-top: 0;
    /* Reset default margin */
    margin-bottom: var(--spacing-xl);
    /* Consistent spacing below headings */
}

h1 {
    font-size: 2.25rem;
    /* ~36px */
}

h2 {
    font-size: 1.875rem;
    /* ~30px */
}

h3 {
    font-size: 1.5rem;
    /* ~24px */
}


/* Header Styles - Lighter background, brand colors for text */
header {
    background-color: #f8f8f8;
    /* A very light grey for the header background */
    color: var(--enzed-dark-blue-grey);
    /* Text color from logo */
    padding: var(--spacing-sm) var(--spacing-xl);
    border-bottom: var(--spacing-xs) solid var(--enzed-green);
    /* Green border from logo */
}

.header-content {
    display: grid;
    /* Use grid for better control */
    grid-template-columns: auto 1fr auto;
    /* Logo-Title | Nav | Auth-Links */
    align-items: center;
    max-width: 75rem;
    /* 1200px */
    margin: 0 auto;
    gap: var(--spacing-xl);
    /* Gap between grid items */
}

.logo-title {
    display: flex;
    align-items: center;
}

.logo {
    height: 3.125rem;
    /* 50px */
    margin-right: var(--spacing-lg);
    /* 15px */
}

header h1 {
    margin: 0;
    font-size: 1.8em;
    /* Relative to parent font size */
    color: var(--enzed-dark-blue-grey);
    /* Use brand color for header title */
}

.main-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    /* Center the menu items */
    flex-wrap: wrap;
    /* Allow wrapping on smaller screens */
    gap: var(--spacing-xl);
    /* Gap between menu items */
}

.main-menu li {
    margin: 0;
    /* Reset default margin */
}

.main-menu a {
    color: var(--enzed-dark-blue-grey);
    /* Use brand color for links */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.main-menu a:hover {
    color: var(--enzed-green);
    /* Use brand green for hover */
}

.auth-links {
    text-align: right;
    display: flex;
    flex-direction: column;
    /* Align auth links to the right */
}

.auth-links a,
.auth-links span {
    color: var(--enzed-dark-blue-grey);
    /* Use brand color for auth links/text */
    text-decoration: none;
    margin-left: var(--spacing-lg);
    transition: color 0.3s ease;
}

.auth-links a:hover {
    color: var(--enzed-green);
    /* Use brand green for hover */
}

/* Footer Styles */
footer {
    background-color: var(--enzed-dark-blue-grey);
    /* Use brand color for footer */
    color: var(--text-light);
    text-align: center;
    padding: var(--spacing-lg) var(--spacing-xl);
    margin-top: var(--spacing-xxl);
    font-size: var(--font-size-sm);
}

/* Button Styles */
.button {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    margin: var(--spacing-xs) 0;
    border-radius: var(--border-radius-md);
    text-decoration: none;
    color: var(--text-light);
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    border: none;
    font-size: var(--font-size-base);
    /* Ensure button text scales */
}

.create-button {
    background-color: var(--success-green);
}

.create-button:hover {
    background-color: var(--success-green-dark);
}

/* Base styles for buttons that are not icon-only */
.edit-button:not(.button-icon) {
    background-color: var(--warning-yellow);
    color: var(--text-dark);
}

.edit-button:not(.button-icon):hover {
    background-color: var(--warning-yellow-dark);
}

.delete-button:not(.button-icon) {
    background-color: var(--danger-red);
}

.delete-button:not(.button-icon):hover {
    background-color: var(--danger-red-dark);
}

.view-button:not(.button-icon) {
    background-color: var(--primary-blue);
}

.view-button:not(.button-icon):hover {
    background-color: var(--primary-blue-dark);
}


.submit-button {
    background-color: var(--primary-blue);
}

.submit-button:hover {
    background-color: var(--primary-blue-dark);
}

.cancel-button {
    background-color: var(--neutral-grey);
}

.cancel-button:hover {
    background-color: var(--neutral-grey-dark);
}

.back-button {
    background-color: var(--neutral-grey);
    margin-top: var(--spacing-xl);
}

.back-button:hover {
    background-color: var(--neutral-grey-dark);
}

.logout-button {
    background: none;
    border: none;
    color: var(--enzed-dark-blue-grey);
    /* Match header text color */
    cursor: pointer;
    font-size: var(--font-size-base);
    /* Adjust to match surrounding text */
    padding: 0;
    margin: 0;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.logout-button:hover {
    color: var(--enzed-green);
    /* Match header link hover color */
    text-decoration: underline;
}

/* Table Styles - Responsive for mobile */
.table-responsive {
    overflow-x: auto;
    /* Allows horizontal scrolling for wide tables */
    margin-top: var(--spacing-xl);
}

table {
    width: 100%;
    border-collapse: collapse;
}

table th,
table td {
    border: 1px solid var(--border-light);
    padding: var(--spacing-md);
    text-align: left;
    text-wrap: wrap;
}

.date {
    white-space: nowrap;
}

table th {
    background-color: var(--table-header-bg);
    font-weight: bold;
}

table tr:nth-child(even) {
    background-color: var(--table-row-even-bg);
}

table tr:hover {
    background-color: var(--table-row-hover-bg);
}

table td a {
    color: var(--primary-blue);
    text-decoration: none;
}

table td a:hover {
    text-decoration: underline;
}

.list-container {
    margin-bottom: var(--spacing-xxl);
}

/* Detail Page Styles */
.detail-container {
    margin-bottom: var(--spacing-xxl);
}

.detail-card {
    background-color: var(--detail-card-bg);
    border: 1px solid var(--detail-card-border);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-xl);
}

.detail-card p {
    margin-bottom: var(--spacing-sm);
}

.detail-card strong {
    color: var(--primary-blue-dark);
}

.detail-card .actions {
    margin-top: var(--spacing-xl);
    display: flex;
    flex-wrap: wrap;
    /* Allow buttons to wrap */
    gap: var(--spacing-sm);
}

.nested-table {
    margin-top: var(--spacing-lg);
    width: 100%;
    min-width: 25rem;
    /* Smaller min-width for nested table */
}

.nested-table th,
.nested-table td {
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

/* Form Styles */
.form-container form p {
    margin-bottom: var(--spacing-lg);
}

.form-container label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: bold;
    color: var(--neutral-grey-dark);
}

.form-container input[type="text"],
.form-container input[type="date"],
.form-container input[type="password"],
.form-container textarea,
.form-container select {
    width: calc(100% - (var(--spacing-sm) * 2) - 2px);
    /* Calc for padding and border */
    padding: var(--spacing-sm);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-sm);
    box-sizing: border-box;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-base);
    /* Ensure form inputs scale */
}

.form-container textarea {
    min-height: 6.25rem;
    /* 100px */
    resize: vertical;
}

.form-container button,
.form-container .button {
    margin-right: var(--spacing-sm);
}

/* Confirm Delete Styles */
.confirm-delete-container {
    background-color: var(--confirm-delete-bg);
    border: 1px solid var(--confirm-delete-border);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    text-align: center;
}

.confirm-delete-container p {
    font-size: 1.1em;
    /* Keep em for relative scaling to parent text */
    margin-bottom: var(--spacing-xl);
}

/* Home Page Specific Styles */
.home-page {
    padding: 0;
    box-shadow: none;
    background-color: transparent;
}

.welcome-section {
    display: grid;
    /* Use grid for layout */
    grid-template-columns: 2fr 1fr;
    /* 2 parts for text, 1 for image on desktop */
    gap: var(--spacing-xxl);
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
}

.welcome-text {
    /* flex: 2; removed due to grid */
    min-width: 18.75rem;
    /* 300px */
    max-width: 43.75rem;
    /* 700px */
}

.welcome-text h2 {
    font-size: 2.2em;
    /* Keep em for relative scaling to parent text */
    margin-top: 0;
    color: var(--enzed-dark-blue-grey);
}

.welcome-text p {
    font-size: 1.1em;
    /* Keep em for relative scaling to parent text */
    line-height: 1.8;
    margin-bottom: var(--spacing-lg);
}

.welcome-image {
    /* flex: 1; removed due to grid */
    min-width: 15.625rem;
    /* 250px */
    max-width: 25rem;
    /* 400px */
    text-align: center;
}

.welcome-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    /* 0 4px 8px */
}

/* Error and Help Text Styles */
.error-list {
    margin-bottom: var(--spacing-lg);
}

.error-message {
    color: var(--error-text);
    background-color: var(--error-bg);
    border: 1px solid var(--error-border);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm) var(--spacing-lg);
    margin-top: var(--spacing-lg);
    text-align: center;
    font-weight: bold;
}

.field-errors {
    color: var(--error-text);
    list-style-type: none;
    padding-left: 0;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: bold;
}

.field-errors li {
    background-color: var(--error-bg);
    border: 1px solid var(--error-border);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    margin-bottom: var(--spacing-xs);
}

.form-container input.error,
.form-container textarea.error,
.form-container select.error {
    border-color: var(--danger-red);
}

.helptext {
    font-size: var(--font-size-xs);
    color: var(--neutral-grey);
    display: block;
    margin-top: var(--spacing-xs);
}

.small-text {
    font-size: var(--font-size-sm);
    text-align: center;
    margin-top: var(--spacing-xl);
}

.small-text a {
    color: var(--primary-blue);
    text-decoration: none;
}

.small-text a:hover {
    text-decoration: underline;
}

/* --- Icon Button Specific Styles --- */

/* Base styles for the icon button wrapper */
.button-icon {
    background-color: transparent;
    /* No background color initially */
    border: none;
    /* No border initially */
    padding: var(--spacing-sm);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Include color transition for text/icon */
}

/* Default icon color */
.button-icon .icon {
    width: 1.25rem;
    height: 1.25rem;
    transition: fill 0.3s ease;
    /* Smooth transition for icon fill color */
}

/* Specific default icon colors for visibility on light backgrounds */
.edit-button .icon {
    fill: var(--text-dark);
    /* Dark text for edit icon on light background */
}

.delete-button .icon,
.view-button .icon {
    fill: var(--enzed-dark-blue-grey);
    /* Dark blue-grey for delete/view icons */
}


/* Hover effects for the icon buttons */
.button-icon:hover {
    background-color: rgba(0, 0, 0, 0.05);
    /* Subtle light grey background on hover */
    border-radius: var(--border-radius-md);
    /* Add border-radius on hover for a subtle shape change */
}

.edit-button:hover .icon {
    fill: var(--warning-yellow-dark);
    /* Icon color on hover */
}

.delete-button:hover .icon {
    fill: var(--danger-red-dark);
    /* Icon color on hover */
}

.view-button:hover .icon {
    fill: var(--primary-blue-dark);
    /* Icon color on hover */
}


/* Accessibility: Visually hidden but available to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Responsive Adjustments */
@media (max-width: 48rem) {

    /* ~768px */
    /* Header adjustments for smaller screens */
    .header-content {
        grid-template-columns: 1fr;
        /* Stack items vertically */
        gap: var(--spacing-sm);
        text-align: center;
    }

    .logo-title {
        justify-content: center;
        /* Center logo and title */
        margin-bottom: var(--spacing-sm);
    }

    .main-menu ul {
        flex-direction: column;
        /* align-items: center; */
        /* Center menu items vertically */
        width: 100%;
        gap: var(--spacing-xs);
    }

    .auth-links {
        text-align: center;
        /* Center auth links */
        margin-top: var(--spacing-sm);
    }

    .auth-links a,
    .auth-links span {
        margin: 0 var(--spacing-xs);
        /* Reduce horizontal margin */
    }

    /* Home page adjustments for smaller screens */
    .welcome-section {
        grid-template-columns: 1fr;
        /* Stack text and image vertically */
        text-align: center;
        padding: var(--spacing-lg);
    }

    .welcome-text,
    .welcome-image {
        max-width: 100%;
        min-width: unset;
        /* Remove minimum width constraints */
    }
}