/*
 * NAAS Enterprise UI Layer
 * Shared operational components for admin and company workspaces.
 * Page-specific CSS should only handle unique layout or domain visuals.
 */

:root {
    --ui-control-height: 40px;
    --ui-control-height-sm: 32px;
    --ui-card-radius: 8px;
    --ui-panel-radius: 8px;
    --ui-table-row-height: 38px;
    --ui-density-gap: 10px;
    --ui-section-gap: 12px;
    --ui-toolbar-gap: 8px;
    --ui-surface: rgba(255, 255, 255, 0.94);
    --ui-surface-muted: rgba(247, 250, 255, 0.86);
    --ui-border: rgba(16, 32, 56, 0.1);
    --ui-border-strong: rgba(31, 111, 255, 0.22);
    --ui-muted: var(--grey-700);
}

body {
    text-rendering: optimizeLegibility;
}

.main-content {
    --surface: var(--ui-surface);
}

/* Shared surfaces */
:where(
    .card,
    .table-card,
    .form-card,
    .surface-panel,
    .workspace-section,
    .admin-panel,
    .admin-form-card,
    .admin-metric-card,
    .admin-action-card,
    .settings-card,
    .profile-form-card,
    .customer-form-panel,
    .bank-account-card,
    .brand-asset-card,
    .employee-form-card,
    .hr-suite-card,
    .invp-panel,
    .invp-metric-card,
    .invp-detail-card,
    .invp-preview-card,
    .finance-ledger-panel
) {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-card-radius);
    background: var(--ui-surface);
    box-shadow: var(--shadow-sm);
}

:where(
    .workspace-section,
    .admin-panel,
    .admin-form-card,
    .admin-metric-card,
    .admin-action-card,
    .settings-card,
    .profile-form-card,
    .customer-form-panel,
    .bank-account-card,
    .employee-form-card,
    .hr-suite-card,
    .invp-panel,
    .finance-ledger-panel
) {
    padding: 14px;
}

:where(
    .workspace-section:hover,
    .admin-panel:hover,
    .admin-form-card:hover,
    .settings-card:hover,
    .customer-form-panel:hover,
    .hr-suite-card:hover,
    .invp-panel:hover
) {
    border-color: rgba(16, 32, 56, 0.14);
}

/* Shared section headers */
:where(
    .workspace-section-head,
    .admin-panel-head,
    .panel-head,
    .bank-account-card-head,
    .hr-suite-card__head,
    .invp-panel-head,
    .invp-toolbar,
    .settings-card__head,
    .profile-password-head
) {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-toolbar-gap);
    min-width: 0;
}

:where(
    .workspace-section-head h2,
    .admin-panel-head h2,
    .panel-head h2,
    .bank-account-card-head h3,
    .hr-suite-card__head h2,
    .invp-panel-copy h2,
    .invp-toolbar-copy h2,
    .settings-card__head h2
) {
    font-size: 16px;
    line-height: 1.18;
}

:where(
    .workspace-section-head p,
    .admin-panel p,
    .panel-head p,
    .bank-account-card-head p,
    .hr-suite-card__head p,
    .invp-panel-copy p,
    .settings-card__meta,
    .small-note
) {
    color: var(--ui-muted);
    font-size: 11.5px;
    line-height: 1.42;
}

/* Compact controls */
:where(
    input[type="text"],
    input[type="search"],
    input[type="number"],
    input[type="date"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="datetime-local"],
    select,
    textarea
) {
    min-height: var(--ui-control-height);
    border-radius: var(--ui-card-radius);
    border-color: var(--ui-border);
}

:where(textarea) {
    min-height: 74px;
}

:where(label, .workspace-filter-field > label) {
    color: var(--grey-700);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.01em;
}

:where(button, .btn) {
    min-height: var(--ui-control-height);
    border-radius: var(--ui-card-radius);
    font-size: 12px;
    font-weight: 700;
}

:where(.btn-sm, .btn.btn-sm, button.btn-sm) {
    min-height: var(--ui-control-height-sm);
    padding-inline: 10px;
    font-size: 11px;
}

:where(.btn-secondary, .btn-outline) {
    border-color: var(--ui-border);
}

/* Forms and action bars */
:where(.form-block) {
    margin-bottom: var(--ui-density-gap);
}

:where(.form-row-2, .inline-row, .admin-form-grid, .company-profile-grid, .hr-form-grid) {
    gap: var(--ui-density-gap);
}

:where(
    .page-toolbar,
    .workspace-actions,
    .admin-inline-actions,
    .admin-form-actions,
    .company-profile-footer-actions,
    .customer-form-actions,
    .hr-form-actions,
    .invoice-create-actions,
    .invp-toolbar-actions,
    .finance-filter-actions
) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-toolbar-gap);
}

:where(
    .admin-form-actions,
    .company-profile-footer-actions,
    .customer-form-actions,
    .hr-form-actions,
    .invoice-create-actions
) {
    justify-content: flex-end;
}

