/* portal/static/portal/css/custom_styles.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&display=swap');

:root {
    /* Palette - Consistent with Business Card Motif */
    --font-heading: 'Merriweather', serif;
    --font-body: 'Inter', sans-serif;

    --bg-main: #F5F1E8; /* Main background for portal body */
    --bg-alt: #FFFFFF; /* Background for cards, modals, inputs */
    --bg-darker-section: #EAE5DA; /* For subtle section differentiation, table headers */
    --bg-hover-light: rgba(13, 44, 79, 0.03); /* Subtle hover for table rows etc. */

    --text-primary: #0D2C4F; /* Dark blue for main text, headings */
    --text-primary-darker: #071A30; /* Even darker blue for emphasis */
    --text-secondary: #5C6F80; /* Muted gray-blue for subtext, placeholders */
    --text-secondary-darker: #405060; /* Darker muted gray-blue */
    --text-on-dark-bg: #FFFFFF; /* White or very light beige for text on dark buttons/backgrounds */
    --text-on-gold-bg: #0D2C4F; /* Dark blue text on gold accents */
    --text-muted: #6c757d; /* Standard bootstrap-like muted color */

    --accent-primary: #0D2C4F; /* Primary accent, often for links, focus rings */
    --accent-primary-darker: #071A30;
    --accent-secondary-gold: #B49A67; /* Gold accent */
    --accent-secondary-gold-darker: #A0885A;

    --button-dark-bg: #343A40; /* Example dark button, not heavily used yet */
    --button-dark-hover-bg: #23272B;

    --border-light: #E0DACE; /* Light borders for cards, sections */
    --border-dark: #D1C8B8; /* Slightly darker borders, e.g., for form inputs */
    --border-focus: var(--accent-primary); /* Border color on input focus */

    /* Alert & Status Colors */
    --success-color: #198754; /* BS5 Green */
    --success-bg: #D1E7DD;
    --success-border: #A3CFBB;

    --error-color: #DC3545; /* BS5 Red */
    --error-bg: #F8D7DA;
    --error-border: #F5C2C7;
    --error-bg-light: #FDECEA; /* Lighter version for comments */


    --warning-color: #FFC107; /* BS5 Yellow */
    --warning-bg: #FFF3CD;
    --warning-border: #FFECB5;
    --warning-text-color: #664d03; /* Darker text for better contrast on yellow */

    --info-color: #0D6EFD; /* BS5 Blue */
    --info-bg: #CFF4FC;
    --info-border: #9EEAF9;
    --info-text-color: #055160; /* BS5 Info Text */
    --info-bg-light: #E1F6F8;
    --info-border-light: #B3E5FC;
    --info-color-darker: #0F7080;


    --text-secondary-status-bg: #E9ECEF; /* For 'On Hold', 'Deactivated' badges */
    --text-secondary-status-border: #CED4DA;
    --text-secondary-status-color: var(--text-secondary-darker);


    --placeholder-color: #8A99A8;

    /* Sizing & Spacing */
    --max-width: 1200px; /* Max width for content wrapper */
    --content-padding-y-portal: 2rem; /* Top/bottom padding for main content area */
    --base-font-size: 16px;
    --line-height-base: 1.65;
    --line-height-heading: 1.3;
    --card-border-radius: 6px;
    --button-border-radius: 4px;

    /* Shadows & Transitions */
    --transition-fast: 0.2s ease-in-out;
    --transition-std: 0.3s ease-in-out;
    --card-box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
    --card-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    --card-box-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.08);

    --bg-pattern-svg: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23D1C8B8' fill-opacity='0.07' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- Global Resets & Base Styles --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: var(--base-font-size);
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

