/* =========================================================
   Shared enterprise HRM page patterns
   Used by Document, User, Employee, Payroll, Leave, Inbox
   (Reimbursement / Salary Certificate keep page-specific CSS)
   ========================================================= */

.hrm-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.hrm-panel__header {
    padding: var(--space-4) var(--space-5);
    background: var(--surface-subtle, #f7f7f8);
    border-bottom: 1px solid var(--border);
}

.hrm-panel__title {
    margin: 0;
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: 1.3;
}

.hrm-panel__subtitle {
    margin: 0.25rem 0 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}

.hrm-panel__body {
    padding: var(--space-5);
}

.hrm-panel__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    margin: 0;
    padding: var(--space-3) 0 0;
    border-top: 1px solid var(--border);
}

.hrm-panel__footer .e-btn {
    min-width: 7rem;
}

.hrm-note {
    width: 100%;
    max-width: 42rem;
    box-sizing: border-box;
    margin: var(--space-3) 0;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-subtle, #f7f7f8);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand-primary);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.45;
}

.hrm-note p {
    margin: 0;
}

.hrm-note__label {
    color: var(--error, #c0392b);
}

.hrm-grid-card {
    margin-top: var(--space-5);
}

/* Page shells — kill floating-footer-era parent-card gap + tab bottom gap */
.document-page .parent-card,
.user-page .parent-card,
.employee-page .parent-card,
.payroll-page .parent-card,
.leave-page .parent-card {
    margin-bottom: 0;
}

.document-page .hrm-tabs.e-tab .e-content > .e-item.e-active,
.user-page .hrm-tabs.e-tab .e-content > .e-item.e-active,
.employee-page .hrm-tabs.e-tab .e-content > .e-item.e-active,
.payroll-page .hrm-tabs.e-tab .e-content > .e-item.e-active,
.inbox-page .hrm-tabs.e-tab .e-content > .e-item.e-active,
.inbox-page .inbox-tabs.e-tab .e-content > .e-item.e-active {
    margin-bottom: 0;
    padding-top: var(--space-4);
}

/* Equal-width form controls inside enterprise pages */
.document-page .e-form-group,
.user-page .e-form-group,
.employee-page .e-form-group,
.payroll-page .e-form-group,
.leave-page .leave-form-col .e-form-group {
    width: 100% !important;
    max-width: 100%;
}

.document-page .form-item,
.user-page .form-item,
.employee-page .form-item,
.payroll-page .form-item,
.leave-page .form-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    height: auto !important;
}

.document-page .form-item .e-form-label,
.user-page .form-item .e-form-label,
.employee-page .form-item .e-form-label,
.payroll-page .form-item .e-form-label,
.leave-page .form-item .e-form-label {
    margin: 0 !important;
}

.document-page .req,
.user-page .req,
.employee-page .req,
.payroll-page .req,
.leave-page .req {
    color: var(--error, #c0392b);
    margin-left: 0.15rem;
}

/* Payroll / Employee form labels outside form-item still get rhythm */
.payroll-page .e-form-label,
.employee-page .e-form-label {
    display: block;
    margin: 0 0 0.5rem 0;
}

.document-page .form-item .e-input-group,
.document-page .form-item .e-control-wrapper,
.document-page .form-item .e-ddl,
.document-page .form-item .e-upload,
.user-page .form-item .e-input-group,
.user-page .form-item .e-control-wrapper,
.user-page .form-item .e-ddl,
.employee-page .form-item .e-input-group,
.employee-page .form-item .e-control-wrapper,
.employee-page .form-item .e-ddl,
.payroll-page .form-item .e-input-group,
.payroll-page .form-item .e-control-wrapper,
.payroll-page .form-item .e-ddl,
.leave-page .form-item .e-input-group,
.leave-page .form-item .e-control-wrapper,
.leave-page .form-item .e-ddl,
.leave-page .form-item .e-upload {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* =========================================================
   User — panels + mixed 3/2-column form grids
   ========================================================= */
.user-page .user-form-card {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.user-page .user-form-card .hrm-panel {
    margin-bottom: 0;
}

.user-page #UserForm .e-form-group {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0;
}

.user-page #UserForm .e-form-group .e-form-layout {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 1.25rem !important;
    row-gap: 1.125rem !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 1.125rem 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.user-page #UserForm .e-form-group .e-form-layout:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.user-page #UserForm .e-form-group .e-form-layout:last-child {
    margin-bottom: 0 !important;
}

.user-page #UserForm .e-form-group .e-form-layout > .e-label-position-top,
.user-page #UserForm .e-form-group .e-form-layout > [class*="e-colspan"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: auto !important;
}

