/* Staff layout adapter for skills/modern-admin-skin. */
body.design-modern .app-shell { height: 100dvh !important; }
body.design-modern .app-body, body.design-modern .main-col { min-height: 0; }
body.design-modern #sidebarOffcanvas { flex-shrink: 0; }
body.design-modern .user-menu { max-width: calc(100vw - 2rem); }
body.design-modern .user-menu .user-identity { overflow-wrap: anywhere; }
body.design-modern .page-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
body.design-modern .page-heading .rc-page-title { margin: 0; }
body.design-modern .page-count { font-size: 1rem; font-weight: 500; color: var(--rc-text-3); vertical-align: middle; margin-left: .4rem; }
body.design-modern .filter-bar { padding: 1rem; border-bottom: 1px solid var(--rc-border); background: var(--rc-surface-2); border-radius: var(--rc-radius-lg) var(--rc-radius-lg) 0 0; }
body.design-modern .filter-bar .form-control, body.design-modern .filter-bar .form-select { background-color: var(--rc-surface); }
body.design-modern .entity-name { color: var(--rc-text); font-weight: 600; text-decoration: none; }
body.design-modern .entity-name:hover { color: var(--rc-primary); }
body.design-modern .entity-meta { margin-top: .3rem; font-size: .8125rem; color: var(--rc-text-2); }
body.design-modern .record-id { white-space: nowrap; font-variant-numeric: tabular-nums; }
body.design-modern .empty-state { padding: 3rem 1rem; text-align: center; color: var(--rc-text-2); }
body.design-modern .empty-state > .bi { display: block; font-size: 1.75rem; color: var(--rc-text-3); margin-bottom: .75rem; }
body.design-modern .batch-table { min-width: 760px; }
body.design-modern .batch-table .salary-input { min-width: 130px; max-width: 170px; }
body.design-modern .batch-table textarea { min-width: 250px; }
body.design-modern .theme-opt:focus-visible, body.design-modern .avatar-btn:focus-visible, body.design-modern .js-copy-id:focus-visible { outline: 2px solid var(--rc-primary); outline-offset: 3px; }
@media (max-width: 767.98px) {
    body.design-modern main.container-fluid { margin: 0 .5rem .5rem; padding: 1.1rem; }
    body.design-modern .rc-page-title { font-size: 1.7rem; }
    body.design-modern .page-heading { gap: .75rem; }
    body.design-modern .page-heading > .btn { width: 100%; }
    body.design-modern .filter-bar { padding: .85rem; }
}
body.design-modern .pagination {
    --bs-pagination-bg: var(--rc-surface);
    --bs-pagination-color: var(--rc-primary);
    --bs-pagination-border-color: var(--rc-border);
    --bs-pagination-hover-bg: var(--rc-surface-3);
    --bs-pagination-hover-color: var(--rc-text);
    --bs-pagination-hover-border-color: var(--rc-border);
    --bs-pagination-focus-bg: var(--rc-surface-3);
    --bs-pagination-focus-color: var(--rc-text);
    --bs-pagination-disabled-bg: var(--rc-surface-2);
    --bs-pagination-disabled-color: var(--rc-text-3);
    --bs-pagination-disabled-border-color: var(--rc-border);
}
/* Menu proportions from the owner's 2x Retina reference (2026-09-15). */
body.design-modern #sidebarOffcanvas .offcanvas-body { padding: 12px 7px 16px; }
body.design-modern #sidebarOffcanvas .nav.flex-column { gap: 0; }
body.design-modern #sidebarOffcanvas .nav:not(.nav-tabs) .nav-link {
    min-height: 37px;
    padding: 8px 15px;
    font-size: 14px;
    line-height: 21px;
    gap: 16px !important;
    border-radius: 10px;
    color: var(--rc-text) !important;
}
body.design-modern #sidebarOffcanvas .nav-link i {
    width: 16px;
    font-size: 16px;
    line-height: 21px;
}
/* Service identity: shared mark in the header, mobile navigation and login. */
body.design-modern .staff-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.035em;
}
body.design-modern .staff-brand img { width: 32px; height: 32px; flex: none; }
body.design-modern .login-logo.staff-brand { display: flex; justify-content: center; font-size: 30px; margin-bottom: 1rem; }
body.design-modern .login-logo.staff-brand img { width: 42px; height: 42px; }

/* Shared spacing and typography for staff directory lists. */
body.design-modern .staff-directory-table > :not(caption) > * > * {
    padding: .75rem 1rem;
    vertical-align: middle;
}
body.design-modern .staff-directory-table .entity-name { font-size: inherit; line-height: 1.5; }