body {
    font-family: var(--font-body);
    line-height: var(--line-height-base);
    color: var(--text-primary);
    background-color: var(--bg-main);
    background-image: var(--bg-pattern-svg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1;
}

.main-content-area {
    padding-top: var(--content-padding-y-portal);
    padding-bottom: var(--content-padding-y-portal);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: var(--line-height-heading);
    margin-bottom: 1rem;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

h1 {
    font-size: clamp(2rem, 3.5vw, 2.6rem);
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(1.6rem, 2.8vw, 2rem);
    margin-bottom: 1.5rem;
}

/* Portal Page Titles often H1 */
h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
}

/* Section Titles */
h4 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Sub-section or Card Titles */
p {
    margin-bottom: 1.2rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

p.lead, .lead-sm, .form-intro {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent-primary-darker);
    text-decoration: none;
}

strong {
    font-weight: 600;
    color: var(--text-primary);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    padding-left: 1.5rem;
    margin-bottom: 1.2rem;
}

li {
    margin-bottom: 0.4rem;
    color: var(--text-secondary-darker);
    font-size: 0.95rem;
}

ul li::marker {
    color: var(--accent-secondary-gold);
}

.content-wrapper {
    width: 92%;
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.d-none {
    display: none !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-muted-small {
    font-size: 0.85em;
    color: var(--text-secondary);
}

.text-center {
    text-align: center !important;
}

.float-right {
    float: right;
}

.mt-1 {
    margin-top: 0.5rem !important;
}

.mt-2 {
    margin-top: 1rem !important;
}

.mt-3 {
    margin-top: 1.5rem !important;
}

.mt-4 {
    margin-top: 2rem !important;
}

.mb-1 {
    margin-bottom: 0.5rem !important;
}

.mb-2 {
    margin-bottom: 1rem !important;
}

.mb-3 {
    margin-bottom: 1.5rem !important;
}

.mb-4 {
    margin-bottom: 2rem !important;
}

.ms-2 {
    margin-left: 0.5rem !important;
}

.me-2 {
    margin-right: 0.5rem !important;
}

.ps-3 {
    padding-left: 1rem !important;
}

.pb-3 {
    padding-bottom: 1.5rem !important;
}

.border-bottom {
    border-bottom: 1px solid var(--border-light);
}

/* --- Header / Navigation (Portal) --- */
.main-header {
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border-light);
    padding: 0.8rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

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

.logo-area .company-name {
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
}

.logo-area .company-name span {
    font-size: 0.7em;
    font-weight: 500;
    color: var(--text-secondary);
    margin-left: 0.1em;
}

.main-nav {
    margin-left: auto;
}

.main-nav ul {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav .nav-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    padding-bottom: 0.4rem;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}

.main-nav .nav-link:hover, .main-nav .nav-link.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent-secondary-gold);
}

.main-nav .nav-link.active {
    font-weight: 600;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 1.5rem;
}

.header-user-info {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.header-user-info small {
    font-size: 0.9em;
    opacity: 0.8;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.8rem;
    color: var(--text-primary);
    padding: 0.3rem;
    line-height: 1;
    z-index: 1001;
}

/* Notification Area */
.notification-area {
    position: relative;
    margin-right: 0.5rem;
}

.notification-bell {
    color: var(--text-secondary);
    text-decoration: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem;
}

.notification-bell:hover {
    color: var(--text-primary);
}

.notification-bell svg {
    width: 20px;
    height: 20px;
}

.notification-count-badge {
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: var(--error-color);
    color: white;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    min-width: 16px;
    height: 16px;
    padding: 2px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bg-alt);
}

.notifications-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background-color: var(--bg-alt);
    border: 1px solid var(--border-light);
    border-radius: var(--card-border-radius);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    width: 320px;
    z-index: 1010;
}

.notifications-dropdown.open {
    display: block;
}

.notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-light);
}

.notifications-header h4 {
    font-size: 0.95rem;
    margin-bottom: 0;
    font-weight: 600;
}

.mark-all-read-link {
    font-size: 0.75rem;
    color: var(--accent-primary);
    text-decoration: none;
}

.mark-all-read-link:hover {
    text-decoration: underline;
}

.notifications-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}

