#app[data-page-module="security"] .settings-card { border-color: rgba(15, 23, 42, .12); }
#app[data-page-module="security"] .definition-label { color: #475569; }
#app[data-page-module="security"] .tab.active { background: #e2e8f0; border-color: #cbd5e1; color: #0f172a; }

#app[data-page-module="security"] .system-administration-page { display: grid; gap: 14px; max-inline-size: 1480px; margin-inline: auto; }
#app[data-page-module="security"] .system-administration-page > .page-header { align-items: center; margin-bottom: 0; padding: 14px 16px; border: 1px solid #d7e4ee; border-radius: var(--radius); background: #fff; box-shadow: 0 10px 24px rgba(15, 23, 42, .035); }
#app[data-page-module="security"] .system-administration-page .page-title { font-size: clamp(1.35rem, 1.8vw, 1.9rem); line-height: 1.35; }
#app[data-page-module="security"] .system-administration-page .page-subtitle { max-inline-size: 760px; margin: .35rem 0 0; color: #5f7286; line-height: 1.8; }
#app[data-page-module="security"] .system-admin-access { padding: .8rem 1rem; border: 1px solid #fecaca; border-radius: var(--radius); color: #991b1b; background: #fff1f2; font-weight: 700; }
#app[data-page-module="security"] .system-admin-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; overflow: hidden; }
#app[data-page-module="security"] .system-admin-metric { display: grid; gap: .22rem; min-block-size: 94px; padding: 14px 16px; border-inline-start: 1px solid #e1eaf2; background: linear-gradient(180deg, #fff, #f8fbfe); }
#app[data-page-module="security"] .system-admin-metric:last-child { border-inline-start: 0; }
#app[data-page-module="security"] .system-admin-metric span { color: #526b83; font-size: .78rem; font-weight: 700; }
#app[data-page-module="security"] .system-admin-metric strong { color: #123d5f; font-size: clamp(1.3rem, 1.7vw, 1.75rem); line-height: 1.2; font-variant-numeric: tabular-nums; }
#app[data-page-module="security"] .system-admin-metric small { color: #71869a; font-size: .74rem; }
#app[data-page-module="security"] .system-admin-actions { display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 14px; align-items: stretch; }
#app[data-page-module="security"] .system-admin-action-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0; min-block-size: 236px; padding: 16px; border-color: #d9e7f2; background: #fff; }
#app[data-page-module="security"] .system-admin-action-card.danger { border-color: #fecaca; background: linear-gradient(180deg, #fff, #fffafa); }
#app[data-page-module="security"] .system-admin-action-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 42px; block-size: 42px; border-radius: 8px; color: #087eb7; background: #e5f5fd; }
#app[data-page-module="security"] .system-admin-action-card.danger .system-admin-action-icon { color: #c24141; background: #fee2e2; }
#app[data-page-module="security"] .system-admin-action-icon .icon { inline-size: 20px; block-size: 20px; }
#app[data-page-module="security"] .system-admin-action-copy { min-width: 0; }
#app[data-page-module="security"] .system-admin-action-copy h2 { margin: 0 0 .35rem; color: #163d5e; font-size: 1.08rem; line-height: 1.45; }
#app[data-page-module="security"] .system-admin-action-copy p { margin: 0; color: #60778b; font-size: .84rem; line-height: 1.85; }
#app[data-page-module="security"] .system-admin-action-card > .btn,
#app[data-page-module="security"] .system-admin-period-actions,
#app[data-page-module="security"] .system-admin-inline-status { grid-column: 1 / -1; }
#app[data-page-module="security"] .system-admin-action-card > .btn { align-self: end; justify-self: start; min-inline-size: 168px; }
#app[data-page-module="security"] .system-admin-period-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-self: end; }
#app[data-page-module="security"] .system-admin-period-actions .btn { min-height: 44px; padding-inline: .5rem; white-space: nowrap; }
#app[data-page-module="security"] .system-admin-inline-status { min-height: 1.35rem; color: #54718a; font-size: .8rem; line-height: 1.65; }
#app[data-page-module="security"] .system-admin-inline-status:not(:empty) { padding: 7px 9px; border: 1px solid #dce8f2; border-radius: 8px; background: #f8fbfe; }
#app[data-page-module="security"] .system-admin-inline-status.success { color: #177245; border-color: #bbf7d0; background: #f0fdf4; }
#app[data-page-module="security"] .system-admin-inline-status.error { color: #b42318; border-color: #fecaca; background: #fff7f7; }
#app[data-page-module="security"] .system-admin-inline-status.info { color: #176d9d; border-color: #bae6fd; background: #f0f9ff; }
#app[data-page-module="security"] .system-admin-backups-panel { display: grid; gap: 12px; padding: 16px; border-color: #d6e5f0; }
#app[data-page-module="security"] .system-admin-table-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
#app[data-page-module="security"] .system-admin-table-header h2 { margin: 0; color: #163d5e; font-size: 1.08rem; }
#app[data-page-module="security"] .system-admin-table-header p { margin: .3rem 0 0; color: #6a8296; font-size: .8rem; }
#app[data-page-module="security"] .system-admin-backups-panel .grid-wrap { border: 1px solid #e1eaf2; border-radius: var(--radius); background: #fff; }
#app[data-page-module="security"] .system-admin-backups-table { min-inline-size: 980px; table-layout: fixed; }
#app[data-page-module="security"] .system-admin-backups-table td { vertical-align: middle; }
#app[data-page-module="security"] .system-admin-backups-table small { display: block; margin-top: .25rem; color: #76889a; font-size: .72rem; }
#app[data-page-module="security"] .system-admin-backups-table th:nth-child(1),
#app[data-page-module="security"] .system-admin-backups-table td:nth-child(1) { width: 9%; }
#app[data-page-module="security"] .system-admin-backups-table th:nth-child(2),
#app[data-page-module="security"] .system-admin-backups-table td:nth-child(2) { width: 12%; }
#app[data-page-module="security"] .system-admin-backups-table th:nth-child(3),
#app[data-page-module="security"] .system-admin-backups-table td:nth-child(3) { width: 24%; }
#app[data-page-module="security"] .system-admin-backups-table th:nth-child(4),
#app[data-page-module="security"] .system-admin-backups-table td:nth-child(4) { width: 12%; }
#app[data-page-module="security"] .system-admin-status-cell { min-width: 0; }
#app[data-page-module="security"] .system-admin-row-error { display: -webkit-box !important; overflow: hidden; max-inline-size: 100%; color: #b42318 !important; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
#app[data-page-module="security"] .system-admin-error-cell { color: #b42318; text-align: center; }
#app[data-page-module="security"] .system-admin-empty { margin: 0; padding: 1rem; border-radius: .65rem; color: #5e768b; background: #f7fbfe; text-align: center; }
#app[data-page-module="security"] .system-admin-backups-table .btn-small { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.35rem; padding: .35rem .55rem; }
#app[data-page-module="security"] .system-admin-backups-table .btn-small .icon { inline-size: 1rem; block-size: 1rem; }