/* Company selection mirrors WebPanelAIGen's sidebar application selector. */
body.design-modern .company-switcher { padding: 0 8px; }
body.design-modern .company-switcher-label { display:block; color:var(--rc-text-2); font-size:12px; margin:0 0 6px; }
body.design-modern .company-switcher-button { display:flex; align-items:center; gap:9px; min-height:40px; padding:8px 10px; color:var(--rc-text); background:var(--rc-surface); border:1px solid var(--rc-border); text-align:left; }
body.design-modern .company-mark { width:22px; height:22px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:5px; background:var(--rc-primary-tint); color:var(--rc-primary); font-size:12px; font-weight:600; object-fit:cover; }
body.design-modern .company-switcher-menu { min-width:0; max-height:340px; overflow-y:auto; }
body.design-modern .company-switcher-menu .dropdown-item { font-size:14px; }
body.design-modern .company-settings-card { max-width:680px; }

/* Spreadsheet-style employee roster; editors stay inside their original cells. */
body.design-modern .employee-sheet { min-width:1040px; }
body.design-modern .employee-sheet th { white-space:nowrap; }
body.design-modern .employee-sheet td:first-child { min-width:210px; }
body.design-modern .employee-sheet td:nth-child(2) { min-width:140px; max-width:200px; }
body.design-modern .employee-sheet td:nth-child(4) { min-width:135px; }
body.design-modern .employee-sheet td:nth-child(5) { min-width:115px; }
body.design-modern .employee-cell-button { display:block; width:100%; padding:.25rem; border:0; border-radius:var(--rc-radius,8px); text-align:left; color:inherit; background:transparent; font:inherit; cursor:text; }
body.design-modern .employee-cell-button:hover { background:var(--rc-surface-3); }
body.design-modern .employee-cell-button:focus-visible { outline:2px solid var(--rc-primary); outline-offset:2px; }
body.design-modern .employee-name-en { display:block; font-weight:600; }
body.design-modern .employee-name-ru { display:block; margin-top:.2rem; font-size:.85em; color:var(--rc-text-2); }
body.design-modern .employee-sheet [data-edit-field] { position:relative; }
body.design-modern .employee-inline-form { position:absolute; z-index:2; margin:0; padding:.25rem; box-sizing:border-box; border:0; background:var(--rc-surface-2); border-radius:var(--rc-radius,8px); line-height:inherit; }
body.design-modern .employee-inline-input { display:block; width:100%; min-width:0; margin:0; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; color:inherit; font:inherit; line-height:inherit; outline:none; }
body.design-modern .employee-inline-input:focus { box-shadow:0 1px 0 var(--rc-primary); }
body.design-modern .employee-inline-form > .employee-name-en { font-weight:600; }
body.design-modern .employee-inline-form .employee-inline-ru { display:flex; gap:.3em; font-size:.85em; color:var(--rc-text-2); margin-top:.2rem; }
body.design-modern .employee-inline-input::placeholder { color:var(--rc-text-3); opacity:.7; }
body.design-modern .employee-inline-select { height:100%; appearance:none; cursor:pointer; }
body.design-modern .employee-inline-select.badge { width:auto; max-width:100%; height:auto; display:inline-block; font-size:.75em; font-weight:700; line-height:1; padding:.35em .65em; border-radius:var(--bs-border-radius); }
body.design-modern .employee-inline-select option { background:var(--rc-surface); color:var(--rc-text); }
body.design-modern .employee-inline-form.is-invalid { outline:1px solid var(--bs-danger); }
body.design-modern #employee-edit-message:empty { display:none; }
body.design-modern #employee-edit-message:not(:empty) { position:fixed; right:1.5rem; bottom:1.5rem; z-index:1080; max-width:min(420px,90vw); padding:.75rem 1rem !important; border:1px solid var(--rc-border); border-radius:var(--rc-radius,8px); background:var(--rc-surface); box-shadow:0 4px 16px #0002; }
body.design-modern .employee-sort-link { display:inline-flex; align-items:center; gap:.4rem; color:inherit; text-decoration:none; }
body.design-modern .employee-sort-link:hover { color:var(--rc-primary); }
body.design-modern .employee-sort-link .bi { font-size:.8em; opacity:.65; }

body.design-modern .employee-sheet td.employee-date { font-size:.85em; color:var(--rc-text-3); }