/* Filters */
:where(.workspace-filter-bar, .finance-filter-bar) {
    padding: 10px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-card-radius);
    background: var(--ui-surface-muted);
    box-shadow: none;
}

:where(.workspace-filter-grid, .finance-filter-main, .um-filter-grid) {
    gap: 8px;
}

:where(.workspace-filter-field input, .workspace-filter-field select, .workspace-filter-field textarea) {
    min-height: 36px;
    padding-block: 7px;
}

:where(.workspace-filter-search) {
    min-height: 38px;
    border-radius: var(--ui-card-radius);
}

:where(.workspace-filter-summary, .workspace-filter-hint, .finance-filter-meta) {
    color: var(--grey-600);
    font-size: 10.5px;
}

.ui-saved-view-controls,
.ui-table-tools-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ui-table-tools-bar {
    margin-bottom: 8px;
}

.ui-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-card-radius);
    background: var(--ui-surface-muted);
    color: var(--grey-700);
    font-size: 11px;
}

.ui-pagination__controls,
.ui-pagination__sizes {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ui-pagination__button,
.ui-pagination__size,
.ui-pagination__page {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 9px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-card-radius);
    background: rgba(255, 255, 255, 0.88);
    color: var(--grey-800);
    text-decoration: none;
    font-weight: 750;
}

.ui-pagination__page {
    background: transparent;
}

.ui-pagination__button.is-disabled {
    opacity: 0.48;
}

.ui-pagination__size.is-active {
    border-color: var(--ui-border-strong);
    background: rgba(31, 111, 255, 0.1);
    color: var(--primary);
}

.ui-saved-view-controls {
    margin-right: auto;
}

.ui-saved-view-controls select,
.ui-saved-view-controls input,
.ui-table-tools-bar select,
.ui-table-tools-bar input {
    min-height: var(--ui-control-height-sm);
    max-width: 180px;
    font-size: 11px;
}

.ui-saved-view-controls .btn,
.ui-table-tools-bar .btn {
    min-height: var(--ui-control-height-sm);
}

.ui-selected-count {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--ui-surface-muted);
    color: var(--grey-700);
    font-size: 10px;
    font-weight: 800;
}

.ui-column-visibility-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ui-column-visibility-option {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 8px;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    background: var(--ui-surface-muted);
    color: var(--grey-700);
    font-size: 10px;
    font-weight: 800;
}

.ui-column-visibility-option input {
    width: 13px;
    height: 13px;
    accent-color: var(--primary);
}

/* Tables */
:where(.table, .data-table, .admin-table, .finance-table, .documents-table) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.main-content :where(table):not(.calendar-table):not(.ui-plain-table) {
    width: 100%;
}

.main-content :where(table):not(.calendar-table):not(.ui-plain-table) th,
.main-content :where(table):not(.calendar-table):not(.ui-plain-table) td,
:where(.table, .data-table, .admin-table, .finance-table, .documents-table) th,
:where(.table, .data-table, .admin-table, .finance-table, .documents-table) td {
    min-height: var(--ui-table-row-height);
    padding: 8px 10px;
    border-bottom: 1px solid var(--ui-border);
    vertical-align: middle;
}

.main-content :where(table):not(.calendar-table):not(.ui-plain-table) th,
:where(.table, .data-table, .admin-table, .finance-table, .documents-table) th {
    color: var(--grey-700);
    background: rgba(247, 250, 255, 0.92);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.main-content :where(table):not(.calendar-table):not(.ui-plain-table) tbody tr:hover td,
:where(.table, .data-table, .admin-table, .finance-table, .documents-table) tbody tr:hover td {
    background: rgba(31, 111, 255, 0.035);
}

.ui-table-scroll {
    overflow: auto;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-card-radius);
    background: var(--ui-surface);
}

.ui-table-scroll table {
    min-width: 760px;
}

/* Badges and status labels */
:where(
    .status-badge,
    .admin-pill,
    .company-module-badge,
    .workspace-pill,
    .settings-workspace-pill,
    .invp-count-badge,
    .invp-source-pill
) {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 22px;
    padding: 2px 8px;
    border: 1px solid rgba(31, 111, 255, 0.14);
    border-radius: 999px;
    background: rgba(31, 111, 255, 0.08);
    color: var(--blue-800);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

:where(.status-badge--success, .admin-pill--active, .is-success) {
    border-color: rgba(17, 132, 91, 0.16);
    background: var(--success-bg);
    color: var(--success);
}

:where(.status-badge--danger, .admin-pill--suspended, .is-danger) {
    border-color: rgba(214, 67, 82, 0.18);
    background: var(--danger-bg);
    color: var(--danger);
}

:where(.status-badge--warning, .admin-pill--inactive, .is-warning) {
    border-color: rgba(197, 129, 0, 0.18);
    background: var(--warning-bg);
    color: var(--warning);
}

/* Feature/package configuration */
.ui-package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

.ui-package-button {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-card-radius);
    background: var(--ui-surface-muted);
    color: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.ui-package-button:hover {
    border-color: var(--ui-border-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.ui-package-button.is-active,
.ui-package-button:focus-visible {
    border-color: var(--ui-border-strong);
    background: rgba(239, 246, 255, 0.98);
}

.ui-package-button:disabled {
    cursor: not-allowed;
    opacity: 0.62;
    transform: none;
}

.ui-package-button span {
    color: var(--grey-900);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.25;
}

.ui-package-button small {
    color: var(--grey-700);
    font-size: 10.5px;
    line-height: 1.35;
}

.ui-toggle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
}

.ui-toggle-stack {
    display: grid;
    gap: 12px;
}

.ui-toggle-group {
    display: grid;
    gap: 8px;
}

.ui-toggle-group__head h3 {
    margin: 0;
    color: var(--grey-900);
    font-size: 13px;
    line-height: 1.25;
}

.ui-toggle-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-card-radius);
    background: var(--ui-surface-muted);
    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.ui-toggle-card input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    accent-color: var(--primary);
}

