/**
 * ==============================================================================
 * SocialNexa — Tema CSS Apple Oficial para Laravel Nova 5
 * ==============================================================================
 * Ponto de entrada centralizado do tema visual baseado no design Apple aprovado.
 *
 * Estrutura modular:
 * - tokens: Variáveis semânticas de cor, superfícies, bordas e integração brand.colors
 * - typography: Pilha de fontes do sistema Apple e escala tipográfica
 * - shell: Topbar, barra de busca, menu lateral, perfil e rodapé
 * - cards: Cartões, modais, painéis e elevação
 * - buttons: Botões primários pílula, secundários e ações
 * - forms: Controles de formulário, inputs, selects e checkboxes
 * - tables: Tabelas de recursos, cabeçalhos e paginação
 * - dashboards: Métricas display, cartões analíticos e filtros
 * - vendors: Isolamento para pacotes (nova-dashboard, detached-filters, etc.)
 */

/* Apple HIG adapted to SocialNexa. Brand values are supplied by Nova. */

:root {
  --apple-font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --apple-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --apple-accent: rgb(var(--colors-primary-500));
  --apple-accent-hover: color-mix(in srgb, var(--apple-accent), black 12%);
  --apple-accent-active: color-mix(in srgb, var(--apple-accent), black 20%);
  --apple-link: color-mix(in srgb, var(--apple-accent), black 12%);
  --apple-accent-tint: color-mix(in srgb, var(--apple-accent) 12%, transparent);
  --apple-accent-contrast: #fff;
  --apple-bg-base: #f5f5f7;
  --apple-bg-surface: #fff;
  --apple-bg-secondary: #efeff2;
  --apple-bg-tertiary: #e8e8ed;
  --apple-bg-nav: #e8e8ed;
  --apple-bg-hover: #f5f5f7;
  --apple-bg-backdrop: rgb(232 232 237 / 88%);
  --apple-border: #d8d8dc;
  --apple-border-input: #c7c7cc;
  --apple-border-divider: #e8e8ed;
  --apple-border-hairline: .5px solid var(--apple-border);
  --apple-text-primary: #1d1d1f;
  --apple-text-secondary: #515154;
  --apple-text-muted: #6e6e73;
  --apple-text-placeholder: #6e6e73;
  --apple-radius-xs: 4px;
  --apple-radius-sm: 6px;
  --apple-radius-md: 10px;
  --apple-radius-lg: 12px;
  --apple-radius-xl: 16px;
  --apple-radius-pill: 9999px;
  --apple-control-height: 36px;
  --apple-row-height: 56px;
  --apple-shadow-card: none;
  --apple-shadow-dropdown: 0 8px 28px rgb(0 0 0 / 12%);
  --apple-shadow-modal: 0 16px 48px rgb(0 0 0 / 20%);
  --apple-shadow-btn-primary: 0 1px 2px rgb(0 0 0 / 12%);
  --apple-focus-ring: 0 0 0 3px color-mix(in srgb, var(--apple-accent) 28%, transparent);
  --apple-success: #178348;
  --apple-danger: #c6293d;
  --apple-danger-solid: #c6293d;
  --apple-warning: #946200;
  --apple-success-tint: color-mix(in srgb, var(--apple-success) 12%, transparent);
  --apple-danger-tint: color-mix(in srgb, var(--apple-danger) 12%, transparent);
}

html.dark {
  /* Nova's 400 can contain alpha, so it is not a readable foreground token. */
  --apple-link: color-mix(in srgb, var(--apple-accent), white 58%);
  --apple-accent-tint: color-mix(in srgb, var(--apple-accent) 22%, transparent);
  --apple-bg-base: #1c1c1e;
  --apple-bg-surface: #2c2c2e;
  --apple-bg-secondary: #363638;
  --apple-bg-tertiary: #252527;
  --apple-bg-nav: #252527;
  --apple-bg-hover: #343436;
  --apple-bg-backdrop: rgb(37 37 39 / 88%);
  --apple-border: #48484a;
  --apple-border-input: #68686d;
  --apple-border-divider: #3a3a3c;
  --apple-text-primary: #f5f5f7;
  --apple-text-secondary: #d1d1d6;
  --apple-text-muted: #aeaeb2;
  --apple-text-placeholder: #aeaeb2;
  --apple-success: #82dfa5;
  --apple-danger: #ffa0a4;
  --apple-warning: #f7ce70;
  --apple-shadow-dropdown: 0 8px 28px rgb(0 0 0 / 40%);
  --apple-shadow-modal: 0 16px 48px rgb(0 0 0 / 50%);
}

/* Keep the scale local to Nova and its teleported UI. */

body:has(#nova) {
  font-family: var(--apple-font-sans);
  -webkit-font-smoothing: antialiased;
}

#nova {
  font-size: 14px;
  color: var(--apple-text-primary);
}

#nova :is(h1,h2,h3,h4), body:has(#nova) .modal :is(h1,h2,h3) {
  color: var(--apple-text-primary);
  font-family: var(--apple-font-sans);
  font-weight: 600;
  letter-spacing: -.02em;
}

#nova :is(h1[dusk],h1.page-heading) {
  font-size: 28px;
  line-height: 1.4;
  margin-bottom: 24px;
}

#nova :is(h2,h3) { letter-spacing: -.01em; }

#nova :is(.text-gray-400,.text-gray-500,.text-gray-600,.text-gray-700) {
  color: var(--apple-text-secondary);
}

:is(#nova,body:has(#nova) .card) :is(.link-default,.text-primary-500,.text-primary-600):not(.bg-primary-500):not(.bg-primary-600) {
  color: var(--apple-link);
}

#nova :is(code,kbd,pre) { font-family: var(--apple-font-mono); }

@media (max-width: 767px) {
  #nova :is(h1[dusk],h1.page-heading) { font-size: 24px; }
}

/* Preserve the Nova layout and the installed menu's expansion behavior. */

