/* EdgeWall - admin custom styles (additive on top of Tabler) */
:root {
  --ew-accent: #4f46e5;        /* indigo */
  --ew-accent-2: #06b6d4;      /* cyan */
}

.ew-brand { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; }
.ew-brand-mark {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:8px;
  background: linear-gradient(135deg, var(--ew-accent), var(--ew-accent-2));
  color:#fff; font-size:18px;
}
.ew-brand-text { font-size: 1.05rem; letter-spacing:.2px; }

/* Slightly tighter table row padding for dense data */
.ew-dense td, .ew-dense th { padding: .35rem .6rem !important; }

/* Logs table — keep most columns nowrap but allow path/zone to truncate
   so the whole table fits the card width without horizontal scroll. */
.ew-logs-table th, .ew-logs-table td { white-space: nowrap; }
.ew-logs-table td.text-truncate, .ew-logs-table td .text-truncate { max-width: 360px; }
.ew-logs-table .dropdown-menu { min-width: 11rem; }

/* Wide drawer used by the Cloudflare-style rule editor. */
.ew-drawer-wide { width: min(820px, 100%); }

/* Cloudflare-style rule editor */
.ew-rule-card { border:1px solid var(--tblr-border-color); border-radius:1rem; padding:1rem; background:var(--tblr-bg-surface-secondary); }
.ew-rule-row { display:grid; grid-template-columns: 1.45fr 1.2fr 1.65fr auto; gap:.5rem; align-items:start; margin-bottom:.5rem; }
.ew-rule-row .ew-row-del { align-self:center; }
.ew-rule-row .ew-filter-dd { min-width: 0; }
.ew-rule-row .ew-filter-dd .dropdown-toggle,
#ew-rule-scope .dropdown-toggle {
  background: var(--tblr-bg-forms, var(--tblr-bg-surface));
  border: 1px solid var(--tblr-border-color);
  color: var(--tblr-body-color);
  font-weight: 400;
  text-align: left;
  padding-right: 2rem;        /* room for caret */
  position: relative;
}
.ew-rule-row .ew-filter-dd .dropdown-toggle::after,
#ew-rule-scope .dropdown-toggle::after {
  position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
}
.ew-rule-row .ew-filter-dd .dropdown-toggle [data-ew-label],
#ew-rule-scope .dropdown-toggle [data-ew-label],
#ew-rl-scope .dropdown-toggle [data-ew-label] {
  display: inline-block;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  vertical-align: bottom;
  white-space: normal;
  line-height: 1.2;
}

.ew-rule-row .dropdown-menu,
#ew-rule-scope .dropdown-menu,
#ew-rl-scope .dropdown-menu {
  min-width: 16rem;
}

.ew-rule-row .dropdown-menu .dropdown-item,
#ew-rule-scope .dropdown-menu .dropdown-item,
#ew-rl-scope .dropdown-menu .dropdown-item {
  white-space: normal;
  overflow-wrap: anywhere;
}
.ew-rule-conj { display:flex; align-items:center; gap:.4rem; margin:.25rem 0 .5rem; }
.ew-rule-conj .btn-group .btn { padding:.18rem .55rem; font-size:.78rem; }
.ew-action-card { border:1px solid var(--tblr-border-color); border-radius:.75rem; padding:.75rem 1rem; cursor:pointer; transition:border-color .15s, background .15s; }
.ew-action-card:hover { border-color: var(--tblr-primary); }
.ew-action-card.active { border-color: var(--tblr-primary); background: color-mix(in srgb, var(--tblr-primary) 8%, transparent); }
.ew-action-card .ti { font-size:1.1rem; }
.ew-expr-preview {
  font-family: var(--tblr-font-monospace); font-size:.78rem;
  background: var(--tblr-bg-surface-tertiary, rgba(0,0,0,.25));
  border:1px solid var(--tblr-border-color);
  border-radius:.5rem; padding:.6rem .75rem; white-space:pre-wrap; word-break:break-all;
  color: var(--tblr-body-color);
}

/* Status color helpers */
.ew-pill { display:inline-flex; align-items:center; gap:.35rem; padding:.18rem .55rem; border-radius:999px; font-size:.78rem; font-weight:500; }
.ew-pill .status-dot { width:6px; height:6px; }

/* Code-y mono text in tables */
.ew-mono { font-family: var(--tblr-font-monospace); font-size: .85rem; }

