@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --ring: 235 78% 70%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --social-purple: 139 123 255;
  }
}

@layer components {
  .field_with_errors label {
    color: theme("colors.red.600") !important;
  }

  .field_with_errors input {
    border-color: theme("colors.red.500") !important;
  }

  #__authsignal-popup-container {
    z-index: 9999 !important;
    /* radix dialogs stick a `pointer-events: none` on the body, this gets around it */
    pointer-events: auto !important;
  }

  .group--conjunctions {
    display: flex !important;
    align-items: center !important;
  }

  .group-or-rule {
    background-color: theme("colors.white") !important;
  }

  .group-or-rule-container {
    margin-top: theme("spacing.1") !important;
    margin-bottom: theme("spacing.1") !important;
  }

  .group--actions button {
    margin-left: theme("spacing.1") !important;
    margin-right: theme("spacing.1") !important;
  }

  .group-or-rule {
    border-width: 0 !important;
    border-radius: theme("borderRadius.lg") !important;
  }

  .rule {
    background-color: theme("colors.gray.100") !important;
    border-width: 0 !important;
    padding: theme("spacing.6") !important;
  }

  .rule--body {
    display: flex;
    align-items: center;
    padding: theme("spacing.1");
  }

  .rule--header,
  .rule--drag-handler,
  .group--drag-handler {
    opacity: 1 !important;
  }

  .rule--widget {
    display: flex;
    align-items: center;
  }

  .widget--sep {
    align-self: center;
  }

  .rule--widget--TEXT input,
  .rule--widget--NUMBER input,
  .rule--widget--IPV4CIDR input {
    @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm !important;
  }

  .widget--valuesrc,
  .group--actions {
    @apply opacity-100 !important;
  }

  .rule--operator {
    flex-shrink: 0;
  }

  .rule--widget--IPV4CIDR .widget--widget {
    margin-bottom: 0 !important;
  }

  .rule--value {
    display: block !important;
  }

  .rule--operator > .rule--operator {
    /* For boolean fields it nests a div with the same class which means the margin is doubled
      so we use this to get rid of it */
    margin-left: 0;
  }

  .rule--operator select,
  .rule--field select,
  .rule--widget select,
  .group--field select {
    @apply block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm;
  }

  .query-builder {
    @apply !overflow-visible !font-sans;
  }

  /* AUT-3610 — a lighter, tighter reskin of the conditions editor, scoped to the in-flow
     flow-builder drawer (ConditionsQueryBuilder variant="flow"), implementing the high-fidelity
     "Rule Conditions Editor" design. Each selector is deliberately more specific than the base rule
     above, plus !important where the base uses it, so it wins without touching the Rules page's
     default look. RAQB DOM: `.group-container`/`.rule-container` wrap each node; a nested group is a
     `.group-container` inside `.group--children`. */

  /* --- Strip RAQB's default chrome: the grey L-shaped tree connectors and the group move handle,
     neither of which the design uses (containment reads from the accent rail instead). --- */
  .query-builder-flow .group--children > .group-or-rule-container > .group-or-rule::before,
  .query-builder-flow .group--children > .group-or-rule-container > .group-or-rule::after,
  .query-builder-flow .group--header:not(.no--children):not(.hide--conjs)::before {
    display: none !important;
  }
  .query-builder-flow .group--drag-handler {
    display: none;
  }

  /* RAQB gives `.query-builder` a 16px block margin; the editor's panel already frames the
     conditions, so drop it (this is the extra top/bottom padding inside the panel). */
  .query-builder-flow.query-builder {
    margin: 0 !important;
  }

  /* --- Layout: no indent (the connectors are gone), tight vertical rhythm. --- */
  .query-builder-flow .group--children {
    padding-left: 0;
    margin-top: 0.25rem;
    margin-bottom: 0;
  }
  .query-builder-flow .group-or-rule-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-right: 0;
  }

  /* --- The combinator bar (`.group--header`): AND/OR segment left, add links right. --- */
  .query-builder-flow .group--header {
    margin: 0 0 0.25rem;
    padding: 0;
    align-items: center;
    gap: 0.75rem;
  }
  .query-builder-flow .group--actions {
    gap: 1rem;
    justify-content: flex-end;
    align-items: center;
  }
  .query-builder-flow .group--actions button {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* --- Root group is transparent (it sits on the editor's grey panel); nested groups become a
     bracketed grey box with a colour-coded accent rail. --- */
  .query-builder-flow .group-or-rule.group {
    background-color: transparent !important;
    border: 0 !important;
  }
  /* A nested group is any group inside a `.group--children` (the root group never is). Targeting
     that invariant is more robust than RAQB's container→draggable nesting, which shifts between
     versions. */
  .query-builder-flow .group--children .group-or-rule.group {
    position: relative;
    background-color: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 7px !important;
    margin: 0.5rem 0 !important;
    padding: 0.5rem 0.75rem 0.625rem 1.25rem;
  }
  /* Accent rail: indigo for AND/ALL (default), violet for OR/ANY — matching the read-only view's
     colour language. The conjunction is only exposed on the toggle button, so `:has()` reads its
     `data-active`/`data-conj` (set by the flow Conjunction widget). `:has()` matches ANY
     descendant, so this relies on maxNesting: 2 (no groups inside groups) — deeper nesting would
     let a grandchild's OR recolour every ancestor rail. */
  .query-builder-flow .group--children .group-or-rule.group::before {
    content: "" !important;
    display: block !important; /* beats the tree-connector kill rule above (same ::before) */
    position: absolute !important;
    left: 7px !important;
    top: 12px !important;
    bottom: 12px !important;
    width: 3px !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 3px !important;
    background: #7681ee !important;
  }
  .query-builder-flow
    .group--children
    .group-or-rule.group:has(.group--conjunctions button[data-conj="OR"][data-active])::before {
    background: #8b7bff !important; /* violet-500 — no app palette entry (see read-only conditions-view) */
  }

  /* --- Condition rows. RAQB renders `.rule` as: drag-handle · body-wrapper · header(delete),
     so the grip is already first (left) and the delete floats right once the body fills. The row is
     two lines (design `.cmain` is a column): the field spans the full width on top, the operator +
     value wrap to the line below. Grip + delete top-align to the field line. --- */
  .query-builder-flow .rule {
    background-color: transparent !important;
    border: 0 !important;
    padding: 0.6875rem 0 !important;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
  }
  .query-builder-flow .rule--body--wrapper {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
  }
  .query-builder-flow .rule--header {
    margin-left: 0;
    padding-left: 0;
    align-self: flex-start;
    padding-top: 0.25rem;
  }
  /* Field on line 1 (full width), operator + value wrap onto line 2. */
  .query-builder-flow .rule--body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    text-align: left;
    padding: 0;
  }
  /* Dashed separator between consecutive rows at one level (a group box brings its own margin, so
     it never gets a divider above it). */
  .query-builder-flow .group--children > .rule-container + .rule-container {
    border-top: 1px dashed #e5e7eb;
  }

  /* Grip — nudged down to centre on the field line; icon sized to the design's 16px. */
  .query-builder-flow .rule--drag-handler {
    color: #d1d5db;
    align-self: flex-start;
    padding-top: 0.5rem;
    margin-right: 0;
  }
  .query-builder-flow .rule--drag-handler svg {
    width: 16px;
    height: 16px;
  }
  .query-builder-flow .rule--drag-handler:hover {
    color: #7681ee;
  }

  /* --- Controls. Field takes the whole first line; operator + value share the second. --- */
  .query-builder-flow .rule--field {
    flex: 1 1 100%;
    min-width: 0;
  }
  .query-builder-flow .rule--operator {
    flex: 0 0 auto;
  }
  .query-builder-flow .rule--value {
    flex: 0 1 auto;
  }
  .query-builder-flow .rule--field button {
    width: 100% !important;
    min-width: 0;
    max-width: none;
  }

  /* Operator: a compact monospace-indigo chip (echoing the read-only operator vocabulary). RAQB
     still renders a native <select> underneath — this only reskins the trigger. The container-level
     type/colour also styles the inline "is" label RAQB shows for boolean fields (which is text, not
     a select). */
  .query-builder-flow .rule--operator {
    margin-left: 0;
    margin-right: 0;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11.5px;
    color: #5865d6;
  }
  .query-builder-flow .rule--operator select {
    width: auto;
    padding: 0.375rem 1.5rem 0.375rem 0.5625rem;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11.5px;
    color: #5865d6;
    border-radius: 5px;
    border-color: #d1d5db;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }

  /* Enum single-select value: a chip like the operator, but sans + ink (it carries a label, not a
     symbol). */
  .query-builder-flow .rule--widget select {
    width: auto;
    min-width: 7.5rem;
    padding: 0.4375rem 1.75rem 0.4375rem 0.625rem;
    font-size: 13px;
    color: #151518;
    border-radius: 5px;
    border-color: #d1d5db;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }

  /* Text / number value inputs — the base rule forces them w-full !important, so override in kind.
     Numbers are narrow; text grows to fill the row. */
  .query-builder-flow .rule--widget--TEXT input,
  .query-builder-flow .rule--widget--NUMBER input {
    font-family: "IBM Plex Mono", ui-monospace, monospace !important;
    font-size: 12.5px !important;
    border-radius: 5px !important;
    padding: 0.4375rem 0.625rem !important;
  }
  .query-builder-flow .rule--widget--NUMBER input {
    width: 4.625rem !important;
  }
  .query-builder-flow .rule--widget--TEXT input {
    width: auto !important;
    min-width: 8.75rem;
  }

  /* The `between` separator ("from"/"to") as a quiet monospace joiner, centred on the input line
     (RAQB bottom-aligns it via `align-self:flex-end; margin-bottom:3px`). */
  .query-builder-flow .widget--sep {
    align-self: center;
    margin-bottom: 0;
    vertical-align: middle;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11px;
    color: #5a5a61;
    margin-left: 0.375rem;
    margin-right: 0.375rem;
  }

  /* --- Invalid: a red ring on the offending control + the small red RAQB message. --- */
  .query-builder-flow .rule-with-error .rule--field button,
  .query-builder-flow .rule-with-error .rule--operator select,
  .query-builder-flow .rule-with-error .rule--widget input,
  .query-builder-flow .rule-with-error .rule--widget select {
    border-color: #f33e3e !important;
    box-shadow: 0 0 0 1px #fab2b2 !important;
  }
  .query-builder-flow .rule--error {
    margin: 0.25rem 0 0;
    font-size: 11.5px;
    color: #c33131;
  }

  /* --- Empty: a dashed placeholder when a rule has no conditions yet. `.group--children` is a
     genuinely empty node in that case, so `:empty` is a safe hook. The extra top padding restores
     the breathing room the design gets from its AND/OR row (which we don't render when empty), so
     the card sits ~8px below the add buttons rather than flush against them. --- */
  .query-builder-flow .group--children:empty {
    padding-top: 0.25rem;
  }
  .query-builder-flow .group--children:empty::before {
    content: "No conditions yet. This rule always matches until you add one.";
    display: block;
    border: 1px dashed #d1d5db;
    border-radius: 7px;
    background: #f9fafb;
    color: #75757b;
    font-size: 12.5px;
    text-align: center;
    padding: 1.375rem 1rem;
  }
  /* An emptied NESTED group (reachable: canLeaveEmptyGroup is true) isn't the "rule always
     matches" case — sibling conditions still apply, and jsonLogic export just drops the empty
     group — so it gets its own copy. */
  .query-builder-flow .group--children .group--children:empty::before {
    content: "No conditions in this group. It's ignored until you add some.";
  }

  #react-action-locations-map .leaflet-container {
    height: 400px;
    border-bottom-left-radius: 0.625rem;
    border-bottom-right-radius: 0.625rem;
  }

  #react-action-location-map .leaflet-container {
    height: 240px;
    border-top-left-radius: 0.625rem;
    border-top-right-radius: 0.625rem;
  }

  .bg-as-grandient {
    background: linear-gradient(87.42deg, #f4f4ff 1.47%, #f1fbff 100%);
  }

  .focus-ring {
    @apply focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-offset-2;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Inspired by https://chakra-ui.com/docs/components/feedback/spinner */
.spinner {
  display: inline-block;
  border-top: 2px solid currentcolor;
  border-right: 2px solid currentcolor;
  border-bottom-style: solid;
  border-left-style: solid;
  border-radius: 99999px;
  border-bottom-width: 2px;
  border-left-width: 2px;
  border-bottom-color: transparent;
  border-left-color: transparent;
  animation: 0.7s linear 0s infinite normal none running spinner;
  width: 1em;
  height: 1em;
  --spinner-size: 1.5rem;
  color: currentcolor;
}

.group {
  border-width: 0 !important;
  background-color: inherit !important;
}