body:has(#nova), #nova { background: var(--apple-bg-base); }

#nova [dusk="content"] > .space-y-8 { min-width: 0; }

#nova header.h-14.shadow-b {
  height: 64px;
  background: var(--apple-bg-backdrop);
  border-bottom: var(--apple-border-hairline);
  box-shadow: none;
  backdrop-filter: blur(24px);
}

#nova header.h-14.shadow-b :is(button,[role="button"]) {
  color: var(--apple-text-secondary);
  border-radius: var(--apple-radius-md);
}

#nova header.h-14.shadow-b :is(button,[role="button"]):hover {
  background-color: var(--apple-bg-hover);
}

#nova [dusk="global-search"] {
  height: var(--apple-control-height);
  border-radius: var(--apple-radius-md);
}

#nova [dusk="global-search"] + *, #nova header.h-14.shadow-b svg { flex-shrink: 0; }

@media (min-width: 768px) {
  #nova [dusk="content"] > .space-y-8 { padding: 32px 40px; }
}

#nova [dusk="content"] .mt-8.leading-normal.text-xs.text-gray-500.space-y-1 {
  color: var(--apple-text-muted);
  font-size: 12px;
  padding-block: 24px;
}

#nova footer a { color: var(--apple-link); }

/* Nova teleports dropdowns to body, outside #nova. Do not style the overlay. */

body:has(#nova) [dusk="dropdown-menu"] > div {
  background: var(--apple-bg-surface);
  color: var(--apple-text-primary);
  border: var(--apple-border-hairline);
  border-radius: var(--apple-radius-lg);
  box-shadow: var(--apple-shadow-dropdown);
}

body:has(#nova) [dusk="dropdown-menu"] :is(button,a) {
  color: var(--apple-text-primary);
  font-family: var(--apple-font-sans);
  font-size: 13px;
  border-radius: var(--apple-radius-sm);
}

body:has(#nova) [dusk="dropdown-menu"] :is(button,a):not(:disabled):hover {
  background-color: var(--apple-bg-hover);
  color: var(--apple-link);
}

body:has(#nova) [dusk="dropdown-menu"] :is(h3,label) {
  color: var(--apple-text-secondary);
}

/* Card.vue's structural classes, not all rounded/shadowed elements. */

#nova :is(.relative.overflow-hidden.bg-white.rounded-lg.shadow,.card,.panel,.tab-card),
body:has(#nova) .modal .relative.overflow-hidden.bg-white.rounded-lg.shadow,
body:has(#nova) .card {
  background-color: var(--apple-bg-surface);
  color: var(--apple-text-primary);
  border: var(--apple-border-hairline);
  border-radius: var(--apple-radius-xl);
  box-shadow: var(--apple-shadow-card);
}

/* Tabs own the outside frame. Keep overflow available for field popovers. */

#nova .tab-card > .tab-menu {
  background-color: var(--apple-bg-surface);
  border-color: var(--apple-border-divider);
  border-radius: calc(var(--apple-radius-xl) - .5px) calc(var(--apple-radius-xl) - .5px) 0 0;
}

#nova .tab-card > .tab-menu > .tab-item {
  background-color: transparent;
  border-color: var(--apple-border-divider);
  border-radius: 0;
}

#nova .tab-card > .tab-menu > .tab-item:first-child { border-top-left-radius: inherit; }

#nova .tab-card > .tab-menu > .tab-item:last-child { border-top-right-radius: inherit; }

#nova .tab-card > .tab-menu > .tab-item:not(:disabled):hover { background-color: var(--apple-bg-hover); }

/* Only the resource index surface inside a tab loses its duplicate card frame. */

#nova .tab-card .tab > .divide-y > [dusk$="-index-component"] > .relative.overflow-hidden.bg-white.rounded-lg.shadow {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#nova .tab-card .tab > .divide-y > [dusk$="-index-component"]:last-child > .relative.overflow-hidden.bg-white.rounded-lg.shadow {
  border-radius: 0 0 calc(var(--apple-radius-xl) - .5px) calc(var(--apple-radius-xl) - .5px);
}

/* Selected options and information badges use Nova's primary tint. */

:is(#nova,body:has(#nova) .card) .bg-primary-50 {
  background-color: var(--apple-accent-tint);
}

/* Modal.vue teleports the wrapper and backdrop. Only the inner surface is a card. */

body:has(#nova) .modal[data-modal-open] :is(form.bg-white,div.bg-white.rounded-lg) {
  background-color: var(--apple-bg-surface);
  color: var(--apple-text-primary);
  border: var(--apple-border-hairline);
  border-radius: var(--apple-radius-xl);
  box-shadow: var(--apple-shadow-modal);
}

body:has(#nova) .modal :is(.bg-gray-100,.bg-gray-50) {
  background-color: var(--apple-bg-secondary);
}

body:has(#nova) .modal .bg-white {
  background-color: var(--apple-bg-surface);
}

body:has(#nova) [dusk="modal-backdrop"] {
  background: rgb(0 0 0 / 35%);
  backdrop-filter: blur(12px);
}