.notifications-list li {
    margin-bottom: 0;
    border-bottom: 1px solid var(--border-light);
}

.notifications-list li:last-child {
    border-bottom: none;
}

.notifications-list li.read .notification-message {
    opacity: 0.7;
}

.notifications-list li.unread .notification-message {
    font-weight: 500;
}

/* Make unread bold */
.notification-link {
    display: block;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--text-primary);
}

.notification-link:hover {
    background-color: var(--bg-main);
}

.notification-message {
    font-size: 0.85rem;
    margin-bottom: 0.2rem;
    line-height: 1.4;
    color: var(--text-primary);
}

.notification-timestamp {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.no-notifications, .loading-notifications {
    padding: 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.notifications-footer {
    padding: 0.5rem 1rem;
    text-align: center;
    border-top: 1px solid var(--border-light);
}

.notifications-footer a {
    font-size: 0.8rem;
    font-weight: 500;
}

/* Breadcrumbs */
.portal-breadcrumbs {
    margin-bottom: 1.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-light);
}

.portal-breadcrumbs ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.portal-breadcrumbs li.breadcrumb-item {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0;
}

.portal-breadcrumbs li.breadcrumb-item a {
    color: var(--accent-primary);
    text-decoration: none;
}

.portal-breadcrumbs li.breadcrumb-item a:hover {
    text-decoration: underline;
}

.portal-breadcrumbs li.breadcrumb-item + li.breadcrumb-item::before {
    content: '/';
    margin: 0 0.6rem;
    color: var(--border-dark);
}

.portal-breadcrumbs li.breadcrumb-item.active {
    color: var(--text-primary);
    font-weight: 500;
}


/* --- Buttons (Portal) --- */
.button {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    border-radius: var(--button-border-radius);
    font-weight: 500;
    font-size: 0.9rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
    line-height: 1.5;
    text-decoration: none;
}

.button:hover {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
}

.button.button-small {
    padding: 0.35rem 0.9rem;
    font-size: 0.8rem;
}

.button-primary {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-dark-bg);
}

.button-primary:hover {
    background-color: var(--accent-primary-darker);
    border-color: var(--accent-primary-darker);
    color: var(--text-on-dark-bg);
}

.button-secondary {
    background-color: var(--text-secondary);
    border-color: var(--text-secondary);
    color: var(--text-on-dark-bg);
}

.button-secondary:hover {
    background-color: var(--text-secondary-darker);
    border-color: var(--text-secondary-darker);
    color: var(--text-on-dark-bg);
}

.button-outline-secondary {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
    background-color: transparent;
}

.button-outline-secondary:hover {
    background-color: var(--text-secondary);
    color: var(--text-on-dark-bg);
}

.button-danger {
    background-color: var(--error-color);
    border-color: var(--error-color);
    color: white;
}

.button-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
    color: white;
}

.button-link, .quick-action-link {
    background: none;
    border: none;
    color: var(--accent-primary);
    padding: 0;
    font-weight: 500;
}

.button-link:hover, .quick-action-link:hover {
    text-decoration: underline;
    color: var(--accent-primary-darker);
    box-shadow: none;
    transform: none;
}

/* --- Forms (Portal) --- */
.form-card-container {
    max-width: 750px;
    margin: 1rem auto;
    padding: 2rem;
    background-color: var(--bg-alt);
    border: 1px solid var(--border-light);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-box-shadow);
}

.portal-form fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.form-legend {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
}

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

.form-label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-input, .form-textarea, .form-select, .form-control-file {
    width: 100%;
    border: 1px solid var(--border-dark);
    border-radius: var(--button-border-radius);
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    font-family: var(--font-body);
    color: var(--text-primary);
    background: var(--bg-alt);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus, .form-textarea:focus, .form-select:focus, .form-control-file:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px rgba(13, 44, 79, 0.1);
}

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

.form-input::placeholder, .form-textarea::placeholder {
    color: var(--placeholder-color);
    font-style: normal;
    font-size: 0.9rem;
    opacity: 0.8;
}

