/*
 * CRS-01 restyle stage R3-C (2026-10-26): access, users, sign-in and matrix screens.
 * Loaded after aai-o2.css (see _Layout); everything is scoped to body.aai-o2. The form pattern (form.aai-r3-form > section.card.aai-r3-card + .aai-r3-footer)
 * is the shared one in aai-o2.css; this file only adds what the access / user / matrix screens need on top of it.
 * A conditional field is ONE wrapper (a .col-* with the id the script hides, d-none) so label, control, hint and message hide together.
 */

/* Style.css still carries the legacy dashboard ".card" (inline-block, 83 % wide, 22 px radius, floated header with a 36 px icon): neutralise it for the Bootstrap 5 cards of the new forms and matrices */
body.aai-o2 .card.aai-r3-card { display: flex; flex-direction: column; position: relative; width: auto; min-width: 0; margin: 0; border-radius: var(--aai-radius-card); box-shadow: var(--aai-shadow-card); color: var(--aai-text-body); }
body.aai-o2 .card.aai-r3-card > .card-header { float: none; margin: 0; text-align: left; border-radius: var(--aai-radius-card) var(--aai-radius-card) 0 0; }
body.aai-o2 .card.aai-r3-card > .card-header i { font-size: 16px; line-height: 1; width: auto; height: auto; color: inherit; }
body.aai-o2 .card.aai-r3-card > .card-body { text-align: left; }
body.aai-o2 .aai-r3-ico i { display: inline-block; }