#nova :is(.help-text,.text-gray-500),
body:has(#nova) :is(.modal,.card) :is(.help-text,.text-gray-500) { color: var(--apple-text-muted); }

#nova .divide-y > :not([hidden]) ~ :not([hidden]),
body:has(#nova) .modal .border-b { border-color: var(--apple-border-divider); }

body:has(#nova) :is(.toasted,[role="alert"]) {
  font-family: var(--apple-font-sans);
  border-radius: var(--apple-radius-md);
}

/* Variant classes supplied by Nova UI. Never classify every submit/ghost as primary. */

:is(#nova,body:has(#nova) :is(.modal,.card)) :is(button,a):is(.bg-primary-500,.bg-primary-600,.btn-primary,[dusk="create-and-add-another-button"]) {
  background-color: var(--apple-accent);
  color: var(--apple-accent-contrast);
  border-color: transparent;
  border-radius: var(--apple-radius-pill);
  font-size: 13px;
  font-weight: 600;
  min-height: var(--apple-control-height);
  padding: 7px 18px;
  box-shadow: var(--apple-shadow-btn-primary);
}

:is(#nova,body:has(#nova) :is(.modal,.card)) :is(button,a):is(.bg-primary-500,.bg-primary-600,.btn-primary):not(:disabled):hover {
  background-color: var(--apple-accent-hover);
}

:is(#nova,body:has(#nova) :is(.modal,.card)) :is(button,a):is(.bg-primary-500,.bg-primary-600,.btn-primary):not(:disabled):active {
  background-color: var(--apple-accent-active);
}

:is(#nova,body:has(#nova) :is(.modal,.card)) :is(.btn-default,button.bg-white) {
  background: var(--apple-bg-secondary);
  color: var(--apple-text-primary);
  border: var(--apple-border-hairline);
  border-radius: var(--apple-radius-md);
}

:is(#nova,body:has(#nova) :is(.modal,.card)) :is(button.bg-red-500,button.bg-red-600,.btn-danger,[dusk="confirm-delete-button"]) {
  background: var(--apple-danger-solid);
  color: white;
  border-color: transparent;
  border-radius: var(--apple-radius-pill);
  min-height: var(--apple-control-height);
}

/* Ghost/link cancel buttons reveal their shape on hover and focus, including teleported modals. */

body:has(#nova) :is(button,a)[dusk^="cancel-"] {
  border-radius: var(--apple-radius-pill);
}

body:has(#nova) :is(button,a,input,textarea,select,[tabindex]):focus-visible {
  outline: 2px solid var(--apple-link);
  outline-offset: 2px;
}

:is(#nova,body:has(#nova) :is(.modal,.card)) :is(button:disabled,a[aria-disabled="true"]) {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  #nova :is(button,a,input,select,textarea) { transition: none; }
}

#nova button[dusk="create-and-add-another-button"] {
  background: var(--apple-bg-surface);
  color: var(--apple-link);
  border: 1px solid var(--apple-border-input);
  box-shadow: none;
}

#nova button[dusk="create-and-add-another-button"]:not(:disabled):hover { background: var(--apple-bg-hover); }

/* Native link controls also appear inside portaled calendar and select cards. */

body:has(#nova) .card :is(a,button).link-default { color: var(--apple-link); }

/* Empty-state Create/Attach links use Nova's outline variant. Their dusk name
   is also used by filled toolbar/form controls and must not select a variant. */

#nova :is(a,button)[dusk="create-button"][variant="outline"] {
  background: transparent;
  color: var(--apple-link);
  border: 1px solid currentColor;
  border-radius: var(--apple-radius-pill);
  font-size: 13px;
  font-weight: 600;
  min-height: var(--apple-control-height);
  padding: 7px 18px;
  box-shadow: none;
}

#nova :is(a,button)[dusk="create-button"][variant="outline"]:not(:disabled):is(:hover,:active) {
  background: transparent;
  color: var(--apple-link);
  border-color: currentColor;
}

/* Text controls only: a blanket input rule also resizes checkbox filters. */

/* Relationship selects use div.form-select and teleport their search popup. */

#nova div.form-select[dusk$="-search-input-selected"] {
  box-shadow: none;
  background: var(--apple-bg-secondary);
  color: var(--apple-text-primary);
  border: 1px solid var(--apple-border-input);
  border-radius: var(--apple-radius-md);
  min-height: var(--apple-control-height);
  padding: 7px 36px 7px 12px;
}

#nova div.form-select[dusk$="-search-input-selected"][aria-expanded="true"] { box-shadow: var(--apple-focus-ring); border-color: var(--apple-link); }

#nova [has-error="true"] div.form-select { border-color: var(--apple-danger); }

body:has(#nova) [dusk$="-search-input-dropdown"] {
  background: var(--apple-bg-surface);
  color: var(--apple-text-primary);
  border: var(--apple-border-hairline);
  border-radius: var(--apple-radius-lg);
  box-shadow: var(--apple-shadow-dropdown);
}

body:has(#nova) [dusk$="-search-input-dropdown"] input {
  background: var(--apple-bg-secondary);
  color: var(--apple-text-primary);
  border-color: var(--apple-border);
}