.form-error, .errorlist li {
    color: var(--error-color);
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: block;
}

.errorlist {
    list-style: none;
    padding: 0;
    margin-top: 0.25rem;
}

.form-input.input-error, .form-textarea.input-error, .form-select.input-error {
    border-color: var(--error-color) !important;
}

.form-input.input-error:focus, .form-textarea.input-error:focus, .form-select.input-error:focus {
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15) !important;
}

.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235C6F80' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 14px 10px;
    padding-right: 2.2rem;
}

.form-actions {
    margin-top: 2rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.form-actions.justify-center {
    justify-content: center;
}

.form-intro {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.form-text.text-muted {
    font-size: 0.8rem;
}

.checkbox-multiple-container {
    background-color: var(--bg-alt);
    border: 1px solid var(--border-dark);
    border-radius: var(--button-border-radius);
    padding: 1rem;
}

.checkbox-multiple-container label, .form-check-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: normal;
    font-size: 0.9rem;
}

.checkbox-multiple-container input[type="checkbox"], .form-check-input {
    margin-right: 0.5rem;
    vertical-align: middle;
}

.scrollable-checkbox-list {
    max-height: 200px;
    overflow-y: auto;
}

.form-check {
    margin-bottom: 0.5rem;
}

.form-check-input-wrapper {
    display: inline-block; /* For checkbox alignment */
}

.form-section {
    margin-bottom: 2.5rem;
}

.form-section-heading {
    font-size: 1.3rem;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--text-primary);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-light);
}

.form-section-heading-alt {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-top: 1rem;
    color: var(--text-secondary-darker);
}

.form-divider {
    border: 0;
    border-top: 1px solid var(--border-dark);
    margin: 2.5rem 0;
}

.form-control-static {
    padding-top: calc(0.6rem - 1px);
    padding-bottom: calc(0.6rem - 1px);
    line-height: var(--line-height-base);
    font-size: 0.9rem;
}


/* Filter Forms */
.filter-form {
    background-color: var(--bg-alt);
    padding: 1rem 1.5rem;
    border-radius: var(--card-border-radius);
    border: 1px solid var(--border-light);
    margin-bottom: 2rem;
    box-shadow: var(--card-box-shadow-sm);
}

.filter-form .form-label {
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-form .form-select {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    height: auto;
}

.filter-form-enhanced {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 180px;
}

.filter-group label {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.filter-actions {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.filter-actions.align-self-end {
    align-self: flex-end;
}

/* For filter row */
.clear-filters-link {
    font-size: 0.85rem;
    color: var(--accent-primary);
    text-decoration: underline;
}


/* --- Alerts / Messages (Portal) --- */
.messages-container {
    margin-bottom: 1.5rem;
}

/* Wrapper for messages from include */
.alert-message {
    padding: 0.8rem 1.2rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--button-border-radius);
    font-size: 0.9rem;
}

.alert-success {
    color: var(--success-color);
    background-color: var(--success-bg);
    border-color: var(--success-border);
}

.alert-danger, .non-field-errors {
    color: var(--error-color);
    background-color: var(--error-bg);
    border-color: var(--error-border);
}

.alert-warning {
    color: var(--warning-text-color);
    background-color: var(--warning-bg);
    border-color: var(--warning-border);
}

.alert-info {
    color: var(--info-text-color);
    background-color: var(--info-bg);
    border-color: var(--info-border);
}

/* --- Footer (Portal) --- */
.main-footer {
    background: var(--bg-main);
    padding: 2rem 0;
    text-align: center;
    border-top: 1px solid var(--border-light);
    margin-top: auto;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.main-footer p {
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
}

/* --- Page Header (Portal) --- */
.page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-dark);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    gap: 1rem;
}

.page-header h1 {
    margin-bottom: 0;
    font-size: 2rem;
}

.page-header .button, .page-header .header-actions-cluster {
    margin-left: auto;
}

/* Push actions to right */
.header-actions-cluster {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* --- Detail Sections & Cards (Portal) --- */
.detail-section {
    background-color: var(--bg-alt);
    padding: 1.5rem 2rem;
    border: 1px solid var(--border-light);
    border-radius: var(--card-border-radius);
    margin-bottom: 2rem;
    box-shadow: var(--card-box-shadow);
}

.detail-section h3 {
    font-size: 1.15rem;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-light);
}

.detail-section p {
    font-size: 0.9rem;
    color: var(--text-secondary-darker);
    margin-bottom: 0.7rem;
}

.detail-section p strong {
    color: var(--text-primary);
    font-weight: 500;
    min-width: 150px;
    display: inline-block;
    margin-right: 0.3rem;
}

/* Adjusted min-width */
.detail-section ul.compact-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0.5rem;
}