.user-page #UserForm .e-form-group .e-form-layout > [style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
}

.user-page #UserForm .e-form-group .e-form-layout > .e-colspan-12,
.user-page #UserForm .e-form-group .e-form-layout > :has(.form-item--full),
.user-page #UserForm .e-form-group .e-form-layout:has(> :only-child) > * {
    grid-column: 1 / -1 !important;
}

.user-page #UserForm .form-item,
.user-page #UserForm .e-label-position-top {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    height: auto !important;
    align-self: stretch;
}

.user-page #UserForm .form-item .e-form-label,
.user-page #UserForm .e-label-position-top > .e-form-label,
.user-page #UserForm .e-form-label {
    margin: 0 !important;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    line-height: 1.3;
}

.user-page #UserForm .form-item .e-input-group,
.user-page #UserForm .form-item .e-control-wrapper,
.user-page #UserForm .form-item .e-ddl,
.user-page #UserForm .e-label-position-top .e-input-group,
.user-page #UserForm .e-label-position-top .e-control-wrapper,
.user-page #UserForm .e-label-position-top .e-ddl {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.user-page #UserForm .e-input-group,
.user-page #UserForm .e-control-wrapper:not(.e-upload),
.user-page #UserForm .e-ddl.e-input-group {
    min-height: 2.5rem;
    border-radius: var(--radius-sm, 6px);
}

.user-page #UserForm .hrm-panel__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3);
    width: 100% !important;
    max-width: none !important;
    margin: var(--space-2) 0 0;
    padding: var(--space-4) 0 0;
    border-top: 1px solid var(--border);
}

.user-page #UserForm .hrm-panel__footer .e-btn {
    min-width: 7rem;
}

@media (max-width: 1199.98px) {
    .user-page #UserForm .e-form-group .e-form-layout:has(> :nth-child(3):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    .user-page #UserForm .e-form-group .e-form-layout,
    .user-page #UserForm .e-form-group .e-form-layout:has(> :nth-child(3):last-child) {
        grid-template-columns: 1fr !important;
        column-gap: 0 !important;
    }
}

/* =========================================================
   Payroll — panels + mixed 3/2-column form grids
   ========================================================= */
.payroll-page .payroll-form-card,
.payroll-page .payroll-payslip-card,
.payroll-page .payroll-stl-card,
.payroll-page .payroll-docs-card {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.payroll-page .payroll-form-card .hrm-panel,
.payroll-page .payroll-payslip-card .hrm-panel,
.payroll-page .payroll-stl-card .hrm-panel,
.payroll-page .payroll-docs-card .hrm-panel {
    margin-bottom: 0;
}

.payroll-page .e-group-title {
    margin: 0 0 var(--space-4) 0 !important;
    padding: 0 0 var(--space-3) 0 !important;
    border-bottom: 1px solid var(--border);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.payroll-page #PayrollForm .e-form-group,
.payroll-page #TransactionForm .e-form-group {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 var(--space-6) 0 !important;
    padding: 0;
}

.payroll-page #PayrollForm .e-form-group:last-of-type,
.payroll-page #TransactionForm .e-form-group:last-of-type {
    margin-bottom: 0 !important;
}

