/* Targeting controls in the "Add to Global Rules" dialog —
 * see templates/tenant/_global_rule_modal.html and js/global_rule.js.
 *
 * Globally loaded from base.html rather than a pages/*.css for the same reason as
 * confirm-modal.css: one dialog serves three item pages (discover, custom rule,
 * access request) and they do not all load the same page stylesheet, so a control
 * whose CSS ships with only some of its call sites renders bare on the rest.
 *
 * The dialog's own chrome (.disc-modal__*) still lives in pages/discover.css,
 * which every page including the dialog therefore has to load. */

/* A targeting block the JS shows or hides by condition / target / side. `hidden`
 * needs the explicit rule because .disc-modal__field sets display. */
.grule-opt[hidden] { display: none; }

/* The generic active pill. pages/discover.css only styles --active in
 * combination with --allow / --block, so these plain groups need their own. */
#grule-modal .disc-modal__action-btn--active {
  background: var(--cs-surface, #fff);
  color: var(--cs-blue-600, #2563eb);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}

/* An Elevate / Sub Processes group reads as a state, so it takes the verdict
 * colours the rest of the portal uses for allowed and denied. */
#grule-modal [data-grule-pills="grule-modal-elevate"].disc-modal__action-btn--active[data-value="on"],
#grule-modal [data-grule-pills="grule-modal-subpro"].disc-modal__action-btn--active[data-value="on"],
#grule-modal [data-grule-pills="grule-modal-sigver"].disc-modal__action-btn--active[data-value="verified"] {
  color: #15803d;
}
#grule-modal [data-grule-pills="grule-modal-sigver"].disc-modal__action-btn--active[data-value="unverified"] {
  color: #b45309;
}
#grule-modal [data-grule-pills="grule-modal-subpro"].disc-modal__action-btn--active[data-value="off"] {
  color: #b91c1c;
}

/* Explanatory line under a control. */
.grule-hint {
  margin: 6px 0 0;
  font-size: var(--cs-text-xs, .78rem);
  line-height: 1.5;
  color: var(--cs-neutral-500, #64748b);
}
.grule-hint:empty { display: none; }

.grule-hint--warn {
  padding: 8px 10px;
  border-radius: var(--cs-radius-sm, 8px);
  border: 1px solid rgba(245, 158, 11, .5);
  background: rgba(245, 158, 11, .1);
  color: #92400e;
}

/* Match Filename On — the label is the control: it names the column in force and
 * swaps to the other one, with the value it will match beside it. */
.grule-fname {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.grule-fname__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--cs-border, rgba(15, 23, 42, .12));
  border-radius: var(--cs-radius-md, 10px);
  background: var(--cs-neutral-100, #f1f5f9);
  color: inherit;
  font: inherit;
  font-size: var(--cs-text-sm, .85rem);
  font-weight: var(--cs-weight-medium, 500);
  cursor: pointer;
  transition: border-color var(--cs-transition-fast, .15s), background var(--cs-transition-fast, .15s);
}
.grule-fname__toggle:hover { border-color: var(--cs-blue-600, #2563eb); }

.grule-fname__swap {
  font-size: var(--cs-text-xs, .72rem);
  font-weight: var(--cs-weight-normal, 400);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cs-neutral-500, #64748b);
}

.grule-fname__value {
  font-family: var(--cs-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--cs-text-sm, .85rem);
  color: var(--cs-neutral-700, #334155);
  word-break: break-all;
}

/* Version Min / Max. */
.grule-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px) {
  .grule-grid-2 { grid-template-columns: 1fr; }
}

.grule-sublabel {
  display: block;
  margin-bottom: 4px;
  font-size: var(--cs-text-xs, .72rem);
  font-weight: var(--cs-weight-medium, 500);
  color: var(--cs-neutral-500, #64748b);
}