/* Client Management page styles - moved from inline styles and <style> block */
/* Gaps and padding reduced to half for tighter grid and containers (not zero). */

/* Content wrapper: minimal top padding so "Clients" heading is visible below fixed header.
   Width 100% so content uses full viewport up to --content-max-width. */
.client-management-content {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--spacing-sm);
    padding-top: var(--spacing-md);
    box-sizing: border-box;
}

/* Register Client page: allow main to grow with content so body scroll works. */
body.page-register-client .app-main-wrap > main {
    flex: 0 0 auto;
    min-height: auto;
}

/* Analysis (client list) page: use full width. */
body.layout-app.page-client-analysis-list .app-main-wrap.container,
body.page-client-analysis-list .app-main-wrap.container {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}
body.layout-app.page-client-analysis-list .client-management-content,
body.page-client-analysis-list .client-management-content {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}

.client-page-title {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    text-align: left;
}

/* H1 in action bar (e.g. client-analysis-list: "Clients" + search) */
.actions-bar .client-page-title {
    margin: 0 var(--spacing-sm) 0 0;
    flex-shrink: 0;
}

/* Edit form section: visibility via .hidden class; spacing from tokens */
#edit-form-section {
    margin-bottom: var(--spacing-lg);
}

/* Client list row and link - no inline styles */
.client-row {
    cursor: pointer;
}

.client-name-link {
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.client-name-link:hover {
    color: var(--color-text-primary);
    text-decoration: underline;
}

/* Tooltip for icon buttons (replaces inline tooltip styles) */
.tooltip-text {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-text-primary);
    color: var(--color-text-inverse);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    margin-bottom: var(--spacing-xs);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
    z-index: var(--z-tooltip);
}

.icon-btn:hover .tooltip-text,
.icon-btn:focus-within .tooltip-text {
    opacity: 1;
}

/* Error state (replaces inline error div in edit form / list) */
.error-state-box {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--color-error-text);
}

.error-state-box h3 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-lg);
}

.error-state-box p {
    margin: 0 0 var(--spacing-md) 0;
}

.error-state-button {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
}

.error-state-button:hover {
    background: var(--color-primary-hover);
}

.api-error {
    color: var(--color-error-text);
}

/* Transfer clients page */
.transfer-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.transfer-select {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    min-width: 180px;
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

/* Transfer Client modal (Analysis page, admin only) */
.transfer-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 1000);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

.transfer-modal.hidden {
    display: none;
}

.transfer-modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--color-overlay-bg, rgba(0, 0, 0, 0.5));
    cursor: pointer;
}

.transfer-modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-lg);
    min-width: 320px;
    max-width: 100%;
}
@media (max-width: var(--bp-tablet)) {
    .transfer-modal-content {
        min-width: 0;
        width: calc(100vw - var(--spacing-xl));
        max-width: 400px;
    }
}