.ui-toggle-card.is-enabled {
    border-color: var(--ui-border-strong);
    background: rgba(239, 246, 255, 0.94);
    box-shadow: 0 8px 20px rgba(31, 111, 255, 0.07);
}

.ui-toggle-card.is-required {
    border-style: dashed;
}

.ui-toggle-card.is-disabled {
    opacity: 0.58;
}

.ui-toggle-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.ui-toggle-card__title {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.ui-toggle-card strong {
    color: var(--grey-900);
    font-size: 13px;
    line-height: 1.25;
}

.ui-toggle-card p {
    margin: 0;
    color: var(--grey-700);
    font-size: 11px;
    line-height: 1.35;
}

.ui-toggle-note {
    color: var(--grey-600);
    font-style: italic;
}

/* Empty, loading, and feedback states */
:where(.empty-state, .ui-empty-state) {
    display: grid;
    place-items: center;
    gap: 6px;
    min-height: 96px;
    padding: 16px;
    border: 1px dashed rgba(16, 32, 56, 0.2);
    border-radius: var(--ui-card-radius);
    background: var(--ui-surface-muted);
    color: var(--grey-700);
    text-align: center;
}

.ui-loading {
    position: relative;
    min-height: 80px;
}

.ui-loading::after {
    content: "";
    width: 22px;
    height: 22px;
    border: 3px solid rgba(31, 111, 255, 0.18);
    border-top-color: var(--primary);
    border-radius: 999px;
    animation: ui-spin 0.8s linear infinite;
}

@keyframes ui-spin {
    to { transform: rotate(360deg); }
}

/* Keyboard and accessibility */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 860px) {
    :root {
        --ui-control-height: 42px;
    }

    :where(.page-toolbar, .workspace-actions, .admin-inline-actions, .admin-form-actions, .company-profile-footer-actions) {
        align-items: stretch;
    }

    :where(.page-toolbar .btn, .workspace-actions .btn, .admin-form-actions .btn, .company-profile-footer-actions .btn) {
        width: 100%;
    }

    .ui-saved-view-controls,
    .ui-table-tools-bar {
        width: 100%;
        align-items: stretch;
    }

    .ui-saved-view-controls select,
    .ui-saved-view-controls input,
    .ui-saved-view-controls .btn,
    .ui-table-tools-bar select,
    .ui-table-tools-bar input,
    .ui-table-tools-bar .btn {
        width: 100%;
        max-width: none;
    }
}

html[data-theme="dark"] {
    --ui-surface: rgba(17, 24, 39, 0.92);
    --ui-surface-muted: rgba(15, 23, 42, 0.78);
    --ui-border: rgba(148, 163, 184, 0.18);
    --ui-border-strong: rgba(96, 165, 250, 0.34);
    --ui-muted: var(--grey-500);
}

html[data-theme="dark"] :where(
    .workspace-section,
    .admin-panel,
    .admin-form-card,
    .settings-card,
    .customer-form-panel,
    .bank-account-card,
    .hr-suite-card,
    .invp-panel,
    .finance-ledger-panel,
    .ui-table-scroll
) {
    background: var(--ui-surface);
    border-color: var(--ui-border);
}

html[data-theme="dark"] .main-content :where(table):not(.calendar-table):not(.ui-plain-table) th,
html[data-theme="dark"] :where(.table, .data-table, .admin-table, .finance-table, .documents-table) th {
    background: rgba(15, 23, 42, 0.82);
    color: var(--grey-400);
}

html[data-theme="dark"] .ui-package-button,
html[data-theme="dark"] .ui-toggle-card {
    background: var(--ui-surface-muted);
    border-color: var(--ui-border);
}

html[data-theme="dark"] .ui-package-button.is-active,
html[data-theme="dark"] .ui-toggle-card.is-enabled {
    background: rgba(30, 64, 175, 0.18);
    border-color: var(--ui-border-strong);
    box-shadow: none;
}