/*
  Gap above Bank Details heading (after salary fields).
  Must come after the form-group margin shorthand so margin-top is not reset to 0.
*/
.payroll-page #PayrollForm .e-form-group + .e-form-group,
.payroll-page #PayrollForm #payroll-bank-details,
.payroll-page #PayrollForm .e-form-group#payroll-bank-details {
    margin-top: 1.75rem !important;
}

.payroll-page #PayrollForm #payroll-bank-details > legend.e-group-title,
.payroll-page #PayrollForm .e-form-group + .e-form-group > legend.e-group-title {
    margin-top: 0.35rem !important;
}

.payroll-page #PayrollForm .e-form-group:not(:last-of-type) > .e-form-layout:last-child {
    margin-bottom: 0.25rem !important;
}

.payroll-page #PayrollForm .e-form-group .e-form-layout,
.payroll-page #TransactionForm .e-form-group .e-form-layout {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 1.25rem !important;
    row-gap: 1.125rem !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 1.125rem 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Exactly 3 fields in the Syncfusion row → 3 equal columns */
.payroll-page #PayrollForm .e-form-group .e-form-layout:has(> :nth-child(3):last-child),
.payroll-page #TransactionForm .e-form-group .e-form-layout:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.payroll-page #PayrollForm .e-form-group:last-of-type > .e-form-layout:last-child,
.payroll-page #TransactionForm .e-form-group:last-of-type > .e-form-layout:last-child {
    margin-bottom: 0 !important;
}

.payroll-page #PayrollForm .e-form-group .e-form-layout > .e-label-position-top,
.payroll-page #PayrollForm .e-form-group .e-form-layout > [class*="e-colspan"],
.payroll-page #TransactionForm .e-form-group .e-form-layout > .e-label-position-top,
.payroll-page #TransactionForm .e-form-group .e-form-layout > [class*="e-colspan"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: auto !important;
}

.payroll-page #PayrollForm .e-form-group .e-form-layout > [style*="width"],
.payroll-page #TransactionForm .e-form-group .e-form-layout > [style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
}

.payroll-page #PayrollForm .e-form-group .e-form-layout > .e-colspan-12,
.payroll-page #TransactionForm .e-form-group .e-form-layout > .e-colspan-12,
.payroll-page #PayrollForm .e-form-group .e-form-layout > :has(.form-item--full),
.payroll-page #TransactionForm .e-form-group .e-form-layout > :has(.form-item--full),
.payroll-page #PayrollForm .e-form-group .e-form-layout:has(> :only-child) > *,
.payroll-page #TransactionForm .e-form-group .e-form-layout:has(> :only-child) > * {
    grid-column: 1 / -1 !important;
}

.payroll-page #PayrollForm .form-item,
.payroll-page #TransactionForm .form-item,
.payroll-page #PayrollForm .e-label-position-top,
.payroll-page #TransactionForm .e-label-position-top,
.payroll-page .payroll-stl-form .form-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    height: auto !important;
    align-self: stretch;
}

.payroll-page #PayrollForm .form-item .e-form-label,
.payroll-page #TransactionForm .form-item .e-form-label,
.payroll-page #PayrollForm .e-label-position-top > .e-form-label,
.payroll-page #TransactionForm .e-label-position-top > .e-form-label,
.payroll-page #PayrollForm .e-form-label,
.payroll-page #TransactionForm .e-form-label,
.payroll-page .payroll-stl-form .e-form-label {
    margin: 0 !important;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    line-height: 1.3;
}