/* Payment details: progressively enhanced three-step form. */
body.design-modern .payment-wizard { max-width:960px; }
body.design-modern .payment-wizard .card-body { padding:2rem; }
body.design-modern .payment-steps { display:flex; gap:1rem; padding-bottom:1.8rem; margin-bottom:1.8rem; border-bottom:1px solid var(--rc-border); }
body.design-modern .payment-steps button { display:flex; align-items:center; gap:.6rem; padding:0; border:0; background:none; color:var(--rc-text-3); font:inherit; }
body.design-modern .payment-steps button span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--rc-surface-3); font-size:.85rem; }
body.design-modern .payment-steps button[aria-current] { color:var(--rc-text); font-weight:600; }
body.design-modern .payment-steps button[aria-current] span { background:var(--rc-primary); color:#fff; }
body.design-modern .payment-steps button.is-complete { color:var(--rc-primary); }
body.design-modern .payment-methods { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1.5rem 0; }
body.design-modern .payment-method { display:flex; flex-direction:column; align-items:flex-start; position:relative; gap:.4rem; padding:1.4rem; border:1px solid var(--rc-border); border-radius:var(--rc-radius-lg,12px); color:var(--rc-text); background:var(--rc-surface); text-align:left; font:inherit; transition:border-color .15s,background .15s; }
body.design-modern .payment-method:hover { background:var(--rc-surface-2); }
body.design-modern .payment-method[aria-pressed="true"] { border-color:var(--rc-primary); box-shadow:0 0 0 1px var(--rc-primary); background:var(--rc-primary-tint); }
body.design-modern .payment-method-logo { height:48px; display:flex; align-items:center; margin-bottom:.5rem; }
body.design-modern .payment-method-logo img { width:116px; height:36px; object-fit:contain; background:#fff; padding:5px 8px; border-radius:6px; }
body.design-modern .payment-method-logo .bi { font-size:2rem; color:var(--rc-primary); }
body.design-modern .payment-method-check { position:absolute; top:1.2rem; right:1.2rem; color:var(--rc-primary); visibility:hidden; }
body.design-modern .payment-method[aria-pressed="true"] .payment-method-check { visibility:visible; }
body.design-modern .payment-step-heading { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:1.2rem; }
body.design-modern .payment-review { display:grid; grid-template-columns:minmax(140px,1fr) 2fr; gap:.7rem 1.5rem; padding:1.3rem; background:var(--rc-surface-2); border-radius:var(--rc-radius); margin:1.5rem 0; }
body.design-modern .payment-review dt { color:var(--rc-text-2); font-weight:400; }
body.design-modern .payment-review dd { margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }
body.design-modern .payment-wizard-actions { display:flex; align-items:center; gap:.6rem; padding-top:1.5rem; margin-top:1.5rem; border-top:1px solid var(--rc-border); }
body.design-modern .payment-wizard-spacer { flex:1; }
body.design-modern .payment-wizard [hidden] { display:none !important; }
body.design-modern .payment-wizard button:focus-visible { outline:2px solid var(--rc-primary); outline-offset:3px; }
@media(max-width:575px) {
 body.design-modern .payment-wizard .card-body { padding:1rem; }
 body.design-modern .payment-steps { gap:.8rem; font-size:.85rem; }
 body.design-modern .payment-steps button { gap:.35rem; }
 body.design-modern .payment-methods { grid-template-columns:1fr; }
 body.design-modern .payment-review { grid-template-columns:1fr; gap:.2rem; }
 body.design-modern .payment-review dd { margin-bottom:.7rem; }
 body.design-modern .payment-wizard-actions { flex-wrap:wrap; }
}

/* Employee overview: compact groups instead of a long label/value table. */
body.design-modern .employee-overview .card-body { padding:1.5rem; }
body.design-modern .employee-overview-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding-bottom:1.25rem; margin-bottom:1.25rem; border-bottom:1px solid var(--rc-border); }
body.design-modern .employee-overview-name { font-size:1.2rem; font-weight:600; overflow-wrap:anywhere; }
body.design-modern .employee-overview-state { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.65rem; }
body.design-modern .employee-overview-actions { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
body.design-modern .employee-overview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; }
body.design-modern .employee-overview-grid h2 { display:flex; align-items:center; gap:.5rem; margin:0 0 1.1rem; font-size:.9rem; font-weight:600; color:var(--rc-text-2); }
body.design-modern .employee-overview-grid h2 .bi { font-size:.95rem; color:var(--rc-text-3); }
body.design-modern .employee-overview-grid dl { margin:0; display:grid; gap:1rem; }
body.design-modern .employee-overview-grid dt { margin:0 0 .3rem; font-size:.8rem; line-height:1.35; color:var(--rc-text-3); font-weight:400; }
body.design-modern .employee-overview-grid dd { margin:0; font-size:.95rem; line-height:1.45; color:var(--rc-text); overflow-wrap:anywhere; }
body.design-modern .employee-overview-grid dd.is-empty { color:var(--rc-text-3); }
body.design-modern .employee-overview-grid dd.employee-overview-date { color:var(--rc-text-2); font-size:.9rem; }
@media(max-width:767px) {
 body.design-modern .employee-overview-heading { flex-direction:column; }
 body.design-modern .employee-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }
}
@media(max-width:420px) {
 body.design-modern .employee-overview-grid { grid-template-columns:1fr; }
 body.design-modern .employee-overview .card-body { padding:1.1rem; }
}