@media (max-width: 1100px) {
  #app[data-page-module="security"] .system-admin-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app[data-page-module="security"] .system-admin-metric:nth-child(2n) { border-inline-start: 0; }
  #app[data-page-module="security"] .system-admin-actions { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
  #app[data-page-module="security"] .system-admin-action-card.danger { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  #app[data-page-module="security"] .system-administration-page > .page-header { align-items: stretch; flex-direction: column; }
  #app[data-page-module="security"] .system-admin-overview,
  #app[data-page-module="security"] .system-admin-actions { grid-template-columns: 1fr; }
  #app[data-page-module="security"] .system-admin-metric { min-block-size: auto; border-inline-start: 0; border-block-end: 1px solid #e1eaf2; }
  #app[data-page-module="security"] .system-admin-metric:last-child { border-block-end: 0; }
  #app[data-page-module="security"] .system-admin-action-card,
  #app[data-page-module="security"] .system-admin-action-card.danger { grid-column: auto; min-block-size: auto; }
  #app[data-page-module="security"] .system-admin-action-card > .btn { inline-size: 100%; justify-self: stretch; }
  #app[data-page-module="security"] .system-admin-period-actions { grid-template-columns: 1fr; }
  #app[data-page-module="security"] .system-admin-table-header { align-items: stretch; flex-direction: column; }
  #app[data-page-module="security"] .system-admin-table-header .btn { width: 100%; justify-content: center; }
}

