/**
 * Employees page — Notion / Notebook / To-Do visual language
 * Loaded after inline employees styles; uses elevated specificity.
 */

main.employees-main {
    background: #fafafa !important;
    min-height: 100vh;
    min-width: 0;
}

.employee-page-container {
    --en-ink: #2c2c2b;
    --en-muted: #6b6964;
    --en-faint: #9b9893;
    --en-border: #ececec;
    --en-border-strong: #e4e2df;
    --en-surface: #ffffff;
    --en-subtle: #fafafa;
    --en-radius: 12px;
    --en-radius-sm: 8px;
    --en-accent: #0073ea;
    color: var(--en-ink);
}

/* Page chrome */
.employee-page-container .header {
    background: var(--en-surface);
    border-bottom: 1px solid #f0f0f0;
    padding: 24px 28px 18px 28px;
    box-shadow: none;
}

.employee-page-container .header-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--en-ink);
}

.employee-page-container .employees-page-star {
    color: #c9c7c4;
    margin-right: 10px;
    font-size: 0.92em;
    font-weight: 400;
}

.employee-page-container .employee-icon {
    color: var(--en-muted);
    font-size: 22px;
}

.employee-page-container .pending-reviews-notification {
    border-radius: var(--en-radius-sm);
    border: 1px solid rgba(220, 53, 69, 0.35);
    box-shadow: none;
    font-weight: 600;
}

/* Floating add — notebook “+” vibe */
.employee-page-container .add-button {
    background: var(--en-subtle);
    border: 1px solid var(--en-border);
    color: var(--en-ink);
    box-shadow: none;
    border-radius: 10px;
    width: 42px;
    height: 42px;
}

.employee-page-container .add-button:hover {
    background: var(--en-surface);
    border-color: var(--en-accent);
    color: var(--en-accent);
    transform: none;
}

/* Dropdown panels (add / edit / schedule / stats / recurring) */
.employee-page-container .add-employee-dropdown,
.employee-page-container .edit-employee-dropdown,
.employee-page-container .schedule-dropdown,
.employee-page-container .stats-dropdown,
.employee-page-container .recurring-schedule-dropdown {
    border: 1px solid var(--en-border);
    border-radius: var(--en-radius);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(0, 0, 0, 0.03);
    background: var(--en-surface);
}

.employee-page-container .dropdown-header {
    background: var(--en-subtle);
    border-bottom: 1px solid #f0f0f0;
    border-radius: var(--en-radius) var(--en-radius) 0 0;
}

.employee-page-container .dropdown-header h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--en-ink);
}

.employee-page-container .form-section {
    border-bottom-color: #f0f0f0;
}

.employee-page-container .form-section h4 {
    color: var(--en-muted);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.employee-page-container .form-field label {
    color: var(--en-muted);
    font-size: 12px;
    font-weight: 600;
}

.employee-page-container .form-field input,
.employee-page-container .form-field select,
.employee-page-container .form-field textarea {
    border: 1px solid var(--en-border-strong);
    border-radius: var(--en-radius-sm);
    background: var(--en-surface);
    font-size: 14px;
}

.employee-page-container .form-field input:focus,
.employee-page-container .form-field select:focus {
    outline: none;
    border-color: var(--en-accent);
    box-shadow: 0 0 0 1px rgba(0, 115, 234, 0.15);
}

.employee-page-container .btn-cancel {
    background: var(--en-surface);
    border: 1px solid var(--en-border);
    color: var(--en-ink);
}

.employee-page-container .btn-submit {
    background: #2c2c2b;
    border: 1px solid #2c2c2b;
    border-radius: var(--en-radius-sm);
}

.employee-page-container .btn-submit:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
}

/* Search */
.employee-page-container .search-container {
    padding: 16px 28px 8px 28px;
    background: transparent;
}

.employee-page-container .search-input {
    max-width: 320px;
    border: 1px solid var(--en-border);
    border-radius: var(--en-radius-sm);
    background: var(--en-surface);
    padding: 10px 12px;
    box-shadow: none;
}

.employee-page-container .search-input:focus {
    border-color: var(--en-accent);
    background: var(--en-surface);
}

/* Filter chips */
.employee-page-container .selection-cards-container {
    padding: 12px 28px 20px 28px;
    background: transparent;
}

.employee-page-container .scroll-arrow {
    background: var(--en-surface);
    border: 1px solid var(--en-border);
    color: var(--en-muted);
    box-shadow: none;
    border-radius: 10px;
    width: 36px;
    height: 36px;
}

.employee-page-container .scroll-arrow:hover {
    background: var(--en-subtle);
    border-color: var(--en-accent);
    color: var(--en-accent);
}

.employee-page-container .card {
    background: var(--en-surface);
    border: 1px solid var(--en-border);
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: none;
}

.employee-page-container .card:hover {
    background: var(--en-subtle);
    border-color: var(--en-border-strong);
}

.employee-page-container .card.active {
    background: var(--en-subtle);
    border-color: var(--en-ink);
    color: var(--en-ink);
    box-shadow: 0 0 0 1px var(--en-border);
}

.employee-page-container .card-title {
    font-size: 12px;
    font-weight: 600;
    color: inherit;
}

/* Table */
.employee-page-container .table-container {
    padding: 8px 28px 32px 28px;
    background: transparent;
}

.employee-page-container .table-controls {
    margin-bottom: 12px;
}

.employee-page-container .customize-columns-btn {
    background: var(--en-surface);
    border: 1px solid var(--en-border);
    color: var(--en-ink);
    border-radius: var(--en-radius-sm);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    box-shadow: none;
}