body:has(#nova) [dusk$="-search-input-dropdown"] input::placeholder { color: var(--apple-text-placeholder); }

body:has(#nova) [dusk$="-search-input-dropdown"] [role="option"]:hover { background: var(--apple-bg-hover); }

:is(#nova,body:has(#nova) .modal,body:has(#nova) [dusk="dropdown-menu"]) :where(input:not([type="checkbox"],[type="radio"],[type="file"],[type="range"],[type="color"],[type="hidden"]),textarea,select,.form-control.form-select) {
  font-family: var(--apple-font-sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--apple-text-primary);
  background-color: var(--apple-bg-secondary);
  border: 1px solid var(--apple-border-input);
  border-radius: var(--apple-radius-md);
  box-shadow: none;
  padding: 7px 12px;
  min-height: var(--apple-control-height);
}

:is(#nova,body:has(#nova) .modal) textarea { min-height: 96px; }

:is(#nova,body:has(#nova) .modal) select { padding-right: 36px; }

:is(#nova,body:has(#nova) .modal) :is(input,textarea)::placeholder {
  color: var(--apple-text-placeholder);
  opacity: 1;
}

:is(#nova,body:has(#nova) .modal) :is(input:not([type="checkbox"],[type="radio"],[type="file"],[type="range"],[type="color"],[type="hidden"]),textarea,select):focus,
body:has(#nova) .form-control.form-select:focus-within {
  background-color: var(--apple-bg-surface);
  border-color: var(--apple-link);
  box-shadow: var(--apple-focus-ring);
}

/* KeyValue uses autosizing textareas as table cells, not standalone controls. */

:is(#nova,body:has(#nova) .modal) :has(> .key-value-items) > :first-child > :first-child,
:is(#nova,body:has(#nova) .modal) .key-value-fields > :first-child {
  flex: 0 0 35%;
  width: 35%;
  max-width: 12rem;
}

:is(#nova,body:has(#nova) .modal) .key-value-fields,
:is(#nova,body:has(#nova) .modal) .key-value-fields > div {
  min-width: 0;
}

:is(#nova,body:has(#nova) .modal) .key-value-item textarea {
  min-height: var(--apple-control-height);
  border: 0;
  border-radius: 0;
  background-color: transparent;
  resize: none;
}

:is(#nova,body:has(#nova) .modal) .key-value-item textarea:focus {
  background-color: var(--apple-bg-surface);
  box-shadow: inset 0 0 0 2px var(--apple-link);
  outline: none;
}

#nova input:is([dusk="global-search"],[dusk="search-input"]) {
  padding-left: 40px;
  height: 36px;
}

#nova .relative:has(> :is([dusk="global-search"],[dusk="search-input"])) > svg {
  top: 4px;
  transform: translateY(4px);
  margin-left: 12px;
  width: 20px;
  height: 20px;
  color: var(--apple-text-muted);
}

/* Native FileUpload uses a non-button visual label inside its drop target. */

#nova [role="button"].border-dashed {
  background: var(--apple-bg-secondary);
  border: 1px dashed var(--apple-border-input);
  border-radius: var(--apple-radius-lg);
}

#nova [role="button"].border-dashed .bg-primary-500 {
  background: var(--apple-accent);
  color: white;
  border-color: transparent;
  border-radius: var(--apple-radius-pill);
}

#nova :is(.border-gray-100,.border-gray-200,.border-gray-700) { border-color: var(--apple-border-divider); }

/* Nova UI's accessible checkbox is a role-bearing div, with its glyph in a span. */

body:has(#nova) [role="checkbox"] > span {
  background: var(--apple-bg-surface);
  border-color: var(--apple-border-input);
  border-radius: var(--apple-radius-xs);
}

body:has(#nova) [role="checkbox"]:is([data-state="checked"],[data-state="indeterminate"]) > span {
  background: var(--apple-accent);
  border-color: var(--apple-accent);
  color: white;
}

@media (max-width: 767px) {
  /* Native field rows already stack; their configured fractional widths must expand too. */
  #nova .flex.flex-col:has(> .py-6.px-8) > .py-6.px-8 {
    width: 100%;
    padding: 16px 24px;
  }
  #nova .flex.flex-col:has(> .py-6.px-8) > .py-6.px-8:first-child { padding-bottom: 0; }
}

:is(#nova,body:has(#nova) .modal) label:not(:has(input[type="checkbox"],input[type="radio"])) {
  color: var(--apple-text-secondary);
  font-size: 12px;
  font-weight: 600;
}

:is(#nova,body:has(#nova) .modal) label:has(input[type="checkbox"],input[type="radio"]) {
  color: var(--apple-text-primary);
  font-size: 14px;
  font-weight: 400;
}

:is(#nova,body:has(#nova) .modal) :is(.checkbox,.fake-checkbox,input[type="radio"]) {
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  flex-shrink: 0;
  color: var(--apple-accent);
  background-color: var(--apple-bg-surface);
  border: 1px solid var(--apple-border-input);
  border-radius: var(--apple-radius-xs);
}

:is(#nova,body:has(#nova) .modal) :is(.checkbox:checked,.checkbox:indeterminate,.fake-checkbox-checked,.fake-checkbox-indeterminate) {
  background-color: var(--apple-accent);
  border-color: var(--apple-accent);
}

/* Preserve Nova's own check and indeterminate glyphs; dark glyph needs a light fill. */

html.dark #nova :is(.checkbox:checked,.checkbox:indeterminate,.fake-checkbox-checked,.fake-checkbox-indeterminate) {
  background-color: var(--apple-link);
  border-color: var(--apple-link);
}

:is(#nova,body:has(#nova) .modal) input[type="radio"] { border-radius: 50%; accent-color: var(--apple-accent); }

:is(#nova,body:has(#nova) .modal) :is(input,select,textarea):disabled {
  opacity: .6;
  cursor: not-allowed;
}

:is(#nova,body:has(#nova) .modal) :is(.form-input-bordered-error,[aria-invalid="true"],input:user-invalid) {
  border-color: var(--apple-danger);
}

:is(#nova,body:has(#nova) .modal) :is(.help-text-error,[dusk$="-error"]) {
  color: var(--apple-danger);
  font-size: 12px;
}

/* Nova KeyValue uses its own surfaces instead of regular form controls. */

#nova .key-value-items,
#nova .key-value-fields > div,
#nova div:has(> .key-value-items),
#nova div:has(> .key-value-items) > div:first-child {
  background: var(--apple-bg-surface);
  color: var(--apple-text-primary);
  border-color: var(--apple-border-input);
}

#nova .key-value-fields,
#nova .key-value-fields > div,
#nova div:has(> .key-value-items) > div:first-child > div {
  border-color: var(--apple-border-divider);
  min-width: 0;
}

#nova .key-value-fields textarea {
  background: var(--apple-bg-surface);
  color: var(--apple-text-primary);
  font-family: var(--apple-font-sans);
  font-size: 14px;
  min-height: var(--apple-control-height);
  border: 0;
  border-radius: 0;
}

#nova .key-value-fields textarea:focus {
  background: var(--apple-bg-surface);
  outline: 2px solid var(--apple-accent);
  outline-offset: -2px;
  box-shadow: none;
}

#nova .key-value-fields textarea[readonly] {
  background: var(--apple-bg-secondary);
  color: var(--apple-text-secondary);
}

@media (max-width: 767px) {
  #nova .key-value-fields > div:first-child,
  #nova div:has(> .key-value-items) > div:first-child > div:first-child {
    width: 35%;
  }
}

/* Resource tables and the installed TableWidget share this contract. */

#nova :is(table[dusk="resource-table"],table[data-testid="resource-table"]) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--apple-font-sans);
}