.detail-section ul.compact-list li {
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    line-height: 1.4;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.detail-section.main-details, .detail-section.related-items {
    margin-bottom: 0;
}

/* Used in client_detail */
.tab-actions-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 1rem;
    gap: 1rem;
}

.section-title-alt {
    font-size: 1.6rem;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0;
}

.content-block {
    margin-top: 2rem;
}

.content-block:first-of-type {
    margin-top: 0.5rem;
}

.content-block h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-light);
}


/* --- Data Tables (Portal) --- */
.data-table-container {
    overflow-x: auto;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-light);
    border-radius: var(--card-border-radius);
    background-color: var(--bg-alt);
    box-shadow: var(--card-box-shadow-sm);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.data-table thead {
    background-color: var(--bg-darker-section); /* Changed from bg-main */
    border-bottom: 2px solid var(--border-dark);
}

.data-table th, .data-table td {
    border: none;
    border-bottom: 1px solid var(--border-light);
    padding: 0.65rem 0.9rem;
    text-align: left;
    vertical-align: middle;
}

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

.data-table th {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.data-table tbody tr:nth-child(even) {
    background-color: rgba(245, 241, 232, 0.3);
}

/* Very subtle zebra */
.data-table tbody tr:hover {
    background-color: var(--bg-hover-light);
}

.data-table td a {
    font-weight: 500;
}

.data-table td.number, .data-table th.number {
    text-align: right;
}

.data-table td.apn {
    font-family: monospace, var(--font-body);
}

.data-table-condensed th, .data-table-condensed td {
    font-size: 0.8rem;
    padding: 0.5rem 0.7rem;
}

.data-table .actions-cell {
    text-align: right;
    white-space: nowrap;
}

.data-table .actions-cell .button, .data-table .actions-cell .delete-form {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}

.data-table .filename-cell {
    max-width: 250px;
}

/* Max width for filename cell */
.data-table .filename-cell span {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.delete-form {
    display: inline-block;
    margin: 0;
    padding: 0;
}

/* For delete buttons in tables/actions */
.delete-form.mt-1 {
    margin-top: 0.25rem !important;
}

.delete-form.mt-3 {
    margin-top: 1.5rem !important;
}

/* Pagination (Portal) */
.pagination-container {
    margin: 2rem 0 0.5rem 0;
    text-align: center;
}

.pagination {
    display: flex;
    justify-content: center;
    list-style: none;
    padding-left: 0;
}

.pagination .page-item {
    margin: 0 0.2rem;
}

.pagination .page-link, .pagination .current-page {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--border-dark);
    border-radius: var(--button-border-radius);
    font-size: 0.85rem;
    color: var(--accent-primary);
    text-decoration: none;
}

.pagination .page-item.active .page-link, .pagination .current-page {
    background-color: var(--accent-primary);
    color: var(--text-on-dark-bg);
    border-color: var(--accent-primary);
    font-weight: 600;
    z-index: 1;
}

.pagination .page-item.disabled .page-link {
    color: var(--text-secondary);
    pointer-events: none;
    background-color: var(--bg-main);
    border-color: var(--border-light);
}

.pagination .page-link:hover {
    background-color: var(--bg-darker-section);
    border-color: var(--border-dark);
}

.pagination .page-item.active .page-link:hover {
    background-color: var(--accent-primary-darker);
}


/* --- Login & Activation Pages --- */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 120px);
    padding: 2rem 1rem;
}