#app[data-page-module="security"] .role-permission-toolbar { display: flex; align-items: end; justify-content: space-between; gap: .75rem; }
#app[data-page-module="security"] .role-permission-tree { display: grid; gap: .55rem; padding: .65rem; background: linear-gradient(180deg, #f8fbff 0%, #f2f7fc 100%); }
#app[data-page-module="security"] .permission-module,
#app[data-page-module="security"] .permission-menu { overflow: hidden; border: 1px solid #d7e3f0; border-radius: .65rem; background: #fff; }
#app[data-page-module="security"] .permission-module > summary,
#app[data-page-module="security"] .permission-menu > summary { display: flex; align-items: center; gap: .5rem; min-height: 2.55rem; padding: .45rem .7rem; cursor: pointer; list-style: none; }
#app[data-page-module="security"] .permission-module > summary { min-height: 2.8rem; }
#app[data-page-module="security"] .permission-module > summary { color: #0f4268; background: linear-gradient(90deg, #e8f5ff, #f8fcff); font-weight: 800; }
#app[data-page-module="security"] .permission-menu > summary { color: #1e3a5f; background: #fbfdff; font-weight: 700; }
#app[data-page-module="security"] .permission-module > summary::-webkit-details-marker,
#app[data-page-module="security"] .permission-menu > summary::-webkit-details-marker { display: none; }
#app[data-page-module="security"] .permission-module > summary::before,
#app[data-page-module="security"] .permission-menu > summary::before { content: "⌄"; width: 1rem; color: #2980b9; font-size: 1rem; text-align: center; transition: transform .18s ease; }
#app[data-page-module="security"] details:not([open]) > summary::before { transform: rotate(-90deg); }
#app[data-page-module="security"] .permission-branch-control { display: inline-flex; align-items: center; }
#app[data-page-module="security"] .permission-branch-control input,
#app[data-page-module="security"] .permission-action input { inline-size: 1rem; block-size: 1rem; accent-color: #0788c7; cursor: pointer; }
#app[data-page-module="security"] .permission-module-icon,
#app[data-page-module="security"] .permission-menu-icon,
#app[data-page-module="security"] .permission-action-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 1.5rem; inline-size: 1.5rem; block-size: 1.5rem; color: #197eaf; }
#app[data-page-module="security"] .permission-module-icon { color: #0873a9; background: #dff2fd; border-radius: .4rem; }
#app[data-page-module="security"] .permission-menu-icon { color: #39718e; }
#app[data-page-module="security"] .permission-action-icon { color: #558099; }
#app[data-page-module="security"] .permission-module-icon .icon,
#app[data-page-module="security"] .permission-menu-icon .icon,
#app[data-page-module="security"] .permission-action-icon .icon { display: inline-flex; inline-size: 1rem; block-size: 1rem; }
#app[data-page-module="security"] .permission-branch-title { flex: 1; font-size: .88rem; }
#app[data-page-module="security"] .permission-menu-title { flex: 1; font-size: .82rem; }
#app[data-page-module="security"] .permission-branch-count,
#app[data-page-module="security"] .permission-menu-count { min-inline-size: 1.3rem; padding: .12rem .4rem; border-radius: 999px; color: #4b6680; background: #eaf2f9; font-size: .7rem; font-weight: 600; text-align: center; }
#app[data-page-module="security"] .permission-module-body { display: grid; gap: .35rem; padding: .4rem; }
#app[data-page-module="security"] .permission-menu { margin: 0; border-color: #e0eaf3; box-shadow: none; }
#app[data-page-module="security"] .permission-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .35rem; padding: .45rem; border-top: 1px solid #edf2f7; }
#app[data-page-module="security"] .permission-action { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: .35rem; align-items: center; min-height: 2.3rem; padding: .35rem .45rem; border: 1px solid #e2ebf4; border-radius: .45rem; color: #173b5e; background: #fff; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
#app[data-page-module="security"] .permission-action:hover { border-color: #83c9eb; background: #f5fbff; box-shadow: 0 2px 7px rgba(18, 114, 161, .10); }
#app[data-page-module="security"] .permission-action:has(input:checked) { border-color: #46aee0; background: #edf9ff; }
#app[data-page-module="security"] .permission-action-copy { min-width: 0; }
#app[data-page-module="security"] .permission-action-copy strong { display: block; overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
#app[data-page-module="security"] .permission-module > summary:focus-visible,
#app[data-page-module="security"] .permission-menu > summary:focus-visible,
#app[data-page-module="security"] .permission-action:has(input:focus-visible) { outline: 3px solid rgba(37, 145, 203, .32); outline-offset: -3px; }
@media (max-width: 760px) {
  #app[data-page-module="security"] .role-permission-toolbar { align-items: stretch; flex-direction: column; }
  #app[data-page-module="security"] .role-permission-tree { padding: .55rem; }
  #app[data-page-module="security"] .permission-actions { grid-template-columns: 1fr; }
  #app[data-page-module="security"] .permission-branch-count { display: none; }
}

