/*
 * GroupWare Next UI design system
 * Feature-specific styles remain in isolated component CSS. This final layer
 * aligns spacing, elevation, interaction and semantic status presentation.
 */
:root {
    --ds-space-1: .25rem;
    --ds-space-2: .5rem;
    --ds-space-3: .75rem;
    --ds-space-4: 1rem;
    --ds-space-5: 1.25rem;
    --ds-space-6: 1.5rem;
    --ds-space-8: 2rem;
    --ds-radius-sm: .5rem;
    --ds-radius-md: .75rem;
    --ds-radius-lg: 1rem;
    --ds-radius-xl: 1.25rem;
    --ds-shadow-sm: 0 1px 2px rgb(15 23 42 / 5%);
    --ds-shadow-md: 0 12px 32px rgb(15 23 42 / 8%);
    --ds-success: #168a64;
    --ds-success-soft: color-mix(in srgb, var(--ds-success) 12%, var(--surface));
    --ds-success-border: color-mix(in srgb, var(--ds-success) 34%, var(--border));
    --ds-warning: #b46b08;
    --ds-warning-soft: color-mix(in srgb, var(--ds-warning) 13%, var(--surface));
    --ds-warning-border: color-mix(in srgb, var(--ds-warning) 34%, var(--border));
    --ds-danger: #d1435b;
    --ds-danger-soft: color-mix(in srgb, var(--ds-danger) 12%, var(--surface));
    --ds-danger-border: color-mix(in srgb, var(--ds-danger) 34%, var(--border));
    --ds-info: #3478d4;
    --ds-info-soft: color-mix(in srgb, var(--ds-info) 12%, var(--surface));
    --ds-info-border: color-mix(in srgb, var(--ds-info) 34%, var(--border));
}

[data-bs-theme="dark"] {
    --ds-shadow-sm: 0 1px 2px rgb(0 0 0 / 18%);
    --ds-shadow-md: 0 16px 38px rgb(0 0 0 / 22%);
    --ds-success: #43d3a0;
    --ds-warning: #f0b45b;
    --ds-danger: #ff768d;
    --ds-info: #73adff;
}

/* Page rhythm and information hierarchy */
:where(.page-heading, .admin-page-heading, .admin-page-header, .system-page-header,
       .theme-settings-header, .vendor-header, .notice-page-header,
       .approval-page-header, .approval-document-header, .form-page-header,
       .board-document-header) {
    margin-bottom: var(--ds-space-6);
}

:where(.page-heading, .admin-page-heading, .admin-page-header, .system-page-header,
       .theme-settings-header, .vendor-header, .notice-page-header,
       .approval-page-header, .approval-document-header, .form-page-header,
       .board-document-header) h1 {
    margin-block: var(--ds-space-1);
    font-size: clamp(1.65rem, 2vw, 2.15rem);
    line-height: 1.18;
    letter-spacing: -.035em;
}

:where(.page-heading, .admin-page-heading, .admin-page-header, .system-page-header,
       .theme-settings-header, .vendor-header, .notice-page-header,
       .approval-page-header, .approval-document-header, .form-page-header,
       .board-document-header) p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