.transfer-modal-title {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.transfer-modal-client-name {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.transfer-modal-form label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.transfer-modal-form .transfer-select {
    width: 100%;
    margin-bottom: var(--spacing-md);
}

.transfer-modal-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
}

.icon-btn-transfer {
    background: var(--color-info-bg);
    color: var(--color-primary);
}

.client-management-content .management-container {
    max-width: 100%;
    margin: var(--spacing-xs) 0 0 0;
    padding: 0;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.management-container {
    max-width: 1000px;
    margin: var(--spacing-md) auto 0;
    padding: 0;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.actions-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/* Mobile: stack actions bar elements */
@media (max-width: var(--bp-tablet)) {
    .client-management-content {
        padding: var(--spacing-xs);
        padding-top: var(--spacing-lg);
    }

    .actions-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .actions-bar > * {
        width: 100%;
    }
}

.search-label {
    display: inline-block;
    margin-right: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.search-box {
    padding: var(--spacing-sm) var(--spacing-md);
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    width: 280px;
    max-width: 100%;
    box-sizing: border-box;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    background: var(--color-surface);
}

/* Mobile: make search box responsive */
@media (max-width: var(--bp-tablet)) {
    .search-box {
        width: 100%;
        font-size: 16px; /* Prevent iOS zoom */
    }
}

.filters {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.action-buttons {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* Mobile: stack filters and action buttons */
@media (max-width: var(--bp-tablet)) {
    .filters {
        width: 100%;
        justify-content: flex-start;
    }

    .action-buttons {
        width: 100%;
        justify-content: flex-start;
    }

    .action-buttons button,
    .action-buttons a {
        min-height: 44px; /* Touch target size */
        flex: 1 1 auto;
    }
}

.client-db-file-input {
    display: none;
}

.filter-select {
    padding: var(--spacing-sm) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.client-list {
    margin-top: 0;
}

/* -------------------------------------------------------------------------
   Fill-viewport layout: no extra space below table; page fits any screen size.
   Content area and table container use flex so table scrolls inside viewport.
   Applies to client list, transfer clients, error logs, activity (table/list pages).
   ------------------------------------------------------------------------- */
.layout-app .app-main-wrap {
    display: flex;
    flex-direction: column;
}
.layout-app .app-main-wrap > main,
.layout-app .app-main-wrap > .container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* Client list, User Activity, Error Logs, Activity: content and table area fill remaining space */
body.page-client-analysis-list .client-management-content,
body.page-transfer-clients .client-management-content,
body.page-error-logs .error-logs-container,
body.page-activity .client-management-content,
body.page-user-activity .user-activity-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
body.page-client-analysis-list .management-container,
body.page-transfer-clients .management-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
body.page-client-analysis-list #client-list-section,
body.page-transfer-clients #client-list-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
body.page-client-analysis-list .client-list,
body.page-transfer-clients .client-list {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
body.page-client-analysis-list #client-list-table,
body.page-transfer-clients #transfer-clients-table {
    flex: 1;
    min-height: 200px;
}
/* Error logs: table container fills space */
body.page-error-logs .error-logs-table-container {
    flex: 1;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}
body.page-error-logs .error-logs-container {
    padding-bottom: var(--spacing-md);
}
body.page-error-logs #error-logs-tabulator {
    flex: 1;
    min-height: 200px;
}

/* Activity page: table sizes to content only and fills available width */
body.page-activity .activity-section:not([hidden]) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    min-width: 0;
}
body.page-activity .activity-table-wrap {
    min-height: 120px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
    flex: 1;
}
body.page-activity .activity-table-wrap .tabulator {
    width: 100% !important;
    min-width: 100%;
}

/* User Activity page: content grid (table) fills and scrolls properly */
body.page-user-activity .user-activity-view.is-active {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
body.page-user-activity .user-activity-table-wrap {
    flex: 1;
    min-height: 200px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
}

.table-container {
    max-height: 900px;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    width: 100%;
    max-width: 100%;
}

/* Mobile: enhance table container for better scrolling */
@media (max-width: var(--bp-tablet)) {
    .table-container {
        max-height: 70vh;
        scrollbar-width: thin;
        scrollbar-color: var(--color-primary) transparent;
    }

    .table-container::-webkit-scrollbar {
        height: var(--spacing-sm);
        width: var(--spacing-sm);
    }

    .table-container::-webkit-scrollbar-track {
        background: transparent;
    }

    .table-container::-webkit-scrollbar-thumb {
        background: var(--color-primary);
        border-radius: var(--radius-sm);
    }

    .table-container::-webkit-scrollbar-thumb:hover {
        background: var(--color-primary);
        opacity: 0.9;
    }
}

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

/* Mobile: reduce table min-width only; all columns visible on all viewports */
@media (max-width: var(--bp-tablet)) {
    table {
        min-width: var(--bp-smm);
    }
}

@media (max-width: var(--bp-mobile)) {
    table {
        min-width: 500px;
    }
}

thead {
    background: var(--gradient-primary);
    color: var(--color-text-inverse);
    position: sticky;
    top: 0;
    z-index: 1;
}

thead th {
    padding: var(--spacing-sm) var(--spacing-sm);
    text-align: left;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}

thead th.sortable {
    cursor: pointer;
    position: relative;
    padding-right: 24px;
}

thead th.sortable:hover {
    background: var(--color-surface-hover);
}

thead th.sortable::after {
    content: ' ↕';
    position: absolute;
    right: var(--spacing-sm);
    opacity: 0.5;
    font-size: var(--font-size-xs);
}

thead th.sortable.sort-asc::after {
    content: ' ↑';
    opacity: 1;
}

thead th.sortable.sort-desc::after {
    content: ' ↓';
    opacity: 1;
}

tbody tr {
    height: 36px;
}

tbody td {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    background: var(--color-surface);
}

tbody tr:nth-child(even) td {
    background: var(--color-surface-hover);
}

tbody tr:hover td {
    background: var(--color-surface-hover);
}

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

.table-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: nowrap;
    flex-shrink: 0;
    align-items: center;
}

.btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    text-decoration: none;
    display: inline-block;
}

.btn-sm {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

/* Register Client button on Analysis page: full button appearance (no link underline) */
/* Transfer button: same style as Register Client for UI consistency */
.actions-bar a.btn-primary,
a.register-client-cta.btn-primary,
.actions-bar button.btn-primary.register-client-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.actions-bar a.btn-primary:hover,
a.register-client-cta.btn-primary:hover,
.actions-bar button.btn-primary.register-client-cta:hover {
    background: var(--color-primary-dark, var(--color-primary));
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    color: var(--color-text-inverse);
    text-decoration: none;
}
.actions-bar a.btn-primary:focus-visible,
a.register-client-cta.btn-primary:focus-visible,
.actions-bar button.btn-primary.register-client-cta:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.btn-secondary {
    background: var(--color-text-secondary);
    color: var(--color-text-inverse);
}

.btn-danger {
    background: var(--color-error);
    color: var(--color-text-inverse);
}

.icon-btn {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border: none;
    background: var(--color-info-bg);
    color: var(--color-primary);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    cursor: pointer;
}

.icon-btn .icon {
    display: block;
    line-height: 1;
}

.icon-btn svg {
    width: 1.125rem;
    height: 1.125rem;
    display: block;
}

.icon-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* View / Edit / Delete action icons: same as before – view blue, edit neutral, delete red */
.icon-btn-view {
    background: var(--color-info-bg);
    color: var(--color-primary);
}

.icon-btn-add {
    background: var(--color-info-bg);
    color: var(--color-primary);
}

.icon-btn-edit {
    background: var(--color-info-bg);
    color: var(--color-text-secondary);
}

.icon-btn-report {
    background: var(--color-info-bg);
    color: var(--color-primary);
}

.icon-btn-pdf {
    background: var(--color-info-bg);
    color: var(--color-primary);
}

.icon-btn-delete {
    background: var(--color-error-bg);
    color: var(--color-error);
}

.icon-btn-utility {
    background: var(--color-surface-hover);
    color: var(--color-text-secondary);
}

.icon-btn-utility:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.icon-btn[title]:hover::before {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + var(--spacing-sm));
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    box-shadow: var(--shadow-md);
    font-weight: 500;
    border: 1px solid var(--color-border);
}

.icon-btn[title]:hover::after {
    content: '';
    position: absolute;
    bottom: calc(100% + var(--spacing-xs));
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--color-surface);
    z-index: 1001;
    pointer-events: none;
}

.table-actions .icon-btn {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    font-size: var(--font-size-base);
}

.table-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-sm);
    min-height: 1em;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.clients-table-empty-cell {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--color-text-tertiary);
}

.client-list-error {
    color: var(--color-error);
}

/* Connection error state (replaces inline styles) */
.client-list-connection-error {
    padding: var(--spacing-2xl);
    text-align: center;
}

.client-list-connection-error-title {
    color: var(--color-error-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-sm);
}

.client-list-connection-error-message {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.client-list-connection-error-hint {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-md);
}

.client-list-connection-error-retry {
    margin-top: var(--spacing-md);
}

/* Tags column header (width controlled in CSS, not inline) */
.tags-header {
    width: 150px;
}

/* Tag badges in client list (replaces inline styles in advanced script) */
.tag-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    margin-right: var(--spacing-xs);
}