.payroll-page #PayrollForm .form-item .e-input-group,
.payroll-page #PayrollForm .form-item .e-control-wrapper,
.payroll-page #PayrollForm .form-item .e-ddl,
.payroll-page #PayrollForm .e-label-position-top .e-input-group,
.payroll-page #PayrollForm .e-label-position-top .e-control-wrapper,
.payroll-page #PayrollForm .e-label-position-top .e-ddl,
.payroll-page #TransactionForm .form-item .e-input-group,
.payroll-page #TransactionForm .form-item .e-control-wrapper,
.payroll-page #TransactionForm .form-item .e-ddl,
.payroll-page #TransactionForm .e-label-position-top .e-input-group,
.payroll-page #TransactionForm .e-label-position-top .e-control-wrapper,
.payroll-page #TransactionForm .e-label-position-top .e-ddl,
.payroll-page .payroll-stl-form .form-item .e-input-group,
.payroll-page .payroll-stl-form .form-item .e-control-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.payroll-page #PayrollForm .e-input-group,
.payroll-page #PayrollForm .e-control-wrapper:not(.e-upload),
.payroll-page #PayrollForm .e-ddl.e-input-group,
.payroll-page #TransactionForm .e-input-group,
.payroll-page #TransactionForm .e-control-wrapper:not(.e-upload),
.payroll-page #TransactionForm .e-ddl.e-input-group {
    min-height: 2.5rem;
    border-radius: var(--radius-sm, 6px);
}

.payroll-page .address-textbox,
.payroll-page .address-textbox.e-multi-line-input,
.payroll-page .form-item .address-textbox textarea,
.payroll-page textarea.address-textbox {
    min-height: 5rem !important;
    height: 5rem !important;
    resize: vertical;
}

.payroll-page #PayrollForm .hrm-panel__footer,
.payroll-page #TransactionForm .hrm-panel__footer,
.payroll-page .payroll-stl-card .hrm-panel__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3);
    width: 100% !important;
    max-width: none !important;
    margin: var(--space-2) 0 0;
    padding: var(--space-4) 0 0;
    border-top: 1px solid var(--border);
}

.payroll-page #PayrollForm .hrm-panel__footer .e-btn,
.payroll-page #TransactionForm .hrm-panel__footer .e-btn,
.payroll-page .payroll-stl-card .hrm-panel__footer .e-btn {
    min-width: 7rem;
}

.payroll-page .hrm-note {
    max-width: none;
    margin-top: var(--space-4);
    margin-bottom: 0;
}

.payroll-page .payroll-payslip-card .hrm-grid-card {
    margin-top: var(--space-5);
}

/* Salary Transfer Letter — 2 equal fields */
.payroll-page .payroll-stl-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
    row-gap: 1.125rem;
    width: 100%;
}

.payroll-page .payroll-stl-form .form-item--full {
    grid-column: 1 / -1;
}

.payroll-page .payroll-stl-employee {
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 6px);
    background: var(--surface-subtle, #f7f7f8);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.payroll-page .payroll-stl-employee--empty {
    color: var(--text-secondary);
}

.payroll-page .payroll-field-hint {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary);
}

@media (max-width: 1199.98px) {
    .payroll-page #PayrollForm .e-form-group .e-form-layout:has(> :nth-child(3):last-child),
    .payroll-page #TransactionForm .e-form-group .e-form-layout:has(> :nth-child(3):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    .payroll-page #PayrollForm .e-form-group .e-form-layout,
    .payroll-page #TransactionForm .e-form-group .e-form-layout,
    .payroll-page #PayrollForm .e-form-group .e-form-layout:has(> :nth-child(3):last-child),
    .payroll-page #TransactionForm .e-form-group .e-form-layout:has(> :nth-child(3):last-child),
    .payroll-page .payroll-stl-form {
        grid-template-columns: 1fr !important;
        column-gap: 0 !important;
    }
}

/* Employee — list toolbar + responsive grid */
.employee-page .employee-list-card {
    padding: var(--space-4) var(--space-5) var(--space-5);
    min-width: 0;
    overflow: hidden;
}

.employee-page .employee-list-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
    padding: 0;
}

.employee-page .employee-list-toolbar__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

