/*
 * Descendant form controls inside .np-form / .np-modal-fields use daisyUI theme tokens.
 * (Inputs in modals rarely carry classes directly; this wires them to the active theme.)
 */
.np-form :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(.toggle):not(.checkbox), textarea, select),
.np-modal-fields :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(.toggle):not(.checkbox), textarea, select) {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.5rem;
  padding-inline: 0.75rem;
  padding-block: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-base-content);
  background-color: var(--color-base-100);
  border: var(--border) solid var(--color-base-300);
  border-radius: var(--radius-field);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.np-form textarea,
.np-modal-fields textarea {
  min-height: 6rem;
  resize: vertical;
}

.np-form select,
.np-modal-fields select {
  cursor: pointer;
}

.np-form :is(input, textarea, select):disabled,
.np-modal-fields :is(input, textarea, select):disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Label row: one character space between text and ? */
.np-modal-label-row {
  display: flex;
  align-items: center;
  gap: 0.3em;
  min-height: 1.1rem;
  white-space: nowrap;
}

.np-modal-label-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-base-content);
  opacity: 0.55;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  cursor: help;
  vertical-align: baseline;
}

.np-modal-label-help:hover,
.np-modal-label-help:focus-visible {
  opacity: 1;
  background: transparent;
  box-shadow: none;
}

/*
 * Compact stacked field: dropdown width = label + ? row only.
 * (np-modal-fields forces width:100% on selects and breaks grid max-content columns.)
 */