/* Drawer */
.ew-drawer-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1040; display:none; }
.ew-drawer { position:fixed; top:0; right:0; height:100vh; width:min(560px, 100%); background:var(--tblr-bg-surface); border-left:1px solid var(--tblr-border-color); transform:translateX(100%); transition:transform .2s ease; z-index:1050; display:flex; flex-direction:column; }
.ew-drawer.open { transform:translateX(0); }
.ew-drawer-backdrop.open { display:block; }
.ew-drawer-header { padding:1rem 1.25rem; border-bottom:1px solid var(--tblr-border-color); display:flex; align-items:center; }
.ew-drawer-body { padding:1.25rem; overflow:auto; flex:1; }
.ew-drawer-footer { padding:1rem 1.25rem; border-top:1px solid var(--tblr-border-color); display:flex; gap:.5rem; justify-content:flex-end; }

/* Login */
.ew-login-card { max-width:440px; margin:6vh auto; }
.ew-login-brand {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin-bottom:1.25rem; font-size:1.2rem; font-weight:600;
}
.ew-login-mark {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px;
  background: linear-gradient(135deg, var(--ew-accent), var(--ew-accent-2));
  color:#fff; font-size:22px;
}

/* Subtle code/JSON pre */
.ew-json {
  background: var(--tblr-bg-surface-secondary);
  padding: .75rem; border-radius: .375rem;
  font-family: var(--tblr-font-monospace); font-size: .8rem;
  white-space: pre-wrap; word-break: break-all;
}

/* Empty state */
.ew-empty { text-align:center; padding:3rem 1rem; color:var(--tblr-secondary-color); }
.ew-empty .ti { font-size: 2.5rem; opacity:.6; }

/* ============================================================
   Theme: Zinc · monospace · 1.5rem corner radius
   ============================================================ */
:root,
[data-bs-theme="light"] {
  /* Tailwind Zinc palette */
  --tblr-zinc-50:  #fafafa;
  --tblr-zinc-100: #f4f4f5;
  --tblr-zinc-200: #e4e4e7;
  --tblr-zinc-300: #d4d4d8;
  --tblr-zinc-400: #a1a1aa;
  --tblr-zinc-500: #71717a;
  --tblr-zinc-600: #52525b;
  --tblr-zinc-700: #3f3f46;
  --tblr-zinc-800: #27272a;
  --tblr-zinc-900: #18181b;
  --tblr-zinc-950: #09090b;

  /* Override Tabler grays with Zinc */
  --tblr-gray-50:  var(--tblr-zinc-50);
  --tblr-gray-100: var(--tblr-zinc-100);
  --tblr-gray-200: var(--tblr-zinc-200);
  --tblr-gray-300: var(--tblr-zinc-300);
  --tblr-gray-400: var(--tblr-zinc-400);
  --tblr-gray-500: var(--tblr-zinc-500);
  --tblr-gray-600: var(--tblr-zinc-600);
  --tblr-gray-700: var(--tblr-zinc-700);
  --tblr-gray-800: var(--tblr-zinc-800);
  --tblr-gray-900: var(--tblr-zinc-900);

  --tblr-body-bg:               var(--tblr-zinc-50);
  --tblr-bg-surface:            #ffffff;
  --tblr-bg-surface-secondary:  var(--tblr-zinc-100);
  --tblr-bg-surface-tertiary:   var(--tblr-zinc-200);
  --tblr-border-color:          var(--tblr-zinc-200);
  --tblr-border-color-translucent: var(--tblr-zinc-200);
  --tblr-body-color:            var(--tblr-zinc-900);
  --tblr-secondary-color:       var(--tblr-zinc-500);

  --tblr-font-monospace:        ui-monospace, SFMono-Regular, "JetBrains Mono",
                                "Fira Code", Menlo, Consolas, "Liberation Mono",
                                "Courier New", monospace;
  --tblr-font-sans-serif:       var(--tblr-font-monospace);
  --tblr-body-font-family:      var(--tblr-font-monospace);

  --tblr-border-radius:    1.5rem;
  --tblr-border-radius-sm: 1.5rem;
  --tblr-border-radius-lg: 1.5rem;
  --tblr-border-radius-xl: 1.5rem;
  --tblr-border-radius-pill: 1.5rem;

  --bs-border-radius:    1.5rem;
  --bs-border-radius-sm: 1.5rem;
  --bs-border-radius-lg: 1.5rem;
  --bs-border-radius-xl: 1.5rem;
}