#nova table :is(thead,thead tr,th) {
  background: var(--apple-bg-secondary);
  color: var(--apple-text-secondary);
}

#nova table th {
  height: 44px;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .025em;
  white-space: nowrap;
}

#nova table th :is(span,button) { font: inherit; color: inherit; }

#nova table tbody tr { background-color: var(--apple-bg-surface); }

#nova table tbody td {
  color: var(--apple-text-primary);
  background-color: transparent;
  border-top: 0;
  border-bottom: .5px solid var(--apple-border-divider);
  padding: 10px 12px;
  height: var(--apple-row-height);
  font-size: 13px;
  line-height: 19px;
}

#nova table tbody tr:hover > td { background-color: var(--apple-bg-hover); }

#nova table tbody tr:has(input[type="checkbox"]:checked) > td {
  background-color: var(--apple-accent-tint);
}

#nova table td a.link-default { color: var(--apple-link); }

#nova table td :is(a[dusk$="-view-button"],a[dusk$="-edit-button"],button[dusk$="-delete-button"]) {
  color: var(--apple-text-secondary);
  background: transparent;
  box-shadow: none;
  border-color: transparent;
  border-radius: var(--apple-radius-sm);
}

#nova table td button[dusk$="-delete-button"]:hover { color: var(--apple-danger); background: var(--apple-danger-tint); }

#nova table td svg:is(.text-green-500,.text-emerald-500) { color: var(--apple-success); }

#nova table td svg:is(.text-red-500,.text-rose-500) { color: var(--apple-danger); }

#nova table td svg:is(.text-green-500,.text-red-500) { width: 18px; height: 18px; }

#nova nav:has(> [dusk="previous"]) {
  min-height: 52px;
  color: var(--apple-text-secondary);
  background-color: var(--apple-bg-surface);
  border-top: 0;
  font-size: 13px;
}

/* ResourcePagination already owns this separator; do not stack a row and nav border. */

#nova .border-t:has(> .rounded-b-lg [dusk="previous"]) {
  border-top: var(--apple-border-hairline);
}

#nova .relative.overflow-hidden.bg-white.rounded-lg.shadow:has([dusk="previous"]) :is(table[dusk="resource-table"],table[data-testid="resource-table"]) tbody tr:last-child td {
  border-bottom: 0;
}

#nova :is([dusk="previous"],[dusk="next"]) { color: var(--apple-link); font-size: 13px; font-weight: 500; }

#nova :is([dusk="previous"],[dusk="next"]):disabled { color: var(--apple-text-muted); opacity: 1; }

/* The news card renders rows directly under table (without a tbody). */

#nova table.table-default > tr > td {
  background: var(--apple-bg-surface);
  color: var(--apple-text-primary);
  border-color: var(--apple-border-divider);
  padding: 12px;
  font-size: 14px;
}

#nova table.table-default > tr:hover > td { background: var(--apple-bg-hover); }

/* Third-party widgets have their own flex alignment and inner backgrounds. */

#nova .value-widget {
  padding: 24px;
  justify-content: flex-start;
  align-items: flex-start;
}

#nova .value-widget > .relative {
  align-items: flex-start;
  text-align: left;
  gap: 4px;
}

#nova .value-widget__title { font-size: 14px; font-weight: 600; color: var(--apple-text-secondary); }

#nova .value-widget__value { font-size: 40px; line-height: 1.2; letter-spacing: -.025em; font-weight: 600; color: var(--apple-link); }

#nova .chartjs-widget { padding: 24px; }

#nova .chartjs-widget > .relative > .flex > .text-sm { font-size: 18px; color: var(--apple-text-primary); padding: 0 0 16px; }

#nova .chartjs-widget [class*="--chart-background-color"] { background: transparent; }

#nova .nova-dashboard-filter { padding: 12px 20px; }

#nova .nova-dashboard-filter .filter__inner { background: var(--apple-bg-surface); padding: 16px 0; }

#nova .nova-dashboard-filter .filter__loop { min-width: 0; }

#nova .nova-dashboard-filter .filter__header { color: var(--apple-text-secondary); }

#nova .nova-dashboard-filter .filter__header button { color: var(--apple-text-secondary); }

#nova .nova-dashboard-filter h3 { text-transform: none; letter-spacing: 0; font-size: 12px; }

#nova .nova-dashboard-filter :is(input:not([type="checkbox"],[type="radio"],[type="hidden"]),select) { min-height: 40px; }

#nova .table-widget { padding: 0; align-items: stretch; }

#nova .table-widget > .relative,
#nova .table-widget .overflow-x-auto { background: var(--apple-bg-surface); border-radius: inherit; }

#nova .table-widget .overflow-x-auto { height: 100%; }

#nova .table-widget tbody td { height: 40px; padding-block: 8px; }

#nova .table-widget .text-sm.font-bold { padding: 20px 24px 16px; font-size: 18px; color: var(--apple-text-primary); }

@media (max-width: 767px) {
  #nova .nova-dashboard-filter > .flex { height: auto; min-height: 56px; flex-wrap: wrap; gap: 8px; }
  #nova .nova-dashboard-filter .filter__header { flex-basis: 100%; justify-content: flex-start; }
  #nova .nova-dashboard-filter .filter__loop { width: 100%; }
}

/* Scoped layout; palette, surfaces and controls follow Nova's light/dark theme. */

.laravel-log-dashboard { width:100%; min-width:0; max-width: 1600px; margin: 0 auto; color: var(--apple-text-primary); }

.log-heading,.log-section-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; flex-wrap:wrap; }

.log-heading h1 { font-size:28px; font-weight:700; letter-spacing:-.6px; margin:4px 0 8px; }

.log-eyebrow { font-size:11px; font-weight:700; letter-spacing:1.6px; opacity:.6; }

.log-muted { font-size:13px; opacity:.72; line-height:1.6; margin:6px 0 12px; }