.employee-page-container .customize-columns-btn:hover {
    background: var(--en-subtle);
    border-color: var(--en-accent);
    color: var(--en-accent);
}

.employee-page-container .data-table {
    border: 1px solid var(--en-border);
    border-radius: var(--en-radius);
    box-shadow: none;
    overflow: hidden;
    background: var(--en-surface);
}

.employee-page-container .data-table th {
    background: var(--en-subtle);
    color: var(--en-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--en-border);
    padding: 12px 14px;
}

.employee-page-container .data-table td {
    border-bottom: 1px solid #f3f3f2;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--en-ink);
}

.employee-page-container .data-table tbody tr:hover {
    background: #fbfbfa;
}

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

/* Detail strip */
.employee-page-container .employee-detail-view {
    padding: 20px 28px 32px 28px;
    background: var(--en-surface);
    border-top: 1px solid var(--en-border);
}

.employee-page-container .employee-name {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--en-ink);
}

.employee-page-container .employee-info-toggle {
    background: var(--en-surface);
    border: 1px solid var(--en-border);
    color: var(--en-muted);
    border-radius: var(--en-radius-sm);
}

.employee-page-container .employee-info-toggle:hover {
    background: var(--en-subtle);
    border-color: var(--en-accent);
    color: var(--en-accent);
}

/* Action buttons — outline + one solid accent */
.employee-page-container .action-button {
    border-radius: var(--en-radius-sm);
    font-weight: 600;
    font-size: 13px;
    border: 1px solid transparent;
    box-shadow: none;
}

.employee-page-container .schedule-button {
    background: var(--en-surface);
    color: var(--en-ink);
    border: 1px solid var(--en-border);
}

.employee-page-container .schedule-button:hover {
    background: var(--en-subtle);
    border-color: var(--en-accent);
    color: var(--en-accent);
}

.employee-page-container .stats-button {
    background: var(--en-surface);
    color: #1b5e20;
    border: 1px solid #c8e6c9;
}

.employee-page-container .stats-button:hover {
    background: #f1f8f4;
}

.employee-page-container .edit-button {
    background: #2c2c2b;
    color: #fff;
    border-color: #2c2c2b;
}

.employee-page-container .edit-button:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
}

.employee-page-container .recurring-schedule-button {
    background: var(--en-surface);
    color: #b45309;
    border: 1px solid #fde68a;
}

.employee-page-container .recurring-schedule-button:hover {
    background: #fffbeb;
}

/* Stats dropdown innards */
.employee-page-container .stat-box {
    background: var(--en-surface);
    border: 1px solid var(--en-border);
    border-radius: 10px;
    box-shadow: none;
}

.employee-page-container .stat-box:hover {
    transform: none;
    background: var(--en-subtle);
    border-color: var(--en-border-strong);
}

.employee-page-container .range-btn {
    border: 1px solid var(--en-border);
    border-radius: var(--en-radius-sm);
    background: var(--en-surface);
    color: var(--en-muted);
}

.employee-page-container .range-btn.active {
    background: var(--en-ink);
    border-color: var(--en-ink);
    color: #fff;
}

.employee-page-container .date-range-selector {
    background: var(--en-subtle);
    border: 1px solid var(--en-border);
    border-radius: var(--en-radius-sm);
}

.employee-page-container .stats-section h4 {
    color: var(--en-faint);
    font-size: 11px;
    letter-spacing: 0.06em;
}

/* ----- Dark theme (matches app html[data-theme]) ----- */
html[data-theme="dark"] main.employees-main {
    background: #1b1d23 !important;
}

html[data-theme="dark"] .employee-page-container {
    --en-ink: #e8e6e3;
    --en-muted: #a8a5a0;
    --en-faint: #8a8782;
    --en-border: #2f323c;
    --en-border-strong: #3d414c;
    --en-surface: #23262e;
    --en-subtle: #1e2128;
    --en-accent: #5b9fff;
}

html[data-theme="dark"] .employee-page-container .header {
    background: var(--en-surface);
    border-bottom-color: var(--en-border);
}

html[data-theme="dark"] .employee-page-container .employees-page-star {
    color: #5c5f68;
}

html[data-theme="dark"] .employee-page-container .data-table tbody tr:hover {
    background: #2a2d36;
}

html[data-theme="dark"] .employee-page-container .card.active {
    background: #2a2d36;
    border-color: var(--en-ink);
    color: var(--en-ink);
}

html[data-theme="dark"] .employee-page-container .btn-submit {
    background: #e8e6e3;
    color: #1b1d23;
    border-color: #e8e6e3;
}

html[data-theme="dark"] .employee-page-container .btn-submit:hover {
    background: #fff;
    border-color: #fff;
}

html[data-theme="dark"] .employee-page-container .edit-button {
    background: #e8e6e3;
    color: #1b1d23;
    border-color: #e8e6e3;
}

html[data-theme="dark"] .employee-page-container .edit-button:hover {
    background: #fff;
    border-color: #fff;
}

/* Modals inside page shell */
.employee-page-container .reviews-modal-content,
.employee-page-container #columnModal .modal-content,
.employee-page-container #editJobModal .modal-content {
    border: 1px solid var(--en-border);
    border-radius: var(--en-radius);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
}

.employee-page-container .reviews-modal-header,
.employee-page-container #columnModal .modal-header,
.employee-page-container #editJobModal .modal-header {
    background: var(--en-subtle);
    border-bottom: 1px solid #f0f0f0;
}

html[data-theme="dark"] .employee-page-container .reviews-modal-header,
html[data-theme="dark"] .employee-page-container #columnModal .modal-header,
html[data-theme="dark"] .employee-page-container #editJobModal .modal-header {
    border-bottom-color: var(--en-border);
}