/* check box on the baseline of the neighbouring text boxes: put it in a column with .align-self-end */
body.aai-o2 .aai-r3-card .aai-fld-check { display: flex; align-items: center; gap: 8px; min-height: var(--aai-ctl-h); margin: 0; }
body.aai-o2 .aai-r3-card .aai-fld-check .k-checkbox-label { margin: 0; font-weight: 500; color: var(--aai-text); }
body.aai-o2 .aai-r3-footer .k-checkbox-label { margin: 0 0 0 4px; font-weight: 500; color: var(--aai-text); }
body.aai-o2 .aai-r3-footer .btn { min-height: var(--aai-ctl-h); padding: 0 18px; border-radius: var(--aai-radius-ctl); font-size: var(--aai-fs-base); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
body.aai-o2 .aai-r3-footer .aai-r3-actions { align-items: center; }
body.aai-o2 .btn.aai-btn-cancel { background: #fff; color: var(--aai-text); border: 1px solid var(--aai-line-ctl); }
body.aai-o2 .btn.aai-btn-cancel:hover { border-color: var(--aai-brand); color: var(--aai-brand); background: var(--aai-surface-alt); }
body.aai-o2 .btn.aai-btn-save { background: var(--aai-brand); color: #fff; border: 1px solid var(--aai-brand); min-width: 104px; }
body.aai-o2 .btn.aai-btn-save:hover { background: var(--aai-brand-hover); border-color: var(--aai-brand-hover); color: #fff; }
body.aai-o2 .aai-r3-card > .card-body.p-0 { padding: 0; }
body.aai-o2 .aai-r3-card .aai-sec-count { font-weight: 600; color: #d32f2f; }
body.aai-o2 .aai-r3-card > .card-header .aai-sec-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---------- page title with a back arrow (hi-fi "aai-add-back-btn") ---------- */
body.aai-o2 #team-efficiency .aai-back { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 8px; color: #64748b; border-radius: 50%; text-decoration: none; vertical-align: middle; }
body.aai-o2 #team-efficiency .aai-back:hover { color: var(--aai-brand); background: var(--aai-brand-soft); }
body.aai-o2 #team-efficiency .aai-back:focus-visible { outline: 2px solid var(--aai-brand); outline-offset: 2px; }

/* ---------- checkbox grid (role permissions) ---------- */
body.aai-o2 .aai-perm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; }
body.aai-o2 .aai-perm-grid > .aai-perm { min-width: 0; display: flex; align-items: center; }
body.aai-o2 .aai-perm-all { margin: 0 0 18px; }
@media (max-width: 991.98px) { body.aai-o2 .aai-perm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { body.aai-o2 .aai-perm-grid { grid-template-columns: 1fr; } }

/* ---------- matrices (Roles, Role Permission) ---------- */
body.aai-o2 .aai-matrix-wrap { overflow-x: auto; }
body.aai-o2 table.aai-matrix { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: var(--aai-fs-base); }
body.aai-o2 table.aai-matrix > thead > tr > th { padding: 10px 12px; background: var(--aai-table-head); color: var(--aai-text); font-weight: 600; font-size: var(--aai-fs-sm); text-align: center; vertical-align: middle; border-bottom: 1px solid var(--aai-line); border-right: 1px solid #fff; white-space: normal; text-transform: none; min-width: 104px; }
body.aai-o2 table.aai-matrix > thead > tr > th:first-child, body.aai-o2 table.aai-matrix > thead > tr > th:nth-child(2) { text-align: left; min-width: 150px; }
body.aai-o2 table.aai-matrix > thead > tr > th.gx-flagcol { background: #e8eaf6; color: var(--aai-brand); }
body.aai-o2 table.aai-matrix > tbody > tr > td { padding: 9px 12px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--aai-line-soft); background: #fff; color: var(--aai-text-body); white-space: nowrap; }
body.aai-o2 table.aai-matrix > tbody > tr > td:first-child { text-align: left; font-weight: 600; color: var(--aai-text); }
body.aai-o2 table.aai-matrix > tbody > tr > td:nth-child(2) { text-align: left; }
body.aai-o2 table.aai-matrix > tbody > tr > td.gx-flagcol { background: #f5f6fc; }
body.aai-o2 table.aai-matrix > tbody > tr:hover > td { background: var(--aai-surface-alt); }
body.aai-o2 table.aai-matrix > tbody > tr:hover > td.gx-flagcol { background: #eef0fa; }
/* the first two columns stay in view while the claim columns scroll */
body.aai-o2 table.aai-matrix > thead > tr > th:first-child, body.aai-o2 table.aai-matrix > tbody > tr > td:first-child { position: sticky; left: 0; z-index: 2; }
body.aai-o2 table.aai-matrix > thead > tr > th:first-child { z-index: 3; }
body.aai-o2 table.aai-matrix input[type="checkbox"]:disabled { opacity: .35; cursor: not-allowed; }
body.aai-o2 table.aai-matrix .k-checkbox:disabled { opacity: .35; }
body.aai-o2 .aai-matrix-foot { display: flex; justify-content: flex-end; padding: 14px 20px 18px; }
body.aai-o2 .aai-matrix-foot .btn, body.aai-o2 .aai-matrix-foot .k-button { min-height: 36px; padding: 0 20px; font-weight: 600; }

/* department selector card above a matrix (hi-fi: white card, label above, 270 px select) */
body.aai-o2 .aai-filter-card { padding: 14px 18px 16px; margin: 0 0 16px; background: #fff; border: 1px solid var(--aai-line); border-radius: var(--aai-radius-card); box-shadow: var(--aai-shadow-card); }
body.aai-o2 .aai-filter-card .aai-fld { max-width: 360px; }

/* two lists and arrow buttons (Organization Hierarchy, Role create, Department-Role mapping) */
body.aai-o2 .aai-transfer { display: flex; align-items: flex-start; gap: 16px; }
body.aai-o2 .aai-transfer > .aai-transfer-list { flex: 1 1 0; min-width: 0; }
body.aai-o2 .aai-transfer > .aai-transfer-btns { flex: 0 0 56px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 48px; }
body.aai-o2 .aai-transfer-btns .btn, body.aai-o2 .aai-transfer-btns .k-button { width: 34px; height: 34px; min-height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
@media (max-width: 767.98px) {
    body.aai-o2 .aai-transfer { flex-direction: column; align-items: stretch; }
    body.aai-o2 .aai-transfer > .aai-transfer-btns { flex-direction: row; flex-basis: auto; padding-top: 0; justify-content: center; }
}

/* ---------- read-only value (view-only forms) ---------- */
body.aai-o2 .aai-fld .form-control[readonly], body.aai-o2 .aai-fld .form-control:disabled { background: var(--aai-surface-alt); color: var(--aai-text-body); }


/* matrix / list-like card head: accent bar + title + red count (hi-fi "list-table-card-head") */
body.aai-o2 .aai-r3-card > .card-header.aai-mx-head { padding: 14px 18px 14px 0; gap: 14px; }
body.aai-o2 .aai-mx-accent { flex: 0 0 4px; width: 4px; height: 20px; border-radius: 0 2px 2px 0; background: #1e293b; }
body.aai-o2 .aai-mx-head .aai-r3-card-title { font-weight: 600; }

/* Department-Role mapping: two lists with a column of arrow buttons between them */
body.aai-o2 .aai-list-label { margin: 0 0 8px; font-size: var(--aai-fs-md); font-weight: 600; color: var(--aai-text); }
body.aai-o2 .aai-transfer > .aai-transfer-btns.aai-transfer-btns--mid { padding-top: 56px; }
body.aai-o2 .aai-transfer-btns .btn-rounded, body.aai-o2 .aai-transfer-btns .k-button.btn-icon { width: 36px; height: 36px; min-height: 36px; min-width: 36px; padding: 0; border-radius: 50%; }
body.aai-o2 .aai-transfer-btns .k-button i { font-size: 14px; line-height: 1; }
/* hierarchy chart canvas: dotted background, the Kendo diagram fills it */
body.aai-o2 .aai-chart-canvas { margin: 0; padding: 8px; background-color: var(--aai-surface-alt); background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 14px 14px; border-radius: 0 0 var(--aai-radius-card) var(--aai-radius-card); }
body.aai-o2 .aai-chart-canvas #empChart, body.aai-o2 .aai-chart-canvas .k-diagram { background: transparent; border-width: 0; min-height: 420px; }


/* ==========================================================================
   R3-C2 (CRS-01 restyle stage R3, agent C2): users, profile, sign-in, lists
   ========================================================================== */
/* a field group or card hidden by a script that reveals it with jQuery .show(): plain display:none (NOT d-none / hidden, which are !important in Bootstrap 5) */
body.aai-o2 .aai-r3-off, body.aai-o2 .card.aai-r3-card.aai-r3-off { display: none; }
/* digital signature preview box (hi-fi dashed box) */
body.aai-o2 .aai-sign-box { display: flex; align-items: center; justify-content: center; min-height: 92px; padding: 8px; border: 1px dashed var(--aai-line); border-radius: var(--aai-radius-ctl); background: #fff; }
body.aai-o2 .aai-sign-box img { max-width: 100%; max-height: 120px; }
body.aai-o2 #txtResponsibilities { resize: none; }
/* message line inside a card (My Profile result of a post; text colour comes from text-success / text-danger) */
body.aai-o2 .aai-r3-msg { margin: 0 0 14px; padding: 9px 14px; border-radius: var(--aai-radius-ctl); border: 1px solid var(--aai-line-soft); background: var(--aai-surface-alt); font-size: var(--aai-fs-base); }
body.aai-o2 .aai-r3-msg--ok { background: #e8f5e9; border-color: #c8e6c9; }
body.aai-o2 .aai-r3-msg--err { background: #fdecea; border-color: #f5c6c2; }
/* information box (password rules, hi-fi "hint-box") */
body.aai-o2 .aai-r3-hintbox { margin: 0; padding: 10px 14px; border: 1px solid #cfe3f5; border-radius: var(--aai-radius-ctl); background: #eef6fd; color: var(--aai-text-body); font-size: var(--aai-fs-base); }
/* My Profile signature forms: file box and button stacked, remove button beside */
body.aai-o2 .aai-sign-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
body.aai-o2 .aai-sign-form .form-control { flex: 1 1 220px; min-width: 0; }
body.aai-o2 .aai-sign-remove { margin-top: 10px; }
body.aai-o2 .aai-r3-form .aai-r3-card .form-check-input { float: none; margin: 0; width: 18px; height: 18px; border: 1px solid var(--aai-line-ctl); }
body.aai-o2 .aai-r3-form .aai-r3-card .form-check-input:checked { background-color: var(--aai-brand); border-color: var(--aai-brand); }
body.aai-o2 .aai-r3-form .aai-r3-card .form-check { display: flex; align-items: center; gap: 8px; min-height: var(--aai-ctl-h); padding-left: 0; margin: 0; }
body.aai-o2 .aai-r3-form .aai-r3-card .form-check .form-check-label { margin: 0; font-weight: 500; color: var(--aai-text); }
body.aai-o2 .aai-r3-card .form-text { color: var(--aai-text-muted); font-size: var(--aai-fs-sm); }
/* Users list filter card: Kendo check boxes on the baseline of the Department select */
body.aai-o2 .aai-r3-filter .aai-fld-check { display: flex; align-items: center; min-height: var(--aai-ctl-h); }
body.aai-o2 .aai-r3-filter .aai-fld-check input.k-checkbox { margin: 0; align-self: center; flex: 0 0 auto; }
body.aai-o2 .aai-r3-filter .aai-fld-check .k-checkbox-label { margin: 0 0 0 8px; font-weight: 500; color: var(--aai-text); line-height: 1.2; display: inline-flex; align-items: center; padding: 0; }
/* footer check box (Create Another) centred with the buttons */
body.aai-o2 .aai-r3-footer input.k-checkbox { margin: 0; align-self: center; }
/* Status column filter cell of the lists (Kendo bool filter: "is true / is false" radios): wrap inside the column instead of being clipped */
body.aai-o2 .k-filtercell[data-field="IsActive"] .k-filtercell-wrapper { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 2px 0; }
body.aai-o2 .k-filtercell[data-field="IsActive"] .k-filtercell-wrapper > label { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: var(--aai-fs-xs); white-space: nowrap; color: var(--aai-text-body); }
body.aai-o2 .k-filtercell[data-field="IsActive"] .k-filtercell-wrapper > label > input[type="radio"] { margin: 0; }
/* Show Filter of the list bar: a check box with its label as in the hi-fi; the rules are in aai-o2-lists.css (the earlier outline-button look was removed 2026-10-27) */
/* narrow screens: the list grids keep a readable width and scroll sideways inside the card instead of squeezing the columns */
body.aai-o2 .aai-list-bar ~ .k-grid .k-grid-header table, body.aai-o2 .aai-list-bar ~ .k-grid .k-grid-content table { min-width: 980px; }
body.aai-o2 .aai-r3-filter .aai-fld-check .k-checkbox-wrap { display: inline-flex; align-items: center; margin: 0; padding: 0; }
body.aai-o2 .aai-r3-filter .aai-fld-check > .k-checkbox-wrap { align-self: center; margin: 0; }