.log-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.log-btn { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:7px 12px; border:1px solid var(--apple-border-input); border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; background:transparent; text-decoration:none; color:inherit; line-height:1.4; white-space:nowrap; }

.log-btn.primary { background:var(--apple-accent); border-color:var(--apple-accent); color:white; }

.log-btn:hover:not(:disabled) { background:var(--apple-bg-secondary); color:var(--apple-text-primary); }

.log-btn.primary:hover:not(:disabled) { background:var(--apple-accent-hover); color:white; }

.log-btn:disabled,.log-btn[aria-disabled=true] { opacity:.45; cursor:default; }

.log-btn:focus-visible,.log-tabs button:focus-visible,.log-card:focus-visible { outline:3px solid var(--apple-accent); outline-offset:3px; }

.log-coverage { display:flex; align-items:center; gap:12px; background:var(--apple-accent-tint); border:1px solid var(--apple-border); padding:14px 18px; border-radius:10px; font-size:13px; }

.log-coverage .log-btn { margin-left:auto; }

.log-coverage small { opacity:.7; }

.log-dot { width:8px; height:8px; border-radius:50%; background:var(--apple-success); flex-shrink:0; }

.log-dot.partial { background:var(--apple-warning); }

.log-tabs { display:flex; gap:24px; border-bottom:1px solid var(--apple-bg-secondary); margin:24px 0; }

.log-tabs button { padding:12px 2px; font-size:14px; font-weight:600; border-bottom:3px solid transparent; opacity:.65; }

.log-tabs button.active { border-color:var(--apple-accent); color:var(--apple-accent); opacity:1; }

.log-panel { min-width:0; padding:24px; margin-bottom:20px; }

.log-panel h2 { font-size:16px; font-weight:650; margin:0 0 8px; }

.log-panel h3 { font-size:14px; font-weight:650; margin:20px 0 10px; }

.log-filter-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:16px; }

.log-filters label { display:flex; flex-direction:column; gap:7px; font-size:12px; font-weight:600; }

.log-filters input:not([type=checkbox]),.log-filters select { width:100%; min-width:0; min-height:38px; }

.log-search-row { display:flex; align-items:flex-end; gap:12px; margin-bottom:14px; }

.log-search { flex:1; }

.log-check { display:inline-flex!important; flex-direction:row!important; gap:8px!important; align-items:center; font-size:12px; }

.log-filters details { margin:12px 0; }

.log-filters summary { font-size:12px; cursor:pointer; margin-bottom:12px; }

.log-chip { display:inline-flex; gap:10px; font-size:12px; padding:4px 10px; border:1px solid var(--apple-border); border-radius:20px; }

.log-cards { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; margin-bottom:20px; }

.log-card { padding:20px; text-align:left; display:flex; flex-direction:column; gap:10px; cursor:pointer; }

.log-card span { font-size:12px; font-weight:600; opacity:.7; }

.log-card strong { font-size:32px; font-weight:700; letter-spacing:-1px; }

.log-card small { font-size:11px; opacity:.6; line-height:1.5; }

.log-charts { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:20px; }

.log-chart { height:280px; position:relative; }

.log-chart > div { height:100%; }

.log-rankings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }

.log-ranking { display:flex; min-width:0; align-items:flex-start; justify-content:space-between; gap:20px; width:100%; text-align:left; padding:15px 0; border-bottom:1px solid var(--apple-bg-secondary); }