[data-bs-theme="dark"] {
  --tblr-body-bg:               var(--tblr-zinc-950);
  --tblr-bg-surface:            var(--tblr-zinc-900);
  --tblr-bg-surface-secondary:  var(--tblr-zinc-800);
  --tblr-bg-surface-tertiary:   var(--tblr-zinc-700);
  --tblr-border-color:          var(--tblr-zinc-800);
  --tblr-border-color-translucent: var(--tblr-zinc-800);
  --tblr-body-color:            var(--tblr-zinc-100);
  --tblr-secondary-color:       var(--tblr-zinc-400);
}

html, body, .navbar, .card, .btn, .form-control, .form-select,
.table, .dropdown-menu, .modal-content, .nav-link, .badge, code, kbd, pre {
  font-family: var(--tblr-font-monospace) !important;
}

/* Apply 1.5rem to common surfaces (Tabler hard-codes radii in some places). */
.card, .btn, .form-control, .form-select, .form-check-input,
.dropdown-menu, .modal-content, .alert, .badge, .nav-pills .nav-link,
.list-group-item, .toast, .ew-pill {
  border-radius: 1.5rem !important;
}
.form-check-input[type="checkbox"] {
  border-radius: .25rem !important;
  width: 1rem;
  height: 1rem;
}
.form-check-input[type="radio"] {
  border-radius: 50% !important;
}
.card-header { border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; }
.card-footer { border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem; }

/* Translucent red background utility (matches user spec) */
.bg-red {
  background-color:
    color-mix(in srgb, var(--tblr-red) calc(var(--tblr-bg-opacity, 1) * 100%), transparent)
    !important;
}

/* Allow row-action dropdowns inside .table-responsive to escape the
   horizontal-scroll clipping. We also style the menu like the Tabler
   reference (rounded card, soft shadow, comfortable padding) so the
   "More" menus on Zones look first-class. */
.ew-overflow-visible { overflow: visible !important; }
.ew-overflow-visible .dropdown-menu { z-index: 1080; }
.table-responsive.ew-logs-responsive {
  overflow-x: auto !important;
  overflow-y: visible !important;
  max-width: 100%;
}

/* Modernize ALL Bootstrap/Tabler dropdowns (sidebar, topbar, row actions,
   account menu, etc.) to match Tabler reference: rounded card with inner
   padding, soft shadow, hairline border, lightly-rounded items with
   primary-tinted hover. */
.dropdown-menu {
  padding: .25rem !important;
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.18);
  border: 1px solid var(--tblr-border-color);
  min-width: 11rem;
}
.dropdown-menu .dropdown-item {
  border-radius: .5rem;
  padding: .375rem .625rem;
  font-size: .875rem;
  line-height: 1.4;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: color-mix(in srgb, var(--tblr-primary) 12%, transparent);
  color: var(--tblr-body-color);
}
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
  background: var(--tblr-primary);
  color: #fff;
}
.dropdown-menu .dropdown-header {
  padding: .375rem .625rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tblr-secondary);
}
.dropdown-menu .dropdown-divider {
  margin: .25rem 0;
  border-top-color: var(--tblr-border-color);
}
.dropdown-menu form { margin: 0; }

.ew-zone-menu {
  min-width: 13rem;
}
.ew-zone-menu .dropdown-item { border-radius: .5rem; padding: .375rem .625rem; }
.ew-zone-menu .dropdown-item:hover { background: color-mix(in srgb, var(--tblr-primary) 12%, transparent); }
.ew-zone-menu .dropdown-divider { margin: .25rem 0; }

/* Filter dropdowns (used in log explorer): styled like form-select for
   visual parity with the search input next to them. */
.ew-filter-dd .dropdown-toggle {
  text-align: left;
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  color: var(--tblr-body-color);
  padding-right: 2rem;
  position: relative;
}
.ew-filter-dd .dropdown-toggle::after {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
}
/* Long labels: ellipsis on the trigger, wrap on dropdown items so big
   option text doesn't overflow horizontally. */