.tag-badge-empty {
    color: var(--color-text-tertiary);
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-overlay);
    z-index: 1000;
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--color-surface);
    padding: var(--spacing-xl);
    border-radius: var(--radius-md);
    max-width: var(--bp-mobile);
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}

.form-group input,
.form-group select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

/* Header styles - moved from inline styles (exclude fixed app header) */
header:not(.app-header) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    gap: var(--spacing-md);
}

.back-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-left: 0;
}

.back-link-icon {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-info-bg);
    color: var(--color-primary);
    font-size: var(--font-size-lg);
}

.header-title {
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    text-align: center;
    flex: 1;
    font-weight: var(--font-weight-semibold);
}

.header-spacer {
    width: 84px;
}

/* Actions bar - moved from inline styles */
.actions-bar-flex {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.action-buttons {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.icon-btn-back {
    background: var(--color-info-bg);
    color: var(--color-primary);
    text-decoration: none;
}

.icon-btn-back:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.icon-btn-back svg {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}

.icon-btn-add-custom {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
}

/* Modal styles - moved from inline styles */
.modal-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-lg);
}

/* Form help text - moved from inline styles */
.form-help-text {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
}

/* Required field indicator */
.required-indicator {
    color: var(--color-error);
}

/* Modal form spacing */
.modal-form-spacer {
    height: var(--spacing-md);
}