/* Keep readable columns; scroll horizontally on narrow viewports */
.employee-page .employee-list-grid-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.employee-page .employee-list-grid.e-grid {
    width: 100% !important;
    min-width: 980px;
}

.employee-page .employee-docs-grid.e-grid {
    width: 100% !important;
    min-width: 820px;
}

.employee-page .employee-list-grid .e-headercell,
.employee-page .employee-list-grid .e-rowcell,
.employee-page .employee-docs-grid .e-headercell,
.employee-page .employee-docs-grid .e-rowcell {
    white-space: nowrap !important;
}

.employee-page .employee-list-grid .e-headercelldiv,
.employee-page .employee-docs-grid .e-headercelldiv {
    white-space: nowrap !important;
}

.employee-page .hrm-tabs.e-tab .e-tab-header {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
    .employee-page .employee-list-card {
        padding: var(--space-3) var(--space-3) var(--space-4);
    }

    .employee-page .employee-list-grid.e-grid {
        min-width: 900px;
        height: calc(100vh - 260px) !important;
    }

    .employee-page .employee-list-grid .e-gridpager {
        overflow-x: auto;
    }
}

/* Employee — details / docs cards nest panels; avoid double padding bloat */
.employee-page .employee-details-card,
.employee-page .employee-docs-card {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.employee-page .employee-details-card .hrm-panel,
.employee-page .employee-docs-card .hrm-panel {
    margin-bottom: 0;
}

.employee-page .employee-docs-card .hrm-grid-card {
    margin-top: var(--space-5);
}

/* Employee — section titles */
.employee-page .e-group-title {
    margin: 0 0 var(--space-4) 0 !important;
    padding: 0 0 var(--space-3) 0 !important;
    border-bottom: 1px solid var(--border);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.employee-page #MyForm .e-form-group,
.employee-page #DocumentForm .e-form-group,
.employee-page #employee-document-group.e-form-group {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 var(--space-6) 0 !important;
    padding: 0;
}

.employee-page #MyForm .e-form-group:last-of-type,
.employee-page #DocumentForm .e-form-group,
.employee-page #employee-document-group.e-form-group {
    margin-bottom: 0 !important;
}

/*
  Syncfusion emits one .e-form-layout per field-row.
  Adapt columns to child count: 3 → compact row, 2 → wide fields, 1 → full width.
*/
.employee-page #MyForm .e-form-group .e-form-layout,
.employee-page #DocumentForm .e-form-group .e-form-layout,
.employee-page #employee-document-group.e-form-group .e-form-layout {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 1.25rem !important;
    row-gap: 1.125rem !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 1.125rem 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Exactly 3 fields in the Syncfusion row → 3 equal columns */
.employee-page #MyForm .e-form-group .e-form-layout:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.employee-page #MyForm .e-form-group .e-form-layout:last-child,
.employee-page #DocumentForm .e-form-group .e-form-layout:last-child,
.employee-page #employee-document-group.e-form-group .e-form-layout:last-child {
    margin-bottom: 0 !important;
}

.employee-page #MyForm .e-form-group .e-form-layout > .e-label-position-top,
.employee-page #MyForm .e-form-group .e-form-layout > [class*="e-colspan"],
.employee-page #DocumentForm .e-form-group .e-form-layout > .e-label-position-top,
.employee-page #DocumentForm .e-form-group .e-form-layout > [class*="e-colspan"],
.employee-page #employee-document-group.e-form-group .e-form-layout > .e-label-position-top,
.employee-page #employee-document-group.e-form-group .e-form-layout > [class*="e-colspan"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: auto !important;
}

/* Kill Syncfusion inline width % so cells match the grid track exactly */
.employee-page #MyForm .e-form-group .e-form-layout > [style*="width"],
.employee-page #DocumentForm .e-form-group .e-form-layout > [style*="width"],
.employee-page #employee-document-group.e-form-group .e-form-layout > [style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
}

