/* Management shell and operational dialogs. This stylesheet is loaded only by Owner/Staff. */
:root {
  --bg: #f5f8fd;
  --panel: #fff;
  --soft: #f8fbff;
  --line: #dce7f6;
  --text: #152947;
  --muted: #647895;
  --blue: #3564ed;
  --orange: #ed7914;
  --green: #119966;
  --red: #dc3e50;
  --shadow: 0 10px 28px rgba(34, 65, 122, .055);
  --radius: 14px;
}
body { background: radial-gradient(circle at 70% 0%, #fbfdff, #f2f7ff 70%); }
.app-layout { grid-template-columns: 246px minmax(0, 1fr); }
.sidebar { padding: 22px 15px 16px; border-color: var(--line); box-shadow: 2px 0 16px rgba(27, 57, 110, .025); }
.sidebar > .brand { padding: 3px 7px 25px; margin-bottom: 16px; }
.brand strong { color: #15243c; font-size: 21px; letter-spacing: -.025em; }
.brand small { letter-spacing: .02em; font-size: 10px; color: #8192aa; }
.logo-play { border-radius: 10px; width: 48px; height: 48px; background: linear-gradient(145deg, #1e356f, #3e6bca); }
#primary-nav { gap: 3px; overflow-y: auto; min-height: 0; }
.nav-button { min-height: 48px; width: 100%; border-radius: 11px; padding: 9px 13px; gap: 13px; font-size: 13px; font-weight: 700; line-height: 1.35; }
.nav-button::before { content: none; }
.nav-button .ui-icon { width: 19px; height: 19px; flex: none; }
.nav-button span { min-width: 0; }
.nav-button.active { background: #fff5e9; color: #d36b09; box-shadow: inset -3px 0 var(--orange); }
html[dir="ltr"] .nav-button.active { box-shadow: inset 3px 0 var(--orange); }
.support-card { padding: 15px 11px; border-color: #d9e6fb; }
.support-card strong { font-size: 13px; }
.account-card { grid-template-columns: auto minmax(0, 1fr); }
.account-card strong { overflow-wrap: anywhere; font-size: 13px; }
.account-card .button { min-height: 37px; }
.workspace { width: 100%; }
.topbar { height: 74px; padding: 12px clamp(17px, 2.2vw, 36px); gap: 14px; }
.search-box { width: min(440px, 39vw); min-width: 180px; background: #f7faff; border: 1px solid #d9e5f7; border-radius: 13px; }
.search-box input { min-width: 0; }
.search-box > span { font-size: 21px; color: #506991; }
.balance-chip { min-height: 40px; padding: 7px 13px; background: #fff; white-space: nowrap; }
.balance-chip strong { font-size: 20px; line-height: 1; }
.profile-button { min-width: 0; padding: 0; }
.profile-button > span:last-child { min-width: 0; }
.profile-button strong { display: block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.avatar { flex: none; }
.notification-button { display: none; }
.topbar .language-switcher { position: static; z-index: auto; box-shadow: none; border-radius: 11px; min-height: 40px; margin-inline-start: 4px; }
.page-heading { padding: 24px clamp(17px, 2.2vw, 36px) 10px; align-items: flex-end; }
.page-heading h1 { font-size: clamp(23px, 2vw, 29px); line-height: 1.25; }
.page-heading .button { align-self: center; }
.page-content { max-width: none; padding: 10px clamp(17px, 2.2vw, 36px) 60px; }
.cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; margin-bottom: 16px; }
.metric, .panel { border-color: var(--line); box-shadow: var(--shadow); }
.metric { min-width: 0; min-height: 113px; border-top: 1px solid var(--line); padding: 17px; overflow: visible; }
.metric:has(> i) { display: grid; grid-template-columns: 55px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 13px; align-content: center; align-items: center; }
.metric > i { position: static; grid-column: 1; grid-row: 1 / span 2; width: 51px; height: 51px; background: #edf2ff; color: #3564ed; font-size: 0; }
.metric:nth-child(5n+2) > i { color: #10a36b; background: #e9f9f1; }
.metric:nth-child(5n+3) > i { color: #714be1; background: #f2edff; }
.metric:nth-child(5n+4) > i { color: #3e71e8; background: #eef3ff; }
.metric:nth-child(5n) > i { color: #de5060; background: #fff0f2; }
.metric > i .ui-icon { width: 24px; height: 24px; }
.metric > span { grid-column: 2; align-self: end; min-width: 0; overflow-wrap: anywhere; font-size: 12px; line-height: 1.45; }
.metric > strong { grid-column: 2; align-self: start; min-width: 0; overflow-wrap: anywhere; font-size: clamp(22px, 2vw, 27px); line-height: 1.25; margin-top: 4px; }
.metric > strong .badge { font-size: 11px; }
.panel { padding: 22px; margin-bottom: 15px; }
.panel-header { align-items: center; }
.panel-header h2 { font-size: 19px; }
.ui-icon { display: inline-block; width: 18px; height: 18px; vertical-align: middle; flex: none; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: background .15s ease, box-shadow .15s ease, transform .15s ease; }
.button:hover:not(:disabled) { box-shadow: 0 5px 14px rgba(38, 71, 139, .12); }
.button:active:not(:disabled) { transform: translateY(1px); }
.button.primary { background: #3564ed; }
.button.secondary { border-color: #d7e3f6; }
.button:disabled { cursor: not-allowed; opacity: .55; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(53, 100, 237, .32); outline-offset: 2px; }
input, select, textarea { border-color: #d7e3f5; }
textarea { width: 100%; min-height: 100px; padding: 10px 12px; color: var(--text); background: #fff; border: 1px solid #d7e3f5; border-radius: 9px; font: inherit; resize: vertical; }
.table-wrap { border: 1px solid var(--line); border-radius: 11px; }
table { min-width: 770px; }
th { background: #f7faff; color: #52698a; font-size: 11px; letter-spacing: .005em; }
th, td { padding: 11px 10px; }
tbody tr:hover { background: #fbfdff; }
.badge { font-size: 11px; line-height: 1.3; padding: 5px 9px; }
.notice.calm { color: #235b50; border-color: #cdeee2; background: #f2fcf7; }
.notice.calm p:last-child { margin-bottom: 0; }

/* Subscriber list and the four reference dialogs */
.subscriber-page-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 17px; }
.subscriber-page-head h2 { font-size: 25px; margin: 0 0 3px; }
.subscriber-page-head p { margin-bottom: 0; }
.add-subscriber { min-height: 43px; white-space: nowrap; padding-inline: 18px; }
.subscriber-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.subscriber-list-panel { padding: 18px; overflow: visible; }
.subscriber-manager { display: grid; grid-template-columns: minmax(210px, 1.2fr) minmax(190px, 1fr) auto; gap: 12px; align-items: end; padding: 0 0 15px; margin-bottom: 15px; border-bottom: 1px solid var(--line); }
.subscriber-manager .inline-form { margin: 0; }
.subscriber-manager .inline-form { flex-wrap: wrap; }
.subscriber-manager label, .subscriber-manager select { min-width: 0; max-width: 100%; }
.subscriber-management-path { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.subscriber-management-path strong { font-size: inherit; }
@media (max-width: 600px) {
  .subscriber-manager .inline-form { display: grid; grid-template-columns: 1fr; }
  .subscriber-manager .inline-form label { width: 100%; }
}
.picker-pages { display: flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; font-size: 12px; }
.subscriber-filters { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(135px, 1fr) minmax(135px, 1fr) 100px auto; gap: 10px; align-items: end; }
.subscriber-filters .button { min-height: 43px; }
.result-context { margin: 12px 0 15px; }
.subscriber-table-wrap { overflow: auto; max-width: 100%; }
.subscriber-table { min-width: 1330px; table-layout: auto; }
.subscriber-table th { white-space: nowrap; }
.subscriber-table td { vertical-align: middle; font-size: 12px; }
.subscriber-table td:nth-child(1) { min-width: 120px; }
.subscriber-table td:nth-child(3) { min-width: 120px; }
.subscriber-table td:nth-child(5) { min-width: 135px; }
.subscriber-table td:nth-child(9) { min-width: 264px; }
.subscriber-table th:last-child, .subscriber-table td:last-child { position: sticky; inset-inline-end: 0; z-index: 1; background: #fff; box-shadow: -5px 0 10px rgba(35, 61, 104, .035); }
.subscriber-table th:last-child { background: #f7faff; z-index: 2; }
.row-link { border: 0; padding: 0; background: none; color: #1b3c78; font-weight: 800; text-align: start; }
.row-link:hover { color: var(--blue); text-decoration: underline; }
.credential-state { color: #7989a0; font-size: 11px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; width: max-content; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-pill.success { background: #e8f9f0; color: #087a4b; }
.status-pill.info { background: #ebf2ff; color: #275bc5; }
.status-pill.warning { background: #fff5e4; color: #a9660d; }
.status-pill.danger { background: #fff0f2; color: #bd3245; }
.status-pill.neutral { background: #eff2f7; color: #63748e; }
.online-indicator { display: block; margin-top: 5px; color: #8292a8; font-size: 10px; }
.online-indicator.online { color: #087a4b; }
.note-preview { max-width: 155px; overflow-wrap: anywhere; }
.subscriber-actions { display: flex; align-items: center; gap: 3px; }
.action-icon { display: inline-flex; align-items: center; justify-content: center; width: 35px; min-width: 35px; height: 35px; padding: 0; color: #405b86; background: transparent; border: 1px solid transparent; border-radius: 8px; }
.action-icon:hover, .action-icon:focus-visible { background: #eef3ff; border-color: #d8e3fa; color: #244cc2; }
.action-icon.danger { color: #c63348; }
.action-icon.danger:hover { background: #fff0f2; border-color: #ffdade; }
.action-icon .ui-icon { width: 17px; height: 17px; }
.table-pagination { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; color: var(--muted); font-size: 12px; }
.table-pagination .actions { align-items: center; }

#subscriber-dialog { width: min(700px, calc(100vw - 28px)); max-height: min(92dvh, 920px); padding: 0; border: 1px solid #dce6f7; border-radius: 14px; background: #fff; box-shadow: 0 30px 100px rgba(10, 27, 60, .25); overflow: hidden; }
#subscriber-dialog::backdrop { background: rgba(13, 28, 51, .58); backdrop-filter: blur(2px); }
.subscriber-dialog-shell { display: flex; flex-direction: column; max-height: min(92dvh, 920px); }
.subscriber-dialog-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 21px 24px 14px; border-bottom: 1px solid var(--line); flex: none; }
.subscriber-dialog-header h2 { font-size: 20px; margin: 0 0 2px; }
.subscriber-dialog-header p { margin: 0; }
.dialog-close { width: 32px; height: 32px; flex: none; display: grid; place-items: center; color: #395073; background: transparent; border: 0; border-radius: 8px; font-size: 28px; line-height: 1; }
.dialog-close:hover { background: #f0f4fb; }
.subscriber-dialog-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 17px 24px 24px; }
.modal-action-strip { margin-bottom: 18px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.subscriber-actions.strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: start; gap: 5px; }
.subscriber-actions.strip .action-icon { width: auto; min-width: 0; height: auto; min-height: 67px; flex-direction: column; gap: 5px; padding: 7px 3px; font-size: 10px; line-height: 1.15; font-weight: 700; text-align: center; }
.subscriber-actions.strip .action-icon .ui-icon { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: #f0f4ff; }
.subscriber-actions.strip .action-icon.danger .ui-icon { background: #fff0f2; }
.subscriber-actions.strip .action-icon span { overflow-wrap: anywhere; }
.modal-identity { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 11px 11px 0 0; padding: 17px; background: #fff; }
.identity-avatar { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #edf2ff; color: var(--blue); }
.identity-avatar .ui-icon { width: 27px; height: 27px; }
.identity-text { min-width: 0; flex: 1; }
.identity-text strong { display: block; font-size: 17px; overflow-wrap: anywhere; }
.identity-text small { display: block; margin-top: 4px; color: var(--muted); overflow-wrap: anywhere; text-align: start; }
.modal-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 11px 11px; overflow: hidden; background: #fbfdff; }
.modal-facts.compact-facts { margin-bottom: 17px; }
.modal-field { display: grid; gap: 4px; min-width: 0; padding: 13px 15px; border-top: 1px solid var(--line); }
.modal-field:nth-child(odd) { border-inline-end: 1px solid var(--line); }
.modal-field span { color: var(--muted); font-size: 11px; }
.modal-field strong { font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.modal-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.modal-section h3 { margin-bottom: 9px; }
.modal-section .history-item { box-shadow: none; }
.history-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.note-readonly { white-space: pre-wrap; overflow-wrap: anywhere; color: #415572; font-size: 13px; }
.modal-form { display: grid; gap: 14px; margin-top: 15px; }
.modal-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.modal-form label { min-width: 0; }
.modal-form label small { font-weight: 400; }
.modal-form .dialog-actions { margin-top: 3px; }
.modal-form .check input { min-height: auto; }
.step-title { display: flex; align-items: flex-start; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; }
.step-title:first-child { border-top: 0; padding-top: 0; }
.step-title b { width: 26px; height: 26px; flex: none; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 50%; font-size: 12px; }
.step-title p { margin: 3px 0 0; }
.copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 11px 0; }
.copy-row input { min-width: 0; text-align: left; }
.generated-link { border-top: 1px solid var(--line); }
.preview-box { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: #fbfdff; color: #476080; }
.preview-box .modal-facts { border: 0; }
.point-quote { display: grid; gap: 4px; padding: 15px 18px; margin-bottom: 10px; border: 1px solid #b9cbff; border-radius: 10px; background: #eff4ff; color: #193b92; }
.point-quote strong { font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.15; color: #2040aa; }
.point-quote small { color: #4c6190; }
.point-quote.insufficient { border-color: #f1a7a7; background: #fff2f2; color: #aa2525; }
.point-quote.insufficient strong { color: #aa2525; }
.create-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 15px; }
.modal-loading { display: flex; align-items: center; gap: 10px; padding: 45px 12px; justify-content: center; color: var(--muted); }
.discard-warning { position: sticky; top: 0; z-index: 3; box-shadow: 0 10px 20px rgba(35, 60, 100, .12); }
.discard-warning .actions { margin-top: 10px; }
#subscriber-dialog .form-error { margin-bottom: 0; }
#subscriber-dialog .notice { margin-top: 16px; }
#confirm-dialog { width: min(92vw, 520px); }
#confirm-dialog .dialog-card { border: 1px solid var(--line); box-shadow: 0 30px 100px rgba(10, 27, 60, .25); }

@media (max-width: 1230px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .subscriber-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subscriber-manager { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .picker-pages { grid-column: 1 / -1; justify-content: flex-start; }
  .subscriber-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .app-layout { grid-template-columns: 212px minmax(0, 1fr); }
  .sidebar { padding-inline: 10px; }
  .topbar { gap: 9px; }
  .topbar .search-box { width: min(270px, 30vw); min-width: 0; }
  .profile-button strong { max-width: 100px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .app-layout { display: block; }
  .sidebar { width: min(285px, 88vw); z-index: 50; }
  html[dir="ltr"] .sidebar.open, html[dir="rtl"] .sidebar.open { transform: translateX(0); }
  .topbar { height: 66px; }
  .topbar .search-box { display: none; }
  .topbar .language-switcher { margin-inline-start: 0; padding-inline: 9px; }
  .profile-button > span:last-child { display: none; }
  .page-heading { padding: 20px 15px 9px; }
  .page-content { padding: 10px 14px 45px; }
  .subscriber-manager, .subscriber-filters { grid-template-columns: 1fr; }
  .picker-pages { grid-column: auto; }
  .subscriber-page-head { align-items: flex-start; }
  .subscriber-page-head h2 { font-size: 21px; }
  .subscriber-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { min-height: 100px; }
  .panel { padding: 16px; }
  .subscriber-list-panel { padding: 13px; }
  .subscriber-table th:last-child, .subscriber-table td:last-child { position: static; }
  .subscriber-dialog-header { padding: 16px 17px 11px; }
  .subscriber-dialog-content { padding: 14px 17px 20px; }
  .subscriber-actions.strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .modal-two-col { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .topbar { padding-inline: 10px; gap: 5px; }
  .balance-chip { padding: 5px 8px; gap: 5px; }
  .balance-chip strong { font-size: 17px; }
  .topbar .language-switcher { min-height: 36px; padding-inline: 7px; font-size: 11px; }
  .page-heading { gap: 8px; }
  .page-heading h1 { font-size: 22px; }
  .page-heading .button { min-width: 38px; padding-inline: 8px; font-size: 11px; }
  .subscriber-page-head { flex-direction: column; }
  .add-subscriber { width: 100%; }
  .subscriber-summary { grid-template-columns: 1fr; }
  .metric { min-height: 83px; }
  .modal-facts { grid-template-columns: 1fr; }
  .modal-field:nth-child(odd) { border-inline-end: 0; }
  .modal-identity { flex-wrap: wrap; }
  .modal-identity .status-pill { margin-inline-start: auto; }
  .subscriber-actions.strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .table-pagination { flex-direction: column; align-items: stretch; }
  .copy-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .sidebar { transition: none; }
}

.workspace:has(.subscriber-page-head) > .page-heading { display: none; }
@media (max-width: 780px) {
  .subscriber-table-wrap { overflow: visible; border: 0; }
  .subscriber-table, .subscriber-table tbody, .subscriber-table tr { display: block; width: 100%; min-width: 0; }
  .subscriber-table thead { display: none; }
  .subscriber-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; overflow: hidden; }
  .subscriber-table td { display: block; min-width: 0 !important; padding: 9px 11px; border: 0; overflow-wrap: anywhere; }
  .subscriber-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 700; }
  .subscriber-table td:first-child, .subscriber-table td:last-child { grid-column: 1 / -1; }
  .subscriber-table td:first-child { background: #f8fbff; padding-block: 12px; }
  .subscriber-table td:nth-child(2) { display: none; }
  .subscriber-table td:last-child { border-top: 1px solid var(--line); }
  .subscriber-actions.compact { flex-wrap: wrap; gap: 5px; }
  .subscriber-actions.compact .action-icon { width: 39px; height: 39px; border-color: #e2e9f5; background: #fff; }
}
.scope-role-row { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border: 1px solid #cceede; border-radius: 10px; background: #f3fcf7; color: #235849; font-size: 13px; }
.scope-role-row .ui-icon { color: #16996b; }
.reseller-contact-editor { width: min(290px, 100%); border: 1px solid var(--line); border-radius: 9px; background: #fbfdff; }
.reseller-contact-editor summary { padding: 9px 11px; color: #315690; cursor: pointer; font-size: 12px; font-weight: 700; }
.reseller-contact-editor[open] { padding-bottom: 12px; }
.reseller-contact-editor .form-stack { gap: 8px; margin: 10px 11px 0; padding-top: 10px; border-top: 1px solid var(--line); }
.reseller-contact-editor .form-stack input { min-width: 0; width: 100%; }
.reseller-contact-editor .form-stack p { margin: 0; }

/* Dynamic management dialogs also need an opaque card, not the page behind it. */
dialog.modal, dialog.confirm-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  background: #fff;
  box-shadow: 0 30px 100px rgba(10, 27, 60, .28);
  overflow: auto;
  overflow-wrap: anywhere;
}
dialog.modal h2, dialog.confirm-dialog h2 { color: var(--text); margin-top: 0; }
dialog .form-error:empty, dialog .verification-error:empty { display: none; }
dialog [data-secret-value] { color: #152947; background: #f5f8fd; font-size: 16px; }

/* Consistent page rhythm, bounded content, and compact actions across portals. */
.workspace, .page-content, .panel, .dashboard-grid > *, .form-grid > *, .filter-bar > *, .history-item { min-width: 0; }
.page-content { max-width: 1800px; margin-inline: auto; }
.panel-header { gap: 16px; flex-wrap: wrap; }
.panel-header > div { min-width: 0; }
h1,h2,h3,strong,p,small,bdi,.notice { overflow-wrap: anywhere; }
p { line-height: 1.65; }
.panel h2 { line-height: 1.4; }
.form-grid { grid-template-columns: repeat(auto-fit,minmax(min(230px,100%),1fr)); gap: 18px; }
.form-stack, .form-grid, .inline-form { min-width: 0; }
.form-grid > .checkbox-grid, .form-grid > p { grid-column: 1 / -1; }
.form-grid > button { justify-self: start; }
.actions { align-items: center; align-content: start; gap: 8px; }
.actions > .button, .button { flex: 0 0 auto; align-self: center; line-height: 1.35; }
.button { max-width: 100%; white-space: normal; min-height: 40px; }
label { min-width: 0; line-height: 1.5; font-size: 13px; }
input,select,textarea { min-width: 0; max-width: 100%; font-size: 14px; }
select { min-height: 44px; padding-inline-end: 30px; text-overflow: ellipsis; }
input[type=checkbox],input[type=radio] { flex: none; }
.check { align-items: flex-start; }
.check input { margin-top: 3px; }
.creation-panel { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; background: linear-gradient(110deg,#fff,#f5f8ff); }
.creation-panel .panel-header { margin: 0; flex: 1 1 260px; }
.creation-panel h2 { margin-bottom: 4px; }
.creation-panel > .button { min-width: 150px; }
.table-wrap { max-width: 100%; overflow: auto; }
.management-table { width: 100%; min-width: 720px; }
.management-table th { text-align: start; line-height: 1.5; padding: 14px 12px; }
.management-table td { vertical-align: middle; text-align: start; padding: 16px 12px; max-width: 280px; overflow-wrap: anywhere; line-height: 1.55; }
.management-table td p { margin: 5px 0 0; }
.management-table .account-identity-cell { min-width: 170px; }
.management-table .account-identity-cell > strong { display: inline; font-size: 14px; }
.management-table .account-identity-cell > button { margin-inline-start: 6px; }
.management-table td:last-child { min-width: 130px; }
.row-actions { max-width: 232px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.management-action { position: relative; display: inline-flex; width: 38px; min-width: 38px; height: 38px; min-height: 38px; max-height: 38px; padding: 0 !important; border: 1px solid #dce6f5; border-radius: 10px; flex: 0 0 38px; background: #f8faff; color: #345780; vertical-align: middle; }
.management-action.danger { color: #b82e42; background: #fff5f6; border-color: #f4d8df; }
.management-action:hover { background: #edf2ff; color: #264fb8; }
.management-action:focus-visible { outline: 3px solid #8da9ff; }
.management-action .ui-icon { width: 18px; height: 18px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.management-editor { width: min(720px,calc(100vw - 28px)) !important; }
.management-editor-body { min-width: 0; }
.management-editor-body .editor-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 18px; margin: 0; padding: 0; }
.management-editor-body .editor-form + .editor-form { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.management-editor-body .editor-form > p, .management-editor-body .editor-form > .checkbox-grid { grid-column: 1 / -1; margin: 0; }
.management-editor-body .editor-form > button { align-self: end; justify-self: start; }
.management-editor-body details { border: 0; background: none; padding: 0; width: auto; }
.management-editor-body .reseller-contact-editor { display: grid; gap: 24px; }
.management-editor-body .reseller-contact-editor .editor-form { grid-template-columns: 1fr; margin: 0; }
.editor-identity { padding: 12px 14px; background: #f5f8fd; border: 1px solid var(--line); border-radius: 10px; font-weight: 700; }
.management-editor .form-error { margin: 0; }
.management-editor [data-close-tool] { justify-self: end; min-width: 100px; }
.management-table [data-secret-value] { width: 200px; max-width: 100%; font: 13px ui-monospace,monospace; }
.management-table [data-credential-id] { min-width: 185px; max-width: 230px; }
.credential-error { color: #a42135; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 20px; }
.filter-bar label { flex: 1 1 180px; }
.filter-bar .button { align-self: end; }
.dashboard-grid { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
.history-heading,.subscriber-page-head { flex-wrap: wrap; }
.audit-detail { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 55vh; overflow: auto; direction: ltr; text-align: left; font-size: 13px; }
@media (max-width: 1100px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 780px) {
  .management-table, .management-table tbody { display: block; min-width: 0; width: 100%; }
  .management-table thead { display: none; }
  .management-table tbody tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-bottom: 1px solid var(--line); gap: 8px; padding: 14px; background: #fff; }
  .management-table tbody tr:last-child { border-bottom: 0; }
  .management-table td { display: block; min-width: 0 !important; max-width: none; border: 0; padding: 6px 0; font-size: 13px; }
  .management-table td::before { content: attr(data-label); display: block; color: #647895; font-size: 11px; font-weight: 700; margin-bottom: 5px; }
  .management-table td:first-child,.management-table td:last-child { grid-column: 1 / -1; }
  .management-table td:last-child { border-top: 1px solid var(--line); padding-top: 12px; }
  .management-table .row-actions { max-width: none; gap: 8px; }
  .management-action { width: 42px; min-width: 42px; height: 42px; min-height: 42px; max-height: 42px; flex-basis: 42px; }
  .subscriber-table td:nth-child(2) { display: block; grid-column: 1 / -1; }
  .subscriber-table th:last-child,.subscriber-table td:last-child { position: static; }
  .subscriber-table tr { margin: 0 0 12px; }
  .management-table [data-credential-id] { max-width: none; }
  .management-table [data-secret-value] { width: 100%; }
  .management-editor-body .editor-form,.form-grid,.checkbox-grid { grid-template-columns: 1fr; }
  .management-editor-body .editor-form > button { justify-self: stretch; }
  .creation-panel { align-items: start; }
  .creation-panel > .button { width: 100%; }
  .topbar .balance-chip { max-width: 48vw; white-space: normal; }
}
@media (max-width: 480px) {
  .cards { grid-template-columns: 1fr; }
  .page-heading { flex-wrap: wrap; align-items: start; }
  .page-heading > div { min-width: 0; }
  .topbar { min-height: 66px; height: auto; flex-wrap: wrap; padding-block: 9px; }
}

.page-content[data-page=account] .history-item { display: grid; gap: 6px; align-content: start; }
.page-content[data-page=account] .history-item p { margin: 0; }
.page-content[data-page=account] .history-item strong { overflow-wrap: anywhere; }
.management-tooltip { position: fixed; z-index: 12000; max-width: min(280px,calc(100vw - 24px)); padding: 8px 12px; border-radius: 8px; background: #172f50; color: #fff; box-shadow: 0 6px 20px #152e502b; font-size: 13px; line-height: 1.5; pointer-events: none; }

.subscriber-table.management-table { min-width: 1050px; table-layout: fixed; }
.subscriber-table.management-table th { white-space: normal; }
.subscriber-table.management-table th:nth-child(1) { width: 17%; }
.subscriber-table.management-table th:nth-child(2) { width: 20%; }
.subscriber-table.management-table th:nth-child(3) { width: 14%; }
.subscriber-table.management-table th:nth-child(4) { width: 9%; }
.subscriber-table.management-table th:nth-child(5) { width: 12%; }
.subscriber-table.management-table th:nth-child(6) { width: 8%; }
.subscriber-table.management-table th:last-child { width: 20%; }
.subscriber-table.management-table th:last-child,.subscriber-table.management-table td:last-child { position: static; box-shadow: none; }
.subscriber-table.management-table td { min-width: 0; }
.subscriber-table .subscriber-actions.compact { display: inline-flex; flex-wrap: wrap; max-width: 180px; gap: 6px; margin-top: 6px; }
.subscriber-row-context { display: grid; gap: 3px; margin-top: 8px; font-size: 12px; }
.subscriber-row-context > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media(max-width:780px) { .subscriber-table.management-table { min-width: 0; table-layout: auto; } .subscriber-table .subscriber-actions.compact { max-width: none; } }

/* Direct credentials and visible account actions, shared across management roles. */
.account-table { min-width: 1120px; }
.account-table td:nth-child(2):has([data-credential-id]) { min-width: 230px; }
.account-table [data-credential-id] { min-width: 0; max-width: 270px; }
.account-table [data-secret-value] { width: 100%; min-width: 195px; font: 13px ui-monospace,monospace; padding-inline: 10px; background: #f5f8ff; }
.account-action-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 208px; max-width: 100%; }
.account-table td:last-child { min-width: 230px; }
.management-action { width: 44px; min-width: 44px; height: 44px; min-height: 44px; max-height: 44px; flex: 0 0 44px; border-radius: 11px; }
.management-action .ui-icon { width: 22px; height: 22px; }
.management-action[data-tone=blue] { color: #235cba; background: #edf4ff; border-color: #cbdcfa; }
.management-action[data-tone=teal] { color: #08776e; background: #ebfaf7; border-color: #c0e8df; }
.management-action[data-tone=purple] { color: #7444be; background: #f4efff; border-color: #decef7; }
.management-action[data-tone=success] { color: #137c3f; background: #eaf9ef; border-color: #b9e4c8; }
.management-action[data-tone=warning] { color: #a46205; background: #fff7e8; border-color: #efd49f; }
.management-action[data-tone=danger] { color: #c12e46; background: #fff0f3; border-color: #f0bec8; }
.management-action:hover { filter: brightness(.95); box-shadow: 0 3px 8px #1f396012; }
.account-table .actions:empty,.account-table .subscriber-actions:empty { display: none !important; }
.subscriber-table.management-table { min-width: 1200px; }
@media(max-width:780px) {
  .account-table,.subscriber-table.management-table { min-width: 0; }
  .account-table td:nth-child(2):has([data-credential-id]) { grid-column: 1 / -1; min-width: 0; }
  .account-table [data-credential-id] { max-width: none; }
  .account-action-group { width: auto; max-width: none; gap: 8px; }
  .account-table [data-secret-value] { min-width: 0; }
}
.account-table,.subscriber-table.management-table { width: 100%; min-width: 1000px; table-layout: fixed; }
.admin-table th:first-child { width: 25%; }
.admin-table th:nth-child(2) { width: 25%; }
.admin-table th:nth-child(3) { width: 10%; }
.admin-table th:nth-child(4) { width: 15%; }
.admin-table th:last-child { width: 25%; }
.reseller-table th:first-child { width: 22%; }
.reseller-table th:nth-child(2) { width: 22%; }
.reseller-table th:last-child { width: 22%; }
.subscriber-table.management-table th:nth-child(1) { width: 15%; }
.subscriber-table.management-table th:nth-child(2) { width: 22%; }
.subscriber-table.management-table th:nth-child(3) { width: 12%; }
.subscriber-table.management-table th:nth-child(4) { width: 8%; }
.subscriber-table.management-table th:nth-child(5) { width: 12%; }
.subscriber-table.management-table th:nth-child(6) { width: 8%; }
.subscriber-table.management-table th:last-child { width: 23%; }
.page-content { container-type: inline-size; }
@container (max-width: 1000px) {
  .account-table,.account-table tbody { display: block; min-width: 0 !important; width: 100%; }
  .account-table thead { display: none; }
  .account-table tbody tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 14px; border-bottom: 1px solid var(--line); }
  .account-table td { display: block; min-width: 0 !important; max-width: none; border: 0; padding: 6px 0; }
  .account-table td::before { content: attr(data-label); display: block; color: #647895; font-size: 11px; font-weight: 700; margin-bottom: 5px; }
  .account-table td:first-child,.account-table td:last-child,.account-table td:has([data-credential-id]) { grid-column: 1 / -1; }
  .account-table td:last-child { border-top: 1px solid var(--line); padding-top: 12px; }
  .account-action-group { width: auto; }
}
@media print { [data-credential-id],[data-secret-value] { visibility: hidden !important; } }
@container (min-width:600px) and (max-width:1000px) {
  .account-table td:first-child,.account-table td:has([data-credential-id]) { grid-column: auto; }
}

/* Owner trash: bounded preview, clear irreversible action and mobile-safe forms. */
.trash-filters { display:grid; grid-template-columns:minmax(180px,1fr) minmax(180px,2fr) auto; gap:16px; align-items:end; margin-block:20px; }
.trash-filters label { display:grid; gap:8px; min-width:0; }
.trash-pagination { display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-top:20px; }
dialog.confirm-dialog.trash-dialog { width:min(780px,calc(100vw - 32px)); }
.trash-dialog .modal-form { max-width:none; }
.trash-counts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.trash-counts p { display:grid; overflow-wrap:normal; gap:6px; padding:12px; background:#f5f7ff; border:1px solid #d9e1f5; border-radius:12px; margin:0; }
.trash-counts strong { font-size:1.6rem; color:#243764; }
.trash-preview-list { max-height:260px; overflow:auto; padding:14px; border:1px solid #d9e1f5; border-radius:12px; overflow-wrap:anywhere; }
.trash-preview-list li { margin-block:7px; }
.trash-details { display:grid; grid-template-columns:1fr auto; gap:8px 16px; }
.trash-details dd { margin:0; font-weight:700; }
.trash-dialog .notice { color:#7e3418; background:#fff6ed; border:1px solid #f5d3b0; }
@media(max-width:640px){.trash-filters{grid-template-columns:1fr}.trash-counts{grid-template-columns:repeat(2,minmax(0,1fr))}.trash-dialog{width:calc(100vw - 20px)}}