/* Adjusted min-height */
.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-alt);
    padding: 2.5rem;
    border: 1px solid var(--border-light);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-box-shadow);
}

.login-header { /* For login/activation header */
}

h1.login-heading {
    text-align: center;
    margin-bottom: 1.8rem;
    font-size: 1.8rem;
    font-weight: 600;
}

/* Adjusted from H2 */
.login-card .form-input.login-input {
    padding: 0.8rem 1rem;
}

/* Already covered by .form-input */
.login-card .button.button-login {
    width: 100%;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    margin-top: 1rem;
}

.login-footer-links {
    text-align: center;
    margin-top: 1.2rem;
    font-size: 0.85rem;
}

.login-footer-links a {
    color: var(--text-secondary);
}


/* --- Dashboards (General, KPI, Cards) --- */
.dashboard-section {
    margin-bottom: 2.5rem;
}

.kpi-section { /* For KPI row */
}

.main-content-grid { /* For main two-column layout often */
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.kpi-card {
    background-color: var(--bg-alt);
    padding: 1.25rem;
    border: 1px solid var(--border-light);
    border-radius: var(--card-border-radius);
    text-align: center;
    box-shadow: var(--card-box-shadow-sm);
}

.kpi-card h4 {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-value {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
    line-height: 1.1;
}

.kpi-link {
    font-size: 0.8rem;
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
}

.kpi-link:hover {
    text-decoration: underline;
    color: var(--accent-primary-darker);
}

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

/* Responsive */
.dashboard-card {
    background-color: var(--bg-alt);
    padding: 1.5rem;
    border: 1px solid var(--border-light);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-box-shadow);
    display: flex;
    flex-direction: column;
}

.dashboard-card.full-width {
    grid-column: 1 / -1;
}

.dashboard-card h3 {
    font-size: 1.2rem;
    font-family: var(--font-body);
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-light);
}

.dashboard-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1rem;
    flex-grow: 1;
}

.dashboard-list li {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

.dashboard-list li a {
    font-weight: 500;
}

.dashboard-list.dense-list li {
    margin-bottom: 0.6rem;
}

.card-link {
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-block;
    margin-top: auto;
    padding-top: 0.5rem;
}

.highlight-info {
    font-size: 0.8rem;
    display: block;
    margin-top: 0.1rem;
}

.highlight-info .status-rejected {
    color: var(--error-color);
    font-weight: 500;
}

.highlight-info .status-uploaded {
    color: var(--success-color);
    font-weight: 500;
}

.quick-actions-list li {
    margin-bottom: 0.8rem;
}

.quick-actions-list .quick-action-link {
    display: block;
    text-align: left;
    padding: 0.5rem 0;
    font-weight: 500;
    color: var(--accent-primary);
    text-decoration: none;
    font-size: 0.95rem;
}

/* --- Status Badges (General) --- */
.status-badge {
    padding: 0.25em 0.65em;
    border-radius: var(--button-border-radius);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    line-height: 1.2;
    border: 1px solid transparent;
    white-space: nowrap;
}

.status-planning, .status-pending-activation, .status-invited, .status-pending-upload {
    background-color: var(--warning-bg);
    color: var(--warning-text-color);
    border-color: var(--warning-border);
}

.status-active, .status-submitted, .status-agency-review, .status-info-requested, .status-uploaded, .status-under-review, .status-ready {
    background-color: var(--info-bg);
    color: var(--info-text-color);
    border-color: var(--info-border);
}

/* .status-under-review { background-color: var(--info-bg-light); color: var(--info-color-darker); border-color: var(--info-border-light); } */ /* Can differentiate if needed */
.status-approved, .status-complete-won, .status-refund-approved {
    background-color: var(--success-bg);
    color: var(--success-color);
    border-color: var(--success-border);
}

.status-rejected, .status-complete-lost {
    background-color: var(--error-bg);
    color: var(--error-color);
    border-color: var(--error-border);
}

.status-on-hold, .status-superseded, .status-not-applicable, .status-deactivated, .status-archived {
    background-color: var(--text-secondary-status-bg);
    color: var(--text-secondary-status-color);
    border-color: var(--text-secondary-status-border);
}

/* Role Badge (for user lists) */
.role-badge {
    background-color: var(--bg-darker-section);
    color: var(--text-secondary-darker);
    padding: 0.2em 0.6em;
    border-radius: var(--button-border-radius);
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--border-dark);
    display: inline-block;
    margin-right: 0.3rem;
}