/* Full-width rows (Address, Active, Upload, long text) */
.employee-page #MyForm .e-form-group .e-form-layout > .e-colspan-12,
.employee-page #DocumentForm .e-form-group .e-form-layout > .e-colspan-12,
.employee-page #employee-document-group.e-form-group .e-form-layout > .e-colspan-12,
.employee-page #MyForm .e-form-group .e-form-layout > :has(.form-item--full),
.employee-page #DocumentForm .e-form-group .e-form-layout > :has(.form-item--full),
.employee-page #employee-document-group.e-form-group .e-form-layout > :has(.form-item--full),
.employee-page #MyForm .e-form-group .e-form-layout:has(> :only-child) > *,
.employee-page #DocumentForm .e-form-group .e-form-layout:has(> :only-child) > *,
.employee-page #employee-document-group.e-form-group .e-form-layout:has(> :only-child) > * {
    grid-column: 1 / -1 !important;
}

.employee-page #MyForm .form-item,
.employee-page #DocumentForm .form-item,
.employee-page #MyForm .e-label-position-top,
.employee-page #DocumentForm .e-label-position-top {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    height: auto !important;
    align-self: stretch;
}

.employee-page #MyForm .form-item .e-form-label,
.employee-page #DocumentForm .form-item .e-form-label,
.employee-page #MyForm .e-label-position-top > .e-form-label,
.employee-page #DocumentForm .e-label-position-top > .e-form-label,
.employee-page #MyForm .e-form-label,
.employee-page #DocumentForm .e-form-label {
    margin: 0 !important;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    line-height: 1.3;
}

.employee-page #MyForm .form-item .e-input-group,
.employee-page #MyForm .form-item .e-control-wrapper,
.employee-page #MyForm .form-item .e-ddl,
.employee-page #MyForm .form-item .e-upload,
.employee-page #MyForm .e-label-position-top .e-input-group,
.employee-page #MyForm .e-label-position-top .e-control-wrapper,
.employee-page #MyForm .e-label-position-top .e-ddl,
.employee-page #DocumentForm .form-item .e-input-group,
.employee-page #DocumentForm .form-item .e-control-wrapper,
.employee-page #DocumentForm .form-item .e-ddl,
.employee-page #DocumentForm .form-item .e-upload,
.employee-page #DocumentForm .e-label-position-top .e-input-group,
.employee-page #DocumentForm .e-label-position-top .e-control-wrapper,
.employee-page #DocumentForm .e-label-position-top .e-ddl {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.employee-page #MyForm .e-input-group,
.employee-page #MyForm .e-control-wrapper:not(.e-upload),
.employee-page #MyForm .e-ddl.e-input-group,
.employee-page #DocumentForm .e-input-group,
.employee-page #DocumentForm .e-control-wrapper:not(.e-upload),
.employee-page #DocumentForm .e-ddl.e-input-group {
    min-height: 2.5rem;
    border-radius: var(--radius-sm, 6px);
}

.employee-page .address-textbox,
.employee-page .address-textbox.e-multi-line-input,
.employee-page .form-item .address-textbox textarea,
.employee-page textarea.address-textbox {
    min-height: 5rem !important;
    height: 5rem !important;
    resize: vertical;
}

/* Compact upload dropzone */
.employee-page .employee-upload-field .uploadBox.e-upload,
.employee-page .employee-upload-field .e-upload {
    width: 100% !important;
    min-height: 0 !important;
}

.employee-page .employee-upload-field .e-upload .e-file-select-wrap {
    padding: 0.85rem 1.1rem !important;
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: var(--radius-sm, 6px);
}