body.design-modern .employee-icon-action { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; flex-shrink:0; }
body.design-modern .employee-icon-action .bi { font-size:1rem; line-height:1; }
body.design-modern .employee-icon-action:focus-visible { outline:2px solid var(--rc-primary); outline-offset:3px; }
body.design-modern .employee-payment-method { display:flex; align-items:center; gap:.85rem; }
body.design-modern .employee-payment-mark { display:flex; align-items:center; justify-content:center; width:88px; height:40px; border-radius:var(--rc-radius,8px); flex-shrink:0; background:var(--rc-surface-2); }
body.design-modern .employee-payment-mark img { width:80px; height:28px; padding:3px 5px; object-fit:contain; border-radius:5px; background:#fff; }
body.design-modern .employee-payment-mark .bi { font-size:1.35rem; color:var(--rc-text-2); }

body.design-modern .employee-salary-cell { display:flex; align-items:center; gap:.65rem; }
body.design-modern .employee-salary-payment { display:inline-flex; align-items:center; justify-content:center; flex:none; width:48px; height:24px; color:var(--rc-text-2); }
body.design-modern .employee-salary-payment img { width:48px; height:24px; object-fit:contain; padding:2px 3px; border-radius:4px; background:#fff; }
body.design-modern .employee-salary-payment .bi { font-size:1.2rem; }

body.design-modern .crypto-token-logos { display:inline-flex; align-items:center; justify-content:center; flex:none; color:inherit; }
body.design-modern .crypto-usdt-mark { display:block; width:24px; height:24px; }
body.design-modern .payment-method-logo .crypto-token-logos { color:var(--rc-primary); }
body.design-modern .payment-method-logo .crypto-usdt-mark { width:32px; height:32px; }
body.design-modern .employee-payment-mark .crypto-token-logos { color:var(--rc-text-2); }

body.design-modern .employee-sheet > :not(caption) > * > * { padding:.5rem .7rem; }

body.design-modern .employee-sheet-resizable { table-layout:fixed; min-width:0; }
body.design-modern .employee-sheet-resizable th { position:relative; padding-right:1.1rem; }
body.design-modern .employee-sheet-resizable td { min-width:0 !important; max-width:none !important; overflow:hidden; text-overflow:ellipsis; }
body.design-modern .employee-sheet-resizable .employee-sort-link { display:flex; min-width:0; overflow:hidden; }
body.design-modern .employee-sheet-resizable .employee-name-en,
body.design-modern .employee-sheet-resizable .employee-name-ru { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.design-modern .employee-column-resizer { position:absolute; top:0; bottom:0; right:0; width:9px; cursor:col-resize; touch-action:none; z-index:3; }
body.design-modern .employee-column-resizer::after { content:""; position:absolute; top:22%; bottom:22%; left:4px; width:1px; background:var(--rc-border); }
body.design-modern .employee-column-resizer:hover::after,
body.design-modern .employee-column-resizer:focus-visible::after { width:2px; background:var(--rc-primary); }
body.design-modern .employee-column-resizer:focus-visible { outline:1px solid var(--rc-primary); }
body.employee-columns-dragging, body.employee-columns-dragging * { cursor:col-resize !important; user-select:none !important; }

body.design-modern aside .sidebar-system-divider { border-top:1px solid var(--rc-border-2); margin:1rem .75rem; }

body.design-modern .employee-schedule-badge { display:inline-flex; flex:none; align-items:center; justify-content:center; width:28px; height:24px; padding:0; border-radius:5px; background:var(--rc-surface-3); color:var(--rc-text-2); font-size:.9rem; line-height:1.35; font-weight:500; white-space:nowrap; }
body.design-modern .employee-schedule-badge:focus-visible { outline:2px solid var(--rc-primary); outline-offset:2px; }

body.design-modern .employee-sheet td.employee-detail-cell,
body.design-modern .employee-sheet td.employee-detail-cell .employee-cell-button { font-size:.80rem; }