:where(.eyebrow, [class$="-eyebrow"]) {
    color: var(--accent-light);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Shared surfaces */
:where(.management-card, .settings-card, .form-card, .folder-card, .vendor-card,
       .license-form-card, .license-history-card, .notice-filter-card,
       .notice-list-card, .notice-detail-card, .notice-editor-card,
       .approval-list-card, .document-panel, .catalog-card, .editor-card,
       .palette-panel, .canvas-panel, .property-panel, .loading-card) {
    border-color: var(--border);
    border-radius: var(--ds-radius-lg);
    background: var(--surface);
    box-shadow: var(--ds-shadow-sm);
}

:where(.list-toolbar, .assignment-toolbar, .document-toolbar, .hard-toolbar,
       .bslg-toolbar, .control-toolbar) {
    gap: var(--ds-space-2);
    border-color: var(--border);
    border-radius: var(--ds-radius-md);
}

:where(.section-heading, .setting-heading, .card-heading, .catalog-heading,
       .editor-heading, .search-heading, .result-heading, .folder-heading,
       .panel-title) {
    gap: var(--ds-space-3);
}

:where(.section-heading, .setting-heading, .card-heading, .catalog-heading,
       .editor-heading, .search-heading, .result-heading, .folder-heading,
       .panel-title) h2,
:where(.section-heading, .setting-heading, .card-heading, .catalog-heading,
       .editor-heading, .search-heading, .result-heading, .folder-heading,
       .panel-title) h3 {
    letter-spacing: -.02em;
}

/* Controls and button hierarchy */
.rz-button {
    border-radius: var(--ds-radius-sm);
    font-weight: 700;
    box-shadow: none;
}

.rz-button:not(:disabled):hover {
    transform: translateY(-1px);
}

:where(.rz-textbox, .rz-textarea, .rz-dropdown, .rz-numeric, .rz-datepicker) {
    border-radius: var(--ds-radius-sm);
}

.rz-data-grid {
    overflow: hidden;
    border-radius: var(--ds-radius-md);
}

.rz-grid-table thead th {
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.rz-grid-table tbody td {
    vertical-align: middle;
}

/* Semantic state language */
:where(.status-badge, .history-badge, .latest-badge, .normal-badge,
       .important-badge, [data-status]) {
    display: inline-flex;
    min-height: 1.65rem;
    align-items: center;
    gap: .35rem;
    padding: .2rem .58rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

:where(.status-badge.success, .status-badge.active, .latest-badge,
       [data-status="success"], [data-status="active"]) {
    border-color: var(--ds-success-border);
    background: var(--ds-success-soft);
    color: var(--ds-success);
}

:where(.status-badge.warning, .important-badge,
       [data-status="warning"], [data-status="pending"]) {
    border-color: var(--ds-warning-border);
    background: var(--ds-warning-soft);
    color: var(--ds-warning);
}

:where(.status-badge.danger, [data-status="danger"], [data-status="rejected"]) {
    border-color: var(--ds-danger-border);
    background: var(--ds-danger-soft);
    color: var(--ds-danger);
}

:where(.status-badge.info, [data-status="info"], [data-status="progress"]) {
    border-color: var(--ds-info-border);
    background: var(--ds-info-soft);
    color: var(--ds-info);
}

/* Consistent interactive cards */
:where(.summary-card, .option-card, .catalog-card, .management-card) {
    transition: border-color .18s ease, background-color .18s ease,
                box-shadow .18s ease, transform .18s ease;
}

:where(a, button):where(.summary-card, .option-card, .catalog-card):hover {
    box-shadow: var(--ds-shadow-md);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    :where(.page-heading, .admin-page-heading, .admin-page-header,
           .system-page-header, .theme-settings-header, .vendor-header,
           .notice-page-header, .approval-page-header, .approval-document-header,
           .form-page-header, .board-document-header) {
        margin-bottom: var(--ds-space-5);
    }
}

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

/*
 * Feature pages must inherit the width policy from MainLayout. WebHard and
 * AddressBook previously applied their own centered max-width and duplicated
 * the layout padding, which prevented the FULL mode from using the viewport.
 */
body .content .web-hard-page,
body .content .address-book-page {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 0;
}

/* WebHard file list: use the same bordered grid language as Notice/AddressBook. */
body .content .web-hard-page {
    --border-color: var(--border);
    --surface-card: var(--surface);
    --surface-elevated: var(--surface-2);
    --text-color: var(--text);
    --text-muted: var(--muted);
}

body .content .web-hard-page .hard-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    background: var(--surface-card);
}

body .content .web-hard-page .hard-toolbar {
    min-height: 74px;
    padding: 14px 18px;
    background: var(--surface-card);
}

body .content .web-hard-page .hard-toolbar > div:first-child strong {
    color: var(--text-color);
    font-size: .98rem;
}

body .content .web-hard-page .hard-toolbar > div:first-child span {
    margin-top: 3px;
}

body .content .web-hard-page .file-table-wrap {
    overflow: auto;
    margin: 16px 18px 18px;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    background: var(--surface-card);
}

body .content .web-hard-page .file-table {
    min-width: 820px;
    border-collapse: separate;
    border-spacing: 0;
}

body .content .web-hard-page .file-table thead {
    position: sticky;
    z-index: 2;
    top: 0;
}

body .content .web-hard-page .file-table th {
    height: 46px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-elevated);
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .025em;
    white-space: nowrap;
}

body .content .web-hard-page .file-table th:first-child {
    width: 34%;
}

body .content .web-hard-page .file-table th:nth-child(2) {
    width: 100px;
}

body .content .web-hard-page .file-table th:nth-child(3),
body .content .web-hard-page .file-table th:nth-child(4) {
    width: 105px;
}

body .content .web-hard-page .file-table th:nth-child(5),
body .content .web-hard-page .file-table th:nth-child(7) {
    width: 76px;
    text-align: center;
}

body .content .web-hard-page .file-table th:nth-child(6) {
    width: 110px;
}

body .content .web-hard-page .file-table td {
    height: 64px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-card);
    color: var(--text-color);
    vertical-align: middle;
}