#app[data-page-module="security"] .user-modal-panel { width: min(100%, 820px); }
#app[data-page-module="security"] .user-modal-panel .modal-head strong { display: inline-flex; align-items: center; gap: .55rem; color: #123c5d; }
#app[data-page-module="security"] .user-modal-panel .modal-head strong > .icon { display: inline-flex; color: #0788c7; }
#app[data-page-module="security"] .user-record-form { display: grid; gap: .9rem; }
#app[data-page-module="security"] .user-record-form [data-user-form-icon] > .icon { inline-size: 1rem; block-size: 1rem; max-inline-size: 1rem; max-block-size: 1rem; }
#app[data-page-module="security"] .user-record-form [data-user-form-icon] svg { inline-size: 100%; block-size: 100%; max-inline-size: 100%; max-block-size: 100%; display: block; }
#app[data-page-module="security"] .user-form-section { margin: 0; border-color: #dce8f2; box-shadow: 0 3px 12px rgba(28, 75, 113, .035); }
#app[data-page-module="security"] .user-form-section legend { display: inline-flex; align-items: center; gap: .45rem; color: #123c5d; }
#app[data-page-module="security"] .user-record-form .modal-body-grid { gap: .9rem 1rem; }
#app[data-page-module="security"] .user-record-form .form-field { min-width: 0; }
#app[data-page-module="security"] .user-record-form input,
#app[data-page-module="security"] .user-record-form select { min-width: 0; }
#app[data-page-module="security"] .user-record-form .form-field-ltr input { direction: ltr; text-align: left; }
#app[data-page-module="security"] .user-status-switch { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; padding: .8rem 1rem; border: 1px solid #dce8f2; border-radius: .8rem; background: linear-gradient(90deg, #f5fbff, #fff); }
#app[data-page-module="security"] .user-status-copy { display: flex; align-items: center; gap: .7rem; min-width: 0; }
#app[data-page-module="security"] .user-status-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2.35rem; width: 2.35rem; height: 2.35rem; border-radius: .7rem; color: #087bb4; background: #e4f5ff; }
#app[data-page-module="security"] .user-status-icon > .icon { inline-size: 1.25rem; block-size: 1.25rem; max-inline-size: 1.25rem; max-block-size: 1.25rem; }
#app[data-page-module="security"] .user-status-copy > div { display: grid; gap: .2rem; }
#app[data-page-module="security"] .user-status-copy strong { color: #163d5d; font-size: .9rem; }
#app[data-page-module="security"] .user-status-copy small { color: #668099; }
#app[data-page-module="security"] .security-switch { display: inline-flex; align-items: center; gap: .55rem; padding: .25rem; color: #52708b; cursor: pointer; font-weight: 800; white-space: nowrap; }
#app[data-page-module="security"] .security-switch input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
#app[data-page-module="security"] .security-switch-track { position: relative; display: inline-block; inline-size: 2.85rem; block-size: 1.6rem; border-radius: 999px; background: #cbd8e5; box-shadow: inset 0 0 0 1px rgba(23, 61, 93, .08); transition: background .18s ease; }
#app[data-page-module="security"] .security-switch-track::after { content: ""; position: absolute; top: .2rem; right: .2rem; inline-size: 1.2rem; block-size: 1.2rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(15, 23, 42, .23); transition: transform .18s ease; }
#app[data-page-module="security"] .security-switch input:checked + .security-switch-track { background: #1095d3; }
#app[data-page-module="security"] .security-switch input:checked + .security-switch-track::after { transform: translateX(-1.25rem); }
#app[data-page-module="security"] .security-switch input:focus-visible + .security-switch-track { outline: 3px solid rgba(16, 149, 211, .28); outline-offset: 3px; }
#app[data-page-module="security"] .user-password-section { display: grid; gap: .85rem; background: linear-gradient(180deg, #fff, #f8fcff); }
#app[data-page-module="security"] .user-password-note { margin: -.25rem 0 0; color: #668099; font-size: .8rem; line-height: 1.8; }
#app[data-page-module="security"] .user-password-control { display: grid; gap: .45rem; }
#app[data-page-module="security"] .user-password-control > label { display: inline-flex; align-items: center; gap: .45rem; color: #526f89; font-size: .78rem; font-weight: 800; }
#app[data-page-module="security"] .user-password-input-row { display: flex; min-width: 0; gap: .5rem; }
#app[data-page-module="security"] .user-password-input-row input { min-width: 0; flex: 1; direction: ltr; text-align: left; letter-spacing: .04em; }
#app[data-page-module="security"] .user-password-input-row .btn { flex: 0 0 auto; }
#app[data-page-module="security"] .user-password-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
#app[data-page-module="security"] .user-password-actions .btn { display: inline-flex; align-items: center; gap: .4rem; }
#app[data-page-module="security"] .user-password-actions .btn > span { display: inline-flex; }
#app[data-page-module="security"] .user-password-actions .btn > span .icon { inline-size: 1rem; block-size: 1rem; max-inline-size: 1rem; max-block-size: 1rem; }

@media (max-width: 620px) {
  #app[data-page-module="security"] .user-status-switch { align-items: flex-start; flex-direction: column; }
  #app[data-page-module="security"] .user-password-actions .btn { flex: 1 1 auto; justify-content: center; }
}