/* Checklist Specific Table Styles */
.checklist-table .reviewed-by-info {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

.review-comments-row td {
    padding-top: 0.3rem !important;
    padding-bottom: 0.8rem !important;
    border-bottom: 1px solid var(--border-light) !important;
    background-color: var(--bg-alt) !important;
}

/* Ensure no zebra stripe */
.review-comments {
    background-color: var(--error-bg-light);
    border-left: 3px solid var(--error-color);
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.review-comments strong {
    color: var(--error-color);
    font-weight: 600;
}

.checklist-group h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-primary-darker);
}

/* For Package-level, Site-level headers in checklist */
.site-checklist-container {
    margin-top: 1.5rem;
    padding: 1rem 1.5rem;
    border: 1px solid var(--border-dark);
    border-radius: var(--card-border-radius);
    background-color: var(--bg-main);
}

.site-checklist-container > h4 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary-darker);
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--border-dark);
}

.property-checklist-block {
    margin-left: 1rem;
    margin-bottom: 1.5rem;
    padding-top: 0.5rem;
}

.property-checklist-block > h5 {
    font-size: 1.05rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.fy-checklist-block {
    margin-left: 1rem;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--border-light);
}

.fy-checklist-block > h6 {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-secondary-darker);
}

.water-account-checklist-block {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.wa-header {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
    color: var(--text-primary-darker);
}


/* --- Context Info Box (Upload Form) --- */
.context-info-box {
    background-color: var(--bg-darker-section);
    border: 1px solid var(--border-light);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    border-radius: var(--card-border-radius);
}

.context-info-title {
    font-size: 1.1rem;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.context-info-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.context-info-list li {
    font-size: 0.9rem;
    color: var(--text-secondary-darker);
    margin-bottom: 0.4rem;
}

.context-info-list li strong {
    color: var(--text-primary);
    font-weight: 500;
    min-width: 140px;
    display: inline-block;
}


/* --- User Summary (Manage User Forms) --- */
.user-summary {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.user-summary h3 {
    margin-bottom: 0.5rem;
}

.user-summary p {
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
}


/* Mobile Nav Specifics */
@media (max-width: 991px) {
    .main-header {
        padding: 0.75rem 0;
    }

    .header-inner {
        position: relative;
    }

    .logo-area .company-name {
        font-size: 1.25rem;
    }

    .main-nav {
        margin-right: 0;
    }

    .main-nav ul {
        display: none;
        position: absolute;
        top: calc(100% + 1px);
        right: 0;
        background: var(--bg-alt);
        border: 1px solid var(--border-light);
        flex-direction: column;
        gap: 0;
        padding: 0.5rem 0;
        z-index: 1000;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        border-radius: 0 0 var(--card-border-radius) var(--card-border-radius);
        min-width: 240px;
    }

    .main-nav.open ul {
        display: block !important;
    }

    /* JS toggles .open */
    .main-nav ul li {
        width: 100%;
        border-bottom: 1px solid var(--border-light);
    }

    .main-nav ul li:last-child {
        border-bottom: none;
    }

    .main-nav .nav-link {
        display: block;
        padding: 0.75rem 1.25rem;
        width: 100%;
        border-bottom: none !important;
        color: var(--text-primary);
        font-size: 0.95rem;
    }

    .main-nav .nav-link:hover {
        background-color: var(--bg-main);
        color: var(--accent-primary);
    }

    .main-nav .nav-link.active {
        background-color: var(--bg-darker-section);
        font-weight: 600;
    }

    .nav-toggle {
        display: block;
        order: 3;
    }

    .header-actions {
        order: 2;
        margin-left: auto;
        margin-right: 0.5rem;
    }

    .notification-area {
        margin-right: 0.2rem;
    }

    .header-user-info {
        display: none;
    }

    .logo-area {
        order: 1;
        margin-right: 0;
    }

    .content-wrapper {
        width: 95%;
    }

    .page-header h1 {
        font-size: 1.6rem;
    }

    .page-header .button, .page-header .header-actions-cluster .button {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }

    .form-card-container {
        padding: 1.5rem;
    }

    .login-card {
        padding: 2rem 1.5rem;
    }

    .kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }

    /* Smaller KPIs */
    .kpi-value {
        font-size: 1.8rem;
    }

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

    /* Stack cards on mobile */
}

/* Print Styles */
@media print {
    html {
        font-size: 9pt;
    }

    body {
        padding: 0;
        background: #fff !important;
        color: #000 !important;
    }

    .content-wrapper, .main-content-area {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 0.25in;
    }

    .main-header, .main-footer, .nav-toggle, .button, .page-header a:not([href^="#"]), .detail-section a.button, .filter-form, .pagination, .header-actions .notification-area, .delete-form button, .actions-cell .button, .login-footer-links, .header-actions-cluster {
        display: none !important;
    }

    main {
        padding: 0;
    }

    .page-header {
        border: none;
        padding: 0;
        margin-bottom: 0.5rem;
        justify-content: flex-start;
    }

    /* Align left */
    .page-header h1 {
        font-size: 1.5rem;
    }

    section, .detail-section, .form-card-container {
        page-break-inside: avoid;
        padding: 0.5rem 0;
        background-color: #fff !important;
        border: none !important;
        box-shadow: none !important;
        margin-bottom: 0.5rem;
    }

    a {
        color: #000 !important;
        text-decoration: none !important;
    }

    a[href^="http"]::after, a[href^="/portal/"]::after {
        content: ""; /* No URL print for portal links */
    }

    .data-table, .data-table th, .data-table td, .kpi-card {
        border-color: #bbb !important;
        font-size: 0.75rem;
        padding: 0.25rem 0.4rem;
        box-shadow: none !important;
    }

    .data-table thead {
        background-color: #f0f0f0 !important;
        display: table-header-group !important;
    }

    .data-table tbody tr:nth-child(even) {
        background-color: transparent !important;
    }

    h1, h2, h3, h4 {
        page-break-after: avoid;
        font-size: inherit !important;
    }

    h1 {
        font-size: 16pt !important;
    }

    h2 {
        font-size: 13pt !important;
    }

    h3 {
        font-size: 11pt !important;
    }

    table, figure {
        page-break-inside: avoid;
    }

    tr {
        page-break-inside: avoid !important;
    }

    .kpi-grid, .dashboard-grid {
        grid-template-columns: 1fr !important;
    }

    .kpi-card {
        text-align: left;
        padding: 0.5rem;
        border: 1px solid #ccc !important;
    }

    .kpi-value {
        font-size: 1.5rem;
    }

    .status-badge {
        border: 1px solid #777 !important;
        background-color: transparent !important;
        color: #000 !important;
        padding: 0.1em 0.3em;
    }

    .form-input, .form-textarea, .form-select {
        border: 1px solid #ccc !important;
        background: #fff !important;
        padding: 0.2rem 0.4rem;
    }

    .checkbox-multiple-container {
        border: 1px solid #ccc !important;
        padding: 0.5rem;
    }
}