/* App-only overrides; vendor tokens and components remain authoritative. */
/* One local system-font policy for the PHP Adminator integration. Vendor demo
   font names are not loaded here; prose must not fall through to unrelated
   generic sans/monospace faces on different components. */
:root {
  --cld-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cld-font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
body { font-family: var(--cld-font-sans); font-feature-settings: normal; }
:is(.shell, .cld-auth-page, .cld-dialog) :is(
  h1, h2, h3, h4, h5, h6, select, .brand-name, .brand-tag, .nav-label, .nav-badge,
  .eyebrow, .hero-title, .card-title, .kpi-value, .modal-title,
  .table th, .data-table th, .d-footer-meta, .input-group .addon
) { font-family: var(--cld-font-sans); }
:is(.shell, .cld-auth-page, .cld-dialog) :is(.eyebrow, .nav-label, .brand-tag, .table th, .data-table th) {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; line-height: 1.5;
}
:is(.shell, .cld-auth-page, .cld-dialog) :is(.brand-name, .hero-title, .card-title, .modal-title) { line-height: 1.4; }
:is(.shell, .cld-auth-page, .cld-dialog) :is(.btn, .field-label, .field-error, .tag) { line-height: 1.5; }
.shell :is(.nav-link, .workspace-text) { line-height: 1.45; }
.shell .kpi-label { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; }
/* Identifiers, source keys and secret-entry controls deliberately remain code. */
:is(.shell, .cld-auth-page, .cld-dialog) :is(code, kbd, pre, .mono, .cld-id, .cld-bulk-url-id, .cld-config-secret) {
  font-family: var(--cld-font-mono);
}

.main { min-width: 0; }
.cld-table-scroll { overscroll-behavior-x: contain; }
.cld-table { min-width: 1250px; width: 100%; }
.cld-table td { vertical-align: top; }
/* Extra TikTok identity columns retain readable names; shared actions keep the Facebook width. */
.cld-tiktok-table { min-width: 1800px; }
.cld-tiktok-table td:nth-child(3) { min-width: 180px; }
/* Keep the native Adminator inline SVG pattern independent of emoji fonts. */
.cld-sort-link { display: inline-flex; align-items: center; }
.cld-sort-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 2px; }
.data-table thead th .cld-sort-icon { width: 12px; height: 12px; flex: 0 0 12px; color: var(--t-light); }
.data-table thead th .cld-sort-icon svg { width: 12px; height: 12px; }
.data-table thead th:is([aria-sort="ascending"], [aria-sort="descending"]) .cld-sort-icon { color: var(--primary); }
.cld-id { white-space: nowrap; font-family: monospace; }
/* Share the existing readable note bounds and override vendor nowrap at cell specificity. */
.cld-table td.cld-note { min-width: 180px; max-width: 240px; overflow-wrap: anywhere; white-space: pre-wrap; }
.cld-actions { display: flex; flex-wrap: wrap; gap: 6px; width: 250px; }
.cld-actions form { margin: 0; }
.cld-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 0; }
.cld-toolbar select:not(.select) { background: var(--bg-card); color: var(--t-base); border: 1px solid var(--border); border-radius: 6px; padding: 8px; }
/* Native Adminator selects retain their arrow, theme and focus styling in toolbars. */
.cld-toolbar .select { width: auto; }
.cld-pagination { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 16px 0; }
.cld-pagination [aria-current] { background: var(--primary-soft); color: var(--primary); }
.cld-muted { color: var(--t-muted); }
.cld-empty { padding: 40px 22px; }
.cld-topbar-user { max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cld-main-link { padding: 10px; display: block; }
.cld-hero { margin-bottom: 24px; }
/* Native alerts reserve an icon column; text-only app notices use the body
   across the available width instead of placing text in that 24px column. */
.cld-alert { grid-template-columns: minmax(0, 1fr); }
.cld-alert .body { overflow-wrap: anywhere; }
/* Match the native card grid gap for every top-level dashboard block. */
.cld-page-stack { display: grid; gap: 20px; min-width: 0; }
.cld-page-stack > * { min-width: 0; margin-block: 0; }
.cld-topbar { gap: 12px; }
.cld-topbar form { margin: 0; }
@media(max-width:720px) { .cld-topbar-user { display:none; } .brand-name { font-size: 14px; } }
.cld-main-link { position: absolute; left: -10000px; }
.cld-main-link:focus-visible { left: 8px; top: 8px; z-index: 200; background: var(--bg-card); }

/* Native Adminator modal surface, using browser dialog focus trapping. */
.cld-dialog { width: min(620px, calc(100% - 32px)); max-width: 620px; max-height: calc(100dvh - 32px); padding: 0; margin: auto; color: var(--t-base); overflow: auto; }
.cld-dialog-wide { width: min(900px, calc(100% - 32px)); max-width: 900px; }
.cld-dialog::backdrop { background: var(--overlay); backdrop-filter: blur(4px); }
.cld-modal-open { overflow: hidden; }
.cld-form { display: flex; flex-direction: column; gap: 12px; overflow-wrap: anywhere; }
.cld-form .modal-head, .cld-form .modal-foot { padding-inline: 0; flex-wrap: wrap; }
.cld-form input[type=checkbox] { width: auto; }
.cld-form [hidden] { display: none; }
.cld-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.cld-detail-grid dt { color: var(--t-muted); font-size: 12px; }
.cld-detail-grid dd { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cld-history li { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.cld-auth-page { min-height: 100dvh; display: grid; place-items: center; background: var(--bg-body); color: var(--t-base); padding: 20px; }
.cld-auth-shell { width: min(100%,520px); }
.cld-auth-shell .brand { margin-bottom: 24px; }
.cld-auth-shell form { display: grid; gap: 14px; }
.cld-auth-submit { width: 100%; justify-content: center; }
.cld-auth-submit:disabled { cursor: wait; opacity: .72; }
@media(max-width:720px) { .cld-detail-grid { grid-template-columns: 1fr; } .modal-foot .btn { white-space: normal; } }

/* App text is longer than the vendor demo: constrain flex items, not the page. */
.cld-topbar .crumbs { min-width: 0; }
.cld-topbar .topbar-actions, .cld-topbar .hamburger { flex-shrink: 0; }
.cld-toolbar .btn, .hero-actions .btn { white-space: normal; }
.workspace-name { overflow-wrap: anywhere; }
.content { flex: 1; }
.cld-table td:nth-child(3) { max-width: 240px; overflow-wrap: anywhere; white-space: normal; }
.cld-pagination .btn { min-height: 40px; min-width: 40px; }

/* Bulk diagnostics reuse native tables/KPIs; keep 16 readable columns inside
   the existing horizontal scroll region rather than widening the page. */
.cld-bulk-table { min-width: 2300px; width: 100%; }
.cld-bulk-table td { vertical-align: top; }
.cld-bulk-wrap { min-width: 160px; max-width: 280px; overflow-wrap: anywhere; white-space: normal; }
/* Native action rows need wrapping for this page's longer Vietnamese labels.
   Bound boilerplate/long usernames, but never hide numeric identity digits. */
.cld-bulk-actions { flex-wrap: wrap; }
.cld-bulk-url { white-space: nowrap; }
.cld-bulk-url-value { display: block; max-width: 36ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cld-bulk-url-id { max-width: none; overflow: visible; text-overflow: clip; font-family: monospace; }
.cld-bulk-summary .kpi-label { overflow-wrap: anywhere; }
#bulk-run:disabled { cursor: wait; opacity: .72; }

#bulk-error[hidden] { display: none; }
/* Cookie/proxy administration uses native Adminator cards, tables and dialogs. */
.cld-config-table { min-width: 850px; width: 100%; }
.cld-config-table td { vertical-align: top; }
.cld-config-actions { display: flex; flex-wrap: wrap; gap: 6px; width: 300px; }
.cld-config-host { max-width: 240px; overflow-wrap: anywhere; }
.cld-config-secret { min-height: 170px; resize: vertical; font-family: monospace; }
.cld-config-confirm { display: flex; align-items: flex-start; gap: 8px; }
.cld-config-confirm .box { margin-top: 3px; }
.cld-config-confirm input:focus-visible + .box { outline: 2px solid var(--primary); outline-offset: 2px; }
.cld-config-form .modal-head, .cld-config-form .modal-foot { padding-inline: 20px; }
.cld-config-form .modal-foot { flex-wrap: wrap; }
.cld-config-form .btn:disabled { opacity: .55; cursor: not-allowed; }
#facebook-config[aria-busy=true] .btn:disabled { opacity: .55; cursor: wait; }
.cld-config-form #config-preview td { overflow-wrap: anywhere; white-space: normal; }
.cld-config-form #config-preview .data-table { min-width: 460px; }
#facebook-config [hidden], #config-input-dialog [hidden] { display: none; }
#facebook-config .card-head { flex-wrap: wrap; gap: 12px; }

/* Platform-scoped configuration cards use the existing Adminator palette. */
#facebook-config .cld-config-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
#facebook-config .cld-config-batch { padding: 12px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); }
#facebook-config .cld-config-batch p { margin: 0 0 8px; }
#facebook-config .cld-config-batch p:last-child { margin-bottom: 0; }
#facebook-config .cld-config-batch progress { display: block; width: 100%; height: 8px; margin-bottom: 8px; accent-color: var(--primary); }
#facebook-config [data-batch-button]:disabled { opacity: .65; cursor: not-allowed; }
#facebook-config #config-cookie-rows td:nth-child(4), #facebook-config #config-cookie-rows td:nth-child(5) { white-space: nowrap; }

.cld-telegram-preview { white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px; background: var(--bg-body); color: var(--t-base); border: 1px solid var(--border); border-radius: 8px; font-size: 14px; line-height: 1.6; }
.cld-telegram-keyboard-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: stretch; }
.cld-telegram-keyboard-row .btn { min-width: 0; }

/* Native switch focus is otherwise invisible because its input is transparent. */
.cld-system-settings .switch input:focus-visible + .track { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Mobile forms and Vietnamese labels retain native Adminator components.
   Bound the actual flex/grid items; table overflow stays in .table-scroll. */
.hero-text, .hero-actions, .card-head > *, .cld-form > * { min-width: 0; max-width: 100%; }
.cld-auth-shell { min-width: 0; }
.cld-dialog > *, .cld-dialog .modal-body, .cld-dialog .modal-head > div { min-width: 0; }
.cld-dialog { overscroll-behavior: contain; scroll-padding-block: 16px; }

/* Touch devices can be wider than the drawer breakpoint in landscape.
   Only control sizing follows touch capability; native layout breakpoints stay. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  /* Native controls remain 13px on desktop. Mobile controls need 16px so
     Safari need not magnify them; no viewport/zoom JavaScript workaround. */
  :is(.shell, .cld-auth-page, .cld-dialog) :is(
    input:not([type="hidden"], [type="checkbox"], [type="radio"],
      [type="button"], [type="submit"], [type="reset"], [type="range"], [type="color"]),
    textarea, select
  ) { font-size: 16px; min-width: 0; max-width: 100%; }
}

@media (max-width: 720px) {
  /* Keep Safari text inflation predictable without restricting user zoom. */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  .cld-auth-shell :is(h1, h2, h3),
  .shell :is(.hero-title, .card-title),
  .cld-dialog :is(h1, h2, h3, .modal-title) { overflow-wrap: anywhere; }
  .cld-auth-page {
    padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
      max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  }
  .cld-auth-shell #login-title {
    margin: 0; font-size: clamp(24px, 6vw, 28px); line-height: 1.4; letter-spacing: -.02em;
  }
  .cld-auth-shell :is(p, label, .btn) { overflow-wrap: anywhere; }
  .cld-auth-shell .brand-logo { flex-shrink: 0; }
  .hero-title { font-size: clamp(24px, 6vw, 28px); }
  .shell :is(.card-title, .field-label, .field-help, .field-error, .form-hint) { overflow-wrap: anywhere; }
  .hero-actions .btn, .cld-toolbar .btn { max-width: 100%; }

  /* Native dialogs scroll as a whole, so their footer remains reachable in
     short viewports. Safe-area space is outside the scrollable surface. */
  .cld-dialog {
    width: calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    max-height: calc(100vh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  .cld-dialog :is(.modal-body, .modal-head, .modal-foot) { padding-inline: 16px; overflow-wrap: anywhere; }
  .cld-dialog .modal-head { align-items: flex-start; gap: 12px; }
  .cld-dialog .modal-head > :is(button, a) { flex-shrink: 0; }
  .cld-dialog h2:not(.modal-title) { margin: 0; font-size: 20px; line-height: 1.3; }
  .cld-dialog .modal-foot { flex-wrap: wrap; }
  .cld-dialog .modal-foot .btn {
    flex: 1 1 140px; min-width: 0; max-width: 100%; white-space: normal;
    overflow-wrap: anywhere; justify-content: center; line-height: 1.4;
  }

  /* Retain the native 280px drawer and one state engine. The whole drawer
     scrolls, including account details, within Safari's dynamic viewport. */
  .d-sidebar {
    width: min(280px, calc(100vw - 24px)); height: 100vh; height: 100dvh;
    padding-top: calc(22px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .d-sidebar > :is(.brand, .nav-section, .sidebar-footer) { flex-shrink: 0; }
  .d-sidebar .nav-link { line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
  .d-sidebar .brand-logo { flex-shrink: 0; }
}

/* Account administration reuses the existing card/table/dialog layout. */
.cld-account-status, .cld-account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cld-account-filters { align-items: end; }
.cld-account-filters .field { flex: 1 1 160px; min-width: 0; }
.cld-account-table { min-width: 1150px; width: 100%; }
.cld-account-ranking { min-width: 600px; width: 100%; }
.cld-account-name { min-width: 180px; max-width: 260px; white-space: normal; overflow-wrap: anywhere; }
.cld-account-actions .btn, .cld-account-table .btn { white-space: normal; }
#account-reason-field[hidden] { display: none; }

/* Telegram editor only; native Adminator tokens and controls remain authoritative. */
.cld-emoji-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.cld-emoji-item { border: 1px solid var(--border); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cld-emoji-item p { margin: 0; overflow-wrap: anywhere; }
.cld-emoji-item .cld-toolbar { margin-top: auto; }
#editor-quick-fields .btn[aria-pressed="true"] { border-color: var(--primary); color: var(--primary); }
#editor-impact-list { max-height: 220px; overflow: auto; padding-inline-start: 20px; }
#editor-body-details[open] > summary { margin-bottom: 12px; }
#editor-quick-fields:empty { display: none; }
#catalog-export-command { display: block; overflow-wrap: anywhere; white-space: pre-wrap; }
#shared-emoji-items .btn, #editor-quick-fields .btn { min-height: 40px; }