.log-ranking span { flex:1; min-width:0; font-size:12px; line-height:1.6; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

.log-ranking strong { flex-shrink:0; white-space:nowrap; font-variant-numeric:tabular-nums; font-size:15px; color:var(--apple-danger); }

.log-ranking:focus-visible { outline:3px solid var(--apple-accent); outline-offset:3px; border-radius:4px; }

.log-table-wrap { overflow:auto; }

.log-table { width:100%; border-collapse:collapse; font-size:12px; }

.log-table th { text-align:left; padding:12px; background:var(--apple-bg-secondary); font-size:10px; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; }

.log-table td { padding:14px 12px; border-bottom:1px solid var(--apple-bg-secondary); vertical-align:top; }

.log-table small { display:block; font-size:11px; opacity:.65; margin-top:5px; }

.log-message { min-width:260px; max-width:620px; overflow-wrap:anywhere; }

.log-message > span { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

.log-badge { display:inline-block; padding:3px 7px; border-radius:5px; font-size:10px; font-weight:700; white-space:nowrap; }

.log-badge.danger { background:var(--apple-danger-tint); color:var(--apple-danger); }

.log-badge.warning { background:#fef3c7; color:#92400e; }

.log-badge.notice { background:#ede9fe; color:#6d28d9; }

.log-badge.neutral { background:var(--apple-bg-secondary); color:var(--apple-text-secondary); }

.log-pagination { display:flex; justify-content:flex-end; align-items:center; gap:16px; margin-top:20px; font-size:12px; }

.log-empty,.log-center { text-align:center; padding:30px; opacity:.65; }

.log-error { color:var(--apple-danger); background:var(--apple-danger-tint); border:1px solid var(--apple-danger); border-radius:8px; padding:14px; margin-bottom:16px; font-size:13px; }

.log-warning { padding:10px 0; color:var(--apple-warning); font-size:12px; }

.log-update-banner { width:100%; padding:12px; background:var(--apple-accent-tint); color:var(--apple-accent-hover); border-radius:8px; margin-bottom:15px; font-size:13px; }

.log-checksum { font-family:monospace; font-size:10px; overflow-wrap:anywhere; max-width:320px; }

.log-detail-meta { display:flex; align-items:center; gap:12px; font-size:12px; }

.log-message-full { margin:16px 0; font-size:15px; overflow-wrap:anywhere; }

.log-raw { white-space:pre-wrap; overflow-wrap:anywhere; font-family:monospace; font-size:12px; line-height:1.7; max-height:400px; overflow:auto; background:var(--apple-bg-secondary); border:1px solid var(--apple-bg-secondary); padding:16px; border-radius:8px; margin:12px 0; }

.log-prompt { width:100%; min-height:260px; resize:vertical; padding:16px; font-family:monospace; font-size:12px; line-height:1.7; background:var(--apple-bg-secondary); color:var(--apple-text-primary); border:1px solid var(--apple-border-input); border-radius:8px; }

@media(max-width:1100px) { .log-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }.log-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

@media(max-width:700px) { .log-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }.log-charts,.log-rankings { grid-template-columns:minmax(0,1fr); }.log-search-row,.log-coverage { flex-wrap:wrap; }.log-search { flex-basis:100%; }.log-panel { padding:16px; }.log-heading h1 { font-size:24px; } }

/* Package adapters, validated against installed templates; no vendor edits. */

/* These two packages ship !important backgrounds. Keep the override local. */

#nova :is(.chartjs-widget,.table-widget) { background: var(--apple-bg-surface) !important; }

#nova [id="o1-detached-card"] {
  margin-bottom: 0;
  min-height: 0;
  overflow: visible;
}

#nova [id="o1-detached-card"] > .flex.flex-wrap { padding: 24px; max-height: none; }

#nova .nova-detached-filter { width: 100%; min-width: 0; }

#nova .nova-detached-filter > .pt-2 { width: 100%; padding: 0 0 16px; }

#nova .nova-detached-filter h3 { padding: 0; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--apple-text-secondary); }

#nova .nova-detached-filter h3 + div { margin-top: 8px; padding-inline: 0; }

#nova .nova-detached-filter :is(input:not([type="checkbox"],[type="radio"],[type="hidden"]),select) { height: 40px; }

#nova .nova-detached-filter label:has(.checkbox) { min-height: 28px; margin-top: 12px; }

@media (max-width: 1100px) {
  #nova [id="o1-detached-card"] { grid-column: 1 / -1; }
}

/* The responsive menu is teleported outside #nova. Scope both variants to
   the Nova page, while keeping layout overrides specific to each variant. */

#nova #collapsible-resource-manager-desktop { top: 0; }

#nova #collapsible-resource-manager-desktop > .flex { min-height: calc(100vh - 64px); }

#nova #collapsible-resource-manager-desktop > .flex > .items-center { padding: 16px 12px; }

body:has(#nova) :is(#collapsible-resource-manager-desktop, #collapsible-resource-manager-responsive) {
  color: var(--apple-text-secondary);
  font-family: var(--apple-font-sans);
}

body:has(#nova) :is(#collapsible-resource-manager-desktop, #collapsible-resource-manager-responsive) .bg-white { background-color: var(--apple-bg-nav); }

body:has(#nova) :is(#collapsible-resource-manager-desktop, #collapsible-resource-manager-responsive) :is(.border-r, .border-l, .border-b) { border-color: var(--apple-border); }

body:has(#nova) :is(#collapsible-resource-manager-desktop, #collapsible-resource-manager-responsive) button.v-popper--has-tooltip { border-radius: var(--apple-radius-md); color: var(--apple-text-secondary); }

body:has(#nova) :is(#collapsible-resource-manager-desktop, #collapsible-resource-manager-responsive) button.v-popper--has-tooltip:hover { background: var(--apple-bg-hover); }

body:has(#nova) :is(#collapsible-resource-manager-desktop, #collapsible-resource-manager-responsive) button.v-popper--has-tooltip:is(.text-primary-500,.bg-gray-100) { color: var(--apple-link); background: var(--apple-accent-tint); }

body:has(#nova) :is(#collapsible-resource-manager-desktop, #collapsible-resource-manager-responsive) .transition-width { background: var(--apple-bg-surface); color: var(--apple-text-primary); }

body:has(#nova) :is(#collapsible-resource-manager-desktop, #collapsible-resource-manager-responsive) a { border-radius: var(--apple-radius-md); font-size: 13px; color: var(--apple-text-secondary); }

body:has(#nova) :is(#collapsible-resource-manager-desktop, #collapsible-resource-manager-responsive) a:hover { background: var(--apple-bg-hover); }

body:has(#nova) :is(#collapsible-resource-manager-desktop, #collapsible-resource-manager-responsive) a.text-primary-500 { color: var(--apple-link); background: var(--apple-accent-tint); }

body:has(#nova) :is(#collapsible-resource-manager-desktop, #collapsible-resource-manager-responsive) h3 { font-size: 12px; color: var(--apple-text-muted); }

body:has(#nova) :is(#collapsible-resource-manager-desktop, #collapsible-resource-manager-responsive) .text-primary-500 { color: var(--apple-link); }

body:has(#nova) :is(#collapsible-resource-manager-desktop, #collapsible-resource-manager-responsive) :is(a, button):focus-visible {
  outline: 2px solid var(--apple-link);
  outline-offset: -2px;
}

/* Only the drawer surface receives a background, never the full-screen overlay.
   Keep room for Nova's external close button even on narrow phones. */

body:has(#nova) .max-w-xxs:has(> #collapsible-resource-manager-responsive) {
  width: min(360px, calc(100% - 56px));
  max-width: none;
  height: 100vh;
  height: 100dvh;
  background: var(--apple-bg-nav);
  color: var(--apple-text-secondary);
  box-shadow: var(--apple-shadow-modal);
}

body:has(#nova) .max-w-xxs:has(> #collapsible-resource-manager-responsive) > .border-b {
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  border-color: var(--apple-border);
}

body:has(#nova) #collapsible-resource-manager-responsive {
  flex: 1;
  min-height: 0;
}

body:has(#nova) #collapsible-resource-manager-responsive > .flex { min-height: 0; }

body:has(#nova) #collapsible-resource-manager-responsive > .flex > .items-center { flex-shrink: 0; }

body:has(#nova) #collapsible-resource-manager-responsive .transition-width {
  /* The package writes a pixel height once when opening; follow viewport resize. */
  height: 100% !important;
  min-width: 0;
}

body:has(#nova) #collapsible-resource-manager-responsive button.v-popper--has-tooltip { width: 44px; height: 44px; }

body:has(#nova) #collapsible-resource-manager-responsive a {
  min-height: 44px;
  padding-inline: 12px;
  white-space: normal;
  overflow-wrap: anywhere;
}

body:has(#nova) #collapsible-resource-manager-responsive a svg { flex-shrink: 0; }

@media (min-width: 1024px) {
  /* The installed menu participates in the flex layout and already reserves its width. */
  #nova:has(#collapsible-resource-manager-desktop) [dusk="content"] > .space-y-8 { margin-left: 0; }
}

/* DateRangePicker is appended to body and owns its popup. */

body:has(#nova) .daterangepicker {
  color: var(--apple-text-primary);
  background: var(--apple-bg-surface);
  border: var(--apple-border-hairline);
  border-radius: var(--apple-radius-lg);
  box-shadow: var(--apple-shadow-dropdown);
  font-family: var(--apple-font-sans);
}

body:has(#nova) .daterangepicker :is(.calendar-table,.drp-buttons,.ranges,select) { background: var(--apple-bg-surface); color: var(--apple-text-primary); border-color: var(--apple-border); }

body:has(#nova) .daterangepicker :is(td.off,td.disabled) { background: var(--apple-bg-surface); color: var(--apple-text-muted); }

body:has(#nova) .daterangepicker td.available:hover { background: var(--apple-bg-hover); }

body:has(#nova) .daterangepicker :is(td.active,.ranges li.active) { background: var(--apple-accent); color: white; }

body:has(#nova) .daterangepicker td.in-range { background: var(--apple-accent-tint); color: var(--apple-text-primary); }

body:has(#nova) .daterangepicker .ranges li:not(.active):hover { background: var(--apple-bg-hover); color: var(--apple-text-primary); }

body:has(#nova) .daterangepicker :is(.prev,.next) span { border-color: var(--apple-text-secondary); }

body:has(#nova) .daterangepicker .applyBtn { background: var(--apple-accent); color: white; border-radius: var(--apple-radius-pill); padding: 6px 14px; }

body:has(#nova) .daterangepicker .cancelBtn { color: var(--apple-text-secondary); }

/* Nova's Auth layout has no #nova shell. Keep its native login, recovery,
   passkey and two-factor forms while sharing the application's visual tokens. */

body:not(:has(#nova)):has(#app form) {
  min-width: 0;
  background: var(--apple-bg-base);
  color: var(--apple-text-primary);
  font-family: var(--apple-font-sans);
}

body:not(:has(#nova)) #app > div {
  min-height: 100dvh;
  padding: clamp(20px, 6vh, 64px) 16px;
  background: radial-gradient(ellipse at top, var(--apple-accent-tint), transparent 65%);
}

body:not(:has(#nova)) #app .max-w-sm {
  padding: 16px 0 28px;
}

body:not(:has(#nova)) #app .max-w-sm .h-8 {
  height: 64px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
}

body:not(:has(#nova)) #app div.bg-white.shadow.rounded-lg {
  width: 100%;
  max-width: 440px;
  padding: clamp(24px, 5vw, 36px);
  border: 1px solid var(--apple-border-divider);
  border-radius: 28px;
  background: var(--apple-bg-surface);
  color: var(--apple-text-primary);
  box-shadow: var(--apple-shadow-modal);
}

body:not(:has(#nova)) #app h2 {
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -.025em;
}

body:not(:has(#nova)) #app :has(> [data-slot="separator"]) + div > span {
  background-color: var(--apple-bg-surface);
}

body:not(:has(#nova)) #app [role="checkbox"] > span:first-child {
  background-color: var(--apple-bg-surface);
  border-color: var(--apple-border-input);
  --tw-ring-offset-color: var(--apple-bg-surface);
}

body:not(:has(#nova)) #app [role="checkbox"]:is([data-state="checked"], [data-state="indeterminate"]) > span:first-child {
  background-color: var(--apple-accent);
  border-color: var(--apple-accent);
  color: #fff;
}

body:not(:has(#nova)) #app .form-input {
  min-height: 48px;
  border: 1px solid var(--apple-border-input);
  border-radius: 14px;
  background: var(--apple-bg-secondary);
  color: var(--apple-text-primary);
  font-size: 16px;
}

body:not(:has(#nova)) #app :is(button, a[role="button"]) {
  border-radius: 999px;
  min-height: 44px;
}

body:not(:has(#nova)) #app button[type="submit"] {
  background: var(--apple-accent);
  color: #fff;
}

body:not(:has(#nova)) #app :is(button, a, input):focus-visible {
  outline: 3px solid var(--apple-accent);
  outline-offset: 3px;
}

/* Only the login has a remember control; recovery and two-factor stay still. */

@media (prefers-reduced-motion: no-preference) {
  body:not(:has(#nova)) #app > div:has([dusk="remember-button"]) .max-w-sm {
    animation: auth-enter 600ms cubic-bezier(.2, .7, .2, 1) both;
  }
  body:not(:has(#nova)) #app div.bg-white.shadow.rounded-lg:has([dusk="remember-button"]) {
    animation: auth-enter 750ms cubic-bezier(.2, .7, .2, 1) 80ms both;
  }
}

@keyframes auth-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body:not(:has(#nova)) #app > div:has([dusk="remember-button"]) {
    isolation: isolate;
    position: relative;
    overflow: clip;
  }
  body:not(:has(#nova)) #app > div:has([dusk="remember-button"])::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    z-index: -1;
    width: min(70vw, 36rem);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--apple-accent) 22%, transparent), transparent 70%);
    opacity: 0;
    transform: translate(calc(var(--auth-pointer-x, 50vw) - 50%), calc(var(--auth-pointer-y, 30vh) - 50%));
    transition: transform 450ms ease-out, opacity 350ms ease;
  }
  body:not(:has(#nova)) #app > div[data-auth-pointer]:has([dusk="remember-button"])::before {
    opacity: 1;
  }
}