/* Footer spans full form width — buttons sit with the fields */
.employee-page .employee-page-toolbar,
.employee-page #DocumentForm .hrm-panel__footer,
.employee-page .employee-details-panel .hrm-panel__footer,
.employee-page .employee-docs-card .hrm-panel__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3);
    width: 100% !important;
    max-width: none !important;
    margin: var(--space-2) 0 0;
    padding: var(--space-4) 0 0;
    border-top: 1px solid var(--border);
}

.employee-page .employee-page-toolbar .e-btn,
.employee-page #DocumentForm .hrm-panel__footer .e-btn,
.employee-page .employee-details-panel .hrm-panel__footer .e-btn,
.employee-page .employee-docs-card .hrm-panel__footer .e-btn {
    min-width: 7rem;
}

/* Tablet: keep 2-col; drop compact 3-col so labels don't wrap awkwardly */
@media (max-width: 1199.98px) {
    .employee-page #MyForm .e-form-group .e-form-layout:has(> :nth-child(3):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    .employee-page #MyForm .e-form-group .e-form-layout,
    .employee-page #DocumentForm .e-form-group .e-form-layout,
    .employee-page #employee-document-group.e-form-group .e-form-layout,
    .employee-page #MyForm .e-form-group .e-form-layout:has(> :nth-child(3):last-child) {
        grid-template-columns: 1fr !important;
        column-gap: 0 !important;
    }
}

/* Leave — panels + mixed 3/2-column form grids */
.leave-page .leave-page-card {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.leave-page .leave-app-panel,
.leave-page .leave-summary-panel {
    height: 100%;
    margin-bottom: 0;
}

.leave-page .leave-app-panel .hrm-panel__body,
.leave-page .leave-summary-panel .hrm-panel__body {
    padding: var(--space-5);
}

.leave-page #LeaveForm .e-form-group {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0;
}

.leave-page #LeaveForm .e-form-group .e-form-layout {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 1.25rem !important;
    row-gap: 1.125rem !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 1.125rem 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.leave-page #LeaveForm .e-form-group .e-form-layout:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.leave-page #LeaveForm .e-form-group .e-form-layout:last-child {
    margin-bottom: 0 !important;
}

.leave-page #LeaveForm .e-form-group .e-form-layout > .e-label-position-top,
.leave-page #LeaveForm .e-form-group .e-form-layout > [class*="e-colspan"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: auto !important;
}

.leave-page #LeaveForm .e-form-group .e-form-layout > [style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
}

.leave-page #LeaveForm .e-form-group .e-form-layout > .e-colspan-12,
.leave-page #LeaveForm .e-form-group .e-form-layout > :has(.form-item--full),
.leave-page #LeaveForm .e-form-group .e-form-layout:has(> :only-child) > * {
    grid-column: 1 / -1 !important;
}

.leave-page #LeaveForm .form-item,
.leave-page #LeaveForm .e-label-position-top {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    height: auto !important;
    align-self: stretch;
}

.leave-page #LeaveForm .form-item .e-form-label,
.leave-page #LeaveForm .e-label-position-top > .e-form-label,
.leave-page #LeaveForm .e-form-label,
.leave-page .leave-summary-year .e-form-label {
    margin: 0 !important;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    line-height: 1.3;
}

.leave-page #LeaveForm .form-item .e-input-group,
.leave-page #LeaveForm .form-item .e-control-wrapper,
.leave-page #LeaveForm .form-item .e-ddl,
.leave-page #LeaveForm .form-item .e-upload,
.leave-page #LeaveForm .e-label-position-top .e-input-group,
.leave-page #LeaveForm .e-label-position-top .e-control-wrapper,
.leave-page #LeaveForm .e-label-position-top .e-ddl {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.leave-page #LeaveForm .e-input-group,
.leave-page #LeaveForm .e-control-wrapper:not(.e-upload),
.leave-page #LeaveForm .e-ddl.e-input-group {
    min-height: 2.5rem;
    border-radius: var(--radius-sm, 6px);
}