.modal-form-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.btn-flex {
    flex: 1;
}

/* Table column widths - see docs/field-width-reference.md */
.bulk-select-header {
    width: 40px;
}

.table-index-column {
    width: 2%;
    max-width: 3ch;
}

.table-actions-column {
    width: 260px;
}

/* Client list (8 columns): fixed-length columns ≤ heading; design as whole (%). */
#clients-table.clients-table {
    table-layout: fixed;
}
#clients-table.clients-table th.col-code,
#clients-table.clients-table td.col-code { width: 10%; white-space: nowrap; }
#clients-table.clients-table th.col-created,
#clients-table.clients-table td.col-created { width: 8%; }
#clients-table.clients-table th.col-name,
#clients-table.clients-table td.col-name { width: 18%; }
#clients-table.clients-table th.col-client-of,
#clients-table.clients-table td.col-client-of { width: 12%; min-width: 6rem; }
#clients-table.clients-table th.col-dob,
#clients-table.clients-table td.col-dob { width: 10%; white-space: nowrap; }
#clients-table.clients-table th.col-mobile,
#clients-table.clients-table td.col-mobile { width: 10%; white-space: nowrap; }
#clients-table.clients-table th.col-gender,
#clients-table.clients-table td.col-gender { width: 7%; white-space: nowrap; }
#clients-table.clients-table th.col-actions,
#clients-table.clients-table td.col-actions { width: 25%; white-space: nowrap; }
/* Select column (transfer-clients and similar): narrow, ≤ heading */
#clients-table.clients-table th.col-select,
#clients-table.clients-table td.col-select { width: 5%; max-width: 3rem; }

/* Client list wrapper: horizontal and vertical scroll; ~15 visible rows then scroll */
#client-list {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    /* ~15 rows at ~44px per row */
    max-height: 660px;
}

#clients-table.clients-table th,
#clients-table.clients-table td {
    white-space: nowrap;
}
@media (min-width: calc(var(--bp-tablet) + 1px)) {
    #clients-table.clients-table {
        min-width: var(--bp-smm);
    }
}

/* Footer (exclude fixed app footer) */
footer:not(.app-footer) {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xl);
    border-top: 1px solid var(--color-border);
}

/* Birth place map - moved from inline styles */
#birth-place-map {
    display: none;
    height: 400px;
    margin-top: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

#birth-place-map.active {
    display: block;
}

/* Hidden form group - moved from inline styles */
.form-group-hidden {
    display: none;
}

/* Resume parse status - moved from inline styles */
#resume-parse-status {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

/* Life goals container - moved from inline styles */
#client-life-goals-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

/* Life goals loading text - moved from inline styles */
#client-life-goals-container .loading-text {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}