.ew-filter-dd .dropdown-toggle [data-ew-label] {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.ew-filter-dd .dropdown-menu .dropdown-item {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}

/* Searchable dropdown (used for the zone picker in the log explorer). The
   menu is height-capped so only ~10 items are visible at a time and a sticky
   search input sits at the top to filter the list as the user types. */
.ew-filter-dd .ew-dd-scroll {
  /* Cap the menu so only ~10 zone rows are visible; the rest scroll and the
     sticky search box above filters them. !important wins over any Popper /
     theme inline sizing so the picker never expands to a 100+ row wall. */
  max-height: 26rem !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  border-radius: .75rem;
}
.ew-filter-dd .ew-dd-search { background: var(--tblr-bg-surface); }
.ew-filter-dd .ew-dd-search input { font-size: .8125rem; }
.ew-filter-dd .dropdown-item.d-none { display: none !important; }
.ew-filter-dd .dropdown-item { margin-left: .125rem; margin-right: .125rem; }
.ew-filter-dd .dropdown-item:first-of-type { margin-top: .125rem; }
.ew-filter-dd .dropdown-item:last-of-type { margin-bottom: .125rem; }

/* Keep searchable dropdown input themed (avoid white input backgrounds). */
.ew-filter-dd .ew-dd-search,
.dropdown-menu .ew-dd-search {
  background: var(--tblr-bg-surface) !important;
  border-bottom: 1px solid var(--tblr-border-color);
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
}
.ew-filter-dd .ew-dd-search .form-control,
.dropdown-menu .ew-dd-search .form-control,
.dropdown-menu input[type="search"],
.dropdown-menu input[type="text"] {
  background: var(--tblr-bg-surface-secondary) !important;
  color: var(--tblr-body-color) !important;
  border-color: var(--tblr-border-color) !important;
}
.ew-filter-dd .ew-dd-search .form-control::placeholder,
.dropdown-menu .ew-dd-search .form-control::placeholder,
.dropdown-menu input[type="search"]::placeholder,
.dropdown-menu input[type="text"]::placeholder {
  color: var(--tblr-secondary-color);
}

/* Global table safety on narrow screens: prevent content/buttons from spilling
   beyond card bounds while keeping horizontal scroll as fallback. */
.table-responsive {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table td,
.table th {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ew-zones-table {
  table-layout: fixed;
  width: 100%;
}
.ew-logs-table {
  table-layout: auto;
  width: 100%;
  min-width: 1320px;
}
.ew-zones-table td,
.ew-zones-table th,
.ew-logs-table td,
.ew-logs-table th {
  vertical-align: middle;
  padding-left: .8rem !important;
  padding-right: .8rem !important;
}
.ew-logs-table th:nth-child(2),
.ew-logs-table td:nth-child(2) { min-width: 10.5rem; }
.ew-logs-table th:nth-child(3),
.ew-logs-table td:nth-child(3) { min-width: 11rem; }
.ew-logs-table th:nth-child(4),
.ew-logs-table td:nth-child(4) { min-width: 6.25rem; }
.ew-logs-table th:nth-child(5),
.ew-logs-table td:nth-child(5) { min-width: 16rem; }
.ew-logs-table th:nth-child(6),
.ew-logs-table td:nth-child(6) { min-width: 6.25rem; }
.ew-logs-table th:nth-child(7),
.ew-logs-table td:nth-child(7) { min-width: 11rem; }
.ew-logs-table th:nth-child(8),
.ew-logs-table td:nth-child(8) { min-width: 9.5rem; }
.ew-logs-table th:nth-child(9),
.ew-logs-table td:nth-child(9) { min-width: 8rem; }
.ew-logs-table th:nth-child(10),
.ew-logs-table td:nth-child(10) { min-width: 6.25rem; }
.ew-logs-table th:nth-child(11),
.ew-logs-table td:nth-child(11) { min-width: 9.5rem; }
.ew-logs-table th:nth-child(12),
.ew-logs-table td:nth-child(12) {
  min-width: 8.5rem;
  white-space: nowrap;
}
.ew-zones-table td:not(.ew-actions-cell):not(.ew-select-col),
.ew-zones-table th:not(:last-child):not(.ew-select-col) {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ew-select-col {
  width: 2.6rem !important;
  min-width: 2.6rem !important;
  max-width: 2.6rem !important;
  text-align: center;
  padding-left: .35rem !important;
  padding-right: .35rem !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap;
}
.ew-select-col .form-check-input {
  margin-left: auto !important;
  margin-right: auto !important;
}
.ew-actions-cell {
  min-width: 10.5rem;
  width: 10.5rem;
  white-space: nowrap;
  overflow: visible;
}
.ew-actions-group {
  display: inline-flex;
  flex-wrap: nowrap;
  width: 100%;
  justify-content: flex-end;
  gap: .35rem;
}
.ew-actions-group > .btn,
.ew-actions-group > .dropdown > .btn,
.ew-logs-table .dropdown > .btn {
  white-space: nowrap;
}
.ew-zones-table .dropdown-menu,
.ew-logs-table .dropdown-menu {
  max-width: min(18rem, calc(100vw - 2rem));
}

@media (max-width: 991.98px) {
  .table {
    min-width: 680px;
  }
  .table .btn,
  .table .btn-sm {
    white-space: nowrap;
  }
  .btn-list.flex-nowrap {
    flex-wrap: wrap !important;
    row-gap: .25rem;
    justify-content: flex-end;
  }
  .ew-zones-table,
  .ew-logs-table {
    min-width: 860px;
  }
}

/* "Why was this blocked?" popover trigger sitting next to the action badge
   in the log explorer. Slightly larger hit target than a tooltip so it's
   easy to click on touch devices. */
.ew-action-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: .25rem;
  border-radius: 50%;
  border: 1px solid var(--tblr-border-color);
  font-size: .7rem;
  line-height: 1;
  color: var(--tblr-secondary);
  background: var(--tblr-bg-surface-secondary, transparent);
  cursor: pointer;
  vertical-align: middle;
  text-decoration: none;
}
.ew-action-info:hover { color: var(--tblr-primary); border-color: var(--tblr-primary); }
.popover.ew-block-popover { --tblr-popover-max-width: 340px; }
.popover.ew-block-popover .popover-body { font-size: .8125rem; }
.popover.ew-block-popover .ew-pop-row { display: flex; gap: .5rem; padding: .15rem 0; }
.popover.ew-block-popover .ew-pop-key { color: var(--tblr-secondary); min-width: 5rem; }
.popover.ew-block-popover .ew-pop-val { font-family: var(--tblr-font-monospace); word-break: break-all; }

#ew-toast-host .alert { animation: ew-toast-in .25s ease-out; }
@keyframes ew-toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* SweetAlert2 -- inherit Tabler surface/text variables so dialogs look
   native in both dark and light theme without overriding library internals. */
.swal2-popup.ew-swal {
  background: var(--tblr-bg-surface);
  color: var(--tblr-body-color);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg, .5rem);
}
.swal2-popup.ew-swal .swal2-title,
.swal2-popup.ew-swal .swal2-html-container { color: var(--tblr-body-color); }
.swal2-popup.ew-swal .swal2-actions { gap: .5rem; }
.swal2-container { z-index: 1090; }

/* Sortable column headers use the same chevron shape as the old static icon,
   but now the icon is functional and tied to the active sort state. */
th.ew-sortable {
  user-select: none;
  position: relative;
  padding-right: 1.9rem !important;
  white-space: nowrap;
}
th.ew-sortable:hover {
  background-color: var(--tblr-bg-surface-secondary);
}
th.ew-sortable::after {
  content: '';
  position: absolute;
  top: 50%;
  right: .55rem;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  opacity: .18;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1rem 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6 -6l6 6'/%3E%3C/svg%3E");
}
th.sortable-asc::after,
th.sortable-desc::after {
  opacity: .95;
}
th.sortable-asc::after {
  transform: translateY(-50%);
}
th.sortable-desc::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Keep checkboxes square regardless of global rounded controls style. */
.form-check-input[type="checkbox"] {
  border-radius: .25rem !important;
  width: 1rem;
  height: 1rem;
}

/* ------------------------------------------------------------
   Comfortable controls across admin (Security Center included)
   ------------------------------------------------------------ */
.btn-sm {
  --tblr-btn-font-size: .9rem;
  --tblr-btn-padding-y: .42rem;
  --tblr-btn-padding-x: .72rem;
  line-height: 1.25;
}

.btn-icon,
.btn.btn-icon {
  min-width: 2.25rem;
  min-height: 2.25rem;
}

.btn-sm.btn-icon,
.btn.btn-sm.btn-icon {
  min-width: 2rem;
  min-height: 2rem;
}

.btn-sm .ti,
.btn.btn-sm .ti {
  font-size: 1rem;
}

.form-control-sm,
.form-select-sm {
  min-height: 2rem;
  font-size: .9rem;
  padding-top: .3rem;
  padding-bottom: .3rem;
}

.form-check-input[type="checkbox"],
.form-check-input[type="radio"] {
  width: 1.1rem;
  height: 1.1rem;
}

.form-check-input[type="radio"] {
  border-radius: 50% !important;
}

.form-switch .form-check-input {
  width: 2.4rem;
  height: 1.35rem;
  border-radius: var(--tblr-border-radius-pill) !important;
  margin-top: .05rem;
  background-size: 1rem;
}

.form-check-label {
  padding-left: .15rem;
}