body .content .web-hard-page .file-table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--surface-elevated) 55%, var(--surface-card));
}

body .content .web-hard-page .file-table tbody tr:hover td {
    background: color-mix(in srgb, var(--active-menu-color, #4f46e5) 9%, var(--surface-card));
}

body .content .web-hard-page .file-table tbody tr:last-child td {
    border-bottom: 0;
}

body .content .web-hard-page .file-table td:first-child {
    min-width: 330px;
}

body .content .web-hard-page .file-table td:first-child strong {
    overflow: hidden;
    max-width: 440px;
    color: var(--text-color);
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .content .web-hard-page .file-table td:first-child small {
    overflow: hidden;
    max-width: 440px;
    color: var(--text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .content .web-hard-page .file-table td:nth-child(2),
body .content .web-hard-page .file-table td:nth-child(3),
body .content .web-hard-page .file-table td:nth-child(4),
body .content .web-hard-page .file-table td:nth-child(5),
body .content .web-hard-page .file-table td:nth-child(6) {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body .content .web-hard-page .file-table td:nth-child(5),
body .content .web-hard-page .file-table td:nth-child(7) {
    text-align: center;
}

body .content .web-hard-page .file-table .file-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid color-mix(in srgb, var(--active-menu-color, #4f46e5) 22%, transparent);
    background: color-mix(in srgb, var(--active-menu-color, #4f46e5) 13%, var(--surface-card));
    color: var(--active-menu-color, #818cf8);
}

body .content .web-hard-page .file-table td:last-child .rz-button {
    display: inline-grid;
    width: 31px;
    min-width: 31px;
    height: 31px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-elevated);
    color: var(--text-muted);
    place-items: center;
}

body .content .web-hard-page .file-table td:last-child .rz-button:not(:disabled):hover {
    border-color: var(--active-menu-color, #4f46e5);
    color: var(--active-menu-color, #818cf8);
}

body .content .web-hard-page .file-table td:last-child .rz-button:disabled {
    opacity: .35;
}

body .content .web-hard-page .empty-row {
    height: 260px;
    background: var(--surface-card) !important;
}

@media (max-width: 900px) {
    body .content .web-hard-page .file-table-wrap {
        margin: 12px;
    }
}

/*
 * Compact module headers
 *
 * Product references use a small category label, a concise title, and one
 * supporting line instead of a tall hero block. Keep the page action in the
 * same row while allowing it to wrap below on small screens.
 */
body .content :is(
    .page-heading,
    .notice-page-header,
    .notice-editor-header,
    .admin-page-heading,
    .admin-page-header,
    .form-page-header,
    .license-page-header,
    .system-page-header,
    .access-history-header,
    .common-code-header,
    .common-group-header,
    .holiday-header,
    .authorization-header,
    .theme-settings-header,
    .vendor-header,
    .position-header,
    .approval-page-header,
    .approval-create-page > header,
    .schedule-heading,
    .board-document-header,
    .approval-document-header,
    .editor-header
) {
    min-height: 0;
    margin-block: 0 14px;
}

body .content :is(
    .page-heading,
    .notice-page-header,
    .admin-page-heading,
    .admin-page-header,
    .form-page-header,
    .common-group-header,
    .vendor-header,
    .position-header,
    .approval-page-header,
    .approval-create-page > header,
    .schedule-heading,
    .board-document-header,
    .approval-document-header,
    .editor-header
) {
    align-items: center;
    gap: 16px;
}

body .content :is(
    .page-heading,
    .notice-page-header,
    .notice-editor-header,
    .admin-page-heading,
    .admin-page-header,
    .form-page-header,
    .license-page-header,
    .system-page-header,
    .access-history-header,
    .common-code-header,
    .common-group-header,
    .holiday-header,
    .authorization-header,
    .theme-settings-header,
    .vendor-header,
    .position-header,
    .approval-page-header,
    .approval-create-page > header,
    .schedule-heading,
    .board-document-header,
    .approval-document-header,
    .editor-header
) h1 {
    margin: 2px 0 3px;
    font-size: clamp(1.45rem, 1.3rem + .35vw, 1.7rem);
    line-height: 1.15;
    letter-spacing: -.025em;
}

body .content :is(
    .page-heading,
    .notice-page-header,
    .notice-editor-header,
    .admin-page-heading,
    .admin-page-header,
    .form-page-header,
    .license-page-header,
    .system-page-header,
    .access-history-header,
    .common-code-header,
    .common-group-header,
    .holiday-header,
    .authorization-header,
    .theme-settings-header,
    .vendor-header,
    .position-header,
    .approval-page-header,
    .approval-create-page > header,
    .schedule-heading,
    .board-document-header,
    .approval-document-header
) p {
    margin: 0;
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.4;
}

body .content :is(
    .page-heading,
    .notice-page-header,
    .notice-editor-header,
    .admin-page-heading,
    .admin-page-header,
    .form-page-header,
    .license-page-header,
    .system-page-header,
    .access-history-header,
    .common-code-header,
    .common-group-header,
    .holiday-header,
    .authorization-header,
    .theme-settings-header,
    .vendor-header,
    .position-header,
    .approval-page-header,
    .approval-create-page > header,
    .schedule-heading
) :is(span, small):first-child {
    font-size: .64rem;
    line-height: 1.2;
    letter-spacing: .14em;
}

body .content .admin-home > header {
    margin-bottom: 14px;
}

body .content .admin-home > header h1 {
    margin: 2px 0 3px;
    font-size: clamp(1.45rem, 1.3rem + .35vw, 1.7rem);
    line-height: 1.15;
}

body .content .admin-home > header p {
    margin: 0;
    color: var(--muted);
    font-size: .8rem;
}

/* MainLayout already provides the page gutter; avoid a second large inset. */
body .content :is(.approval-documents-page, .schedule-page) {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 0;
}

@media (max-width: 700px) {
    body .content :is(
        .page-heading,
        .notice-page-header,
        .admin-page-heading,
        .admin-page-header,
        .form-page-header,
        .common-group-header,
        .vendor-header,
        .position-header,
        .approval-page-header,
        .approval-create-page > header,
        .schedule-heading,
        .board-document-header,
        .approval-document-header,
        .editor-header
    ) {
        align-items: flex-start;
        gap: 9px;
    }
}