.leave-page .address-textbox,
.leave-page .address-textbox.e-multi-line-input,
.leave-page .form-item .address-textbox textarea {
    min-height: 5rem !important;
    height: 5rem !important;
    resize: vertical;
}

.leave-page .leave-upload-field .uploadBox.e-upload,
.leave-page .leave-upload-field .e-upload {
    width: 100% !important;
    min-height: 0 !important;
}

.leave-page .leave-upload-field .e-upload .e-file-select-wrap {
    padding: 0.85rem 1.1rem !important;
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: var(--radius-sm, 6px);
}

.leave-page #LeaveForm .hrm-panel__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3);
    width: 100% !important;
    max-width: none !important;
    margin: var(--space-2) 0 0;
    padding: var(--space-4) 0 0;
    border-top: 1px solid var(--border);
}

.leave-page #LeaveForm .hrm-panel__footer .e-btn {
    min-width: 7rem;
}

.leave-page .leave-summary-year {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0 0 var(--space-4) 0;
    max-width: 10rem;
}

.leave-page .leave-form-col,
.leave-page .leave-summary-col {
    min-width: 0;
}

.leave-page .leave-summary-panel .hrm-panel__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Fit summary grid inside panel — no clipped first column */
.leave-page .leave-summary-grid-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.leave-page .leave-summary-grid.e-grid,
.leave-page .leave-summary-panel .leave-summary-grid {
    width: 100% !important;
    max-width: 100% !important;
}

.leave-page .leave-summary-grid .e-gridheader,
.leave-page .leave-summary-grid .e-gridcontent,
.leave-page .leave-summary-grid .e-content {
    width: 100% !important;
}

.leave-page .leave-summary-grid .e-gridheader table,
.leave-page .leave-summary-grid .e-gridcontent table {
    width: 100% !important;
    table-layout: fixed !important;
}

.leave-page .leave-summary-grid .e-headercell,
.leave-page .leave-summary-grid .e-rowcell {
    white-space: normal !important;
    word-break: break-word;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.leave-page .leave-summary-grid .e-headercelldiv {
    white-space: normal !important;
    line-height: 1.25;
}

.leave-page .leave-history-grid-wrap {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.leave-page .leave-history-grid.e-grid {
    width: 100% !important;
    min-width: 720px;
}

.leave-page .leave-note.hrm-note,
.leave-page .hrm-note.leave-note {
    margin-top: var(--space-4);
    margin-bottom: 0;
}

.leave-page .leave-history-card {
    margin-top: var(--space-5);
}

/* Below xl: stack form + summary full width so tables stay readable */
@media (max-width: 1199.98px) {
    .leave-page #LeaveForm .e-form-group .e-form-layout:has(> :nth-child(3):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .leave-page .leave-form-col,
    .leave-page .leave-summary-col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .leave-page .leave-history-grid.e-grid {
        min-width: 640px;
    }
}

@media (max-width: 767.98px) {
    .leave-page #LeaveForm .e-form-group .e-form-layout,
    .leave-page #LeaveForm .e-form-group .e-form-layout:has(> :nth-child(3):last-child) {
        grid-template-columns: 1fr !important;
        column-gap: 0 !important;
    }

    .leave-page .leave-app-panel .hrm-panel__body,
    .leave-page .leave-summary-panel .hrm-panel__body,
    .leave-page .leave-history-card .hrm-panel__body {
        padding: var(--space-4);
    }

    .leave-page .leave-history-grid.e-grid {
        min-width: 560px;
    }
}

/* Inbox status badges */
.inbox-page .status-badge--inbox {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    justify-content: center;
}

@media (max-width: 767.98px) {
    .hrm-panel__header,
    .hrm-panel__body {
        padding: var(--space-4);
    }

    .hrm-panel__footer {
        flex-direction: column;
    }

    .hrm-panel__footer .e-btn,
    .employee-page .employee-page-toolbar .e-btn {
        width: 100%;
        min-width: 0;
    }
}