.np-modal-field-compact {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

.np-modal-field-compact__label {
  float: left;
  clear: both;
  margin-bottom: 0.25rem;
}

.np-modal-field-compact__control {
  clear: both;
}

.np-modal-field-compact select {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 2.5rem;
  padding-inline: 0.75rem;
  padding-block: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-base-content);
  background-color: var(--color-base-100);
  border: var(--border) solid var(--color-base-300);
  border-radius: var(--radius-field);
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.np-modal-field-compact select:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* DNS/SSL monitor: narrow severity + interval; uptime fills remainder. */
.np-monitor-severity-row {
  display: grid;
  width: 100%;
  grid-template-columns: max-content max-content max-content minmax(0, 1fr);
  align-items: end;
  justify-items: start;
  column-gap: 0.75rem;
  row-gap: 0.75rem;
}

.np-monitor-severity-row > .np-modal-field-compact {
  justify-self: start;
}

.np-monitor-severity-row > :not(.np-modal-field-compact) {
  min-width: 0;
  width: 100%;
  justify-self: stretch;
}


/* Uniform row fill (former zebra stripe colour); hover lifts to base-300. */
.table tbody tr {
  background-color: var(--color-base-200);
  transition: background-color 0.15s ease;
}

.table tbody tr:hover {
  background-color: var(--color-base-300);
}

/* daisyUI .modal-box caps at 32rem; NP shell classes set their own max-width. */
.modal-box.max-w-sm { max-width: 24rem; }
.modal-box.max-w-xl { max-width: 36rem; }
.modal-box.max-w-2xl { max-width: 42rem; }
.modal-box.max-w-3xl { max-width: 48rem; }
.modal-box.max-w-4xl { max-width: 56rem; }
.modal-box.max-w-7xl { max-width: 80rem; }
.modal-box.max-w-\[40rem\] { max-width: 40rem; }
.modal-box.max-w-\[min\(59\.5rem\,81\.6vw\)\] { max-width: min(59.5rem, 81.6vw); }
.modal-box.max-w-\[min\(45\.52rem\,62\.42vw\)\] { max-width: min(45.52rem, 62.42vw); }
.modal-box.max-w-\[min\(56rem\,92vw\)\] { max-width: min(56rem, 92vw); }
.modal-box.max-w-\[min\(90rem\,96vw\)\] { max-width: min(90rem, 96vw); }
.modal-box.max-w-none { max-width: none; }

/* Strip daisyUI modal elevation (0 25px 50px drop shadow). */
.modal-box,
.modal.modal-open .modal-box,
.modal.modal-open > .modal-box,
.modal-box.np-modal-box {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  filter: none !important;
}

/* NP GenericModal — daisyUI .modal-box defaults to 1.5rem padding. */
.modal-box:has(.np-modal-header-bar),
.modal-box.np-modal-box {
  --np-modal-pad: 1.5rem;
  padding: 0 !important;
  border-radius: var(--radius-box);
  overflow: hidden;
  width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
}

.modal-box:has(.np-modal-header-bar) .np-modal-header-bar,
.modal-box:has(.np-modal-header-bar) .np-modal-body-shell,
.modal-box:has(.np-modal-header-bar) .np-modal-error-rail,
.modal-box:has(.np-modal-header-bar) .np-modal-footer-shell {
  padding: var(--np-modal-pad) !important;
}

.modal-box:has(.np-modal-header-bar) .np-modal-header-bar {
  border-top-left-radius: var(--radius-box);
  border-top-right-radius: var(--radius-box);
}

.modal-box:has(.np-modal-header-bar) .np-modal-footer-shell {
  border-bottom-left-radius: var(--radius-box);
  border-bottom-right-radius: var(--radius-box);
}

/* Monitor add/edit modals — full width on mobile, 2px inset from viewport. */
@media (max-width: 767px) {
  .modal-box:has(.np-modal-header-bar) {
    --np-modal-pad: 0.8rem;
  }

  .modal-box.np-modal-monitor:has(.np-modal-header-bar) {
    --np-modal-pad: 0.4rem;
  }

  .modal.modal-open:has(.modal-box.np-modal-monitor) {
    padding: 2px !important;
  }

  .modal-box.np-modal-monitor {
    width: 100% !important;
    max-width: none !important;
  }

  .modal-box.np-modal-monitor .np-modal-footer-shell {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .modal-box.np-modal-monitor .np-modal-footer-start {
    flex: none;
    width: 100%;
  }

  .modal-box.np-modal-monitor .np-modal-footer-start:empty {
    display: none;
  }

  .modal-box.np-modal-monitor .np-modal-footer-actions {
    width: 100%;
    justify-content: space-between;
  }

  /* All NP modals — full viewport width/height on mobile; body scrolls inside. */
  .modal.modal-open.np-modal-overlay {
    display: grid !important;
    padding: 2px !important;
    place-items: stretch !important;
    align-content: stretch !important;
  }

  .modal.modal-open.np-modal-overlay > :not(.modal-box) {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    max-width: none !important;
    min-height: 0;
    height: 100%;
  }

  .modal.modal-open.np-modal-overlay .modal-box.np-modal-box {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0;
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto;
  }

  .modal.modal-open.np-modal-overlay .np-modal-body-shell {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/*
 * Data table toolbar — daisyUI loads after tw.css, so its .input/.select width clamp
 * and --size-field height win unless we override here (bridge loads last).
 */
.input.np-table-toolbar-field,
.select.np-table-toolbar-field,
.btn.np-table-toolbar-field {
  box-sizing: border-box;
  height: 2.5rem;
  min-height: 2.5rem;
  max-height: 2.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.input.np-table-toolbar-field {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.select.np-table-filter-select {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.np-table-toolbar-row {
  scrollbar-width: thin;
}

.np-table-toolbar-start {
  scrollbar-width: thin;
}

.np-table-toolbar-pagination {
  flex: 0 0 auto;
}

.input.np-table-toolbar-field[type="search"],
.input.np-table-toolbar-field:not([type]) {
  max-width: 300px;
}

.btn.np-table-toolbar-field.btn-square {
  width: 2.5rem;
  min-width: 2.5rem;
  max-width: 2.5rem;
  padding: 0;
}

.select.np-table-pagination-select {
  width: 5.25rem;
  min-width: 5.25rem;
  max-width: 5.25rem;
  padding-inline-end: 2rem;
}

.np-table-pagination-range {
  display: inline-block;
  flex: none;
  width: 7rem;
  min-width: 7rem;
  max-width: 7rem;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* daisyUI .label is inline-flex; table filter labels must stack label + control. */
label.table-toolbar-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  white-space: normal;
}

label.table-toolbar-field > span {
  align-self: flex-start;
}

@media (min-width: 1280px) {
  label.table-toolbar-field {
    width: auto;
    min-width: 6rem;
  }
}

/*
 * btn-neutral is near-black; daisyUI hover darkens (--btn-color + #000 7%) so it vanishes on dark themes.
 * Lighten on hover/active instead (matches visible primary hover feedback).
 */
@media (hover: hover) {
  .btn.btn-neutral:hover:not(:disabled):not(.btn-disabled) {
    --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)), var(--color-base-content) 14%);
    --btn-border: color-mix(in oklab, var(--btn-color, var(--color-neutral)), var(--color-base-content) 18%);
  }
}

.btn.btn-neutral:active:not(:disabled):not(.btn-disabled):not(.btn-active) {
  --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)), var(--color-base-content) 10%);
  --btn-border: color-mix(in oklab, var(--btn-color, var(--color-neutral)), var(--color-base-content) 14%);
}

/* No link underlines — daisyUI .link / .link-hover and Tailwind underline utilities. */
:where(a, .link, .link-hover, .link-primary, .link-secondary, .link-accent, .link-info, .link-success, .link-warning, .link-error) {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

:where(a, .link, .link-hover, .link-primary, .link-secondary, .link-accent, .link-info, .link-success, .link-warning, .link-error):is(:hover, :focus, :active, :visited) {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

:where(a, button).underline,
:where(a, button).hover\:underline:hover {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

:root {
  --np-mobile-nav-h: 4rem;
  --np-mobile-menu-top: calc(var(--np-mobile-nav-h) + 10px);
  --np-titlebar-h: env(titlebar-area-height, 0px);
}

/* Desktop installed PWA — window-controls-overlay titlebar drag region. */
.np-pwa-titlebar {
  display: none;
}

@media (display-mode: window-controls-overlay) {
  .np-pwa-titlebar {
    display: block;
    position: fixed;
    top: 0;
    left: env(titlebar-area-x, 0);
    width: env(titlebar-area-width, 100%);
    height: env(titlebar-area-height, 33px);
    z-index: 100;
    -webkit-app-region: drag;
    app-region: drag;
    pointer-events: auto;
  }

  .drawer {
    box-sizing: border-box;
    padding-top: var(--np-titlebar-h);
  }

  .drawer-side.np-app-drawer-side > aside.np-app-sidebar,
  .drawer-side.np-app-drawer-side > aside[aria-label="Application navigation"] {
    padding-top: calc(1.25rem + var(--np-titlebar-h));
  }

  .np-mobile-nav {
    top: var(--np-titlebar-h);
  }

  .np-app-sidebar > div:first-child {
    -webkit-app-region: drag;
    app-region: drag;
  }

  .np-app-sidebar a,
  .np-app-sidebar button,
  .np-app-sidebar input,
  .np-app-sidebar select,
  .np-app-sidebar label {
    -webkit-app-region: no-drag;
    app-region: no-drag;
  }
}

/* Lock installed PWA / authed drawer so document does not scroll the whole app. */
html.np-display_standalone,
html.np-display_window_controls_overlay,
html.np-display_fullscreen,
html.np-display_minimal_ui {
  height: 100%;
  overflow: hidden;
}

html.np-display_standalone body,
html.np-display_window_controls_overlay body,
html.np-display_fullscreen body,
html.np-display_minimal_ui body {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

html.np-display_standalone #root,
html.np-display_window_controls_overlay #root,
html.np-display_fullscreen #root,
html.np-display_minimal_ui #root {
  height: 100%;
}

.drawer-side.np-app-drawer-side {
  background-color: var(--color-base-200);
}

/* Desktop persistent sidebar: stay viewport-tall; nav scrolls inside aside. */
@media (min-width: 768px) {
  .drawer.md\:drawer-open,
  .drawer.drawer-open {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }

  .drawer.md\:drawer-open > .drawer-side.np-app-drawer-side,
  .drawer.drawer-open > .drawer-side.np-app-drawer-side {
    height: 100%;
    max-height: 100%;
    align-self: stretch;
    overflow: hidden;
  }

  .drawer.md\:drawer-open > .drawer-side.np-app-drawer-side > aside.np-app-sidebar,
  .drawer.md\:drawer-open > .drawer-side.np-app-drawer-side > aside[aria-label="Application navigation"],
  .drawer.drawer-open > .drawer-side.np-app-drawer-side > aside.np-app-sidebar,
  .drawer.drawer-open > .drawer-side.np-app-drawer-side > aside[aria-label="Application navigation"] {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
  }
}

/* Mobile drawer: menu starts header height + 10px (header is min-h-16 = 4rem). */
@media (max-width: 767px) {
  .np-mobile-nav {
    height: var(--np-mobile-nav-h);
    min-height: var(--np-mobile-nav-h);
    max-height: var(--np-mobile-nav-h);
  }

  .drawer .drawer-toggle:checked ~ .drawer-side.np-app-drawer-side {
    z-index: 40;
    top: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  .drawer-side.np-app-drawer-side > aside.np-app-sidebar,
  .drawer-side.np-app-drawer-side > aside[aria-label="Application navigation"] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* Grow with nav content; height:100% capped the painted bg above the profile dock. */
    height: auto;
    min-height: 100dvh;
    max-height: none;
    overflow: visible;
    padding-top: var(--np-mobile-menu-top) !important;
    padding-bottom: 0.75rem;
  }

  .drawer-side.np-app-drawer-side > aside.np-app-sidebar [aria-label="Primary"] {
    flex: none;
  }
}

.drawer-side > aside {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
}

.drawer.drawer-open > .drawer-side {
  width: min(100vw, 19rem);
  max-width: min(100vw, 19rem);
}

/* Assistant FAB + panel — portaled to body; explicit fixed coords (drawer must not affect placement). */
.np-assistant-fab {
  --np-assistant-fab-offset: max(1.25rem, env(safe-area-inset-bottom, 0px));
  --np-assistant-fab-size: 3rem;
  position: fixed !important;
  left: auto !important;
  right: max(1.25rem, env(safe-area-inset-right, 0px)) !important;
  bottom: var(--np-assistant-fab-offset) !important;
  z-index: 1190;
}

.np-assistant-panel {
  --np-assistant-fab-offset: max(1.25rem, env(safe-area-inset-bottom, 0px));
  --np-assistant-fab-size: 3rem;
  --np-assistant-fab-gap: 1rem;
  position: fixed !important;
  left: auto !important;
  right: max(1.25rem, env(safe-area-inset-right, 0px)) !important;
  bottom: calc(var(--np-assistant-fab-offset) + var(--np-assistant-fab-size) + var(--np-assistant-fab-gap));
  z-index: 1190;
  width: min(calc(24rem * 1.15), 92vw);
  height: min(32rem, 70vh);
  max-height: 70vh;
  overscroll-behavior: contain;
}

.np-assistant-messages {
  min-height: 0;
  overscroll-behavior: contain;
}

.np-assistant-panel .chat-start .chat-bubble {
  width: 100%;
  max-width: 100%;
}

.np-assistant-panel .chat-end .chat-bubble {
  max-width: 88%;
}

.np-assistant-icon-btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 0.375rem;
  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
  cursor: pointer;
  transition: color 0.15s ease;
}

.np-assistant-icon-btn:hover:not(:disabled) {
  color: var(--color-accent);
}

.np-assistant-icon-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.np-assistant-composer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.np-assistant-panel .np-assistant-input,
.np-assistant-panel .np-assistant-action {
  box-sizing: border-box;
  height: 2.25rem;
  min-height: 2.25rem;
  max-height: 2.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.np-assistant-panel .np-assistant-input {
  width: 100%;
  min-width: 0;
  flex: 1 1 0%;
  padding-inline: 0.75rem;
  padding-block: 0;
}

.np-assistant-panel .np-assistant-action {
  width: auto;
  min-width: 4.5rem;
  flex-shrink: 0;
  padding-inline: 0.875rem;
  padding-block: 0;
  font-weight: 600;
}